@coolon/angular-ui-powerups 0.0.98 → 0.0.102

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

@@ -1,24 +1,24 @@
 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 { Directive, ElementRef, Inject, Input, HostListener, NgZone, NgModule, EventEmitter, Output, Component, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, ɵɵdefineInjectable, ɵɵinject, Optional, SkipSelf, HostBinding } 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, Trace, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, 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 ___default, { last, isNil, isEqual } from 'lodash';
+import { RouterModule, NavigationStart, NavigationCancel, UrlSegment, NavigationEnd, NavigationError, Router, UrlSerializer } from '@angular/router';
 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';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
+import ___default, { isNil, isEqual } from 'lodash';
 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';
 
 /**
@@ -1100,15 +1100,10 @@ if (false) {
 /**
  * @abstract
  */
-var  /**
- * @abstract
- */
-InteractionContext = /** @class */ (function (_super) {
+var InteractionContext = /** @class */ (function (_super) {
     __extends(InteractionContext, _super);
     function InteractionContext() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.activityListeners = new EventListenerList();
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     /**
      * Returns true if an activity is currently running.
@@ -1125,62 +1120,112 @@ InteractionContext = /** @class */ (function (_super) {
         return this.active.value;
     };
     /**
-     * @param {?} listener
      * @return {?}
      */
-    InteractionContext.prototype.addActivityListener = /**
-     * @param {?} listener
+    InteractionContext.prototype.dispose = /**
      * @return {?}
      */
-    function (listener) {
-        return this.activityListeners.add(listener);
+    function () {
+        // TODO: think about auto cancelling any outstanding activity on dispose.
+        //       See NavigationState.Navigating for a use-case.
+        assert.isFalsey(this.isActive());
+        _super.prototype.dispose.call(this);
     };
     /**
-     * @protected
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
+     */
+    /**
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
      * @return {?}
      */
-    InteractionContext.prototype.notifyActivityStarted = /**
-     * @protected
+    InteractionContext.prototype.cancelCurrentActivity = /**
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
      * @return {?}
      */
     function () {
-        this.activityListeners.fire((/**
-         * @param {?} l
-         * @return {?}
-         */
-        function (l) { return l.onActivityStarted(); }));
+        return __awaiter(this, void 0, void 0, function () {
+            var when, activity;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        when = Dsl.disposeWith(this).when;
+                        return [4 /*yield*/, this.getCurrentActivity()];
+                    case 1:
+                        activity = _a.sent();
+                        return [2 /*return*/, new Promise((/**
+                             * @param {?} resolve
+                             * @return {?}
+                             */
+                            function (resolve) {
+                                when.valueOf(_this.activeActivity)
+                                    .changes((/**
+                                 * @param {?} nextActivity
+                                 * @return {?}
+                                 */
+                                function (nextActivity) {
+                                    resolve(!nextActivity);
+                                }), { once: true });
+                                activity.cancel();
+                            }))];
+                }
+            });
+        });
     };
     /**
-     * @protected
      * @return {?}
      */
-    InteractionContext.prototype.notifyActivityFinished = /**
-     * @protected
+    InteractionContext.prototype.abort = /**
      * @return {?}
      */
     function () {
-        this.activityListeners.fire((/**
-         * @param {?} l
-         * @return {?}
-         */
-        function (l) { return l.onActivityFinished(); }));
+        return __awaiter(this, void 0, void 0, function () {
+            var count;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        assert.isTruthy(this.isActive());
+                        count = 1;
+                        return [4 /*yield*/, this.cancelCurrentActivity()];
+                    case 1:
+                        _a.sent();
+                        console.log("aborted -> " + count++);
+                        _a.label = 2;
+                    case 2:
+                        if (!this.isActive()) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.cancelCurrentActivity()];
+                    case 3:
+                        _a.sent();
+                        console.log("aborted -> " + count++);
+                        return [3 /*break*/, 2];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
     };
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], InteractionContext.prototype, "abort", null);
     return InteractionContext;
 }(GarbageCollector));
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionContext.prototype.activityListeners;
+    /** @type {?} */
+    InteractionContext.prototype.active;
     /** @type {?} */
     InteractionContext.prototype.activityList;
     /** @type {?} */
-    InteractionContext.prototype.active;
+    InteractionContext.prototype.activeActivity;
     /**
      * Returns the activity that is currently active.
      * This model is only updated in the next tick after the view has been updated.
      * @abstract
+     * @protected
      * @return {?}
      */
     InteractionContext.prototype.getCurrentActivity = function () { };
@@ -1221,23 +1266,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
@@ -1406,13 +1434,14 @@ InteractionContextBase = /** @class */ (function (_super) {
          */
         _this._activityListDelegate = new DelegatingListModel();
         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.listOf(_this.activityList).becomesPopulated((/**
-         * @param {?} activities
+        _this._currentActivity = chain(_this.activityList).last();
+        when.valueOf(_this._currentActivity).becomesTruthy((/**
+         * @param {?} activity
          * @return {?}
          */
-        function (activities) {
+        function (activity) {
             if (_this.deferredGetCurrentActivity) {
-                _this.deferredGetCurrentActivity.resolve(last(activities));
+                _this.deferredGetCurrentActivity.resolve(activity);
                 _this.deferredGetCurrentActivity = null;
             }
         }));
@@ -1441,6 +1470,16 @@ InteractionContextBase = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(InteractionContextBase.prototype, "activeActivity", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._currentActivity;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * Returns the activity that is currently active.
      * This model is only updated in the next tick after the view has been updated.
@@ -1467,12 +1506,14 @@ InteractionContextBase = /** @class */ (function (_super) {
                         return [2 /*return*/, this.deferredGetCurrentActivity.promise];
                     }
                     else {
-                        if (this.activityList.length < 1) {
+                        if (!this._currentActivity.value) {
+                            // we'be been asked before we've got any activities, create a deferred promise
+                            // that we resolve when the list populates.
                             this.deferredGetCurrentActivity = Deferred.defer();
                             return [2 /*return*/, this.deferredGetCurrentActivity.promise];
                         }
                         else {
-                            return [2 /*return*/, last(this.activityList.value)];
+                            return [2 /*return*/, this._currentActivity.value];
                         }
                     }
                 }
@@ -1574,6 +1615,11 @@ if (false) {
      * @private
      */
     InteractionContextBase.prototype.deferredGetCurrentActivity;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionContextBase.prototype._currentActivity;
     /**
      * @abstract
      * @protected
@@ -1817,6 +1863,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 +1961,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 () {
@@ -2001,6 +2046,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
+        this.updateActivityList();
         this._initialActivityOutletContext.value = null;
         this.initialActivityOutletContextEvent.emit(null);
     };
@@ -2033,14 +2079,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;
             }));
         }
     };
@@ -2172,206 +2228,357 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
- * @template D, R, E
+ * @abstract
  */
-var InplaceInteractionContextComponent = /** @class */ (function (_super) {
-    __extends(InplaceInteractionContextComponent, _super);
-    function InplaceInteractionContextComponent() {
-        var _this = _super.call(this) || this;
-        _this._active = new MutableValueModel(false);
-        return _this;
+var  /**
+ * @abstract
+ */
+ModalInteractionContextFactory = /** @class */ (function () {
+    function ModalInteractionContextFactory() {
     }
+    return ModalInteractionContextFactory;
+}());
+if (false) {
     /**
+     * @abstract
      * @return {?}
      */
-    InplaceInteractionContextComponent.prototype.ngAfterViewInit = /**
+    ModalInteractionContextFactory.prototype.createInteractionContext = function () { };
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var inplaceMonitorCount = 0;
+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 () {
-        this.setActivityList(this.interactionContext.activityList);
+        return this.active.value;
     };
-    Object.defineProperty(InplaceInteractionContextComponent.prototype, "active", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._active.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
-     * @protected
-     * @template D1, R1, E1
-     * @param {?} activityType
-     * @param {?=} data
      * @return {?}
      */
-    InplaceInteractionContextComponent.prototype._startActivity = /**
-     * @protected
-     * @template D1, R1, E1
-     * @param {?} activityType
-     * @param {?=} data
+    InteractionService.prototype.isModalActive = /**
      * @return {?}
      */
-    function (activityType, data) {
-        var _this = this;
-        this._active.value = true;
+    function () {
+        return this.modelInteractionActive.value;
+    };
+    /**
+     * @param {?} disposable
+     * @return {?}
+     */
+    InteractionService.prototype.createModalInteractionContextFor = /**
+     * @param {?} disposable
+     * @return {?}
+     */
+    function (disposable) {
+        /** @type {?} */
+        var context = this.modelInteractionContextFactory.createInteractionContext();
+        disposable.registerDisposable(new InteractionService.Monitor('modal', context, this._activeModalInteractionContextModel, this.exclusiveContext));
+        return context;
+    };
+    /**
+     * @param {?} interactionContext
+     * @return {?}
+     */
+    InteractionService.prototype._registerInplaceInteractionContext = /**
+     * @param {?} interactionContext
+     * @return {?}
+     */
+    function (interactionContext) {
+        interactionContext.registerDisposable(new InteractionService.Monitor("ip" + ++inplaceMonitorCount, interactionContext, this._activeInlineInteractionContextModel, this.exclusiveContext));
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    InteractionService.prototype.getActiveContext = 
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    function () {
+        assert$1.isTruthy(this.isActive());
+        return this._activeInteractionContext.value;
+    };
+    /**
+     * Creates an interaction context that will prevent any other contexts from starting an
+     * activity until it is disposed.  This is intended for use by the router for passing
+     * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
+     * try and interact in a way that we can't track and synchronise with the browser back
+     * button.
+     */
+    /**
+     * Creates an interaction context that will prevent any other contexts from starting an
+     * activity until it is disposed.  This is intended for use by the router for passing
+     * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
+     * try and interact in a way that we can't track and synchronise with the browser back
+     * button.
+     * @return {?}
+     */
+    InteractionService.prototype._createExclusiveModalInteractionContext = /**
+     * Creates an interaction context that will prevent any other contexts from starting an
+     * activity until it is disposed.  This is intended for use by the router for passing
+     * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
+     * try and interact in a way that we can't track and synchronise with the browser back
+     * button.
+     * @return {?}
+     */
+    function () {
+        this.exclusiveContext.value = this.modelInteractionContextFactory.createInteractionContext();
         /** @type {?} */
         var self = this;
-        return new Promise((/**
-         * @param {?} resolve
-         * @param {?} reject
-         * @return {?}
-         */
-        function (resolve, reject) {
-            _this.interactionContext.initialActivityOutletContext = {
-                activityClass: activityType,
-                activityData: data,
-                onDone: /**
-                 * @param {?} result
-                 * @return {?}
-                 */
-                function (result) {
-                    self._active.value = false;
-                    resolve(result);
-                },
-                onCancel: /**
-                 * @param {?} error
-                 * @return {?}
-                 */
-                function (error) {
-                    self._active.value = false;
-                    reject(error);
-                }
-            };
-        }));
+        this.exclusiveContext.value.registerDisposable({
+            dispose: /**
+             * @return {?}
+             */
+            function () {
+                self.exclusiveContext.value = null;
+            }
+        });
+        return this.exclusiveContext.value;
     };
-    InplaceInteractionContextComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-inplace-interaction-context',
-                    template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer\n                            [(initialActivityOutletContext)]=\"initialActivityContext\"\n                            [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
-                    styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
-                }] }
+    InteractionService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
     ];
     /** @nocollapse */
-    InplaceInteractionContextComponent.ctorParameters = function () { return []; };
-    InplaceInteractionContextComponent.propDecorators = {
-        interactionContext: [{ type: ViewChild, args: ['activityContainer', { static: true },] }]
-    };
-    return InplaceInteractionContextComponent;
-}(InteractionContextBase));
+    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 {?} */
-    InplaceInteractionContextComponent.prototype.interactionContext;
-    /** @type {?} */
-    InplaceInteractionContextComponent.prototype.initialActivityContext;
+    InteractionService.prototype.active;
     /**
      * @type {?}
      * @private
      */
-    InplaceInteractionContextComponent.prototype._active;
+    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;
 }
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var InteractionOutletComponent = /** @class */ (function () {
-    function InteractionOutletComponent() {
+(function (InteractionService) {
+    /**
+     * @record
+     */
+    function Callback() { }
+    InteractionService.Callback = Callback;
+    if (false) {
+        /**
+         * @param {?} monitor
+         * @return {?}
+         */
+        Callback.prototype.onStarted = function (monitor) { };
+        /**
+         * @param {?} monitor
+         * @return {?}
+         */
+        Callback.prototype.onFinished = function (monitor) { };
     }
-    InteractionOutletComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-interaction-outlet',
-                    template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
-                    styles: [":host{display:block}"]
-                }] }
-    ];
-    /** @nocollapse */
-    InteractionOutletComponent.ctorParameters = function () { return []; };
-    return InteractionOutletComponent;
-}());
+    var Monitor = /** @class */ (function (_super) {
+        __extends(Monitor, _super);
+        function Monitor(id, interactionContext, currentActiveMonitor, exclusiveContext) {
+            var _this = _super.call(this) || this;
+            _this.id = id;
+            _this.interactionContext = interactionContext;
+            _this.currentActiveMonitor = currentActiveMonitor;
+            _this.exclusiveContext = exclusiveContext;
+            var _a = 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
  */
-var DialogInteractionContext = /** @class */ (function (_super) {
-    __extends(DialogInteractionContext, _super);
-    function DialogInteractionContext(dialogService, config) {
+/**
+ * @template D, R, E
+ */
+var InplaceInteractionContextComponent = /** @class */ (function (_super) {
+    __extends(InplaceInteractionContextComponent, _super);
+    function InplaceInteractionContextComponent(interactionService) {
         var _this = _super.call(this) || this;
-        _this.dialogService = dialogService;
-        _this.config = config;
-        _this._activeModel = new MutableValueModel(false);
-        assert$1.notNil(dialogService);
-        _this.onDispose((/**
-         * @return {?}
-         */
-        function () {
-            if (_this.isActive()) {
-                lang.illegalState('Dispose called while active.');
-            }
-        }));
+        _this.interactionService = interactionService;
+        _this._active = new MutableValueModel(false);
+        _this.interactionService._registerInplaceInteractionContext(_this);
         return _this;
     }
-    Object.defineProperty(DialogInteractionContext.prototype, "active", {
+    /**
+     * @return {?}
+     */
+    InplaceInteractionContextComponent.prototype.ngAfterViewInit = /**
+     * @return {?}
+     */
+    function () {
+        this.setActivityList(this.interactionContext.activityList);
+    };
+    Object.defineProperty(InplaceInteractionContextComponent.prototype, "active", {
         get: /**
          * @return {?}
          */
         function () {
-            return this._activeModel.readonly;
+            return this._active.readonly;
         },
         enumerable: true,
         configurable: true
     });
     /**
      * @protected
-     * @template D, R, E
+     * @template D1, R1, E1
      * @param {?} activityType
-     * @param {?} data
-     * @param {?=} disableClose
+     * @param {?=} data
      * @return {?}
      */
-    DialogInteractionContext.prototype._startActivity = /**
+    InplaceInteractionContextComponent.prototype._startActivity = /**
      * @protected
-     * @template D, R, E
+     * @template D1, R1, E1
      * @param {?} activityType
-     * @param {?} data
-     * @param {?=} disableClose
+     * @param {?=} data
      * @return {?}
      */
-    function (activityType, data, disableClose) {
+    function (activityType, data) {
         var _this = this;
-        if (disableClose === void 0) { disableClose = true; }
-        if (this.isActive()) {
-            lang.illegalState("Activity already in progress: " + this.activityList.value.map((/**
-             * @param {?} a
-             * @return {?}
-             */
-            function (a) { return a.constructor.name; })).join(', '));
-        }
-        this._activeModel.value = true;
-        this.notifyActivityStarted();
-        /** @type {?} */
-        var config = __assign({}, this.config, {
-            data: data,
-            disableClose: disableClose,
-            panelClass: 'dialog-interaction-service'
-        });
+        this._active.value = true;
         /** @type {?} */
         var self = this;
-        /** @type {?} */
-        var matDialogRef = (/** @type {?} */ (this.dialogService.open(ActivityContainerComponent, config)));
         return new Promise((/**
          * @param {?} resolve
          * @param {?} reject
          * @return {?}
          */
         function (resolve, reject) {
-            /** @type {?} */
-            var activityContainer = matDialogRef.componentInstance;
-            self.safelyUpdateActivityListDelegate(activityContainer.activityList);
-            activityContainer.initialActivityOutletContext = {
+            _this.interactionContext.initialActivityOutletContext = {
                 activityClass: activityType,
                 activityData: data,
                 onDone: /**
@@ -2379,411 +2586,69 @@ var DialogInteractionContext = /** @class */ (function (_super) {
                  * @return {?}
                  */
                 function (result) {
+                    self._active.value = false;
                     resolve(result);
-                    matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
                 },
                 onCancel: /**
                  * @param {?} error
                  * @return {?}
                  */
                 function (error) {
+                    self._active.value = false;
                     reject(error);
-                    matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
                 }
             };
-            // we need to check if our onDone/onCancel methods above we called or if we were
-            // closed by the user clicking the backdrop.  If the later then we need to reject
-            // our promise.
-            matDialogRef.afterClosed().subscribe((/**
-             * @param {?} promiseAlreadyFinished
-             * @return {?}
-             */
-            function (promiseAlreadyFinished) {
-                if (!promiseAlreadyFinished) {
-                    reject('auto-closed');
-                }
-            }));
-            matDialogRef.updateSize();
-            matDialogRef.afterOpened().subscribe((/**
-             * @param {?} promiseAlreadyFinished
-             * @return {?}
-             */
-            function (promiseAlreadyFinished) {
-                matDialogRef.updateSize();
-            }));
-        })).finally((/**
-         * @return {?}
-         */
-        function () {
-            _this._activeModel.value = false;
-            _this.notifyActivityFinished();
-            self.safelyUpdateActivityListDelegate(null);
-        }));
-    };
-    /**
-     * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
-     * @param delegate
-     */
-    /**
-     * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
-     * @param {?} delegate
-     * @return {?}
-     */
-    DialogInteractionContext.prototype.safelyUpdateActivityListDelegate = /**
-     * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
-     * @param {?} delegate
-     * @return {?}
-     */
-    function (delegate) {
-        var _this = this;
-        setTimeout((/**
-         * @return {?}
-         */
-        function () { return _this.setActivityList(delegate); }));
-    };
-    DialogInteractionContext.decorators = [
-        { type: 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'
-                },] }
+    InplaceInteractionContextComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-inplace-interaction-context',
+                    template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer\n                            [(initialActivityOutletContext)]=\"initialActivityContext\"\n                            [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
+                    styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
+                }] }
     ];
     /** @nocollapse */
-    DialogInteractionService.ctorParameters = function () { return [
-        { type: 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,] }] }
+    InplaceInteractionContextComponent.ctorParameters = function () { return [
+        { type: InteractionService }
     ]; };
-    /** @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));
+    InplaceInteractionContextComponent.propDecorators = {
+        interactionContext: [{ type: ViewChild, args: ['activityContainer', { static: true },] }]
+    };
+    return InplaceInteractionContextComponent;
+}(InteractionContextBase));
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    DialogInteractionService.prototype._activeInteractionContextModel;
     /** @type {?} */
-    DialogInteractionService.prototype.active;
-    /**
-     * @type {?}
-     * @private
-     */
-    DialogInteractionService.prototype.exclusiveContext;
+    InplaceInteractionContextComponent.prototype.interactionContext;
+    /** @type {?} */
+    InplaceInteractionContextComponent.prototype.initialActivityContext;
     /**
      * @type {?}
      * @private
      */
-    DialogInteractionService.prototype.dialogService;
-    /** @type {?} */
-    DialogInteractionService.prototype.dialogServiceDefaults;
+    InplaceInteractionContextComponent.prototype._active;
     /** @type {?} */
-    DialogInteractionService.prototype.matDialogDefaultConfig;
+    InplaceInteractionContextComponent.prototype.interactionService;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var InteractionOutletComponent = /** @class */ (function () {
+    function InteractionOutletComponent() {
+    }
+    InteractionOutletComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-interaction-outlet',
+                    template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
+                    styles: [":host{display:block}"]
+                }] }
+    ];
+    /** @nocollapse */
+    InteractionOutletComponent.ctorParameters = function () { return []; };
+    return InteractionOutletComponent;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2823,7 +2688,7 @@ var InteractionModule = /** @class */ (function () {
                         AlertDialogComponent
                     ],
                     providers: [
-                        DialogInteractionService,
+                        InteractionService,
                     ]
                 },] }
     ];
@@ -3796,67 +3661,110 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var PlaceComponentDeactivationHandler = /** @class */ (function () {
-    function PlaceComponentDeactivationHandler(component, navigationSession) {
+    function PlaceComponentDeactivationHandler(component, navigationState, isPrimaryComponent) {
         this.component = component;
-        this.navigationSession = navigationSession;
+        this.navigationState = navigationState;
+        this.isPrimaryComponent = isPrimaryComponent;
     }
+    Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "interactionService", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.navigationState.interactionService;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PlaceComponentDeactivationHandler.prototype, "placeRouter", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.navigationState.placeRouter;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
     PlaceComponentDeactivationHandler.prototype.canDeactivate = /**
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    function (nextState) {
+    function (currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 // We'll get called multiple times if there's any parameter sanitisation so
                 // we always return true if we accepted promise from a previous cycle of the current
                 // navigation session.
                 if (!this.canDeactivatePromise) {
-                    this.canDeactivatePromise = this.canDeactivateComponent(nextState);
+                    console.log("creating deactivate promise for -> " + this.component.constructor.name);
+                    this.canDeactivatePromise = this.canDeactivateComponent(currentUrl, nextState);
                 }
                 return [2 /*return*/, this.canDeactivatePromise];
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @protected
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    PlaceComponentDeactivationHandler.prototype.canDeactivateComponent = /**
+    PlaceComponentDeactivationHandler.prototype.canDeactivateComponent = 
+    // @Trace()
+    /**
      * @protected
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    function (nextState) {
+    function (currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function () {
-            var activity;
+            var routeIds, currentIds;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!(this.navigationSession.isPopState && this.component.interactionContext && this.component.interactionContext.isActive())) return [3 /*break*/, 2];
-                        // Note: Modal interactions are run in a different router outlet so we never get place deactivating while
-                        // a model interaction is active. This is because:
-                        // 1. the user can't click anything to navigate away
-                        // 2. clicking the back button will only change the outlet route portion of the URL. This
-                        //    is all handled by the InteractionGuard and so the component guards will never run.
-                        //
-                        // Now we just cancel the current activity...
-                        return [4 /*yield*/, this.component.interactionContext.getCurrentActivity()];
+                        console.log(this.navigationState.toString());
+                        if (!this.navigationState.isPopState) return [3 /*break*/, 5];
+                        if (!(this.isPrimaryComponent && this.interactionService.isModalActive())) return [3 /*break*/, 3];
+                        routeIds = this.placeRouter.getActiveInteractionIdsFromUrl(nextState.url);
+                        currentIds = this.interactionService.activeInteractionContextIds.value;
+                        if (!!isEqual(currentIds, routeIds)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.interactionService.getActiveContext().cancelCurrentActivity()];
                     case 1:
-                        activity = _a.sent();
-                        activity.cancel(null);
-                        return [2 /*return*/, false]; // ..and stay where we are.
-                    case 2:
+                        _a.sent();
+                        return [2 /*return*/, currentUrl.updateInteractionIds(this.interactionService.activeInteractionContextIds.value)];
+                    case 2: return [3 /*break*/, 5];
+                    case 3:
+                        if (!(this.component.interactionContext && this.component.interactionContext.isActive())) return [3 /*break*/, 5];
+                        return [4 /*yield*/, this.component.interactionContext.cancelCurrentActivity()];
+                    case 4:
+                        _a.sent();
+                        return [2 /*return*/, currentUrl
+                                .updateInteractionIds(this.interactionService.activeInteractionContextIds.value)];
+                    case 5:
                         // Ok, so now we're really leaving, so we ask the component if we should.;
-                        if (this.isNotJustAChangeInRouteId(nextState) && this.component.canDeactivate) {
-                            // No interaction in progress, so ask the component .
-                            // This may start an interaction, hence checking the interaction context before now. I.e. if the place pops up the dialog, and
-                            // the user clicks back again, we'll re-enter here and go bang when the component tries to open another dialog.
-                            return [2 /*return*/, this.component.canDeactivate(this.navigationSession.interactionContext)];
+                        if (this.isNotJustAChangeInRouteId(nextState)) {
+                            if (this.component.canDeactivate) {
+                                // No interaction in progress, so ask the component .
+                                // This may start an interaction, hence checking the interaction context before now. I.e. if the place pops up the dialog, and
+                                // the user clicks back again, we'll re-enter here and go bang when the component tries to open another dialog.
+                                return [2 /*return*/, this.component.canDeactivate(this.navigationState.interactionContext)];
+                            }
+                            // The component has an active interaction but no deactivation hook.  Rather than guessing what to do
+                            // we'll just cancel the navigation and print a warning.
+                            if (this.component.interactionContext && this.component.interactionContext.isActive()) {
+                                console.warn('Route changed while component has active interaction, cancelling navigation');
+                                return [2 /*return*/, false];
+                            }
                         }
                         return [2 /*return*/, true];
                 }
@@ -3890,7 +3798,9 @@ if (false) {
     /** @type {?} */
     PlaceComponentDeactivationHandler.prototype.component;
     /** @type {?} */
-    PlaceComponentDeactivationHandler.prototype.navigationSession;
+    PlaceComponentDeactivationHandler.prototype.navigationState;
+    /** @type {?} */
+    PlaceComponentDeactivationHandler.prototype.isPrimaryComponent;
 }
 
 /**
@@ -3900,7 +3810,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 +3821,46 @@ var NavigationState = /** @class */ (function (_super) {
         _this._visits = new Map();
         return _this;
     }
+    Object.defineProperty(NavigationState.prototype, "name", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.constructor.name;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NavigationState.prototype, "idle", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return !this.isTransitional;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NavigationState.prototype, "placeRouter", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.context.placeRouter;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(NavigationState.prototype, "interactionService", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.context.interactionService;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(NavigationState.prototype, "interactionContext", {
         get: /**
          * @return {?}
@@ -3940,6 +3893,74 @@ var NavigationState = /** @class */ (function (_super) {
     function (placeDef) {
         return this._visits.get(placeDef);
     };
+    /**
+     * @param {?} visit
+     * @param {?} initialUrl
+     * @return {?}
+     */
+    NavigationState.prototype.onPlaceNavigationStart = /**
+     * @param {?} visit
+     * @param {?} initialUrl
+     * @return {?}
+     */
+    function (visit, initialUrl) {
+        return this.illegalTransition('onPlaceNavigationStart');
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationState.prototype.onPopState = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        return this.illegalTransition(event);
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationState.prototype.onRouterStarted = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        return this.illegalTransition(event);
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationState.prototype.onRouterCancelled = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        return this.illegalTransition(event);
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationState.prototype.onRouterError = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        return this.illegalTransition(event);
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationState.prototype.onRouterEnd = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        return this.illegalTransition(event);
+    };
     /**
      * @param {?} newUrl
      * @return {?}
@@ -3951,6 +3972,25 @@ var NavigationState = /** @class */ (function (_super) {
     function (newUrl) {
         return this.illegalTransition('onBackClickedDuringNavigationInteraction');
     };
+    /**
+     * @param {?} component
+     * @param {?} currentUrl
+     * @param {?} nextUrl
+     * @return {?}
+     */
+    NavigationState.prototype.canDeactivatePlace = /**
+     * @param {?} component
+     * @param {?} currentUrl
+     * @param {?} nextUrl
+     * @return {?}
+     */
+    function (component, currentUrl, nextUrl) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.illegalTransition('canDeactivatePlace')];
+            });
+        });
+    };
     /**
      * @return {?}
      */
@@ -3984,34 +4024,53 @@ 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 ?
+            this.interactionService.isActive() ?
+                new NavigationState.InteractionPopStateTransition(this.context, this.currentRouterUrl()) :
+                new NavigationState.PopStateTransition(this.context, this.currentRouterUrl())
+            :
+                this.interactionService.isActive() ?
+                    new NavigationState.InteractionTransition(this.context, this.currentRouterUrl()) :
+                    new NavigationState.NavigationTransition(this.context, this.currentRouterUrl());
     };
     /**
      * @protected
-     * @param {?} url
      * @return {?}
      */
-    NavigationState.prototype.updateLocation = /**
+    NavigationState.prototype.createIdleState = /**
      * @protected
+     * @return {?}
+     */
+    function () {
+        return this.interactionService.isActive() ?
+            new NavigationState.IdleDuringInteraction(this.context, this.currentRouterUrl()) :
+            new NavigationState.Idle(this.context);
+    };
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    NavigationState.prototype.resetBrowserLocation = /**
      * @param {?} url
      * @return {?}
      */
     function (url) {
-        this.context.angularLocation.go(url);
+        this.placeRouter.resetBrowserLocation(url);
     };
     /**
      * @return {?}
@@ -4022,12 +4081,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 +4090,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 +4113,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,100 +4123,85 @@ 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 {?}
-         */
-        Idle.prototype.onStart = /**
-         * @param {?} event
+         * @param {?} visit
+         * @param {?} initialUrl
          * @return {?}
          */
-        function (event) {
-            // calling angularLocation.go() to clear back state can trigger router cycles to the current url if we don't ignore them
-            if (event.url === this.currentRouterUrl()) {
-                Logger.get(this).info("navigation started to same url -> " + event.url);
-                return this;
-            }
-            if (event.url === (this.currentRouterUrl() + "(aup-interaction:modal)")) {
-                Logger.get(this).info("navigation started with interaction outlet -> " + event.url);
-                return new ModalInteractionSession(this.context, event.url);
-            }
-            return this.createActiveSession(event);
-        };
-        /**
-         * @param {?} event
-         * @return {?}
-         */
-        Idle.prototype.onCancel = /**
-         * @param {?} event
+        Idle.prototype.onPlaceNavigationStart = /**
+         * @param {?} visit
+         * @param {?} initialUrl
          * @return {?}
          */
-        function (event) {
-            return this.illegalTransition(event);
+        function (visit, initialUrl) {
+            /** @type {?} */
+            var navigationTransition = new NavigationTransition(this.context, initialUrl);
+            navigationTransition.storeVisit(visit);
+            return navigationTransition;
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        Idle.prototype.onEnd = /**
+        Idle.prototype.onRouterStarted = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            return this.illegalTransition(event);
+            // calling angularLocation.go() to clear back state can trigger router cycles to the current url if we don't ignore them
+            if (event.url === this.currentRouterUrl()) {
+                Logger.get(this).info("navigation started to same url -> " + event.url);
+                return this;
+            }
+            if (this.placeRouter.hasActiveInteractionIds(event.url)) {
+                Logger.get(this).info("navigation started with interaction outlet -> " + event.url);
+                return new InteractionTransition(this.context, event.url);
+            }
+            else {
+                return this.createTransitionStateFor(event);
+            }
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        Idle.prototype.onError = /**
+        Idle.prototype.onPopState = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            return this.illegalTransition(event);
+            return this.createTransitionStateFor(event);
         };
         return Idle;
     }(NavigationState));
     NavigationState.Idle = Idle;
     if (false) {
         /** @type {?} */
-        Idle.prototype.isPopState;
-        /** @type {?} */
-        Idle.prototype.active;
+        Idle.prototype.isTransitional;
         /** @type {?} */
         Idle.prototype.startingUrl;
+        /** @type {?} */
+        Idle.prototype.isPopState;
     }
-    var Active = /** @class */ (function (_super) {
-        __extends(Active, _super);
-        function Active(context, isPopState, startingUrl) {
+    /**
+     * @abstract
+     */
+    var /**
+     * @abstract
+     */
+    AbstractNavigationTransition = /** @class */ (function (_super) {
+        __extends(AbstractNavigationTransition, _super);
+        function AbstractNavigationTransition(context, startingUrl) {
             var _this = _super.call(this, context) || this;
-            _this.isPopState = isPopState;
             _this.startingUrl = startingUrl;
-            _this.active = true;
+            _this.isTransitional = true;
             _this.componentDeactivationHandlers = new Map();
-            _this._interactionContext = _this.context.modalInteractionService.createExclusiveInteractionContext();
+            _this._interactionContext = _this.interactionService._createExclusiveModalInteractionContext();
             _this.onDispose((/**
              * @return {?}
              */
@@ -4205,14 +4209,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 +4230,20 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        Active.prototype.onStart = /**
+        AbstractNavigationTransition.prototype.onRouterStarted = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            // active sessions can have many cancel start cycles.
+            // active sessions can have many cancel start cycles due
+            // to place guard redirects
             return this;
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        Active.prototype.onEnd = /**
+        AbstractNavigationTransition.prototype.onRouterEnd = /**
          * @param {?} event
          * @return {?}
          */
@@ -4247,85 +4252,47 @@ 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) {
+            Logger.get(this).info("back button pressed during navigation session interaction promise");
+            // detach the interaction from the session so it doesn't get disposed until the activity has completed.
             /** @type {?} */
-            var context = this.detachInteractionContext();
-            context.getCurrentActivity().then((/**
-             * @param {?} activity
+            var navigationInteraction = this.detachInteractionContext();
+            var when = Dsl.disposeWith(navigationInteraction).when;
+            // TODO: I need to make the exclusive interaction context disallow nested activities or
+            //       that would mess things up entirely. Or, can I do a context.abortAll().then(..)
+            navigationInteraction.cancelCurrentActivity().then((/**
              * @return {?}
              */
-            function (activity) {
-                context.addActivityListener({
-                    onActivityFinished: /**
-                     * @return {?}
-                     */
-                    function () {
-                        context.dispose();
-                    },
-                    onActivityStarted: /**
-                     * @return {?}
-                     */
-                    function () {
-                    }
-                });
-                activity.cancel(null);
+            function () {
+                navigationInteraction.dispose();
             }));
-            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, locationTriggerUrl);
+            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, this.isPopState, locationTriggerUrl);
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} component
-         * @param {?} nextState
+         * @param {?} currentUrl
+         * @param {?} nextUrl
          * @return {?}
          */
-        Active.prototype.canDeactivatePlace = /**
+        AbstractNavigationTransition.prototype.canDeactivatePlace = 
+        // @Trace()
+        /**
          * @param {?} component
-         * @param {?} nextState
+         * @param {?} currentUrl
+         * @param {?} nextUrl
          * @return {?}
          */
-        function (component, nextState) {
+        function (component, currentUrl, nextUrl) {
             return __awaiter(this, void 0, void 0, function () {
                 var handler, isPrimaryHandler;
                 return __generator(this, function (_a) {
@@ -4333,10 +4300,10 @@ if (false) {
                     handler = this.componentDeactivationHandlers.get(component);
                     if (!handler) {
                         isPrimaryHandler = this.componentDeactivationHandlers.size === 0;
-                        handler = new PlaceComponentDeactivationHandler(component, this);
+                        handler = new PlaceComponentDeactivationHandler(component, this, isPrimaryHandler);
                         this.componentDeactivationHandlers.set(component, handler);
                     }
-                    return [2 /*return*/, handler.canDeactivate(nextState)];
+                    return [2 /*return*/, handler.canDeactivate(currentUrl, nextUrl)];
                 });
             });
         };
@@ -4344,7 +4311,7 @@ if (false) {
          * @private
          * @return {?}
          */
-        Active.prototype.detachInteractionContext = /**
+        AbstractNavigationTransition.prototype.detachInteractionContext = /**
          * @private
          * @return {?}
          */
@@ -4354,226 +4321,390 @@ if (false) {
             this._interactionContext = null;
             return context;
         };
-        /**
-         * @return {?}
-         */
-        Active.prototype.toString = /**
-         * @return {?}
-         */
-        function () {
-            return this.constructor.name + "(startingUrl: " + this.startingUrl + ", isPopState:" + this.isPopState + ")";
-        };
-        __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;
+        return AbstractNavigationTransition;
     }(NavigationState));
-    NavigationState.Active = Active;
+    NavigationState.AbstractNavigationTransition = AbstractNavigationTransition;
     if (false) {
         /** @type {?} */
-        Active.prototype.active;
+        AbstractNavigationTransition.prototype.isTransitional;
         /**
          * @type {?}
          * @private
          */
-        Active.prototype.componentDeactivationHandlers;
+        AbstractNavigationTransition.prototype.componentDeactivationHandlers;
         /**
          * @type {?}
          * @private
          */
-        Active.prototype._interactionContext;
-        /** @type {?} */
-        Active.prototype.isPopState;
+        AbstractNavigationTransition.prototype._interactionContext;
         /** @type {?} */
-        Active.prototype.startingUrl;
+        AbstractNavigationTransition.prototype.startingUrl;
     }
-    var ModalInteractionSession = /** @class */ (function (_super) {
-        __extends(ModalInteractionSession, _super);
-        function ModalInteractionSession(context, startingUrl) {
-            var _this = _super.call(this, context) || this;
-            _this.startingUrl = startingUrl;
-            _this.active = false;
+    var NavigationTransition = /** @class */ (function (_super) {
+        __extends(NavigationTransition, _super);
+        function NavigationTransition() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
             _this.isPopState = false;
             return _this;
         }
         /**
-         * @param {?} url
+         * @param {?} event
          * @return {?}
          */
-        ModalInteractionSession.hasInteraction = /**
-         * @param {?} url
+        NavigationTransition.prototype.onRouterCancelled = /**
+         * @param {?} event
          * @return {?}
          */
-        function (url) {
-            return url.endsWith('(aup-interaction:modal)');
+        function (event) {
+            return this;
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        ModalInteractionSession.prototype.onStart = /**
+        NavigationTransition.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            // VERY VERY IMPORTANT BACK BUTTON NOTE:
-            // When the back button is clicked we'll enter here first, and push the url
-            // back to the browser.  Angular seems to ignore it from a routing perspective
-            // and then the InteractionGuard will cancel the navigation.  This process seems
-            // to keep the brower history in a sane state.
-            if (this.context.modalInteractionService.isActive()) {
-                if (!ModalInteractionSession.hasInteraction(event.url)) {
-                    // this capture the case where
-                    this.updateLocation(this.startingUrl);
-                }
-            }
-            return this;
+            // navigation was aborted.
+            return new Idle(this.context);
+        };
+        /**
+         * @return {?}
+         */
+        NavigationTransition.prototype.toString = /**
+         * @return {?}
+         */
+        function () {
+            return this.constructor.name + "(startingUrl: " + this.startingUrl + ")";
         };
+        return NavigationTransition;
+    }(AbstractNavigationTransition));
+    NavigationState.NavigationTransition = NavigationTransition;
+    if (false) {
+        /** @type {?} */
+        NavigationTransition.prototype.isPopState;
+    }
+    var PopStateTransition = /** @class */ (function (_super) {
+        __extends(PopStateTransition, _super);
+        function PopStateTransition() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.isPopState = true;
+            return _this;
+        }
         /**
          * @param {?} event
          * @return {?}
          */
-        ModalInteractionSession.prototype.onCancel = /**
+        PopStateTransition.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            // this.updateLocation(this.startingUrl);
-            return this;
+            // Angular doesn't preserve the url when a guard cancels the back button.
+            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+            Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+            this.resetBrowserLocation(this.startingUrl);
+            return new Idle(this.context);
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        ModalInteractionSession.prototype.onEnd = /**
+        PopStateTransition.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            if (this.context.modalInteractionService.isActive()) {
-                return this;
-            }
-            else {
-                return new Idle(this.context);
+            // navigation was aborted.
+            if (this.currentRouterUrl() !== this.startingUrl) {
+                // Angular doesn't preserve the url when a guard cancels the back button.
+                // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+                this.resetBrowserLocation(this.startingUrl);
             }
+            return new Idle(this.context);
+        };
+        return PopStateTransition;
+    }(AbstractNavigationTransition));
+    NavigationState.PopStateTransition = PopStateTransition;
+    if (false) {
+        /** @type {?} */
+        PopStateTransition.prototype.isPopState;
+    }
+    var IdleDuringInteraction = /** @class */ (function (_super) {
+        __extends(IdleDuringInteraction, _super);
+        function IdleDuringInteraction(context, startingUrl) {
+            var _this = _super.call(this, context) || this;
+            _this.startingUrl = startingUrl;
+            _this.isTransitional = false;
+            _this.isPopState = false;
+            return _this;
+        }
+        /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        IdleDuringInteraction.prototype.onPlaceNavigationStart = /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        function (visit, initialUrl) {
+            /** @type {?} */
+            var navigationTransition = new InteractionTransition(this.context, initialUrl);
+            navigationTransition.storeVisit(visit);
+            return navigationTransition;
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        ModalInteractionSession.prototype.onError = /**
+        IdleDuringInteraction.prototype.onRouterStarted = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            return this.illegalTransition(event);
+            return new InteractionTransition(this.context, event.url);
         };
         /**
-         * @param {?} component
-         * @param {?} nextState
+         * @param {?} event
          * @return {?}
          */
-        ModalInteractionSession.prototype.canDeactivatePlace = /**
-         * @param {?} component
-         * @param {?} nextState
+        IdleDuringInteraction.prototype.onPopState = /**
+         * @param {?} event
          * @return {?}
          */
-        function (component, nextState) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, true];
-                });
-            });
+        function (event) {
+            return new InteractionPopStateTransition(this.context, event.url);
         };
         __decorate([
             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);
+        ], IdleDuringInteraction.prototype, "onRouterStarted", null);
         __decorate([
             Trace(),
             __metadata("design:type", Function),
-            __metadata("design:paramtypes", [NavigationEnd]),
+            __metadata("design:paramtypes", [NavigationStart]),
             __metadata("design:returntype", NavigationState)
-        ], ModalInteractionSession.prototype, "onEnd", null);
-        return ModalInteractionSession;
+        ], IdleDuringInteraction.prototype, "onPopState", null);
+        return IdleDuringInteraction;
     }(NavigationState));
-    NavigationState.ModalInteractionSession = ModalInteractionSession;
+    NavigationState.IdleDuringInteraction = IdleDuringInteraction;
+    if (false) {
+        /** @type {?} */
+        IdleDuringInteraction.prototype.isTransitional;
+        /** @type {?} */
+        IdleDuringInteraction.prototype.isPopState;
+        /** @type {?} */
+        IdleDuringInteraction.prototype.startingUrl;
+    }
+    /**
+     * @abstract
+     */
+    var /**
+     * @abstract
+     */
+    AbstractInteractionTransition = /** @class */ (function (_super) {
+        __extends(AbstractInteractionTransition, _super);
+        function AbstractInteractionTransition(context, startingUrl) {
+            var _this = _super.call(this, context, startingUrl) || this;
+            _this.startingUrl = startingUrl;
+            _this.isTransitional = true;
+            return _this;
+        }
+        return AbstractInteractionTransition;
+    }(AbstractNavigationTransition));
+    NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
     if (false) {
         /** @type {?} */
-        ModalInteractionSession.prototype.active;
+        AbstractInteractionTransition.prototype.isTransitional;
+        /** @type {?} */
+        AbstractInteractionTransition.prototype.startingUrl;
+    }
+    /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    var /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    InteractionTransition = /** @class */ (function (_super) {
+        __extends(InteractionTransition, _super);
+        function InteractionTransition() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.isPopState = false;
+            return _this;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        InteractionTransition.prototype.onRouterCancelled = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (this.context.interactionService.isActive()) {
+                /** @type {?} */
+                var interactionIds = this.interactionService.activeInteractionContextIds.value;
+                this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        InteractionTransition.prototype.onRouterError = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            // navigation was aborted.
+            return new IdleDuringInteraction(this.context, this.startingUrl);
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        InteractionTransition.prototype.onRouterEnd = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (this.context.interactionService.isActive()) {
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
+        };
+        return InteractionTransition;
+    }(AbstractInteractionTransition));
+    NavigationState.InteractionTransition = InteractionTransition;
+    if (false) {
         /** @type {?} */
-        ModalInteractionSession.prototype.isPopState;
+        InteractionTransition.prototype.isPopState;
+    }
+    /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    var /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    InteractionPopStateTransition = /** @class */ (function (_super) {
+        __extends(InteractionPopStateTransition, _super);
+        function InteractionPopStateTransition() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.isPopState = true;
+            return _this;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        InteractionPopStateTransition.prototype.onRouterCancelled = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (this.interactionService.isActive()) {
+                /** @type {?} */
+                var interactionIds = this.interactionService.activeInteractionContextIds.value;
+                this.resetBrowserLocation(this.placeRouter.parseUrl(this.startingUrl).updateInteractionIds(interactionIds).url);
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        InteractionPopStateTransition.prototype.onRouterEnd = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (this.context.interactionService.isActive()) {
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
+        };
+        return InteractionPopStateTransition;
+    }(AbstractInteractionTransition));
+    NavigationState.InteractionPopStateTransition = InteractionPopStateTransition;
+    if (false) {
         /** @type {?} */
-        ModalInteractionSession.prototype.startingUrl;
+        InteractionPopStateTransition.prototype.isPopState;
     }
     var CancelledDuringNavigationInteraction = /** @class */ (function (_super) {
         __extends(CancelledDuringNavigationInteraction, _super);
-        function CancelledDuringNavigationInteraction(context, startingUrl, locationChangeTriggerUrl) {
+        function CancelledDuringNavigationInteraction(context, startingUrl, startingEventWasAPopState, locationChangeTriggerUrl) {
             var _this = _super.call(this, context) || this;
             _this.startingUrl = startingUrl;
+            _this.startingEventWasAPopState = startingEventWasAPopState;
             _this.locationChangeTriggerUrl = locationChangeTriggerUrl;
-            _this.active = false;
-            _this.capturedFauxRouterStart = false;
+            _this.isPopState = false;
+            _this.gotPopStateWithLeavingUrl = false;
             return _this;
-            // This will trigger a return to the route we originally started with.
-            // this.angularLocation.go(this.startingUrl);
         }
+        Object.defineProperty(CancelledDuringNavigationInteraction.prototype, "isTransitional", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return true;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
-         * @param {?} component
-         * @param {?} nextState
+         * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.canDeactivatePlace = /**
-         * @param {?} component
-         * @param {?} nextState
+        CancelledDuringNavigationInteraction.prototype.onRouterStarted = /**
+         * @param {?} event
          * @return {?}
          */
-        function (component, nextState) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, false];
-                });
-            });
+        function (event) {
+            return this.ignore(event);
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.onCancel = /**
+        CancelledDuringNavigationInteraction.prototype.onRouterCancelled = /**
          * @param {?} event
          * @return {?}
          */
         function (event) {
-            return this.ignore(event);
+            // Depending on the state of the router and what was done we get a different
+            // sequence of events.  I.e.  If they just clicked a link we'll get a cancel
+            // with the locationChangeTriggerUrl as the final event. However the user
+            // started the initial navigation with a pop state then we'll get one of
+            // those with the locationChangeTriggerUrl but no cancel event with it.
+            return this.gotPopStateWithLeavingUrl || this.locationChangeTriggerUrl === event.url ? this.createIdleState() : this.ignore(event);
         };
         /**
          * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.onEnd = /**
+        CancelledDuringNavigationInteraction.prototype.onRouterEnd = /**
          * @param {?} event
          * @return {?}
          */
@@ -4584,7 +4715,7 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        CancelledDuringNavigationInteraction.prototype.onError = /**
+        CancelledDuringNavigationInteraction.prototype.onRouterError = /**
          * @param {?} event
          * @return {?}
          */
@@ -4595,18 +4726,36 @@ 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);
-            }
+            this.gotPopStateWithLeavingUrl = this.gotPopStateWithLeavingUrl || event.url === this.locationChangeTriggerUrl;
+            return this.ignore(event);
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        CancelledDuringNavigationInteraction.prototype.canDeactivatePlace = 
+        // @Trace()
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        function (component, currentUrl, nextUrl) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, false];
+                });
+            });
         };
         /**
          * @param {?} event
@@ -4619,7 +4768,7 @@ if (false) {
          * @return {?}
          */
         function (event, reason) {
-            reason = reason ? " (" + reason + ")" : '';
+            reason = reason ? " -> " + reason : '';
             Logger.get(this).info("ignoring router event" + reason + ": " + event.constructor.name + " -> " + event.url);
             return this;
         };
@@ -4630,24 +4779,30 @@ if (false) {
          * @return {?}
          */
         function () {
-            return this.constructor.name + "(startingUrl: " + this.startingUrl + ", locationChangeTriggerUrl:" + this.locationChangeTriggerUrl + ")";
+            return this.constructor.name + "(isIdl: " + this.idle + ", startingUrl: " + this.startingUrl + ", locationChangeTriggerUrl:" + this.locationChangeTriggerUrl + ")";
         };
+        __decorate([
+            Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [NavigationCancel]),
+            __metadata("design:returntype", NavigationState)
+        ], CancelledDuringNavigationInteraction.prototype, "onRouterCancelled", null);
         return CancelledDuringNavigationInteraction;
     }(NavigationState));
     NavigationState.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
     if (false) {
-        /** @type {?} */
-        CancelledDuringNavigationInteraction.prototype.active;
         /** @type {?} */
         CancelledDuringNavigationInteraction.prototype.isPopState;
         /**
          * @type {?}
          * @private
          */
-        CancelledDuringNavigationInteraction.prototype.capturedFauxRouterStart;
+        CancelledDuringNavigationInteraction.prototype.gotPopStateWithLeavingUrl;
         /** @type {?} */
         CancelledDuringNavigationInteraction.prototype.startingUrl;
         /** @type {?} */
+        CancelledDuringNavigationInteraction.prototype.startingEventWasAPopState;
+        /** @type {?} */
         CancelledDuringNavigationInteraction.prototype.locationChangeTriggerUrl;
     }
 })(NavigationState || (NavigationState = {}));
@@ -4737,19 +4892,13 @@ 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, options) {
+        this.urlSerializer = urlSerializer;
+        this.url = url;
+        this.options = options;
+        this.urlTree = urlSerializer.parse(url);
     }
-    /**
-     * @return {?}
-     */
-    UrlSnapshot.prototype.cloneUrlSegmentList = /**
-     * @return {?}
-     */
-    function () {
-        return __spread(this.urlTree.root.children.primary.segments);
-    };
     /**
      * @param {?} visit
      * @return {?}
@@ -4759,11 +4908,13 @@ var UrlSnapshot = /** @class */ (function () {
      * @return {?}
      */
     function (visit) {
+        /** @type {?} */
+        var urlTree = this.urlSerializer.parse(this.url);
         // Ugly, but it works for now.
         /** @type {?} */
-        var segments = this.cloneUrlSegmentList();
+        var segments = __spread(this.getPrimarySegments(urlTree));
         /** @type {?} */
-        var visitSegments = this.convertToUrlSegments(visit);
+        var visitSegments = this.getSegmentsFor(visit);
         /** @type {?} */
         var replaceAt = segments.findIndex((/**
          * @param {?} segment
@@ -4772,7 +4923,21 @@ var UrlSnapshot = /** @class */ (function () {
         function (segment) { return segment.path === visitSegments[0].path; }));
         // do not use the return value, it's the items that were removed!
         segments.splice.apply(segments, __spread([replaceAt, visitSegments.length], visitSegments));
-        return segments;
+        urlTree.root.children.primary.segments = segments;
+        return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+    };
+    /**
+     * @private
+     * @param {?} urlTree
+     * @return {?}
+     */
+    UrlSnapshot.prototype.getPrimarySegments = /**
+     * @private
+     * @param {?} urlTree
+     * @return {?}
+     */
+    function (urlTree) {
+        return this.urlTree.root.children.primary.segments;
     };
     /**
      * Converts the visit into segments.  Please not that these segments are not e
@@ -4780,11 +4945,13 @@ var UrlSnapshot = /** @class */ (function () {
      */
     /**
      * 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 {?}
      */
@@ -4803,51 +4970,150 @@ var UrlSnapshot = /** @class */ (function () {
                 ];
     };
     /**
-     * @param {?} visit
+     * @param {?} placeDef
      * @return {?}
      */
-    UrlSnapshot.prototype.createRedirectCommandsFor = /**
-     * @param {?} visit
+    UrlSnapshot.prototype.includesPathOf = /**
+     * @param {?} placeDef
      * @return {?}
      */
-    function (visit) {
-        /** @type {?} */
-        var segments = this.updateVisitSegments(visit);
-        /** @type {?} */
-        var commands = [];
-        segments.forEach((/**
+    function (placeDef) {
+        return this.getPrimarySegments(this.urlTree).find((/**
          * @param {?} s
          * @return {?}
          */
-        function (s) {
-            commands.push(s.path);
-            if (s.parameterMap.keys.length > 0) {
-                commands.push(s.parameters);
-            }
-        }));
-        return commands;
+        function (s) { return s.path === placeDef.path; }));
     };
     /**
-     * @param {?} placeDef
      * @return {?}
      */
-    UrlSnapshot.prototype.includesPathOf = /**
-     * @param {?} placeDef
+    UrlSnapshot.prototype.getInteractionIds = /**
      * @return {?}
      */
-    function (placeDef) {
-        return this.cloneUrlSegmentList().find((/**
-         * @param {?} s
-         * @return {?}
-         */
-        function (s) { return s.path === placeDef.path; }));
+    function () {
+        /** @type {?} */
+        var queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
+        if (queryParam) {
+            return UrlSnapshot.parseInteractionIds(queryParam);
+        }
+        else {
+            return [];
+        }
+    };
+    /**
+     * @return {?}
+     */
+    UrlSnapshot.prototype.hasInteractionIds = /**
+     * @return {?}
+     */
+    function () {
+        return this.getInteractionIds().length > 0;
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} ids
+     * @return {?}
+     */
+    UrlSnapshot.prototype.updateInteractionIds = 
+    // @Trace()
+    /**
+     * @param {?} ids
+     * @return {?}
+     */
+    function (ids) {
+        if (ids.length === 0) {
+            return this.removeInteractionIds();
+        }
+        else {
+            /** @type {?} */
+            var urlTree = this.urlSerializer.parse(this.url);
+            urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM] = UrlSnapshot.createPathIdFor(ids);
+            return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+        }
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    UrlSnapshot.prototype.removeInteractionIds = 
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var urlTree = this.urlSerializer.parse(this.url);
+        if (urlTree.queryParams && urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM]) {
+            urlTree.queryParams = {}; //[UrlSnapshot.INTERACTION_ROUTER_OUTLET]
+        }
+        return new UrlSnapshot(this.urlSerializer, urlTree.toString(), this.options);
+    };
+    /**
+     * @param {?} options
+     * @return {?}
+     */
+    UrlSnapshot.prototype.withOptions = /**
+     * @param {?} options
+     * @return {?}
+     */
+    function (options) {
+        return new UrlSnapshot(this.urlSerializer, this.url, options);
+    };
+    /**
+     * @return {?}
+     */
+    UrlSnapshot.prototype.getNavigationExtras = /**
+     * @return {?}
+     */
+    function () {
+        return this.options;
     };
     return UrlSnapshot;
 }());
 if (false) {
     /** @type {?} */
     UrlSnapshot.prototype.urlTree;
+    /** @type {?} */
+    UrlSnapshot.prototype.urlSerializer;
+    /** @type {?} */
+    UrlSnapshot.prototype.url;
+    /**
+     * @type {?}
+     * @private
+     */
+    UrlSnapshot.prototype.options;
 }
+(function (UrlSnapshot) {
+    UrlSnapshot.INTERACTION_QUERY_PARAM = 'aup-interactions';
+    UrlSnapshot.INTERACTION_ID_SEPARATOR = '--';
+    /**
+     * @param {?} path
+     * @return {?}
+     */
+    function parseInteractionIds(path) {
+        return path.split(UrlSnapshot.INTERACTION_ID_SEPARATOR);
+    }
+    UrlSnapshot.parseInteractionIds = parseInteractionIds;
+    /**
+     * @param {?} interactionIds
+     * @return {?}
+     */
+    function createPathIdFor(interactionIds) {
+        return interactionIds.join(UrlSnapshot.INTERACTION_ID_SEPARATOR);
+    }
+    UrlSnapshot.createPathIdFor = createPathIdFor;
+    /**
+     * @record
+     */
+    function NavigationOptions() { }
+    UrlSnapshot.NavigationOptions = NavigationOptions;
+    if (false) {
+        /** @type {?|undefined} */
+        NavigationOptions.prototype.replaceUrl;
+    }
+})(UrlSnapshot || (UrlSnapshot = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -4855,27 +5121,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 +5159,83 @@ 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); }));
+                if (event.navigationTrigger === 'popstate') {
+                    _this.runStateTransition((/**
+                     * @param {?} state
+                     * @return {?}
+                     */
+                    function (state) { return state.onPopState(event); }));
+                }
+                else {
+                    _this.runStateTransition((/**
+                     * @param {?} state
+                     * @return {?}
+                     */
+                    function (state) { return state.onRouterStarted(event); }));
+                }
             }
             if (event instanceof NavigationEnd) {
+                console.log(event);
                 _this.runStateTransition((/**
-                 * @param {?} session
+                 * @param {?} state
                  * @return {?}
                  */
-                function (session) { return session.onEnd(event); }));
+                function (state) { return state.onRouterEnd(event); }));
             }
             if (event instanceof NavigationError) {
+                console.log(event);
                 _this.runStateTransition((/**
-                 * @param {?} session
+                 * @param {?} state
                  * @return {?}
                  */
-                function (session) { return session.onError(event); }));
+                function (state) { return state.onRouterError(event); }));
             }
             if (event instanceof NavigationCancel) {
+                console.log(event);
                 _this.runStateTransition((/**
-                 * @param {?} session
+                 * @param {?} state
                  * @return {?}
                  */
-                function (session) { return session.onCancel(event); }));
+                function (state) { return state.onRouterCancelled(event); }));
             }
         }));
         // Push dialog state to the url so we can capture the back button.
-        _this.modalInteractionService.addActivityListener(new PlaceRouter.InteractionRouteMediator(_this.navigationSessionActive, _this.router));
+        when.listOf(_this.interactionService.activeInteractionContextIds).changes((/**
+         * @param {?} ids
+         * @param {?} previous
+         * @return {?}
+         */
+        function (ids, previous) {
+            _this.syncInteractionIdsWithRouter();
+        }), { unless: _this.navigationInProgress }); // TODO: I think the exclusive interaction prevents interactions starting while it's active so we might not need this.
+        // TODO: I think the exclusive interaction prevents interactions starting while it's active so we might not need this.
+        /** @type {?} */
+        var urlChanges = new 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 });
+            // The url has changed while we're in a transitional state
+            if (navigationState.isTransitional) {
+                /** @type {?} */
+                var navigationInteraction = _this.navigationState.interactionContext;
+                if (navigationInteraction && navigationInteraction.isActive()) {
+                    _this.runStateTransition((/**
+                     * @param {?} state
+                     * @return {?}
+                     */
+                    function (state) { return state.onBackClickedDuringNavigationInteraction(url); }));
+                }
             }
         }));
         return _this;
@@ -4954,7 +5254,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 +5264,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,9 +5370,9 @@ var PlaceRouter = /** @class */ (function (_super) {
                          */
                         function (router) {
                             /** @type {?} */
-                            var commands = _this.parseUrl(_this.router.routerState.snapshot).createRedirectCommandsFor(next);
-                            console.log('### Push Changes to route Redirect', { commands: commands });
-                            return router.navigate(commands);
+                            var urlSnapshot = _this.parseUrl(_this.router.routerState.snapshot.url).updateVisitSegments(next);
+                            console.log('### Push Changes to route Redirect', { commands: urlSnapshot.url });
+                            return _this.navigateByUrl(urlSnapshot);
                         }))];
                 }
                 return [2 /*return*/];
@@ -5095,7 +5395,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 +5404,7 @@ var PlaceRouter = /** @class */ (function (_super) {
                          */
                         function (current) {
                             /** @type {?} */
-                            var session = new NavigationState.Active(_this._navigationSessionContext, false, _this.router.routerState.snapshot.url);
+                            var session = _this.navigationState.onPlaceNavigationStart(visit, _this.getCurrentRouterUrl());
                             session.storeVisit(visit);
                             return session;
                         }));
@@ -5118,12 +5418,12 @@ 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 {?}
                              */
-                            function (session) { return session.onEnd(new NavigationEnd(-1, '', '')); }));
+                            function (session) { return session.onRouterEnd(new NavigationEnd(-1, '', '')); }));
                         }
                         return [7 /*endfinally*/];
                     case 4: return [2 /*return*/];
@@ -5131,22 +5431,26 @@ var PlaceRouter = /** @class */ (function (_super) {
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @protected
      * @param {?} transition
      * @return {?}
      */
-    PlaceRouter.prototype.runStateTransition = /**
+    PlaceRouter.prototype.runStateTransition = 
+    // @Trace()
+    /**
      * @protected
      * @param {?} transition
      * @return {?}
      */
     function (transition) {
         /** @type {?} */
-        var previous = this._navigationSessionModel.value;
+        var previous = this._navigationStateModel.value;
         /** @type {?} */
-        var next = transition(this.navigationSession);
-        this._navigationSessionModel.value = next;
+        var next = transition(this.navigationState);
+        this._navigationStateModel.value = next;
         if (next !== previous) {
             previous.dispose();
             Logger.get(this).info("Router State Transition: " + previous.toString() + " -> " + next.toString());
@@ -5185,15 +5489,114 @@ 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;
+    };
+    /**
+     * @return {?}
+     */
+    PlaceRouter.prototype.getCurrentRouteSnapshot = /**
+     * @return {?}
+     */
+    function () {
+        return this.parseUrl(this.getCurrentRouterUrl());
+    };
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    PlaceRouter.prototype.getActiveInteractionIdsFromUrl = /**
+     * @param {?} url
+     * @return {?}
+     */
+    function (url) {
+        return this.parseUrl(url).getInteractionIds();
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    PlaceRouter.prototype.hasActiveInteractionIds = 
+    // @Trace()
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    function (url) {
+        return this.getActiveInteractionIdsFromUrl(url).length > 0;
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} urlSnapshot
+     * @return {?}
+     */
+    PlaceRouter.prototype.navigateByUrl = 
+    // @Trace()
+    /**
+     * @param {?} urlSnapshot
+     * @return {?}
+     */
+    function (urlSnapshot) {
+        this.router.navigateByUrl(urlSnapshot.urlTree, urlSnapshot.getNavigationExtras());
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    PlaceRouter.prototype.syncInteractionIdsWithRouter = 
+    // @Trace()
+    /**
      * @return {?}
      */
-    function (snapshot) {
-        return new UrlSnapshot(this.urlSerializer.parse(snapshot.url));
+    function () {
+        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) {
+                // no more interactions to remove from history.
+                this.navigateByUrl(this.getCurrentRouteSnapshot().removeInteractionIds());
+            }
+            else {
+                // todo was or is...
+                this.navigateByUrl(this.getCurrentRouteSnapshot().updateInteractionIds(currentIds));
+            }
+        }
     };
     PlaceRouter.decorators = [
         { type: Injectable, args: [{
@@ -5206,9 +5609,9 @@ 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" });
     return PlaceRouter;
 }(GarbageCollector));
 if (false) {
@@ -5216,19 +5619,14 @@ 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;
     /**
@@ -5236,6 +5634,11 @@ if (false) {
      * @private
      */
     PlaceRouter.prototype._navigationSessionContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceRouter.prototype._navigationStateTypeModel;
     /**
      * @type {?}
      * @private
@@ -5260,83 +5663,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 +5753,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 +5815,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 {?}
@@ -6511,45 +6839,264 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @record
- * @template R, E
- */
-function Result() { }
-(function (Result) {
+/**
+ * @record
+ * @template R, E
+ */
+function Result() { }
+(function (Result) {
+    /**
+     * @record
+     * @template R, E
+     */
+    function Callback() { }
+    Result.Callback = Callback;
+    if (false) {
+        /** @type {?} */
+        Callback.prototype.then;
+        /** @type {?} */
+        Callback.prototype.catch;
+    }
+})(Result || (Result = {}));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ * @template D, R, E
+ */
+function ActivityOutletContext() { }
+if (false) {
+    /** @type {?} */
+    ActivityOutletContext.prototype.activityClass;
+    /** @type {?} */
+    ActivityOutletContext.prototype.activityData;
+    /**
+     * @param {?} component
+     * @return {?}
+     */
+    ActivityOutletContext.prototype.componentReady = function (component) { };
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var DialogInteractionContext = /** @class */ (function (_super) {
+    __extends(DialogInteractionContext, _super);
+    function DialogInteractionContext(dialogService, config) {
+        var _this = _super.call(this) || this;
+        _this.dialogService = dialogService;
+        _this.config = config;
+        _this._activeModel = new 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;
+    }
     /**
-     * @record
-     * @template R, E
+     * @return {?}
      */
-    function Callback() { }
-    Result.Callback = Callback;
-    if (false) {
-        /** @type {?} */
-        Callback.prototype.then;
+    DialogInteractionContextFactory.prototype.createInteractionContext = /**
+     * @return {?}
+     */
+    function () {
         /** @type {?} */
-        Callback.prototype.catch;
-    }
-})(Result || (Result = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- * @template D, R, E
- */
-function ActivityOutletContext() { }
+        var config = __assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults);
+        return new DialogInteractionContext(this.dialogService, config);
+    };
+    DialogInteractionContextFactory.decorators = [
+        { type: 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 {?} */
-    ActivityOutletContext.prototype.activityClass;
-    /** @type {?} */
-    ActivityOutletContext.prototype.activityData;
+    DialogInteractionContextFactory.prototype.active;
     /**
-     * @param {?} component
-     * @return {?}
+     * @type {?}
+     * @private
      */
-    ActivityOutletContext.prototype.componentReady = function (component) { };
+    DialogInteractionContextFactory.prototype.dialogService;
+    /** @type {?} */
+    DialogInteractionContextFactory.prototype.dialogServiceDefaults;
+    /** @type {?} */
+    DialogInteractionContextFactory.prototype.matDialogDefaultConfig;
 }
 
 /**
@@ -6626,103 +7173,6 @@ function Place(options) {
     }
 })(Place || (Place = {}));
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var VisitSanitiser = /** @class */ (function () {
-    function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
-        this.activatedRoute = activatedRoute;
-        this.router = router;
-        this.placeHistory = placeHistory;
-        this.injector = injector;
-    }
-    // @Trace()
-    // @Trace()
-    /**
-     * @param {?} visit
-     * @return {?}
-     */
-    VisitSanitiser.prototype.sanitise = 
-    // @Trace()
-    /**
-     * @param {?} visit
-     * @return {?}
-     */
-    function (visit) {
-        return __awaiter(this, void 0, void 0, function () {
-            var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        placeDef = visit.placeDefinition;
-                        if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
-                        routeIdDef = placeDef.getRouteIdParameterDef();
-                        routeId = visit.getRouteId();
-                        return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
-                    case 1:
-                        sanitisedValue = _a.sent();
-                        // console.log({routeId, sanitisedValue});
-                        // ###------- EARLY EXIT --------###
-                        if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
-                            // if the route id has changed we redirect immediately as other
-                            // parameter sanitisers might use it.
-                            return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
-                        }
-                        _a.label = 2;
-                    case 2:
-                        // if we didn't replace the routeId we continue the url present parameters.
-                        parameterDefs = placeDef.getVisitParameterDefs({
-                            includeRouteParameters: true,
-                            includeNonRouteParameters: true
-                        });
-                        sanitisedVisit = visit;
-                        i = 0;
-                        _a.label = 3;
-                    case 3:
-                        if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
-                        def = parameterDefs[i];
-                        value = visit.getParameter(def.name);
-                        return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
-                    case 4:
-                        sanitisedValue = _a.sent();
-                        if (def.hasChanged(value, sanitisedValue)) {
-                            sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
-                        }
-                        _a.label = 5;
-                    case 5:
-                        i++;
-                        return [3 /*break*/, 3];
-                    case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
-                }
-            });
-        });
-    };
-    return VisitSanitiser;
-}());
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.activatedRoute;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.placeHistory;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.injector;
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -6827,58 +7277,190 @@ var ParamMapAdapter = /** @class */ (function () {
         this.params = params;
     }
     /**
-     * @param {?} name
+     * @param {?} name
+     * @return {?}
+     */
+    ParamMapAdapter.prototype.get = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        return this.params[name];
+    };
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    ParamMapAdapter.prototype.getAll = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        /** @type {?} */
+        var value = this.get(name);
+        return Array.isArray(value) ? value : [value];
+    };
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    ParamMapAdapter.prototype.has = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        return this.keys.includes(name);
+    };
+    Object.defineProperty(ParamMapAdapter.prototype, "keys", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return Object.keys(this.params);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ParamMapAdapter;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    ParamMapAdapter.prototype.params;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NoopAuthGuard = /** @class */ (function () {
+    function NoopAuthGuard() {
+    }
+    /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    NoopAuthGuard.prototype.canActivate = /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    function (activatedRoute, state) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, true];
+            });
+        });
+    };
+    NoopAuthGuard.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    NoopAuthGuard.ctorParameters = function () { return []; };
+    /** @nocollapse */ NoopAuthGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
+    return NoopAuthGuard;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var VisitSanitiser = /** @class */ (function () {
+    function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.placeHistory = placeHistory;
+        this.injector = injector;
+    }
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} visit
      * @return {?}
      */
-    ParamMapAdapter.prototype.get = /**
-     * @param {?} name
+    VisitSanitiser.prototype.sanitise = 
+    // @Trace()
+    /**
+     * @param {?} visit
      * @return {?}
      */
-    function (name) {
-        return this.params[name];
+    function (visit) {
+        return __awaiter(this, void 0, void 0, function () {
+            var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        placeDef = visit.placeDefinition;
+                        if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
+                        routeIdDef = placeDef.getRouteIdParameterDef();
+                        routeId = visit.getRouteId();
+                        return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
+                    case 1:
+                        sanitisedValue = _a.sent();
+                        // console.log({routeId, sanitisedValue});
+                        // ###------- EARLY EXIT --------###
+                        if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
+                            // if the route id has changed we redirect immediately as other
+                            // parameter sanitisers might use it.
+                            return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
+                        }
+                        _a.label = 2;
+                    case 2:
+                        // if we didn't replace the routeId we continue the url present parameters.
+                        parameterDefs = placeDef.getVisitParameterDefs({
+                            includeRouteParameters: true,
+                            includeNonRouteParameters: true
+                        });
+                        sanitisedVisit = visit;
+                        i = 0;
+                        _a.label = 3;
+                    case 3:
+                        if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
+                        def = parameterDefs[i];
+                        value = visit.getParameter(def.name);
+                        return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
+                    case 4:
+                        sanitisedValue = _a.sent();
+                        if (def.hasChanged(value, sanitisedValue)) {
+                            sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
+                        }
+                        _a.label = 5;
+                    case 5:
+                        i++;
+                        return [3 /*break*/, 3];
+                    case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
+                }
+            });
+        });
     };
+    return VisitSanitiser;
+}());
+if (false) {
     /**
-     * @param {?} name
-     * @return {?}
-     */
-    ParamMapAdapter.prototype.getAll = /**
-     * @param {?} name
-     * @return {?}
+     * @type {?}
+     * @private
      */
-    function (name) {
-        /** @type {?} */
-        var value = this.get(name);
-        return Array.isArray(value) ? value : [value];
-    };
+    VisitSanitiser.prototype.activatedRoute;
     /**
-     * @param {?} name
-     * @return {?}
+     * @type {?}
+     * @private
      */
-    ParamMapAdapter.prototype.has = /**
-     * @param {?} name
-     * @return {?}
+    VisitSanitiser.prototype.router;
+    /**
+     * @type {?}
+     * @private
      */
-    function (name) {
-        return this.keys.includes(name);
-    };
-    Object.defineProperty(ParamMapAdapter.prototype, "keys", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return Object.keys(this.params);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return ParamMapAdapter;
-}());
-if (false) {
+    VisitSanitiser.prototype.placeHistory;
     /**
      * @type {?}
      * @private
      */
-    ParamMapAdapter.prototype.params;
+    VisitSanitiser.prototype.injector;
 }
 
 /**
@@ -6888,12 +7470,16 @@ if (false) {
 /**
  * @abstract
  */
-var AbstractPlaceGuard = /** @class */ (function () {
-    function AbstractPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
+var  /**
+ * @abstract
+ */
+PlaceGuard = /** @class */ (function () {
+    function PlaceGuard(router, urlSerializer, placeRouter, placeHistory, interactionService, injector) {
         this.router = router;
         this.urlSerializer = urlSerializer;
         this.placeRouter = placeRouter;
         this.placeHistory = placeHistory;
+        this.interactionService = interactionService;
         this.injector = injector;
     }
     // @Trace()
@@ -6903,7 +7489,7 @@ var AbstractPlaceGuard = /** @class */ (function () {
      * @param {?} state
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.canActivate = 
+    PlaceGuard.prototype.canActivate = 
     // @Trace()
     /**
      * @param {?} activatedRoute
@@ -6914,44 +7500,59 @@ var AbstractPlaceGuard = /** @class */ (function () {
         return __awaiter(this, void 0, void 0, function () {
             var _this = this;
             return __generator(this, function (_a) {
+                // TODO: this is ugly now that I'm return UrlSnapshots and not UrlTrees.  It'd be better if the functions
+                //        weren't nested or if I implemented a handler chain.
                 return [2 /*return*/, this.authorisePlaceThen(activatedRoute, state, (/**
                      * @param {?} placeDefinition
                      * @return {?}
                      */
                     function (placeDefinition) { return __awaiter(_this, void 0, void 0, function () {
-                        var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, commands;
+                        var result;
+                        var _this = this;
                         return __generator(this, function (_a) {
                             switch (_a.label) {
-                                case 0:
-                                    // Parse our route params.
-                                    params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
-                                    parsedParams = placeDefinition.parseRouteParams(params);
-                                    initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
-                                    sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
-                                    return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                case 0: return [4 /*yield*/, this.cleanInteractionState(activatedRoute, state, (/**
+                                     * @return {?}
+                                     */
+                                    function () { return __awaiter(_this, void 0, void 0, function () {
+                                        var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, urlSnapshot;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0:
+                                                    // Parse our route params.
+                                                    params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                                                    parsedParams = placeDefinition.parseRouteParams(params);
+                                                    initialVisit = this.placeRouter.navigationState.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                                                    sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                                                    return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                                case 1:
+                                                    sanitisedVisit = _a.sent();
+                                                    // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
+                                                    this.placeRouter.navigationState.storeVisit(sanitisedVisit);
+                                                    if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
+                                                        // Regenerate the url
+                                                        urlSnapshot = this.placeRouter.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
+                                                        console.log('##### Place Guard Redirect', urlSnapshot);
+                                                        return [2 /*return*/, urlSnapshot];
+                                                    }
+                                                    else {
+                                                        return [2 /*return*/, true];
+                                                    }
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    }); }))];
                                 case 1:
-                                    sanitisedVisit = _a.sent();
-                                    // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
-                                    this.placeRouter.navigationSession.storeVisit(sanitisedVisit);
-                                    if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
-                                        // Regenerate the url
-                                        commands = this.placeRouter.parseUrl(state).createRedirectCommandsFor(sanitisedVisit);
-                                        console.log('##### Place Guard Redirect', commands);
-                                        return [2 /*return*/, this.router.createUrlTree(commands, {
-                                                replaceUrl: true,
-                                                skipLocationChange: false
-                                            })];
-                                    }
-                                    else {
-                                        return [2 /*return*/, true];
-                                    }
-                                    return [2 /*return*/];
+                                    result = _a.sent();
+                                    return [2 /*return*/, this.handleGuardResult(result)];
                             }
                         });
                     }); }))];
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} component
      * @param {?} currentRoute
@@ -6959,7 +7560,9 @@ var AbstractPlaceGuard = /** @class */ (function () {
      * @param {?=} nextState
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.canDeactivate = /**
+    PlaceGuard.prototype.canDeactivate = 
+    // @Trace()
+    /**
      * @param {?} component
      * @param {?} currentRoute
      * @param {?} currentState
@@ -6968,32 +7571,59 @@ var AbstractPlaceGuard = /** @class */ (function () {
      */
     function (component, currentRoute, currentState, nextState) {
         return __awaiter(this, void 0, void 0, function () {
+            var currentUrl, nextUrl, result;
             return __generator(this, function (_a) {
-                return [2 /*return*/, this.placeRouter.navigationSession.canDeactivatePlace(component, this.placeRouter.parseUrl(nextState))];
+                switch (_a.label) {
+                    case 0:
+                        currentUrl = this.placeRouter.parseUrl(currentState.url);
+                        nextUrl = this.placeRouter.parseUrl(nextState.url);
+                        return [4 /*yield*/, this.placeRouter.navigationState.canDeactivatePlace(component, currentUrl, nextUrl)];
+                    case 1:
+                        result = _a.sent();
+                        return [2 /*return*/, this.handleGuardResult(result)];
+                }
             });
         });
     };
+    /**
+     * @private
+     * @param {?} result
+     * @return {?}
+     */
+    PlaceGuard.prototype.handleGuardResult = /**
+     * @private
+     * @param {?} result
+     * @return {?}
+     */
+    function (result) {
+        if (result instanceof UrlSnapshot) {
+            return result.urlTree;
+        }
+        else {
+            return result;
+        }
+    };
     // @Trace()
     // @Trace()
     /**
      * @protected
      * @param {?} activatedRoute
      * @param {?} state
-     * @param {?} canActivate
+     * @param {?} runPlaceGuards
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.authorisePlaceThen = 
+    PlaceGuard.prototype.authorisePlaceThen = 
     // @Trace()
     /**
      * @protected
      * @param {?} activatedRoute
      * @param {?} state
-     * @param {?} canActivate
+     * @param {?} runPlaceGuards
      * @return {?}
      */
-    function (activatedRoute, state, canActivate) {
+    function (activatedRoute, state, runPlaceGuards) {
         return __awaiter(this, void 0, void 0, function () {
-            var placeDefinition, authorised, _a;
+            var placeDefinition, authoriseResult, _a;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -7008,13 +7638,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)];
@@ -7023,12 +7654,16 @@ var AbstractPlaceGuard = /** @class */ (function () {
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
      */
-    AbstractPlaceGuard.prototype.isAuthorised = /**
+    PlaceGuard.prototype.isAuthorised = 
+    // @Trace()
+    /**
      * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
@@ -7042,195 +7677,79 @@ var AbstractPlaceGuard = /** @class */ (function () {
             });
         });
     };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
-        __metadata("design:returntype", Promise)
-    ], AbstractPlaceGuard.prototype, "isAuthorised", null);
-    return AbstractPlaceGuard;
-}());
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.urlSerializer;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.placeRouter;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.placeHistory;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractPlaceGuard.prototype.injector;
-    /**
-     * @abstract
-     * @param {?} injector
-     * @return {?}
-     */
-    AbstractPlaceGuard.prototype.getAuthGuard = function (injector) { };
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var InteractionGuard = /** @class */ (function () {
-    function InteractionGuard(router, injector, placeRouter, angularLocation, modalInteractionService) {
-        this.router = router;
-        this.injector = injector;
-        this.placeRouter = placeRouter;
-        this.angularLocation = angularLocation;
-        this.modalInteractionService = modalInteractionService;
-    }
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} route
      * @param {?} state
+     * @param {?} then
      * @return {?}
      */
-    InteractionGuard.prototype.canActivate = /**
+    PlaceGuard.prototype.cleanInteractionState = 
+    // @Trace()
+    /**
      * @param {?} route
      * @param {?} state
+     * @param {?} then
      * @return {?}
      */
-    function (route, state) {
-        /** @type {?} */
-        var url = this.router.parseUrl(state.url);
-        if (!this.modalInteractionService.isActive() && url.root.children[PlaceRouter.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];
-            return url;
-        }
-        else {
-            return true;
-        }
-    };
-    /**
-     * @param {?} component
-     * @param {?} currentRoute
-     * @param {?} currentState
-     * @param {?=} nextState
-     * @return {?}
-     */
-    InteractionGuard.prototype.canDeactivate = /**
-     * @param {?} component
-     * @param {?} currentRoute
-     * @param {?} currentState
-     * @param {?=} nextState
-     * @return {?}
-     */
-    function (component, currentRoute, currentState, nextState) {
+    function (route, state, then) {
         return __awaiter(this, void 0, void 0, function () {
-            var popstateReturnUrl, activity;
+            var url;
             return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        popstateReturnUrl = this.placeRouter.navigationSession.startingUrl;
-                        if (!this.modalInteractionService.isActive()) return [3 /*break*/, 2];
-                        // The activity is still active so the route change was triggered by the back button.
-                        return [4 /*yield*/, this.modalInteractionService.getCurrentActivity()];
-                    case 1:
-                        activity = _a.sent();
-                        activity.cancel();
-                        // See ModalInteractionSession#onStart() for the url updating.
-                        return [2 /*return*/, false];
-                    case 2: return [2 /*return*/, true];
+                url = this.placeRouter.parseUrl(state.url);
+                if (!this.interactionService.isActive() && url.hasInteractionIds()) {
+                    // This happens if we reload the page or the url was pasted as the route should only be activated
+                    // after the interaction context has become active.
+                    return [2 /*return*/, url.removeInteractionIds()];
+                }
+                else {
+                    return [2 /*return*/, then()];
                 }
+                return [2 /*return*/];
             });
         });
     };
-    InteractionGuard.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    InteractionGuard.ctorParameters = function () { return [
-        { type: Router },
-        { type: Injector },
-        { type: PlaceRouter },
-        { type: Location },
-        { type: ModalInteractionService }
-    ]; };
-    /** @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" });
-    return InteractionGuard;
+    return PlaceGuard;
 }());
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.router;
+    PlaceGuard.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.injector;
+    PlaceGuard.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.placeRouter;
+    PlaceGuard.prototype.placeRouter;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.angularLocation;
+    PlaceGuard.prototype.placeHistory;
     /**
      * @type {?}
      * @private
      */
-    InteractionGuard.prototype.modalInteractionService;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var NoopAuthGuard = /** @class */ (function () {
-    function NoopAuthGuard() {
-    }
+    PlaceGuard.prototype.interactionService;
     /**
-     * @param {?} activatedRoute
-     * @param {?} state
-     * @return {?}
+     * @type {?}
+     * @private
      */
-    NoopAuthGuard.prototype.canActivate = /**
-     * @param {?} activatedRoute
-     * @param {?} state
+    PlaceGuard.prototype.injector;
+    /**
+     * @abstract
+     * @param {?} injector
      * @return {?}
      */
-    function (activatedRoute, state) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, true];
-            });
-        });
-    };
-    NoopAuthGuard.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    NoopAuthGuard.ctorParameters = function () { return []; };
-    /** @nocollapse */ NoopAuthGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
-    return NoopAuthGuard;
-}());
+    PlaceGuard.prototype.getAuthGuard = function (injector) { };
+}
 
 /**
  * @fileoverview added by tsickle
@@ -7512,5 +8031,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, 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, InteractionModule, InteractionOutletComponent, InteractionService, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, NavigationState, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, 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