@coolon/angular-ui-powerups 0.0.98 → 0.0.102

package/fesm2015/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 { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, 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 { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, Trace, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, Guard, StoreInValueModel, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 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';
 
 /**
@@ -896,10 +896,6 @@ if (false) {
  * @abstract
  */
 class InteractionContext extends GarbageCollector {
-    constructor() {
-        super(...arguments);
-        this.activityListeners = new EventListenerList();
-    }
     /**
      * Returns true if an activity is currently running.
      * @return {?}
@@ -908,49 +904,76 @@ class InteractionContext extends GarbageCollector {
         return this.active.value;
     }
     /**
-     * @param {?} listener
      * @return {?}
      */
-    addActivityListener(listener) {
-        return this.activityListeners.add(listener);
+    dispose() {
+        // TODO: think about auto cancelling any outstanding activity on dispose.
+        //       See NavigationState.Navigating for a use-case.
+        assert.isFalsey(this.isActive());
+        super.dispose();
     }
     /**
-     * @protected
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
      * @return {?}
      */
-    notifyActivityStarted() {
-        this.activityListeners.fire((/**
-         * @param {?} l
-         * @return {?}
-         */
-        l => l.onActivityStarted()));
+    cancelCurrentActivity() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { when } = Dsl.disposeWith(this);
+            /** @type {?} */
+            const activity = yield this.getCurrentActivity();
+            return new Promise((/**
+             * @param {?} resolve
+             * @return {?}
+             */
+            resolve => {
+                when.valueOf(this.activeActivity)
+                    .changes((/**
+                 * @param {?} nextActivity
+                 * @return {?}
+                 */
+                nextActivity => {
+                    resolve(!nextActivity);
+                }), { once: true });
+                activity.cancel();
+            }));
+        });
     }
     /**
-     * @protected
      * @return {?}
      */
-    notifyActivityFinished() {
-        this.activityListeners.fire((/**
-         * @param {?} l
-         * @return {?}
-         */
-        l => l.onActivityFinished()));
+    abort() {
+        return __awaiter(this, void 0, void 0, function* () {
+            assert.isTruthy(this.isActive());
+            /** @type {?} */
+            let count = 1;
+            yield this.cancelCurrentActivity();
+            console.log(`aborted -> ${count++}`);
+            while (this.isActive()) {
+                yield this.cancelCurrentActivity();
+                console.log(`aborted -> ${count++}`);
+            }
+        });
     }
 }
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], InteractionContext.prototype, "abort", null);
 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 () { };
@@ -991,23 +1014,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
@@ -1156,13 +1162,14 @@ class InteractionContextBase extends InteractionContext {
          */
         this._activityListDelegate = new DelegatingListModel();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        when.listOf(this.activityList).becomesPopulated((/**
-         * @param {?} activities
+        this._currentActivity = chain(this.activityList).last();
+        when.valueOf(this._currentActivity).becomesTruthy((/**
+         * @param {?} activity
          * @return {?}
          */
-        (activities) => {
+        (activity) => {
             if (this.deferredGetCurrentActivity) {
-                this.deferredGetCurrentActivity.resolve(last(activities));
+                this.deferredGetCurrentActivity.resolve(activity);
                 this.deferredGetCurrentActivity = null;
             }
         }));
@@ -1181,6 +1188,12 @@ class InteractionContextBase extends InteractionContext {
     get activityList() {
         return this._activityListDelegate.readonly;
     }
+    /**
+     * @return {?}
+     */
+    get activeActivity() {
+        return this._currentActivity;
+    }
     /**
      * Returns the activity that is currently active.
      * This model is only updated in the next tick after the view has been updated.
@@ -1197,12 +1210,14 @@ class InteractionContextBase extends InteractionContext {
                     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 this.deferredGetCurrentActivity.promise;
                     }
                     else {
-                        return last(this.activityList.value);
+                        return this._currentActivity.value;
                     }
                 }
             }
@@ -1276,6 +1291,11 @@ if (false) {
      * @private
      */
     InteractionContextBase.prototype.deferredGetCurrentActivity;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionContextBase.prototype._currentActivity;
     /**
      * @abstract
      * @protected
@@ -1480,6 +1500,12 @@ class TabContext {
         this._complete = true;
         this.activityCallbacks.onCancel(error);
     }
+    /**
+     * @return {?}
+     */
+    dispose() {
+        this.component.dispose();
+    }
 }
 if (false) {
     /**
@@ -1562,9 +1588,6 @@ class ActivityContainerComponent extends InteractionContextBase {
     get initialActivityOutletContext() {
         return this._initialActivityOutletContext.value;
     }
-    // get isFinished() {
-    //   return !this._initialActivityOutletContext;
-    // }
     /**
      * @return {?}
      */
@@ -1632,6 +1655,7 @@ class ActivityContainerComponent extends InteractionContextBase {
      * @return {?}
      */
     finishInitialActivity() {
+        this.updateActivityList();
         this._initialActivityOutletContext.value = null;
         this.initialActivityOutletContextEvent.emit(null);
     }
@@ -1651,12 +1675,23 @@ class ActivityContainerComponent extends InteractionContextBase {
      */
     cleanupStaleNestedActivities() {
         if (this.tabs.selectedIndex < this.activityTabs.length - 1) {
+            /** @type {?} */
+            const tabs = this.activityTabs.value;
+            /** @type {?} */
+            const remainingActivities = tabs.slice(0, 1 + this.tabs.selectedIndex);
+            /** @type {?} */
+            const finishedActivityTabs = tabs.slice(1 + this.tabs.selectedIndex);
+            finishedActivityTabs.forEach((/**
+             * @param {?} a
+             * @return {?}
+             */
+            a => a.dispose()));
             this.activityTabs.runInTransaction((/**
              * @param {?} draft
              * @return {?}
              */
             draft => {
-                draft.value = draft.value.slice(0, 1 + this.tabs.selectedIndex);
+                draft.value = remainingActivities;
             }));
         }
     }
@@ -1757,6 +1792,249 @@ if (false) {
     ActivityContainerComponent.prototype._activityList;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ */
+class ModalInteractionContextFactory {
+}
+if (false) {
+    /**
+     * @abstract
+     * @return {?}
+     */
+    ModalInteractionContextFactory.prototype.createInteractionContext = function () { };
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+let inplaceMonitorCount = 0;
+class InteractionService {
+    /**
+     * @param {?} modelInteractionContextFactory
+     */
+    constructor(modelInteractionContextFactory) {
+        this.modelInteractionContextFactory = modelInteractionContextFactory;
+        this.garbage = new GarbageCollector();
+        this.exclusiveContext = new MutableValueModel();
+        this._activeModalInteractionContextModel = new MutableValueModel();
+        this._activeInlineInteractionContextModel = new MutableValueModel();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this.garbage);
+        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 {?}
+     */
+    isActive() {
+        return this.active.value;
+    }
+    /**
+     * @return {?}
+     */
+    isModalActive() {
+        return this.modelInteractionActive.value;
+    }
+    /**
+     * @param {?} disposable
+     * @return {?}
+     */
+    createModalInteractionContextFor(disposable) {
+        /** @type {?} */
+        const context = this.modelInteractionContextFactory.createInteractionContext();
+        disposable.registerDisposable(new InteractionService.Monitor('modal', context, this._activeModalInteractionContextModel, this.exclusiveContext));
+        return context;
+    }
+    /**
+     * @param {?} interactionContext
+     * @return {?}
+     */
+    _registerInplaceInteractionContext(interactionContext) {
+        interactionContext.registerDisposable(new InteractionService.Monitor(`ip${++inplaceMonitorCount}`, interactionContext, this._activeInlineInteractionContextModel, this.exclusiveContext));
+    }
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    getActiveContext() {
+        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.
+     * @return {?}
+     */
+    _createExclusiveModalInteractionContext() {
+        this.exclusiveContext.value = this.modelInteractionContextFactory.createInteractionContext();
+        /** @type {?} */
+        const self = this;
+        this.exclusiveContext.value.registerDisposable({
+            /**
+             * @return {?}
+             */
+            dispose() {
+                self.exclusiveContext.value = null;
+            }
+        });
+        return this.exclusiveContext.value;
+    }
+}
+InteractionService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+InteractionService.ctorParameters = () => [
+    { type: ModalInteractionContextFactory }
+];
+/** @nocollapse */ InteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionService_Factory() { return new InteractionService(ɵɵinject(ModalInteractionContextFactory)); }, token: InteractionService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype.garbage;
+    /** @type {?} */
+    InteractionService.prototype.active;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype.exclusiveContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype._activeModalInteractionContextModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype._activeInlineInteractionContextModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionService.prototype._activeInteractionContext;
+    /** @type {?} */
+    InteractionService.prototype.activeInteractionContextIds;
+    /** @type {?} */
+    InteractionService.prototype.modelInteractionActive;
+    /** @type {?} */
+    InteractionService.prototype.inlineInteractionActive;
+    /** @type {?} */
+    InteractionService.prototype.modelInteractionContextFactory;
+}
+(function (InteractionService) {
+    /**
+     * @record
+     */
+    function Callback() { }
+    InteractionService.Callback = Callback;
+    if (false) {
+        /**
+         * @param {?} monitor
+         * @return {?}
+         */
+        Callback.prototype.onStarted = function (monitor) { };
+        /**
+         * @param {?} monitor
+         * @return {?}
+         */
+        Callback.prototype.onFinished = function (monitor) { };
+    }
+    class Monitor extends GarbageCollector {
+        /**
+         * @param {?} id
+         * @param {?} interactionContext
+         * @param {?} currentActiveMonitor
+         * @param {?} exclusiveContext
+         */
+        constructor(id, interactionContext, currentActiveMonitor, exclusiveContext) {
+            super();
+            this.id = id;
+            this.interactionContext = interactionContext;
+            this.currentActiveMonitor = currentActiveMonitor;
+            this.exclusiveContext = exclusiveContext;
+            const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+            when.valueOf(interactionContext.active).becomesTruthy((/**
+             * @return {?}
+             */
+            () => this.onStarted()));
+            when.valueOf(interactionContext.active).becomesFalsey((/**
+             * @return {?}
+             */
+            () => this.onFinished()));
+            interactionContext.registerDisposable(this);
+        }
+        /**
+         * @protected
+         * @return {?}
+         */
+        onStarted() {
+            this.assertCanStart();
+            this.currentActiveMonitor.value = this;
+        }
+        /**
+         * @private
+         * @return {?}
+         */
+        assertCanStart() {
+            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 {?}
+         */
+        onFinished() {
+            this.assertCurrentlyActive();
+            this.currentActiveMonitor.value = null;
+        }
+        /**
+         * @private
+         * @return {?}
+         */
+        assertCurrentlyActive() {
+            assert$1.isTruthy(this.currentActiveMonitor.value === this);
+        }
+    }
+    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
@@ -1765,9 +2043,14 @@ if (false) {
  * @template D, R, E
  */
 class InplaceInteractionContextComponent extends InteractionContextBase {
-    constructor() {
+    /**
+     * @param {?} interactionService
+     */
+    constructor(interactionService) {
         super();
+        this.interactionService = interactionService;
         this._active = new MutableValueModel(false);
+        this.interactionService._registerInplaceInteractionContext(this);
     }
     /**
      * @return {?}
@@ -1829,7 +2112,9 @@ InplaceInteractionContextComponent.decorators = [
             }] }
 ];
 /** @nocollapse */
-InplaceInteractionContextComponent.ctorParameters = () => [];
+InplaceInteractionContextComponent.ctorParameters = () => [
+    { type: InteractionService }
+];
 InplaceInteractionContextComponent.propDecorators = {
     interactionContext: [{ type: ViewChild, args: ['activityContainer', { static: true },] }]
 };
@@ -1843,6 +2128,8 @@ if (false) {
      * @private
      */
     InplaceInteractionContextComponent.prototype._active;
+    /** @type {?} */
+    InplaceInteractionContextComponent.prototype.interactionService;
 }
 
 /**
@@ -1863,409 +2150,6 @@ InteractionOutletComponent.decorators = [
 /** @nocollapse */
 InteractionOutletComponent.ctorParameters = () => [];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class DialogInteractionContext extends InteractionContextBase {
-    /**
-     * @param {?} dialogService
-     * @param {?} config
-     */
-    constructor(dialogService, config) {
-        super();
-        this.dialogService = dialogService;
-        this.config = config;
-        this._activeModel = new MutableValueModel(false);
-        assert$1.notNil(dialogService);
-        this.onDispose((/**
-         * @return {?}
-         */
-        () => {
-            if (this.isActive()) {
-                lang.illegalState('Dispose called while active.');
-            }
-        }));
-    }
-    /**
-     * @return {?}
-     */
-    get active() {
-        return this._activeModel.readonly;
-    }
-    /**
-     * @protected
-     * @template D, R, E
-     * @param {?} activityType
-     * @param {?} data
-     * @param {?=} disableClose
-     * @return {?}
-     */
-    _startActivity(activityType, data, disableClose = true) {
-        if (this.isActive()) {
-            lang.illegalState(`Activity already in progress: ${this.activityList.value.map((/**
-             * @param {?} a
-             * @return {?}
-             */
-            a => a.constructor.name)).join(', ')}`);
-        }
-        this._activeModel.value = true;
-        this.notifyActivityStarted();
-        /** @type {?} */
-        const config = Object.assign({}, this.config, {
-            data,
-            disableClose,
-            panelClass: 'dialog-interaction-service'
-        });
-        /** @type {?} */
-        const self = this;
-        /** @type {?} */
-        const matDialogRef = (/** @type {?} */ (this.dialogService.open(ActivityContainerComponent, config)));
-        return new Promise((/**
-         * @param {?} resolve
-         * @param {?} reject
-         * @return {?}
-         */
-        (resolve, reject) => {
-            /** @type {?} */
-            const activityContainer = matDialogRef.componentInstance;
-            self.safelyUpdateActivityListDelegate(activityContainer.activityList);
-            activityContainer.initialActivityOutletContext = {
-                activityClass: activityType,
-                activityData: data,
-                /**
-                 * @param {?} result
-                 * @return {?}
-                 */
-                onDone(result) {
-                    resolve(result);
-                    matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
-                },
-                /**
-                 * @param {?} error
-                 * @return {?}
-                 */
-                onCancel(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 {?}
-             */
-            promiseAlreadyFinished => {
-                if (!promiseAlreadyFinished) {
-                    reject('auto-closed');
-                }
-            }));
-            matDialogRef.updateSize();
-            matDialogRef.afterOpened().subscribe((/**
-             * @param {?} promiseAlreadyFinished
-             * @return {?}
-             */
-            promiseAlreadyFinished => {
-                matDialogRef.updateSize();
-            }));
-        })).finally((/**
-         * @return {?}
-         */
-        () => {
-            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
-     * @return {?}
-     */
-    safelyUpdateActivityListDelegate(delegate) {
-        setTimeout((/**
-         * @return {?}
-         */
-        () => this.setActivityList(delegate)));
-    }
-}
-DialogInteractionContext.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-DialogInteractionContext.ctorParameters = () => [
-    { type: MatDialog },
-    { type: MatDialogConfig }
-];
-/** @nocollapse */ DialogInteractionContext.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionContext_Factory() { return new DialogInteractionContext(ɵɵinject(MatDialog$1), ɵɵinject(MatDialogConfig)); }, token: DialogInteractionContext, providedIn: "root" });
-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
- */
-class Guard extends ValueModel {
-    constructor() {
-        super({ initialValue: false });
-    }
-    /**
-     * @return {?}
-     */
-    get value() {
-        return this.store.read();
-    }
-    /**
-     * @template R
-     * @param {?} fun
-     * @return {?}
-     */
-    whileTrue(fun) {
-        this.startTransaction().commit(true);
-        try {
-            return fun();
-        }
-        finally {
-            this.startTransaction().commit(false);
-        }
-    }
-    /**
-     * @template R
-     * @param {?} fun
-     * @param {?=} defaultValue
-     * @return {?}
-     */
-    runIfFalse(fun, defaultValue = null) {
-        return !this.value ? fun() : defaultValue;
-    }
-}
-/**
- * @abstract
- */
-class ModalInteractionService extends GarbageCollector {
-    constructor() {
-        super();
-        this._activityListeners = new EventListenerList();
-    }
-    /**
-     * @return {?}
-     */
-    isActive() {
-        return this.active.value;
-    }
-    /**
-     * @param {?} listener
-     * @return {?}
-     */
-    addActivityListener(listener) {
-        return this._activityListeners.add(listener);
-    }
-    /**
-     * @protected
-     * @return {?}
-     */
-    notifyActivityStarted() {
-        this._activityListeners.fire((/**
-         * @param {?} l
-         * @return {?}
-         */
-        l => l.onActivityStarted()));
-    }
-    /**
-     * @protected
-     * @return {?}
-     */
-    notifyActivityFinished() {
-        this._activityListeners.fire((/**
-         * @param {?} l
-         * @return {?}
-         */
-        l => l.onActivityFinished()));
-    }
-}
-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 {?} */
-const DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
-class DialogInteractionService extends ModalInteractionService {
-    /**
-     * @param {?} dialogService
-     * @param {?} dialogServiceDefaults
-     * @param {?} matDialogDefaultConfig
-     */
-    constructor(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
-        super();
-        this.dialogService = dialogService;
-        this.dialogServiceDefaults = dialogServiceDefaults;
-        this.matDialogDefaultConfig = matDialogDefaultConfig;
-        this._activeInteractionContextModel = new MutableValueModel();
-        assert$1.notNil(dialogService);
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.active = chain(this._activeInteractionContextModel).isNotNil();
-    }
-    /**
-     * @param {?} disposable
-     * @return {?}
-     */
-    createInteractionContextFor(disposable) {
-        return disposable.registerDisposable(this._createInteractionContext());
-    }
-    /**
-     * @return {?}
-     */
-    _createInteractionContext() {
-        /** @type {?} */
-        const config = Object.assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults);
-        /** @type {?} */
-        const self = this;
-        /** @type {?} */
-        const dialogInteractionContext = new DialogInteractionContext(this.dialogService, config);
-        dialogInteractionContext.registerDisposable(dialogInteractionContext.addActivityListener({
-            /**
-             * @return {?}
-             */
-            onActivityStarted() {
-                self.onActivityStarted(dialogInteractionContext);
-            },
-            /**
-             * @return {?}
-             */
-            onActivityFinished() {
-                self.onActivityFinished(dialogInteractionContext);
-            }
-        }));
-        return dialogInteractionContext;
-    }
-    /**
-     * @return {?}
-     */
-    createExclusiveInteractionContext() {
-        this.exclusiveContext = this._createInteractionContext();
-        /** @type {?} */
-        const self = this;
-        this.exclusiveContext.registerDisposable({
-            /**
-             * @return {?}
-             */
-            dispose() {
-                self.exclusiveContext = null;
-            }
-        });
-        return this.exclusiveContext;
-    }
-    // @Trace()
-    /**
-     * @param {?} dialogInteractionContext
-     * @return {?}
-     */
-    onActivityStarted(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()
-    /**
-     * @param {?} dialogInteractionContext
-     * @return {?}
-     */
-    onActivityFinished(dialogInteractionContext) {
-        assert$1.isTruthy(this._activeInteractionContextModel.value === dialogInteractionContext);
-        this._activeInteractionContextModel.value = null;
-        this.notifyActivityFinished();
-    }
-    /**
-     * @return {?}
-     */
-    getCurrentActivity() {
-        return __awaiter(this, void 0, void 0, function* () {
-            assert$1.isTruthy(this.isActive());
-            return this._activeInteractionContextModel.value.getCurrentActivity();
-        });
-    }
-}
-DialogInteractionService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-DialogInteractionService.ctorParameters = () => [
-    { type: MatDialog },
-    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
-    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
-];
-/** @nocollapse */ DialogInteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(ɵɵinject(MatDialog$1), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    DialogInteractionService.prototype._activeInteractionContextModel;
-    /** @type {?} */
-    DialogInteractionService.prototype.active;
-    /**
-     * @type {?}
-     * @private
-     */
-    DialogInteractionService.prototype.exclusiveContext;
-    /**
-     * @type {?}
-     * @private
-     */
-    DialogInteractionService.prototype.dialogService;
-    /** @type {?} */
-    DialogInteractionService.prototype.dialogServiceDefaults;
-    /** @type {?} */
-    DialogInteractionService.prototype.matDialogDefaultConfig;
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2304,7 +2188,7 @@ InteractionModule.decorators = [
                     AlertDialogComponent
                 ],
                 providers: [
-                    DialogInteractionService,
+                    InteractionService,
                 ]
             },] }
 ];
@@ -3082,57 +2966,89 @@ if (false) {
 class PlaceComponentDeactivationHandler {
     /**
      * @param {?} component
-     * @param {?} navigationSession
+     * @param {?} navigationState
+     * @param {?} isPrimaryComponent
      */
-    constructor(component, navigationSession) {
+    constructor(component, navigationState, isPrimaryComponent) {
         this.component = component;
-        this.navigationSession = navigationSession;
+        this.navigationState = navigationState;
+        this.isPrimaryComponent = isPrimaryComponent;
+    }
+    /**
+     * @return {?}
+     */
+    get interactionService() {
+        return this.navigationState.interactionService;
+    }
+    /**
+     * @return {?}
+     */
+    get placeRouter() {
+        return this.navigationState.placeRouter;
     }
     /**
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    canDeactivate(nextState) {
+    canDeactivate(currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
             // 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 this.canDeactivatePromise;
         });
     }
+    // @Trace()
     /**
      * @protected
+     * @param {?} currentUrl
      * @param {?} nextState
      * @return {?}
      */
-    canDeactivateComponent(nextState) {
+    canDeactivateComponent(currentUrl, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
+            console.log(this.navigationState.toString());
             // Automatically cancel any active activities if the navigation session was triggered by the back button.
-            // any other navigations (such as the user clicking a differnt place) must be handled by the component itself
-            // during the canDeativate method.  If we handled more than just the pop state then it leads to the UI ignoring
-            // clicks and just cancelling things which is deeply disconcerting.
-            if (this.navigationSession.isPopState && this.component.interactionContext && this.component.interactionContext.isActive()) {
-                // 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...
-                /** @type {?} */
-                const activity = yield this.component.interactionContext.getCurrentActivity();
-                activity.cancel(null);
-                return false; // ..and stay where we are.
+            // If we handled more than just the pop state then it leads to the UI ignoring clicks and just cancelling things which is deeply disconcerting.
+            if (this.navigationState.isPopState) {
+                if (this.isPrimaryComponent && this.interactionService.isModalActive()) {
+                    /** @type {?} */
+                    const routeIds = this.placeRouter.getActiveInteractionIdsFromUrl(nextState.url);
+                    /** @type {?} */
+                    const currentIds = this.interactionService.activeInteractionContextIds.value;
+                    if (!isEqual(currentIds, routeIds)) {
+                        yield this.interactionService.getActiveContext().cancelCurrentActivity();
+                        return currentUrl.updateInteractionIds(this.interactionService.activeInteractionContextIds.value);
+                    }
+                }
+                else {
+                    // check if the component has an in place interaction
+                    if (this.component.interactionContext && this.component.interactionContext.isActive()) {
+                        yield this.component.interactionContext.cancelCurrentActivity();
+                        return currentUrl
+                            .updateInteractionIds(this.interactionService.activeInteractionContextIds.value);
+                    }
+                }
             }
             // 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 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 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 false;
+                }
             }
             return true;
         });
@@ -3158,7 +3074,9 @@ if (false) {
     /** @type {?} */
     PlaceComponentDeactivationHandler.prototype.component;
     /** @type {?} */
-    PlaceComponentDeactivationHandler.prototype.navigationSession;
+    PlaceComponentDeactivationHandler.prototype.navigationState;
+    /** @type {?} */
+    PlaceComponentDeactivationHandler.prototype.isPrimaryComponent;
 }
 
 /**
@@ -3170,32 +3088,99 @@ if (false) {
  */
 class NavigationState extends GarbageCollector {
     /**
-     * @param {?} context
+     * @param {?} context
+     */
+    constructor(context) {
+        super();
+        this.context = context;
+        this._visits = new Map();
+    }
+    /**
+     * @return {?}
+     */
+    get name() {
+        return this.constructor.name;
+    }
+    /**
+     * @return {?}
+     */
+    get idle() {
+        return !this.isTransitional;
+    }
+    /**
+     * @return {?}
+     */
+    get placeRouter() {
+        return this.context.placeRouter;
+    }
+    /**
+     * @return {?}
+     */
+    get interactionService() {
+        return this.context.interactionService;
+    }
+    /**
+     * @return {?}
+     */
+    get interactionContext() {
+        return null;
+    }
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    storeVisit(visit) {
+        this._visits.set(visit.placeDefinition, visit);
+    }
+    /**
+     * @param {?} placeDef
+     * @return {?}
+     */
+    getVisitFor(placeDef) {
+        return this._visits.get(placeDef);
+    }
+    /**
+     * @param {?} visit
+     * @param {?} initialUrl
+     * @return {?}
+     */
+    onPlaceNavigationStart(visit, initialUrl) {
+        return this.illegalTransition('onPlaceNavigationStart');
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    onPopState(event) {
+        return this.illegalTransition(event);
+    }
+    /**
+     * @param {?} event
+     * @return {?}
      */
-    constructor(context) {
-        super();
-        this.context = context;
-        this._visits = new Map();
+    onRouterStarted(event) {
+        return this.illegalTransition(event);
     }
     /**
+     * @param {?} event
      * @return {?}
      */
-    get interactionContext() {
-        return null;
+    onRouterCancelled(event) {
+        return this.illegalTransition(event);
     }
     /**
-     * @param {?} visit
+     * @param {?} event
      * @return {?}
      */
-    storeVisit(visit) {
-        this._visits.set(visit.placeDefinition, visit);
+    onRouterError(event) {
+        return this.illegalTransition(event);
     }
     /**
-     * @param {?} placeDef
+     * @param {?} event
      * @return {?}
      */
-    getVisitFor(placeDef) {
-        return this._visits.get(placeDef);
+    onRouterEnd(event) {
+        return this.illegalTransition(event);
     }
     /**
      * @param {?} newUrl
@@ -3204,6 +3189,17 @@ class NavigationState extends GarbageCollector {
     onBackClickedDuringNavigationInteraction(newUrl) {
         return this.illegalTransition('onBackClickedDuringNavigationInteraction');
     }
+    /**
+     * @param {?} component
+     * @param {?} currentUrl
+     * @param {?} nextUrl
+     * @return {?}
+     */
+    canDeactivatePlace(component, currentUrl, nextUrl) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.illegalTransition('canDeactivatePlace');
+        });
+    }
     /**
      * @return {?}
      */
@@ -3224,24 +3220,40 @@ class NavigationState extends GarbageCollector {
      * @return {?}
      */
     currentRouterUrl() {
-        return this.context.router.routerState ? this.context.router.routerState.snapshot.url : null;
+        return this.placeRouter.getCurrentRouterUrl();
     }
     /**
      * @protected
      * @param {?} event
      * @return {?}
      */
-    createActiveSession(event) {
-        // TODO: check if the event is purely for interaction context changes.
-        return new NavigationState.Active(this.context, event.navigationTrigger === 'popstate', this.currentRouterUrl());
+    createTransitionStateFor(event) {
+        /** @type {?} */
+        const 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
+     * @return {?}
+     */
+    createIdleState() {
+        return this.interactionService.isActive() ?
+            new NavigationState.IdleDuringInteraction(this.context, this.currentRouterUrl()) :
+            new NavigationState.Idle(this.context);
+    }
+    /**
      * @param {?} url
      * @return {?}
      */
-    updateLocation(url) {
-        this.context.angularLocation.go(url);
+    resetBrowserLocation(url) {
+        this.placeRouter.resetBrowserLocation(url);
     }
     /**
      * @return {?}
@@ -3250,12 +3262,6 @@ class NavigationState extends GarbageCollector {
         return this.constructor.name;
     }
 }
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], NavigationState.prototype, "updateLocation", null);
 if (false) {
     /**
      * @type {?}
@@ -3263,71 +3269,36 @@ 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) {
     class Context {
         /**
-         * @param {?} router
-         * @param {?} modalInteractionService
-         * @param {?} angularLocation
+         * @param {?} placeRouter
+         * @param {?} interactionService
          * @param {?} notifySuccess
          */
-        constructor(router, modalInteractionService, angularLocation, notifySuccess) {
-            this.router = router;
-            this.modalInteractionService = modalInteractionService;
-            this.angularLocation = angularLocation;
+        constructor(placeRouter, interactionService, notifySuccess) {
+            this.placeRouter = placeRouter;
+            this.interactionService = interactionService;
             this.notifySuccess = notifySuccess;
         }
     }
     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;
     }
@@ -3337,79 +3308,70 @@ if (false) {
          */
         constructor(context) {
             super(context);
-            this.active = false;
+            this.isTransitional = false;
             this.startingUrl = null;
+            this.isPopState = false;
         }
         /**
-         * @param {?} component
-         * @param {?} nextState
+         * @param {?} visit
+         * @param {?} initialUrl
          * @return {?}
          */
-        canDeactivatePlace(component, nextState) {
-            return __awaiter(this, void 0, void 0, function* () {
-                return this.illegalTransition('canDeactivatePlace');
-            });
+        onPlaceNavigationStart(visit, initialUrl) {
+            /** @type {?} */
+            const navigationTransition = new NavigationTransition(this.context, initialUrl);
+            navigationTransition.storeVisit(visit);
+            return navigationTransition;
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onStart(event) {
+        onRouterStarted(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)`)) {
+            if (this.placeRouter.hasActiveInteractionIds(event.url)) {
                 Logger.get(this).info(`navigation started with interaction outlet -> ${event.url}`);
-                return new ModalInteractionSession(this.context, event.url);
+                return new InteractionTransition(this.context, event.url);
+            }
+            else {
+                return this.createTransitionStateFor(event);
             }
-            return this.createActiveSession(event);
-        }
-        /**
-         * @param {?} event
-         * @return {?}
-         */
-        onCancel(event) {
-            return this.illegalTransition(event);
-        }
-        /**
-         * @param {?} event
-         * @return {?}
-         */
-        onEnd(event) {
-            return this.illegalTransition(event);
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onError(event) {
-            return this.illegalTransition(event);
+        onPopState(event) {
+            return this.createTransitionStateFor(event);
         }
     }
     NavigationState.Idle = Idle;
     if (false) {
         /** @type {?} */
-        Idle.prototype.isPopState;
-        /** @type {?} */
-        Idle.prototype.active;
+        Idle.prototype.isTransitional;
         /** @type {?} */
         Idle.prototype.startingUrl;
+        /** @type {?} */
+        Idle.prototype.isPopState;
     }
-    class Active extends NavigationState {
+    /**
+     * @abstract
+     */
+    class AbstractNavigationTransition extends NavigationState {
         /**
          * @param {?} context
-         * @param {?} isPopState
          * @param {?} startingUrl
          */
-        constructor(context, isPopState, startingUrl) {
+        constructor(context, startingUrl) {
             super(context);
-            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 {?}
              */
@@ -3417,9 +3379,9 @@ 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?
                 }
             }));
         }
@@ -3433,81 +3395,48 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        onStart(event) {
-            // active sessions can have many cancel start cycles.
+        onRouterStarted(event) {
+            // active sessions can have many cancel start cycles due
+            // to place guard redirects
             return this;
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onEnd(event) {
+        onRouterEnd(event) {
             // navigation succeeded
             this.context.notifySuccess(this);
             return new Idle(this.context);
         }
-        /**
-         * @param {?} event
-         * @return {?}
-         */
-        onCancel(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 {?}
-         */
-        onError(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 {?}
          */
         onBackClickedDuringNavigationInteraction(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 {?} */
-            const context = this.detachInteractionContext();
-            context.getCurrentActivity().then((/**
-             * @param {?} activity
+            const navigationInteraction = this.detachInteractionContext();
+            const { when } = Dsl.disposeWith(navigationInteraction);
+            // 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 {?}
              */
-            activity => {
-                context.addActivityListener({
-                    /**
-                     * @return {?}
-                     */
-                    onActivityFinished() {
-                        context.dispose();
-                    },
-                    /**
-                     * @return {?}
-                     */
-                    onActivityStarted() {
-                    }
-                });
-                activity.cancel(null);
+            () => {
+                navigationInteraction.dispose();
             }));
-            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, locationTriggerUrl);
+            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, this.isPopState, locationTriggerUrl);
         }
+        // @Trace()
         /**
          * @param {?} component
-         * @param {?} nextState
+         * @param {?} currentUrl
+         * @param {?} nextUrl
          * @return {?}
          */
-        canDeactivatePlace(component, nextState) {
+        canDeactivatePlace(component, currentUrl, nextUrl) {
             return __awaiter(this, void 0, void 0, function* () {
                 // lookup the handler and create it if we've not seen it yet
                 /** @type {?} */
@@ -3515,10 +3444,10 @@ if (false) {
                 if (!handler) {
                     /** @type {?} */
                     const isPrimaryHandler = this.componentDeactivationHandlers.size === 0;
-                    handler = new PlaceComponentDeactivationHandler(component, this);
+                    handler = new PlaceComponentDeactivationHandler(component, this, isPrimaryHandler);
                     this.componentDeactivationHandlers.set(component, handler);
                 }
-                return handler.canDeactivate(nextState);
+                return handler.canDeactivate(currentUrl, nextUrl);
             });
         }
         /**
@@ -3531,11 +3460,127 @@ if (false) {
             this._interactionContext = null;
             return context;
         }
+    }
+    NavigationState.AbstractNavigationTransition = AbstractNavigationTransition;
+    if (false) {
+        /** @type {?} */
+        AbstractNavigationTransition.prototype.isTransitional;
+        /**
+         * @type {?}
+         * @private
+         */
+        AbstractNavigationTransition.prototype.componentDeactivationHandlers;
+        /**
+         * @type {?}
+         * @private
+         */
+        AbstractNavigationTransition.prototype._interactionContext;
+        /** @type {?} */
+        AbstractNavigationTransition.prototype.startingUrl;
+    }
+    class NavigationTransition extends AbstractNavigationTransition {
+        constructor() {
+            super(...arguments);
+            this.isPopState = false;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterCancelled(event) {
+            return this;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterError(event) {
+            // navigation was aborted.
+            return new Idle(this.context);
+        }
         /**
          * @return {?}
          */
         toString() {
-            return `${this.constructor.name}(startingUrl: ${this.startingUrl}, isPopState:${this.isPopState})`;
+            return `${this.constructor.name}(startingUrl: ${this.startingUrl})`;
+        }
+    }
+    NavigationState.NavigationTransition = NavigationTransition;
+    if (false) {
+        /** @type {?} */
+        NavigationTransition.prototype.isPopState;
+    }
+    class PopStateTransition extends AbstractNavigationTransition {
+        constructor() {
+            super(...arguments);
+            this.isPopState = true;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterCancelled(event) {
+            // Angular doesn't preserve the url when a guard cancels the back button.
+            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+            Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+            this.resetBrowserLocation(this.startingUrl);
+            return new Idle(this.context);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterError(event) {
+            // navigation was aborted.
+            if (this.currentRouterUrl() !== this.startingUrl) {
+                // Angular doesn't preserve the url when a guard cancels the back button.
+                // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                Logger.get(this).info('WORK-AROUND: Updating browser location after pop state - see angular issue #13586');
+                this.resetBrowserLocation(this.startingUrl);
+            }
+            return new Idle(this.context);
+        }
+    }
+    NavigationState.PopStateTransition = PopStateTransition;
+    if (false) {
+        /** @type {?} */
+        PopStateTransition.prototype.isPopState;
+    }
+    class IdleDuringInteraction extends NavigationState {
+        /**
+         * @param {?} context
+         * @param {?} startingUrl
+         */
+        constructor(context, startingUrl) {
+            super(context);
+            this.startingUrl = startingUrl;
+            this.isTransitional = false;
+            this.isPopState = false;
+        }
+        /**
+         * @param {?} visit
+         * @param {?} initialUrl
+         * @return {?}
+         */
+        onPlaceNavigationStart(visit, initialUrl) {
+            /** @type {?} */
+            const navigationTransition = new InteractionTransition(this.context, initialUrl);
+            navigationTransition.storeVisit(visit);
+            return navigationTransition;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onRouterStarted(event) {
+            return new InteractionTransition(this.context, event.url);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onPopState(event) {
+            return new InteractionPopStateTransition(this.context, event.url);
         }
     }
     __decorate([
@@ -3543,89 +3588,112 @@ if (false) {
         __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);
+    ], IdleDuringInteraction.prototype, "onRouterStarted", null);
     __decorate([
         Trace(),
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [NavigationError]),
+        __metadata("design:paramtypes", [NavigationStart]),
         __metadata("design:returntype", NavigationState)
-    ], Active.prototype, "onError", null);
-    NavigationState.Active = Active;
+    ], IdleDuringInteraction.prototype, "onPopState", null);
+    NavigationState.IdleDuringInteraction = IdleDuringInteraction;
     if (false) {
         /** @type {?} */
-        Active.prototype.active;
-        /**
-         * @type {?}
-         * @private
-         */
-        Active.prototype.componentDeactivationHandlers;
-        /**
-         * @type {?}
-         * @private
-         */
-        Active.prototype._interactionContext;
+        IdleDuringInteraction.prototype.isTransitional;
         /** @type {?} */
-        Active.prototype.isPopState;
+        IdleDuringInteraction.prototype.isPopState;
         /** @type {?} */
-        Active.prototype.startingUrl;
+        IdleDuringInteraction.prototype.startingUrl;
     }
-    class ModalInteractionSession extends NavigationState {
+    /**
+     * @abstract
+     */
+    class AbstractInteractionTransition extends AbstractNavigationTransition {
         /**
          * @param {?} context
          * @param {?} startingUrl
          */
         constructor(context, startingUrl) {
-            super(context);
+            super(context, startingUrl);
             this.startingUrl = startingUrl;
-            this.active = false;
+            this.isTransitional = true;
+        }
+    }
+    NavigationState.AbstractInteractionTransition = AbstractInteractionTransition;
+    if (false) {
+        /** @type {?} */
+        AbstractInteractionTransition.prototype.isTransitional;
+        /** @type {?} */
+        AbstractInteractionTransition.prototype.startingUrl;
+    }
+    /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    class InteractionTransition extends AbstractInteractionTransition {
+        constructor() {
+            super(...arguments);
             this.isPopState = false;
         }
         /**
-         * @param {?} url
+         * @param {?} event
          * @return {?}
          */
-        static hasInteraction(url) {
-            return url.endsWith('(aup-interaction:modal)');
+        onRouterCancelled(event) {
+            if (this.context.interactionService.isActive()) {
+                /** @type {?} */
+                const 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 {?}
          */
-        onStart(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;
+        onRouterError(event) {
+            // navigation was aborted.
+            return new IdleDuringInteraction(this.context, this.startingUrl);
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onCancel(event) {
-            // this.updateLocation(this.startingUrl);
-            return this;
+        onRouterEnd(event) {
+            if (this.context.interactionService.isActive()) {
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
+        }
+    }
+    NavigationState.InteractionTransition = InteractionTransition;
+    if (false) {
+        /** @type {?} */
+        InteractionTransition.prototype.isPopState;
+    }
+    /**
+     * This state exists to handle all events while any kind of navigation is in progress.  That way all other states can
+     * happily ignore interaction contexts.
+     */
+    class InteractionPopStateTransition extends AbstractInteractionTransition {
+        constructor() {
+            super(...arguments);
+            this.isPopState = true;
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onEnd(event) {
-            if (this.context.modalInteractionService.isActive()) {
-                return this;
+        onRouterCancelled(event) {
+            if (this.interactionService.isActive()) {
+                /** @type {?} */
+                const 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);
@@ -3635,105 +3703,93 @@ if (false) {
          * @param {?} event
          * @return {?}
          */
-        onError(event) {
-            return this.illegalTransition(event);
-        }
-        /**
-         * @param {?} component
-         * @param {?} nextState
-         * @return {?}
-         */
-        canDeactivatePlace(component, nextState) {
-            return __awaiter(this, void 0, void 0, function* () {
-                return true;
-            });
+        onRouterEnd(event) {
+            if (this.context.interactionService.isActive()) {
+                return new IdleDuringInteraction(this.context, this.startingUrl);
+            }
+            else {
+                return new Idle(this.context);
+            }
         }
     }
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [NavigationStart]),
-        __metadata("design:returntype", NavigationState)
-    ], ModalInteractionSession.prototype, "onStart", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [NavigationCancel]),
-        __metadata("design:returntype", NavigationState)
-    ], ModalInteractionSession.prototype, "onCancel", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [NavigationEnd]),
-        __metadata("design:returntype", NavigationState)
-    ], ModalInteractionSession.prototype, "onEnd", null);
-    NavigationState.ModalInteractionSession = ModalInteractionSession;
+    NavigationState.InteractionPopStateTransition = InteractionPopStateTransition;
     if (false) {
         /** @type {?} */
-        ModalInteractionSession.prototype.active;
-        /** @type {?} */
-        ModalInteractionSession.prototype.isPopState;
-        /** @type {?} */
-        ModalInteractionSession.prototype.startingUrl;
+        InteractionPopStateTransition.prototype.isPopState;
     }
     class CancelledDuringNavigationInteraction extends NavigationState {
         /**
          * @param {?} context
          * @param {?} startingUrl
+         * @param {?} startingEventWasAPopState
          * @param {?} locationChangeTriggerUrl
          */
-        constructor(context, startingUrl, locationChangeTriggerUrl) {
+        constructor(context, startingUrl, startingEventWasAPopState, locationChangeTriggerUrl) {
             super(context);
             this.startingUrl = startingUrl;
+            this.startingEventWasAPopState = startingEventWasAPopState;
             this.locationChangeTriggerUrl = locationChangeTriggerUrl;
-            this.active = false;
-            this.capturedFauxRouterStart = false;
-            // This will trigger a return to the route we originally started with.
-            // this.angularLocation.go(this.startingUrl);
+            this.isPopState = false;
+            this.gotPopStateWithLeavingUrl = false;
         }
         /**
-         * @param {?} component
-         * @param {?} nextState
          * @return {?}
          */
-        canDeactivatePlace(component, nextState) {
-            return __awaiter(this, void 0, void 0, function* () {
-                return false;
-            });
+        get isTransitional() {
+            return true;
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onCancel(event) {
+        onRouterStarted(event) {
             return this.ignore(event);
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onEnd(event) {
+        onRouterCancelled(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 {?}
+         */
+        onRouterEnd(event) {
             return this.ignore(event);
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onError(event) {
+        onRouterError(event) {
             return this.ignore(event);
         }
         /**
          * @param {?} event
          * @return {?}
          */
-        onStart(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);
-            }
+        onPopState(event) {
+            this.gotPopStateWithLeavingUrl = this.gotPopStateWithLeavingUrl || event.url === this.locationChangeTriggerUrl;
+            return this.ignore(event);
+        }
+        // @Trace()
+        /**
+         * @param {?} component
+         * @param {?} currentUrl
+         * @param {?} nextUrl
+         * @return {?}
+         */
+        canDeactivatePlace(component, currentUrl, nextUrl) {
+            return __awaiter(this, void 0, void 0, function* () {
+                return false;
+            });
         }
         /**
          * @param {?} event
@@ -3741,7 +3797,7 @@ if (false) {
          * @return {?}
          */
         ignore(event, reason) {
-            reason = reason ? ` (${reason})` : '';
+            reason = reason ? ` -> ${reason}` : '';
             Logger.get(this).info(`ignoring router event${reason}: ${event.constructor.name} -> ${event.url}`);
             return this;
         }
@@ -3749,23 +3805,29 @@ if (false) {
          * @return {?}
          */
         toString() {
-            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);
     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 = {}));
@@ -3837,29 +3899,30 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class UrlSnapshot {
+    // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
     /**
-     * @param {?} urlTree
-     */
-    constructor(urlTree) {
-        this.urlTree = urlTree;
-        // console.log({ segments: this.urlTree.root.children.primary.segments });
-    }
-    /**
-     * @return {?}
+     * @param {?} urlSerializer
+     * @param {?} url
+     * @param {?} options
      */
-    cloneUrlSegmentList() {
-        return [...this.urlTree.root.children.primary.segments];
+    constructor(urlSerializer, url, options) {
+        this.urlSerializer = urlSerializer;
+        this.url = url;
+        this.options = options;
+        this.urlTree = urlSerializer.parse(url);
     }
     /**
      * @param {?} visit
      * @return {?}
      */
     updateVisitSegments(visit) {
+        /** @type {?} */
+        const urlTree = this.urlSerializer.parse(this.url);
         // Ugly, but it works for now.
         /** @type {?} */
-        const segments = this.cloneUrlSegmentList();
+        const segments = [...this.getPrimarySegments(urlTree)];
         /** @type {?} */
-        const visitSegments = this.convertToUrlSegments(visit);
+        const visitSegments = this.getSegmentsFor(visit);
         /** @type {?} */
         const replaceAt = segments.findIndex((/**
          * @param {?} segment
@@ -3868,14 +3931,24 @@ class UrlSnapshot {
         segment => segment.path === visitSegments[0].path));
         // do not use the return value, it's the items that were removed!
         segments.splice(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 {?}
+     */
+    getPrimarySegments(urlTree) {
+        return this.urlTree.root.children.primary.segments;
     }
     /**
      * Converts the visit into segments.  Please not that these segments are not e
+     * @protected
      * @param {?} visit
      * @return {?}
      */
-    convertToUrlSegments(visit) {
+    getSegmentsFor(visit) {
         return visit.placeDefinition.hasRouteId() ?
             [
                 // NOTE:
@@ -3890,42 +3963,119 @@ class UrlSnapshot {
                 ];
     }
     /**
-     * @param {?} visit
+     * @param {?} placeDef
      * @return {?}
      */
-    createRedirectCommandsFor(visit) {
-        /** @type {?} */
-        const segments = this.updateVisitSegments(visit);
-        /** @type {?} */
-        const commands = [];
-        segments.forEach((/**
+    includesPathOf(placeDef) {
+        return this.getPrimarySegments(this.urlTree).find((/**
          * @param {?} s
          * @return {?}
          */
-        s => {
-            commands.push(s.path);
-            if (s.parameterMap.keys.length > 0) {
-                commands.push(s.parameters);
-            }
-        }));
-        return commands;
+        s => s.path === placeDef.path));
     }
     /**
-     * @param {?} placeDef
      * @return {?}
      */
-    includesPathOf(placeDef) {
-        return this.cloneUrlSegmentList().find((/**
-         * @param {?} s
-         * @return {?}
-         */
-        s => s.path === placeDef.path));
+    getInteractionIds() {
+        /** @type {?} */
+        const queryParam = this.urlTree.queryParams[UrlSnapshot.INTERACTION_QUERY_PARAM];
+        if (queryParam) {
+            return UrlSnapshot.parseInteractionIds(queryParam);
+        }
+        else {
+            return [];
+        }
+    }
+    /**
+     * @return {?}
+     */
+    hasInteractionIds() {
+        return this.getInteractionIds().length > 0;
+    }
+    // @Trace()
+    /**
+     * @param {?} ids
+     * @return {?}
+     */
+    updateInteractionIds(ids) {
+        if (ids.length === 0) {
+            return this.removeInteractionIds();
+        }
+        else {
+            /** @type {?} */
+            const 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()
+    /**
+     * @return {?}
+     */
+    removeInteractionIds() {
+        /** @type {?} */
+        const 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 {?}
+     */
+    withOptions(options) {
+        return new UrlSnapshot(this.urlSerializer, this.url, options);
+    }
+    /**
+     * @return {?}
+     */
+    getNavigationExtras() {
+        return this.options;
     }
 }
 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
@@ -3937,29 +4087,33 @@ class PlaceRouter extends GarbageCollector {
      * @param {?} urlSerializer
      * @param {?} angularLocation
      * @param {?} placeHistory
-     * @param {?} modalInteractionService
+     * @param {?} interactionService
      */
-    constructor(router, urlSerializer, angularLocation, placeHistory, modalInteractionService) {
+    constructor(router, urlSerializer, angularLocation, placeHistory, interactionService) {
         super();
         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();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         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 {?}
          */
         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 {?}
+         */
+        state => (/** @type {?} */ (state.constructor))));
         // TODO: make setup the callbacks in during module initiation to make this testable.
         this.router.events.subscribe((/**
          * @param {?} event
@@ -3973,53 +4127,83 @@ class PlaceRouter extends GarbageCollector {
             // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
             // =======================
             if (event instanceof NavigationStart) {
-                this.runStateTransition((/**
-                 * @param {?} session
-                 * @return {?}
-                 */
-                session => session.onStart(event)));
+                if (event.navigationTrigger === 'popstate') {
+                    this.runStateTransition((/**
+                     * @param {?} state
+                     * @return {?}
+                     */
+                    state => state.onPopState(event)));
+                }
+                else {
+                    this.runStateTransition((/**
+                     * @param {?} state
+                     * @return {?}
+                     */
+                    state => state.onRouterStarted(event)));
+                }
             }
             if (event instanceof NavigationEnd) {
+                console.log(event);
                 this.runStateTransition((/**
-                 * @param {?} session
+                 * @param {?} state
                  * @return {?}
                  */
-                session => session.onEnd(event)));
+                state => state.onRouterEnd(event)));
             }
             if (event instanceof NavigationError) {
+                console.log(event);
                 this.runStateTransition((/**
-                 * @param {?} session
+                 * @param {?} state
                  * @return {?}
                  */
-                session => session.onError(event)));
+                state => state.onRouterError(event)));
             }
             if (event instanceof NavigationCancel) {
+                console.log(event);
                 this.runStateTransition((/**
-                 * @param {?} session
+                 * @param {?} state
                  * @return {?}
                  */
-                session => session.onCancel(event)));
+                state => 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 {?}
+         */
+        (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 {?} */
+        const 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 {?}
          */
         url => {
-            console.log(`#### url changed ->`, { url, navIsActive: this.navigationSessionActive.value });
             /** @type {?} */
-            const 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 {?}
-                 */
-                navigationSession => navigationSession.onBackClickedDuringNavigationInteraction(url)));
+            const navigationState = this._navigationStateModel.value;
+            console.log(`URLChange -> ${url}`, { state: navigationState });
+            urlChanges.publish({ url, state: navigationState });
+            // The url has changed while we're in a transitional state
+            if (navigationState.isTransitional) {
+                /** @type {?} */
+                const navigationInteraction = this.navigationState.interactionContext;
+                if (navigationInteraction && navigationInteraction.isActive()) {
+                    this.runStateTransition((/**
+                     * @param {?} state
+                     * @return {?}
+                     */
+                    state => state.onBackClickedDuringNavigationInteraction(url)));
+                }
             }
         }));
     }
@@ -4031,7 +4215,7 @@ class PlaceRouter extends GarbageCollector {
     processNavigationSuccess(session) {
         // 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 {?} */
         const visits = session.getVisits();
         visits.forEach((/**
@@ -4044,14 +4228,14 @@ class PlaceRouter extends GarbageCollector {
     /**
      * @return {?}
      */
-    get navigationSession() {
-        return this._navigationSessionModel.value;
+    get navigationState() {
+        return this._navigationStateModel.value;
     }
     /**
      * @return {?}
      */
-    get navigationSessionModel() {
-        return this._navigationSessionModel.readonly;
+    get navigationStateModel() {
+        return this._navigationStateModel.readonly;
     }
     /**
      * @return {?}
@@ -4103,9 +4287,9 @@ class PlaceRouter extends GarbageCollector {
                  */
                 router => {
                     /** @type {?} */
-                    const commands = this.parseUrl(this.router.routerState.snapshot).createRedirectCommandsFor(next);
-                    console.log('### Push Changes to route Redirect', { commands });
-                    return router.navigate(commands);
+                    const urlSnapshot = this.parseUrl(this.router.routerState.snapshot.url).updateVisitSegments(next);
+                    console.log('### Push Changes to route Redirect', { commands: urlSnapshot.url });
+                    return this.navigateByUrl(urlSnapshot);
                 }));
             }
         });
@@ -4117,7 +4301,7 @@ class PlaceRouter extends GarbageCollector {
      */
     doNavigation(visit, runNavigationCommands) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.navigationSessionActive.value) {
+            if (this.navigationInProgress.value) {
                 lang.illegalState('Navigation already in progress');
             }
             this.runStateTransition((/**
@@ -4126,7 +4310,7 @@ class PlaceRouter extends GarbageCollector {
              */
             current => {
                 /** @type {?} */
-                const session = new NavigationState.Active(this._navigationSessionContext, false, this.router.routerState.snapshot.url);
+                const session = this.navigationState.onPlaceNavigationStart(visit, this.getCurrentRouterUrl());
                 session.storeVisit(visit);
                 return session;
             }));
@@ -4136,16 +4320,17 @@ class PlaceRouter extends GarbageCollector {
             finally {
                 // 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 {?}
                      */
-                    session => session.onEnd(new NavigationEnd(-1, '', ''))));
+                    session => session.onRouterEnd(new NavigationEnd(-1, '', ''))));
                 }
             }
         });
     }
+    // @Trace()
     /**
      * @protected
      * @param {?} transition
@@ -4153,10 +4338,10 @@ class PlaceRouter extends GarbageCollector {
      */
     runStateTransition(transition) {
         /** @type {?} */
-        const previous = this._navigationSessionModel.value;
+        const previous = this._navigationStateModel.value;
         /** @type {?} */
-        const next = transition(this.navigationSession);
-        this._navigationSessionModel.value = next;
+        const next = transition(this.navigationState);
+        this._navigationStateModel.value = next;
         if (next !== previous) {
             previous.dispose();
             Logger.get(this).info(`Router State Transition: ${previous.toString()} -> ${next.toString()}`);
@@ -4186,11 +4371,76 @@ class PlaceRouter extends GarbageCollector {
         child => child.url)));
     }
     /**
-     * @param {?} snapshot
+     * @param {?} url
+     * @return {?}
+     */
+    parseUrl(url) {
+        return new UrlSnapshot(this.urlSerializer, url, {});
+    }
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    resetBrowserLocation(url) {
+        this.angularLocation.go(url);
+    }
+    /**
+     * @return {?}
+     */
+    getCurrentRouterUrl() {
+        return this.router.routerState ? this.router.routerState.snapshot.url : null;
+    }
+    /**
+     * @return {?}
+     */
+    getCurrentRouteSnapshot() {
+        return this.parseUrl(this.getCurrentRouterUrl());
+    }
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    getActiveInteractionIdsFromUrl(url) {
+        return this.parseUrl(url).getInteractionIds();
+    }
+    // @Trace()
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    hasActiveInteractionIds(url) {
+        return this.getActiveInteractionIdsFromUrl(url).length > 0;
+    }
+    // @Trace()
+    /**
+     * @param {?} urlSnapshot
+     * @return {?}
+     */
+    navigateByUrl(urlSnapshot) {
+        this.router.navigateByUrl(urlSnapshot.urlTree, urlSnapshot.getNavigationExtras());
+    }
+    // @Trace()
+    /**
      * @return {?}
      */
-    parseUrl(snapshot) {
-        return new UrlSnapshot(this.urlSerializer.parse(snapshot.url));
+    syncInteractionIdsWithRouter() {
+        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 {?} */
+        const 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 = [
@@ -4204,27 +4454,22 @@ PlaceRouter.ctorParameters = () => [
     { 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" });
 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;
     /**
@@ -4236,85 +4481,33 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.router;
+    PlaceRouter.prototype._navigationStateTypeModel;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.urlSerializer;
+    PlaceRouter.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.angularLocation;
+    PlaceRouter.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.placeHistory;
+    PlaceRouter.prototype.angularLocation;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.modalInteractionService;
-}
-(function (PlaceRouter) {
-    PlaceRouter.INTERACTION_ROUTER_OUTLET = 'aup-interaction';
-    class InteractionRouteMediator {
-        /**
-         * @param {?} navigationSessionModelActive
-         * @param {?} router
-         */
-        constructor(navigationSessionModelActive, router) {
-            this.navigationSessionModelActive = navigationSessionModelActive;
-            this.router = router;
-        }
-        /**
-         * @return {?}
-         */
-        get isNavigating() {
-            return this.navigationSessionModelActive.value;
-        }
-        // If we're not in a navigation we push
-        // @Trace()
-        /**
-         * @return {?}
-         */
-        onActivityStarted() {
-            if (!this.isNavigating) {
-                this.router.navigate(['.', {
-                        outlets: {
-                            [PlaceRouter.INTERACTION_ROUTER_OUTLET]: ['modal'] // "open" must be a valid route for this outlet.
-                        }
-                    }], {
-                    replaceUrl: false
-                });
-            }
-        }
-        // @Trace()
-        /**
-         * @return {?}
-         */
-        onActivityFinished() {
-            if (!this.isNavigating) {
-                this.router.navigate(['.', {
-                        outlets: {
-                            [PlaceRouter.INTERACTION_ROUTER_OUTLET]: null
-                        }
-                    }], {
-                    replaceUrl: true // remove the interaction from the history.
-                });
-            }
-        }
-    }
-    PlaceRouter.InteractionRouteMediator = InteractionRouteMediator;
-    if (false) {
-        /** @type {?} */
-        InteractionRouteMediator.prototype.navigationSessionModelActive;
-        /** @type {?} */
-        InteractionRouteMediator.prototype.router;
-    }
-})(PlaceRouter || (PlaceRouter = {}));
+    PlaceRouter.prototype.placeHistory;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceRouter.prototype.interactionService;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -4408,9 +4601,9 @@ class PlaceOutletComponent extends DisposableComponent {
         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;
@@ -4470,10 +4663,10 @@ class PlaceOutletComponent extends DisposableComponent {
         (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 {?}
@@ -5244,40 +5437,279 @@ class ResizeAwareComponent extends DisposableComponent {
         this.onDispose((/**
          * @return {?}
          */
-        () => ro.disconnect()));
-    }
-    /**
-     * @return {?}
-     */
-    get boundsModel() {
-        return this._boundsModel.readonly;
-    }
-    /**
-     * @return {?}
-     */
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    // TODO: Make this handle body scroll
-    /**
-     * @param {?} point
-     * @return {?}
-     */
-    relativePositionOf(point) {
-        return this.bounds.relativePositionOf(point);
-    }
-    /**
-     * @return {?}
-     */
-    get bounds() {
-        return this._boundsModel.value;
+        () => ro.disconnect()));
+    }
+    /**
+     * @return {?}
+     */
+    get boundsModel() {
+        return this._boundsModel.readonly;
+    }
+    /**
+     * @return {?}
+     */
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    // TODO: Make this handle body scroll
+    /**
+     * @param {?} point
+     * @return {?}
+     */
+    relativePositionOf(point) {
+        return this.bounds.relativePositionOf(point);
+    }
+    /**
+     * @return {?}
+     */
+    get bounds() {
+        return this._boundsModel.value;
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    updateBounds() {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    }
+}
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    ResizeAwareComponent.prototype._boundsModel;
+    /**
+     * @type {?}
+     * @protected
+     */
+    ResizeAwareComponent.prototype.elementRef;
+    /**
+     * @type {?}
+     * @protected
+     */
+    ResizeAwareComponent.prototype.ngZone;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ */
+function Alert() { }
+if (false) {
+    /**
+     * @return {?}
+     */
+    Alert.prototype.title = function () { };
+    /**
+     * @return {?}
+     */
+    Alert.prototype.content = function () { };
+    /**
+     * @return {?}
+     */
+    Alert.prototype.ok = function () { };
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ */
+function Confirm() { }
+if (false) {
+    /** @type {?|undefined} */
+    Confirm.prototype.destructive;
+    /**
+     * @return {?}
+     */
+    Confirm.prototype.cancel = function () { };
+}
+
+/**
+ * @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 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
+ */
+class DialogInteractionContext extends InteractionContextBase {
+    /**
+     * @param {?} dialogService
+     * @param {?} config
+     */
+    constructor(dialogService, config) {
+        super();
+        this.dialogService = dialogService;
+        this.config = config;
+        this._activeModel = new MutableValueModel(false);
+        assert$1.notNil(dialogService);
+        this.onDispose((/**
+         * @return {?}
+         */
+        () => {
+            if (this.isActive()) {
+                lang.illegalState('Dispose called while active.');
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    get active() {
+        return this._activeModel.readonly;
+    }
+    /**
+     * @protected
+     * @template D, R, E
+     * @param {?} activityType
+     * @param {?} data
+     * @param {?=} disableClose
+     * @return {?}
+     */
+    _startActivity(activityType, data, disableClose = true) {
+        if (this.isActive()) {
+            lang.illegalState(`Activity already in progress: ${this.activityList.value.map((/**
+             * @param {?} a
+             * @return {?}
+             */
+            a => a.constructor.name)).join(', ')}`);
+        }
+        this._activeModel.value = true;
+        /** @type {?} */
+        const config = Object.assign({}, this.config, {
+            data,
+            disableClose,
+            panelClass: 'dialog-interaction-context'
+        });
+        /** @type {?} */
+        const self = this;
+        /** @type {?} */
+        const matDialogRef = (/** @type {?} */ (this.dialogService.open(ActivityContainerComponent, config)));
+        return new Promise((/**
+         * @param {?} resolve
+         * @param {?} reject
+         * @return {?}
+         */
+        (resolve, reject) => {
+            /** @type {?} */
+            const activityContainer = matDialogRef.componentInstance;
+            self.safelyUpdateActivityListDelegate(activityContainer.activityList);
+            activityContainer.initialActivityOutletContext = {
+                activityClass: activityType,
+                activityData: data,
+                /**
+                 * @param {?} result
+                 * @return {?}
+                 */
+                onDone(result) {
+                    resolve(result);
+                    matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
+                },
+                /**
+                 * @param {?} error
+                 * @return {?}
+                 */
+                onCancel(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 {?}
+             */
+            promiseAlreadyFinished => {
+                if (!promiseAlreadyFinished) {
+                    reject('auto-closed');
+                }
+            }));
+            matDialogRef.updateSize();
+            matDialogRef.afterOpened().subscribe((/**
+             * @param {?} promiseAlreadyFinished
+             * @return {?}
+             */
+            promiseAlreadyFinished => {
+                matDialogRef.updateSize();
+            }));
+        })).finally((/**
+         * @return {?}
+         */
+        () => {
+            self.safelyUpdateActivityListDelegate(null);
+            this._activeModel.value = false;
+        }));
     }
     /**
-     * @private
+     * Updates teh delegate on the next tick to avoid modifying state during the current change detection cycle.
+     * @param {?} delegate
      * @return {?}
      */
-    updateBounds() {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    safelyUpdateActivityListDelegate(delegate) {
+        setTimeout((/**
+         * @return {?}
+         */
+        () => this.setActivityList(delegate)));
     }
 }
 if (false) {
@@ -5285,112 +5717,68 @@ if (false) {
      * @type {?}
      * @private
      */
-    ResizeAwareComponent.prototype._boundsModel;
-    /**
-     * @type {?}
-     * @protected
-     */
-    ResizeAwareComponent.prototype.elementRef;
+    DialogInteractionContext.prototype._activeModel;
     /**
      * @type {?}
-     * @protected
+     * @private
      */
-    ResizeAwareComponent.prototype.ngZone;
+    DialogInteractionContext.prototype.dialogService;
+    /** @type {?} */
+    DialogInteractionContext.prototype.config;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function Alert() { }
-if (false) {
-    /**
-     * @return {?}
-     */
-    Alert.prototype.title = function () { };
-    /**
-     * @return {?}
-     */
-    Alert.prototype.content = function () { };
+/** @type {?} */
+const DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
+class DialogInteractionContextFactory extends ModalInteractionContextFactory {
     /**
-     * @return {?}
+     * @param {?} dialogService
+     * @param {?} dialogServiceDefaults
+     * @param {?} matDialogDefaultConfig
      */
-    Alert.prototype.ok = function () { };
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function Confirm() { }
-if (false) {
-    /** @type {?|undefined} */
-    Confirm.prototype.destructive;
+    constructor(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+        super();
+        this.dialogService = dialogService;
+        this.dialogServiceDefaults = dialogServiceDefaults;
+        this.matDialogDefaultConfig = matDialogDefaultConfig;
+        assert$1.notNil(dialogService);
+    }
     /**
      * @return {?}
      */
-    Confirm.prototype.cancel = function () { };
-}
-
-/**
- * @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 Callback() { }
-    Result.Callback = Callback;
-    if (false) {
-        /** @type {?} */
-        Callback.prototype.then;
+    createInteractionContext() {
         /** @type {?} */
-        Callback.prototype.catch;
+        const config = Object.assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults);
+        return new DialogInteractionContext(this.dialogService, config);
     }
-})(Result || (Result = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- * @template D, R, E
- */
-function ActivityOutletContext() { }
+}
+DialogInteractionContextFactory.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+DialogInteractionContextFactory.ctorParameters = () => [
+    { 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" });
 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;
 }
 
 /**
@@ -5462,97 +5850,10 @@ function Place(options) {
         Options.prototype.authenticate;
         /** @type {?|undefined} */
         Options.prototype.children;
-        /** @type {?|undefined} */
-        Options.prototype.defaultChild;
-    }
-})(Place || (Place = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class VisitSanitiser {
-    /**
-     * @param {?} activatedRoute
-     * @param {?} router
-     * @param {?} placeHistory
-     * @param {?} injector
-     */
-    constructor(activatedRoute, router, placeHistory, injector) {
-        this.activatedRoute = activatedRoute;
-        this.router = router;
-        this.placeHistory = placeHistory;
-        this.injector = injector;
-    }
-    // @Trace()
-    /**
-     * @param {?} visit
-     * @return {?}
-     */
-    sanitise(visit) {
-        return __awaiter(this, void 0, void 0, function* () {
-            /** @type {?} */
-            const placeDef = visit.placeDefinition;
-            if (placeDef.hasRouteId()) {
-                /** @type {?} */
-                const routeIdDef = placeDef.getRouteIdParameterDef();
-                /** @type {?} */
-                const routeId = visit.getRouteId();
-                /** @type {?} */
-                const sanitisedValue = yield routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector);
-                // 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 visit.replace(routeIdDef, sanitisedValue);
-                }
-            }
-            // if we didn't replace the routeId we continue the url present parameters.
-            /** @type {?} */
-            const parameterDefs = placeDef.getVisitParameterDefs({
-                includeRouteParameters: true,
-                includeNonRouteParameters: true
-            });
-            /** @type {?} */
-            let sanitisedVisit = visit;
-            for (let i = 0; i < parameterDefs.length; i++) {
-                /** @type {?} */
-                const def = parameterDefs[i];
-                /** @type {?} */
-                const value = visit.getParameter(def.name);
-                /** @type {?} */
-                const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector);
-                if (def.hasChanged(value, sanitisedValue)) {
-                    sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
-                }
-            }
-            return sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit;
-        });
-    }
-}
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.activatedRoute;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.placeHistory;
-    /**
-     * @type {?}
-     * @private
-     */
-    VisitSanitiser.prototype.injector;
-}
+        /** @type {?|undefined} */
+        Options.prototype.defaultChild;
+    }
+})(Place || (Place = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -5685,6 +5986,120 @@ if (false) {
     ParamMapAdapter.prototype.params;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class NoopAuthGuard {
+    constructor() {
+    }
+    /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    canActivate(activatedRoute, state) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+        });
+    }
+}
+NoopAuthGuard.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+NoopAuthGuard.ctorParameters = () => [];
+/** @nocollapse */ NoopAuthGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class VisitSanitiser {
+    /**
+     * @param {?} activatedRoute
+     * @param {?} router
+     * @param {?} placeHistory
+     * @param {?} injector
+     */
+    constructor(activatedRoute, router, placeHistory, injector) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.placeHistory = placeHistory;
+        this.injector = injector;
+    }
+    // @Trace()
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    sanitise(visit) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            const placeDef = visit.placeDefinition;
+            if (placeDef.hasRouteId()) {
+                /** @type {?} */
+                const routeIdDef = placeDef.getRouteIdParameterDef();
+                /** @type {?} */
+                const routeId = visit.getRouteId();
+                /** @type {?} */
+                const sanitisedValue = yield routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector);
+                // 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 visit.replace(routeIdDef, sanitisedValue);
+                }
+            }
+            // if we didn't replace the routeId we continue the url present parameters.
+            /** @type {?} */
+            const parameterDefs = placeDef.getVisitParameterDefs({
+                includeRouteParameters: true,
+                includeNonRouteParameters: true
+            });
+            /** @type {?} */
+            let sanitisedVisit = visit;
+            for (let i = 0; i < parameterDefs.length; i++) {
+                /** @type {?} */
+                const def = parameterDefs[i];
+                /** @type {?} */
+                const value = visit.getParameter(def.name);
+                /** @type {?} */
+                const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector);
+                if (def.hasChanged(value, sanitisedValue)) {
+                    sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
+                }
+            }
+            return sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit;
+        });
+    }
+}
+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
@@ -5692,19 +6107,21 @@ if (false) {
 /**
  * @abstract
  */
-class AbstractPlaceGuard {
+class PlaceGuard {
     /**
      * @param {?} router
      * @param {?} urlSerializer
      * @param {?} placeRouter
      * @param {?} placeHistory
+     * @param {?} interactionService
      * @param {?} injector
      */
-    constructor(router, urlSerializer, placeRouter, placeHistory, injector) {
+    constructor(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()
@@ -5715,40 +6132,47 @@ class AbstractPlaceGuard {
      */
     canActivate(activatedRoute, state) {
         return __awaiter(this, void 0, void 0, function* () {
+            // 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 this.authorisePlaceThen(activatedRoute, state, (/**
              * @param {?} placeDefinition
              * @return {?}
              */
             (placeDefinition) => __awaiter(this, void 0, void 0, function* () {
-                // Parse our route params.
-                /** @type {?} */
-                const params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
-                /** @type {?} */
-                const parsedParams = placeDefinition.parseRouteParams(params);
                 /** @type {?} */
-                const initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
-                /** @type {?} */
-                const sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
-                /** @type {?} */
-                const sanitisedVisit = yield sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams));
-                // 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
+                const result = yield this.cleanInteractionState(activatedRoute, state, (/**
+                 * @return {?}
+                 */
+                () => __awaiter(this, void 0, void 0, function* () {
+                    // Parse our route params.
                     /** @type {?} */
-                    const commands = this.placeRouter.parseUrl(state).createRedirectCommandsFor(sanitisedVisit);
-                    console.log('##### Place Guard Redirect', commands);
-                    return this.router.createUrlTree(commands, {
-                        replaceUrl: true,
-                        skipLocationChange: false
-                    });
-                }
-                else {
-                    return true;
-                }
+                    const params = new ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                    /** @type {?} */
+                    const parsedParams = placeDefinition.parseRouteParams(params);
+                    /** @type {?} */
+                    const initialVisit = this.placeRouter.navigationState.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                    /** @type {?} */
+                    const sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                    /** @type {?} */
+                    const sanitisedVisit = yield sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams));
+                    // 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
+                        /** @type {?} */
+                        const urlSnapshot = this.placeRouter.parseUrl(state.url).updateVisitSegments(sanitisedVisit);
+                        console.log('##### Place Guard Redirect', urlSnapshot);
+                        return urlSnapshot;
+                    }
+                    else {
+                        return true;
+                    }
+                })));
+                return this.handleGuardResult(result);
             })));
         });
     }
+    // @Trace()
     /**
      * @param {?} component
      * @param {?} currentRoute
@@ -5758,30 +6182,50 @@ class AbstractPlaceGuard {
      */
     canDeactivate(component, currentRoute, currentState, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.placeRouter.navigationSession.canDeactivatePlace(component, this.placeRouter.parseUrl(nextState));
+            /** @type {?} */
+            const currentUrl = this.placeRouter.parseUrl(currentState.url);
+            /** @type {?} */
+            const nextUrl = this.placeRouter.parseUrl(nextState.url);
+            /** @type {?} */
+            const result = yield this.placeRouter.navigationState.canDeactivatePlace(component, currentUrl, nextUrl);
+            return this.handleGuardResult(result);
         });
     }
+    /**
+     * @private
+     * @param {?} result
+     * @return {?}
+     */
+    handleGuardResult(result) {
+        if (result instanceof UrlSnapshot) {
+            return result.urlTree;
+        }
+        else {
+            return result;
+        }
+    }
     // @Trace()
     /**
      * @protected
      * @param {?} activatedRoute
      * @param {?} state
-     * @param {?} canActivate
+     * @param {?} runPlaceGuards
      * @return {?}
      */
-    authorisePlaceThen(activatedRoute, state, canActivate) {
+    authorisePlaceThen(activatedRoute, state, runPlaceGuards) {
         return __awaiter(this, void 0, void 0, function* () {
             if (PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
                 /** @type {?} */
                 const placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
                 /** @type {?} */
-                const authorised = placeDefinition.authenticate ? yield this.isAuthorised(activatedRoute, state) : true;
-                if (authorised === true) {
-                    return canActivate(placeDefinition);
+                const authoriseResult = placeDefinition.authenticate ? yield this.isAuthorised(activatedRoute, state) : true;
+                if (authoriseResult === true) {
+                    // we're authorised, now run the place guards.
+                    return runPlaceGuards(placeDefinition);
                 }
                 else {
-                    console.log('not authorised result', authorised);
-                    return authorised;
+                    console.log('not authorised result', authoriseResult);
+                    return authoriseResult;
                 }
             }
             else {
@@ -5789,6 +6233,7 @@ class AbstractPlaceGuard {
             }
         });
     }
+    // @Trace()
     /**
      * @param {?} activatedRoute
      * @param {?} state
@@ -5801,175 +6246,66 @@ class AbstractPlaceGuard {
             return (authorised instanceof Observable) ? authorised.toPromise() : authorised;
         });
     }
-}
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
-    __metadata("design:returntype", Promise)
-], AbstractPlaceGuard.prototype, "isAuthorised", null);
-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
- */
-class InteractionGuard {
-    /**
-     * @param {?} router
-     * @param {?} injector
-     * @param {?} placeRouter
-     * @param {?} angularLocation
-     * @param {?} modalInteractionService
-     */
-    constructor(router, injector, placeRouter, angularLocation, modalInteractionService) {
-        this.router = router;
-        this.injector = injector;
-        this.placeRouter = placeRouter;
-        this.angularLocation = angularLocation;
-        this.modalInteractionService = modalInteractionService;
-    }
+    // @Trace()
     /**
      * @param {?} route
      * @param {?} state
+     * @param {?} then
      * @return {?}
      */
-    canActivate(route, state) {
-        /** @type {?} */
-        const 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 {?}
-     */
-    canDeactivate(component, currentRoute, currentState, nextState) {
+    cleanInteractionState(route, state, then) {
         return __awaiter(this, void 0, void 0, function* () {
             /** @type {?} */
-            const popstateReturnUrl = this.placeRouter.navigationSession.startingUrl;
-            if (this.modalInteractionService.isActive()) {
-                // The activity is still active so the route change was triggered by the back button.
-                /** @type {?} */
-                const activity = yield this.modalInteractionService.getCurrentActivity();
-                activity.cancel();
-                // See ModalInteractionSession#onStart() for the url updating.
-                return false;
+            const 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 url.removeInteractionIds();
+            }
+            else {
+                return then();
             }
-            return true;
         });
     }
 }
-InteractionGuard.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-InteractionGuard.ctorParameters = () => [
-    { 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" });
 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
- */
-class NoopAuthGuard {
-    constructor() {
-    }
+    PlaceGuard.prototype.interactionService;
     /**
-     * @param {?} activatedRoute
-     * @param {?} state
+     * @type {?}
+     * @private
+     */
+    PlaceGuard.prototype.injector;
+    /**
+     * @abstract
+     * @param {?} injector
      * @return {?}
      */
-    canActivate(activatedRoute, state) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return true;
-        });
-    }
+    PlaceGuard.prototype.getAuthGuard = function (injector) { };
 }
-NoopAuthGuard.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-NoopAuthGuard.ctorParameters = () => [];
-/** @nocollapse */ NoopAuthGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
 
 /**
  * @fileoverview added by tsickle
@@ -6218,5 +6554,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