@coolon/angular-ui-powerups 0.0.96 → 0.0.97

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

@@ -1,16 +1,16 @@
 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, Optional, ɵɵdefineInjectable, ɵɵinject, 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, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule, MatFormFieldModule, MatSelectModule, MatDialog, MatButtonModule, MatDialogModule, MatTabsModule as MatTabsModule$1, MatProgressSpinnerModule } from '@angular/material';
 import { 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, DelegatingListModel, Deferred, MutableStream, MutableListModel, MutableValueModel, 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, EventListenerList, DelegatingListModel, Deferred, MutableStream, MutableValueModel, MutableListModel, Binding, Trace, Guard as Guard$1, StoreInValueModel, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { PortalModule } from '@angular/cdk/portal';
-import { Router, RouterModule, NavigationStart, NavigationEnd, NavigationError, UrlSerializer, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { RouterModule, NavigationStart, NavigationCancel, NavigationEnd, UrlSegment, NavigationError, Router, UrlSerializer, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import ___default, { last, isNil, isEqual } from 'lodash';
 import { assert as assert$1, Opts, Klass } from '@coolon/typescript-utilities';
-import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
+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';
@@ -752,145 +752,6 @@ ComponentsModule.decorators = [
             },] }
 ];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @abstract
- */
-class InteractionContext extends GarbageCollector {
-    /**
-     * @protected
-     */
-    constructor() {
-        super();
-        /**
-         * Returns the current list of activities that are in progress.
-         * This model is only updated in the next tick after the view has been updated.
-         */
-        this._activityListDelegate = new DelegatingListModel();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        when.listOf(this.activityList).becomesPopulated((/**
-         * @param {?} activities
-         * @return {?}
-         */
-        (activities) => {
-            if (this.deferredGetCurrentActivity) {
-                this.deferredGetCurrentActivity.resolve(last(activities));
-                this.deferredGetCurrentActivity = null;
-            }
-        }));
-    }
-    /**
-     * @protected
-     * @param {?} activityList
-     * @return {?}
-     */
-    setActivityList(activityList) {
-        this._activityListDelegate.setDelegate(activityList);
-    }
-    /**
-     * @return {?}
-     */
-    get activityList() {
-        return this._activityListDelegate.readonly;
-    }
-    /**
-     * Returns the activity that is currently active.
-     * This model is only updated in the next tick after the view has been updated.
-     * @return {?}
-     */
-    getCurrentActivity() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.isActive()) {
-                return Promise.reject('no activity in progress');
-            }
-            else {
-                if (this.deferredGetCurrentActivity) {
-                    // we're already waiting then just return the same promise
-                    return this.deferredGetCurrentActivity.promise;
-                }
-                else {
-                    if (this.activityList.length < 1) {
-                        this.deferredGetCurrentActivity = Deferred.defer();
-                        return this.deferredGetCurrentActivity.promise;
-                    }
-                    else {
-                        return last(this.activityList.value);
-                    }
-                }
-            }
-        });
-    }
-    /**
-     * @param {?} confirm
-     * @return {?}
-     */
-    confirm(confirm) {
-        // Important: we have to implement confirmOrReject as the main entry point
-        // as the canDeactivation guards need to be able to cancel an interaction
-        // without caring about returning a value.
-        return this.confirmOrReject(confirm).then((/**
-         * @return {?}
-         */
-        () => true)).catch((/**
-         * @return {?}
-         */
-        () => false));
-    }
-}
-if (false) {
-    /**
-     * Returns the current list of activities that are in progress.
-     * This model is only updated in the next tick after the view has been updated.
-     * @type {?}
-     * @private
-     */
-    InteractionContext.prototype._activityListDelegate;
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionContext.prototype.deferredGetCurrentActivity;
-    /**
-     * Returns true if an activity is currently running.
-     * @abstract
-     * @return {?}
-     */
-    InteractionContext.prototype.isActive = function () { };
-    /**
-     * @abstract
-     * @template D, R, E
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    InteractionContext.prototype.startActivity = function (activityType, data) { };
-    /**
-     * @abstract
-     * @param {?} confirm
-     * @return {?}
-     */
-    InteractionContext.prototype.confirmOrReject = function (confirm) { };
-    /**
-     * Presents the confirmation to the user and runs the activity only if the user confirms.
-     * @abstract
-     * @template D, R, E
-     * @param {?} confirm
-     * @param {?} activityType the activity to run if confirmed.
-     * @param {?=} data the activity data.
-     * @return {?}
-     */
-    InteractionContext.prototype.confirmThen = function (confirm, activityType, data) { };
-    /**
-     * @abstract
-     * @param {?} alert
-     * @return {?}
-     */
-    InteractionContext.prototype.alert = function (alert) { };
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -986,170 +847,167 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
- * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
- * external service.
- *
- * It might be nice to have wrapper component that allows more declarative use, i.e.
- * <activity-view [activityClass]="...", [activityData]="..." (done)=".." (cancel)="..."></activity-view>
+ * Deprecated. You can now extend the Activity class directly.
+ * @abstract
  * @template D, R, E
  */
-class ActivityOutletComponent {
+class AbstractActivity extends Activity {
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class AlertDialogComponent extends AbstractActivity {
     /**
-     * @param {?} componentFactoryResolver
-     * @param {?} viewContainerRef
-     * @param {?} injector
+     * @param {?} alert
      */
-    constructor(componentFactoryResolver, viewContainerRef, injector) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.injector = injector;
+    constructor(alert) {
+        super();
+        this.alert = alert;
     }
     /**
-     * @param {?} activityContext
      * @return {?}
      */
-    set activityContext(activityContext) {
-        assert.isNil(this._activityContext);
-        this._activityContext = activityContext;
-        this.loadActivity(activityContext);
+    ngOnInit() {
+    }
+}
+AlertDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-alert-dialog',
+                template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
+                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
+            }] }
+];
+/** @nocollapse */
+AlertDialogComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+];
+if (false) {
+    /** @type {?} */
+    AlertDialogComponent.prototype.alert;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ */
+class InteractionContext extends GarbageCollector {
+    constructor() {
+        super(...arguments);
+        this.activityListeners = new EventListenerList();
     }
-    ;
     /**
+     * Returns true if an activity is currently running.
      * @return {?}
      */
-    get activityContext() {
-        return this._activityContext;
+    isActive() {
+        return this.active.value;
     }
     /**
+     * @param {?} listener
      * @return {?}
      */
-    ngOnInit() {
+    addActivityListener(listener) {
+        return this.activityListeners.add(listener);
     }
     /**
-     * @param {?} activityContext
+     * @protected
      * @return {?}
      */
-    loadActivity(activityContext) {
-        /** @type {?} */
-        const injector = Injector.create({
-            providers: [
-                {
-                    provide: InteractionContext,
-                    useValue: this.interactionContext
-                },
-                { provide: ACTIVITY_DATA, useValue: activityContext.activityData }
-            ],
-            parent: this.injector
-        });
-        /** @type {?} */
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(activityContext.activityClass);
-        this.viewContainerRef.clear();
-        this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
-        this.activityComponentRef.instance.initialise(activityContext);
-        if (this.activityContext.componentReady) {
-            this.activityContext.componentReady(this.component);
-        }
+    notifyActivityStarted() {
+        this.activityListeners.fire((/**
+         * @param {?} l
+         * @return {?}
+         */
+        l => l.onActivityStarted()));
     }
     /**
+     * @protected
      * @return {?}
      */
-    get component() {
-        return this.activityComponentRef.instance;
+    notifyActivityFinished() {
+        this.activityListeners.fire((/**
+         * @param {?} l
+         * @return {?}
+         */
+        l => l.onActivityFinished()));
     }
 }
-ActivityOutletComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-activity-outlet',
-                template: '',
-                styles: [":host{display:block}"]
-            }] }
-];
-/** @nocollapse */
-ActivityOutletComponent.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: Injector }
-];
-ActivityOutletComponent.propDecorators = {
-    interactionContext: [{ type: Input }],
-    activityContext: [{ type: Input }]
-};
 if (false) {
-    /** @type {?} */
-    ActivityOutletComponent.prototype.interactionContext;
     /**
      * @type {?}
      * @private
      */
-    ActivityOutletComponent.prototype._activityContext;
+    InteractionContext.prototype.activityListeners;
+    /** @type {?} */
+    InteractionContext.prototype.activityList;
+    /** @type {?} */
+    InteractionContext.prototype.active;
     /**
-     * @type {?}
-     * @private
+     * Returns the activity that is currently active.
+     * This model is only updated in the next tick after the view has been updated.
+     * @abstract
+     * @return {?}
      */
-    ActivityOutletComponent.prototype.activityComponentRef;
+    InteractionContext.prototype.getCurrentActivity = function () { };
     /**
-     * @type {?}
-     * @private
+     * @abstract
+     * @template D, R, E
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
      */
-    ActivityOutletComponent.prototype.componentFactoryResolver;
+    InteractionContext.prototype.startActivity = function (activityType, data) { };
     /**
-     * @type {?}
-     * @private
+     * @abstract
+     * @param {?} alert
+     * @return {?}
      */
-    ActivityOutletComponent.prototype.viewContainerRef;
+    InteractionContext.prototype.alert = function (alert) { };
     /**
-     * @type {?}
-     * @private
+     * @abstract
+     * @param {?} confirm
+     * @return {?}
      */
-    ActivityOutletComponent.prototype.injector;
-    /* Skipping unhandled member: ;*/
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * Deprecated. You can now extend the Activity class directly.
- * @abstract
- * @template D, R, E
- */
-class AbstractActivity extends Activity {
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class AlertDialogComponent extends AbstractActivity {
+    InteractionContext.prototype.confirm = function (confirm) { };
     /**
-     * @param {?} alert
+     * @abstract
+     * @param {?} confirm
+     * @return {?}
      */
-    constructor(alert) {
-        super();
-        this.alert = alert;
-    }
+    InteractionContext.prototype.confirmOrReject = function (confirm) { };
     /**
+     * Presents the confirmation to the user and runs the activity only if the user confirms.
+     * @abstract
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType the activity to run if confirmed.
+     * @param {?=} data the activity data.
      * @return {?}
      */
-    ngOnInit() {
-    }
-}
-AlertDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-alert-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
-                styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{justify-content:flex-end}"]
-            }] }
-];
-/** @nocollapse */
-AlertDialogComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
-];
-if (false) {
-    /** @type {?} */
-    AlertDialogComponent.prototype.alert;
+    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
@@ -1284,115 +1142,392 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
- * Note: this class is mutable and is stored in a list model.  This is normally a big no no but
- *  we're manually deriving other models from the list after view state changes.  I.e. we not
- *  using pectin chains on any of the mutable fields.
- * @template D, R, E
+ * @abstract
  */
-class TabContext {
+class InteractionContextBase extends InteractionContext {
     /**
-     * @param {?} activityData
-     * @param {?} activityClass
-     * @param {?} interactionContext
-     * @param {?} activityCallbacks
+     * @protected
      */
-    constructor(activityData, activityClass, interactionContext, activityCallbacks) {
-        this.activityData = activityData;
-        this.activityClass = activityClass;
-        this.interactionContext = interactionContext;
-        this.activityCallbacks = activityCallbacks;
-        this._complete = false;
+    constructor() {
+        super();
+        /**
+         * Returns the current list of activities that are in progress.
+         * This model is only updated in the next tick after the view has been updated.
+         */
+        this._activityListDelegate = new DelegatingListModel();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        when.listOf(this.activityList).becomesPopulated((/**
+         * @param {?} activities
+         * @return {?}
+         */
+        (activities) => {
+            if (this.deferredGetCurrentActivity) {
+                this.deferredGetCurrentActivity.resolve(last(activities));
+                this.deferredGetCurrentActivity = null;
+            }
+        }));
+    }
+    /**
+     * @protected
+     * @param {?} activityList
+     * @return {?}
+     */
+    setActivityList(activityList) {
+        this._activityListDelegate.setDelegate(activityList);
     }
     /**
      * @return {?}
      */
-    isComponentRealised() {
-        return !!this._component;
+    get activityList() {
+        return this._activityListDelegate.readonly;
     }
     /**
+     * Returns the activity that is currently active.
+     * This model is only updated in the next tick after the view has been updated.
      * @return {?}
      */
-    isComplete() {
-        return this._complete;
+    getCurrentActivity() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.isActive()) {
+                return Promise.reject('no activity in progress');
+            }
+            else {
+                if (this.deferredGetCurrentActivity) {
+                    // we're already waiting then just return the same promise
+                    return this.deferredGetCurrentActivity.promise;
+                }
+                else {
+                    if (this.activityList.length < 1) {
+                        this.deferredGetCurrentActivity = Deferred.defer();
+                        return this.deferredGetCurrentActivity.promise;
+                    }
+                    else {
+                        return last(this.activityList.value);
+                    }
+                }
+            }
+        });
     }
     /**
-     * @param {?} component
+     * @template D, R, E
+     * @param {?} activityType
+     * @param {?=} data
      * @return {?}
      */
-    componentReady(component) {
-        assert.isNil(this._component);
-        this._component = component;
+    startActivity(activityType, data) {
+        return this._startActivity(activityType, data);
     }
     /**
+     * @param {?} confirm
      * @return {?}
      */
-    get component() {
-        return this._component;
+    confirm(confirm) {
+        // Important: we have to implement confirmOrReject as the main entry point
+        // as the canDeactivation guards need to be able to cancel an interaction
+        // without caring about returning a value.
+        return this.confirmOrReject(confirm).then((/**
+         * @return {?}
+         */
+        () => true)).catch((/**
+         * @return {?}
+         */
+        () => false));
     }
-    // @Trace()
     /**
-     * @param {?} result
+     * @param {?} alert
      * @return {?}
      */
-    onDone(result) {
-        this._complete = true;
-        this.activityCallbacks.onDone(result);
+    alert(alert) {
+        // TODO: Test disableClose === false
+        return this._startActivity(AlertDialogComponent, alert, false);
     }
-    // @Trace()
     /**
-     * @param {?} error
+     * @param {?} confirm
      * @return {?}
      */
-    onCancel(error) {
-        this._complete = true;
-        this.activityCallbacks.onCancel(error);
+    confirmOrReject(confirm) {
+        return this._startActivity(ConfirmationDialogComponent, confirm, true);
+    }
+    /**
+     * @template D, R, E
+     * @param {?} confirm
+     * @param {?} activityType
+     * @param {?=} data
+     * @return {?}
+     */
+    confirmThen(confirm, activityType, data) {
+        return this._startActivity(ConfirmThenDialogComponent, {
+            confirm,
+            activityType: activityType,
+            data: data
+        }, true);
     }
 }
 if (false) {
     /**
+     * Returns the current list of activities that are in progress.
+     * This model is only updated in the next tick after the view has been updated.
      * @type {?}
      * @private
      */
-    TabContext.prototype._complete;
+    InteractionContextBase.prototype._activityListDelegate;
     /**
      * @type {?}
      * @private
      */
-    TabContext.prototype._component;
-    /** @type {?} */
-    TabContext.prototype.activityData;
-    /** @type {?} */
-    TabContext.prototype.activityClass;
-    /** @type {?} */
-    TabContext.prototype.interactionContext;
-    /** @type {?} */
-    TabContext.prototype.activityCallbacks;
+    InteractionContextBase.prototype.deferredGetCurrentActivity;
+    /**
+     * @abstract
+     * @protected
+     * @template D, R, E
+     * @param {?} activityType
+     * @param {?=} data
+     * @param {?=} disableClose
+     * @return {?}
+     */
+    InteractionContextBase.prototype._startActivity = function (activityType, data, disableClose) { };
 }
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
 /**
+ * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
+ * external service.
+ *
+ * It might be nice to have wrapper component that allows more declarative use, i.e.
+ * <activity-view [activityClass]="...", [activityData]="..." (done)=".." (cancel)="..."></activity-view>
  * @template D, R, E
  */
-class ActivityContainerComponent extends InteractionContext {
-    constructor() {
-        super();
-        this.throttledNestedActivityFinishEvents = new MutableStream();
-        // tslint:disable-next-line:no-output-rename
-        this.initialActivityOutletContextEvent = new EventEmitter();
-        this.dynamicHeight = false;
-        this.activityTabs = new MutableListModel();
-        this._activityList = new MutableListModel();
+class ActivityOutletComponent {
+    /**
+     * @param {?} componentFactoryResolver
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    constructor(componentFactoryResolver, viewContainerRef, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
+    }
+    /**
+     * @param {?} activityContext
+     * @return {?}
+     */
+    set activityContext(activityContext) {
+        assert.isNil(this._activityContext);
+        this._activityContext = activityContext;
+        this.loadActivity(activityContext);
+    }
+    ;
+    /**
+     * @return {?}
+     */
+    get activityContext() {
+        return this._activityContext;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+    /**
+     * @param {?} activityContext
+     * @return {?}
+     */
+    loadActivity(activityContext) {
+        /** @type {?} */
+        const injector = Injector.create({
+            providers: [
+                {
+                    provide: InteractionContext,
+                    useValue: this.interactionContext
+                },
+                { provide: ACTIVITY_DATA, useValue: activityContext.activityData }
+            ],
+            parent: this.injector
+        });
+        /** @type {?} */
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(activityContext.activityClass);
+        this.viewContainerRef.clear();
+        this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
+        this.activityComponentRef.instance.initialise(activityContext);
+        if (this.activityContext.componentReady) {
+            this.activityContext.componentReady(this.component);
+        }
+    }
+    /**
+     * @return {?}
+     */
+    get component() {
+        return this.activityComponentRef.instance;
+    }
+}
+ActivityOutletComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-activity-outlet',
+                template: '',
+                styles: [":host{display:block}"]
+            }] }
+];
+/** @nocollapse */
+ActivityOutletComponent.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: ViewContainerRef },
+    { type: Injector }
+];
+ActivityOutletComponent.propDecorators = {
+    interactionContext: [{ type: Input }],
+    activityContext: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    ActivityOutletComponent.prototype.interactionContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityOutletComponent.prototype._activityContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityOutletComponent.prototype.activityComponentRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityOutletComponent.prototype.componentFactoryResolver;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityOutletComponent.prototype.viewContainerRef;
+    /**
+     * @type {?}
+     * @private
+     */
+    ActivityOutletComponent.prototype.injector;
+    /* Skipping unhandled member: ;*/
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * Note: this class is mutable and is stored in a list model.  This is normally a big no no but
+ *  we're manually deriving other models from the list after view state changes.  I.e. we not
+ *  using pectin chains on any of the mutable fields.
+ * @template D, R, E
+ */
+class TabContext {
+    /**
+     * @param {?} activityData
+     * @param {?} activityClass
+     * @param {?} interactionContext
+     * @param {?} activityCallbacks
+     */
+    constructor(activityData, activityClass, interactionContext, activityCallbacks) {
+        this.activityData = activityData;
+        this.activityClass = activityClass;
+        this.interactionContext = interactionContext;
+        this.activityCallbacks = activityCallbacks;
+        this._complete = false;
+    }
+    /**
+     * @return {?}
+     */
+    isComponentRealised() {
+        return !!this._component;
+    }
+    /**
+     * @return {?}
+     */
+    isComplete() {
+        return this._complete;
+    }
+    /**
+     * @param {?} component
+     * @return {?}
+     */
+    componentReady(component) {
+        assert.isNil(this._component);
+        this._component = component;
+    }
+    /**
+     * @return {?}
+     */
+    get component() {
+        return this._component;
+    }
+    // @Trace()
+    /**
+     * @param {?} result
+     * @return {?}
+     */
+    onDone(result) {
+        this._complete = true;
+        this.activityCallbacks.onDone(result);
+    }
+    // @Trace()
+    /**
+     * @param {?} error
+     * @return {?}
+     */
+    onCancel(error) {
+        this._complete = true;
+        this.activityCallbacks.onCancel(error);
+    }
+}
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    TabContext.prototype._complete;
+    /**
+     * @type {?}
+     * @private
+     */
+    TabContext.prototype._component;
+    /** @type {?} */
+    TabContext.prototype.activityData;
+    /** @type {?} */
+    TabContext.prototype.activityClass;
+    /** @type {?} */
+    TabContext.prototype.interactionContext;
+    /** @type {?} */
+    TabContext.prototype.activityCallbacks;
+}
+/**
+ * @template D, R, E
+ */
+class ActivityContainerComponent extends InteractionContextBase {
+    constructor() {
+        super();
+        this.throttledNestedActivityFinishEvents = new MutableStream();
+        this._initialActivityOutletContext = new MutableValueModel();
+        // tslint:disable-next-line:no-output-rename
+        this.initialActivityOutletContextEvent = new EventEmitter();
+        this.dynamicHeight = false;
+        this.activityTabs = new MutableListModel();
+        this._activityList = new MutableListModel();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         chain(this.throttledNestedActivityFinishEvents).throttle(50).subscribe((/**
          * @return {?}
          */
         () => this.onNestedActivityFinished()));
         this.setActivityList(this._activityList.readonly);
+        this.active = chain(this._initialActivityOutletContext).isNotNil();
     }
     /**
      * @param {?} initialContext
      * @return {?}
      */
     set initialActivityOutletContext(initialContext) {
-        assert.isNil(this._initialActivityOutletContext);
+        assert.isNil(this._initialActivityOutletContext.value);
         // we clean up at the start as we leave the initial activity in place after it finishes
         // so that the activity remains visible during the inplace-interaction-context animations.
         this.activityTabs.value = [];
@@ -1400,7 +1535,7 @@ class ActivityContainerComponent extends InteractionContext {
         /** @type {?} */
         const self = this;
         if (initialContext) {
-            this._initialActivityOutletContext = initialContext;
+            this._initialActivityOutletContext.value = initialContext;
             this.activityTabs.push(new TabContext(initialContext.activityData, initialContext.activityClass, this, {
                 onDone: (/**
                  * @param {?} result
@@ -1425,20 +1560,11 @@ class ActivityContainerComponent extends InteractionContext {
      * @return {?}
      */
     get initialActivityOutletContext() {
-        return this._initialActivityOutletContext;
-    }
-    /**
-     * @return {?}
-     */
-    isActive() {
-        return !!this._initialActivityOutletContext;
-    }
-    /**
-     * @return {?}
-     */
-    get isFinished() {
-        return !this._initialActivityOutletContext;
+        return this._initialActivityOutletContext.value;
     }
+    // get isFinished() {
+    //   return !this._initialActivityOutletContext;
+    // }
     /**
      * @return {?}
      */
@@ -1468,7 +1594,7 @@ class ActivityContainerComponent extends InteractionContext {
      * @param {?=} data
      * @return {?}
      */
-    startActivity(activityType, data) {
+    _startActivity(activityType, data) {
         this.cleanupStaleNestedActivities();
         /** @type {?} */
         const self = this;
@@ -1501,34 +1627,6 @@ class ActivityContainerComponent extends InteractionContext {
             self.tabs.selectedIndex = this.activityTabs.length;
         }));
     }
-    /**
-     * @param {?} alert
-     * @return {?}
-     */
-    alert(alert) {
-        return this.startActivity(AlertDialogComponent, alert);
-    }
-    /**
-     * @param {?} confirm
-     * @return {?}
-     */
-    confirmOrReject(confirm) {
-        return this.startActivity(ConfirmationDialogComponent, confirm);
-    }
-    /**
-     * @template D1, R1, E1
-     * @param {?} confirm
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    confirmThen(confirm, activityType, data) {
-        return this.startActivity(ConfirmThenDialogComponent, {
-            confirm,
-            activityType: activityType,
-            data: data
-        });
-    }
     /**
      * @private
      * @return {?}
@@ -1650,6 +1748,8 @@ if (false) {
     ActivityContainerComponent.prototype.outlets;
     /** @type {?} */
     ActivityContainerComponent.prototype.activityTabs;
+    /** @type {?} */
+    ActivityContainerComponent.prototype.active;
     /**
      * @type {?}
      * @private
@@ -1664,59 +1764,24 @@ if (false) {
 /**
  * @template D, R, E
  */
-class InplaceInteractionContextComponent extends InteractionContext {
+class InplaceInteractionContextComponent extends InteractionContextBase {
     constructor() {
         super();
+        this._active = new DelegatingValueModel().withDefault(false);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
     }
     /**
      * @return {?}
      */
     ngAfterViewInit() {
         this.setActivityList(this.interactionContext.activityList);
+        this._active.setDelegate(this.interactionContext.active);
     }
     /**
      * @return {?}
      */
-    isActive() {
-        return this.interactionContext.isActive();
-    }
-    /**
-     * @param {?} alert
-     * @return {?}
-     */
-    alert(alert) {
-        // TODO: Test disableClose === false
-        return this._startActivity(AlertDialogComponent, alert);
-    }
-    /**
-     * @param {?} confirm
-     * @return {?}
-     */
-    confirmOrReject(confirm) {
-        return this._startActivity(ConfirmationDialogComponent, confirm);
-    }
-    /**
-     * @template D1, R1, E1
-     * @param {?} confirm
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    confirmThen(confirm, activityType, data) {
-        return this._startActivity(ConfirmThenDialogComponent, {
-            confirm,
-            activityType: activityType,
-            data: data
-        });
-    }
-    /**
-     * @template D1, R1, E1
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    startActivity(activityType, data) {
-        return this._startActivity(activityType, data);
+    get active() {
+        return this._active.readonly;
     }
     /**
      * @protected
@@ -1765,13 +1830,18 @@ InplaceInteractionContextComponent.decorators = [
 /** @nocollapse */
 InplaceInteractionContextComponent.ctorParameters = () => [];
 InplaceInteractionContextComponent.propDecorators = {
-    interactionContext: [{ type: ViewChild, args: ["activityContainer", { static: true },] }]
+    interactionContext: [{ type: ViewChild, args: ['activityContainer', { static: true },] }]
 };
 if (false) {
     /** @type {?} */
     InplaceInteractionContextComponent.prototype.interactionContext;
     /** @type {?} */
     InplaceInteractionContextComponent.prototype.initialActivityContext;
+    /**
+     * @type {?}
+     * @private
+     */
+    InplaceInteractionContextComponent.prototype._active;
 }
 
 /**
@@ -1796,84 +1866,34 @@ InteractionOutletComponent.ctorParameters = () => [];
  * @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 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;
-    }
-}
-class DialogInteractionService extends InteractionContext {
+class DialogInteractionContext extends InteractionContextBase {
     /**
      * @param {?} dialogService
-     * @param {?} location
-     * @param {?} router
-     * @param {?} dialogServiceDefaults
-     * @param {?} matDialogDefaultConfig
+     * @param {?} config
      */
-    constructor(dialogService, location, router, dialogServiceDefaults, matDialogDefaultConfig) {
+    constructor(dialogService, config) {
         super();
         this.dialogService = dialogService;
-        this.location = location;
-        this.router = router;
-        this.dialogServiceDefaults = dialogServiceDefaults;
-        this.matDialogDefaultConfig = matDialogDefaultConfig;
-        this.startingGuard = new Guard();
-        this._inActivityPromise = new MutableValueModel(false);
+        this.config = config;
+        this._activeModel = new MutableValueModel(false);
         assert$1.notNil(dialogService);
-    }
-    /**
-     * @return {?}
-     */
-    isActive() {
-        return this._inActivityPromise.value;
+        this.onDispose((/**
+         * @return {?}
+         */
+        () => {
+            if (this.isActive()) {
+                lang.illegalState('Dispose called while active.');
+            }
+        }));
     }
     /**
      * @return {?}
      */
     get active() {
-        return this._inActivityPromise.readonly;
-    }
-    /**
-     * @template D, R, E
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    startActivity(activityType, data) {
-        return this._startActivity(activityType, data);
+        return this._activeModel.readonly;
     }
     /**
-     * @private
+     * @protected
      * @template D, R, E
      * @param {?} activityType
      * @param {?} data
@@ -1888,75 +1908,74 @@ class DialogInteractionService extends InteractionContext {
              */
             a => a.constructor.name)).join(', ')}`);
         }
-        return this.startingGuard.whileTrue((/**
+        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 {?}
          */
-        () => {
-            // console.log('######  STARTING');
-            this._inActivityPromise.value = true;
-            // this.currentActivityId = uuid.v1();
-            // this.location.go(this.router.routerState.snapshot.url, "aup");
-            /** @type {?} */
-            const self = this;
-            /** @type {?} */
-            const config = Object.assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig, this.dialogServiceDefaults, {
-                data,
-                disableClose,
-                panelClass: 'dialog-interaction-service'
-            });
+        (resolve, reject) => {
             /** @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
+            const activityContainer = matDialogRef.componentInstance;
+            self.safelyUpdateActivityListDelegate(activityContainer.activityList);
+            activityContainer.initialActivityOutletContext = {
+                activityClass: activityType,
+                activityData: data,
+                /**
+                 * @param {?} result
                  * @return {?}
                  */
-                promiseAlreadyFinished => {
-                    if (!promiseAlreadyFinished) {
-                        reject('auto-closed');
-                    }
-                }));
-                matDialogRef.updateSize();
-            })).finally((/**
+                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 {?}
              */
-            () => {
-                this._inActivityPromise.value = false;
-                // console.log('######  FINISHED');
-                // this.currentActivityId = null;
-                self.safelyUpdateActivityListDelegate(null);
+            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);
         }));
     }
     /**
@@ -1970,135 +1989,341 @@ class DialogInteractionService extends InteractionContext {
          */
         () => this.setActivityList(delegate)));
     }
-    /**
-     * @param {?} alert
-     * @return {?}
-     */
-    alert(alert) {
-        // TODO: Test disableClose === false
-        return this._startActivity(AlertDialogComponent, alert, false);
-    }
-    /**
-     * @param {?} confirm
-     * @return {?}
-     */
-    confirmOrReject(confirm) {
-        return this._startActivity(ConfirmationDialogComponent, confirm, true);
-    }
-    /**
-     * @template D, R, E
-     * @param {?} confirm
-     * @param {?} activityType
-     * @param {?=} data
-     * @return {?}
-     */
-    confirmThen(confirm, activityType, data) {
-        return this._startActivity(ConfirmThenDialogComponent, {
-            confirm,
-            activityType: activityType,
-            data: data
-        }, true);
-    }
 }
-DialogInteractionService.decorators = [
+DialogInteractionContext.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
 /** @nocollapse */
-DialogInteractionService.ctorParameters = () => [
+DialogInteractionContext.ctorParameters = () => [
     { type: MatDialog },
-    { type: Location },
-    { type: Router },
-    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
-    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
+    { type: MatDialogConfig }
 ];
-/** @nocollapse */ DialogInteractionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(ɵɵinject(MatDialog$1), ɵɵinject(Location), ɵɵinject(Router), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
+/** @nocollapse */ DialogInteractionContext.ngInjectableDef = ɵɵdefineInjectable({ factory: function DialogInteractionContext_Factory() { return new DialogInteractionContext(ɵɵinject(MatDialog$1), ɵɵinject(MatDialogConfig)); }, token: DialogInteractionContext, providedIn: "root" });
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    DialogInteractionService.prototype.startingGuard;
-    /**
-     * @type {?}
-     * @private
-     */
-    DialogInteractionService.prototype._inActivityPromise;
+    DialogInteractionContext.prototype._activeModel;
     /**
      * @type {?}
      * @private
      */
-    DialogInteractionService.prototype.dialogService;
-    /** @type {?} */
-    DialogInteractionService.prototype.location;
-    /** @type {?} */
-    DialogInteractionService.prototype.router;
-    /** @type {?} */
-    DialogInteractionService.prototype.dialogServiceDefaults;
+    DialogInteractionContext.prototype.dialogService;
     /** @type {?} */
-    DialogInteractionService.prototype.matDialogDefaultConfig;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class InteractionModule {
+    DialogInteractionContext.prototype.config;
 }
-InteractionModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    MatButtonModule,
-                    MatDialogModule,
-                    MatTabsModule$1,
-                    PortalModule,
-                    RouterModule
-                ],
-                declarations: [
-                    ActivityContainerComponent,
-                    ConfirmationDialogComponent,
-                    ConfirmThenDialogComponent,
-                    AlertDialogComponent,
-                    ActivityOutletComponent,
-                    InteractionOutletComponent,
-                    InplaceInteractionContextComponent
-                ],
-                exports: [
-                    ActivityContainerComponent,
-                    ActivityOutletComponent,
-                    InteractionOutletComponent,
-                    InplaceInteractionContextComponent
-                ],
-                entryComponents: [
-                    ActivityContainerComponent,
-                    ConfirmationDialogComponent,
-                    ConfirmThenDialogComponent,
-                    AlertDialogComponent
-                ],
-                providers: [
-                    DialogInteractionService,
-                ]
-            },] }
-];
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @abstract
- * @template T, E
- */
-class ParameterDefinition {
+class Guard extends ValueModel {
+    constructor() {
+        super({ initialValue: false });
+    }
     /**
-     * @param {?} propertyName
-     * @param {?} options
-     * @param {?=} urlFormat
+     * @return {?}
      */
-    constructor(propertyName, options, urlFormat) {
-        this.propertyName = propertyName;
+    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
+ */
+class InteractionModule {
+}
+InteractionModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    MatButtonModule,
+                    MatDialogModule,
+                    MatTabsModule$1,
+                    PortalModule,
+                    RouterModule
+                ],
+                declarations: [
+                    ActivityContainerComponent,
+                    ConfirmationDialogComponent,
+                    ConfirmThenDialogComponent,
+                    AlertDialogComponent,
+                    ActivityOutletComponent,
+                    InteractionOutletComponent,
+                    InplaceInteractionContextComponent
+                ],
+                exports: [
+                    ActivityContainerComponent,
+                    ActivityOutletComponent,
+                    InteractionOutletComponent,
+                    InplaceInteractionContextComponent
+                ],
+                entryComponents: [
+                    ActivityContainerComponent,
+                    ConfirmationDialogComponent,
+                    ConfirmThenDialogComponent,
+                    AlertDialogComponent
+                ],
+                providers: [
+                    DialogInteractionService,
+                ]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ * @template T, E
+ */
+class ParameterDefinition {
+    /**
+     * @param {?} propertyName
+     * @param {?} options
+     * @param {?=} urlFormat
+     */
+    constructor(propertyName, options, urlFormat) {
+        this.propertyName = propertyName;
         this.urlFormat = urlFormat;
         this.options = Opts.get(options);
         this.remember = this.options.getOptional('remember', false);
@@ -2853,74 +3078,153 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @abstract
- */
-class NavigationSession {
+class PlaceComponentDeactivationHandler {
     /**
-     * @protected
-     * @param {?} firstNavigation
-     * @param {?} appModalInteractionContext
+     * @param {?} component
+     * @param {?} navigationSession
      */
-    constructor(firstNavigation, appModalInteractionContext) {
-        this.firstNavigation = firstNavigation;
-        this.appModalInteractionContext = appModalInteractionContext;
-        this._alreadyAccepted = [];
-        this._visits = new Map();
-        this.componentDeactivationHandlers = new Map();
-        this.dialogOpenOnStart = this.appModalInteractionContext.isActive();
+    constructor(component, navigationSession) {
+        this.component = component;
+        this.navigationSession = navigationSession;
     }
     /**
-     * @param {?} visit
+     * @param {?} nextState
      * @return {?}
      */
-    storeVisit(visit) {
-        this._visits.set(visit.placeDefinition, visit);
+    canDeactivate(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);
+            }
+            return this.canDeactivatePromise;
+        });
     }
     /**
-     * @param {?} placeDef
+     * @protected
+     * @param {?} nextState
      * @return {?}
      */
-    getVisitFor(placeDef) {
-        return this._visits.get(placeDef);
+    canDeactivateComponent(nextState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Automatically cancel any active activities if the navigation session was triggered
+            // by the back button.
+            if (this.navigationSession.isPopState && this.component.interactionContext && this.component.interactionContext.isActive()) {
+                // Note: any modal interactions run in a different router outlet so we should never get place deactivated while
+                // one 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 and will leave the component route alone. This
+                //    is all handled by the InteractionGuard and so the component guards will never run.
+                // TODO: how will I handle this now??
+                // BUT: activities could call navigate while they're still active.. but we'll barf and tell them
+                //      to call activity.done(newVisitToNavigateTo) and let the caller do the navigate after the
+                //      dialog has closed.
+                // Can I capture this in placeRouter.navigate(..) ? i.e. navigationSession && navigationSession.interactionContext.isActive()
+                // Or can I just ignore it altogether?
+                // 1. I no longer have a singleton dialog interaction that can be returned from any component in the deactivation cycle.
+                // 2. We only ever check the component once per nav cycle
+                // 3. The navigation session interaction context will barf if multiple components try and use it at once.
+                // if (this.component.interactionContext instanceof DialogInteractionContext) {
+                //   // BUT: activities could call navigate while they're still active.. but we'll barf and tell them
+                //   //      to call activity.done(newVisitToNavigateTo) and let the caller do the navigate after the
+                //   //      dialog has closed.
+                //   lang.illegalState('Navigation started from an activity in a modal dialog. Have your activity return a Visit instead and navigate after the activity has finished');
+                // }
+                // Now we just cancel the current activity and stay where we are
+                this.cancelCurrentActivityOf(this.component.interactionContext);
+                return false;
+            }
+            // 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);
+            }
+            return true;
+        });
     }
     /**
-     * @param {?} component
-     * @param {?} nextState
+     * @protected
+     * @param {?} interactionContext
      * @return {?}
      */
-    canDeactivate(component, nextState) {
+    cancelCurrentActivityOf(interactionContext) {
         return __awaiter(this, void 0, void 0, function* () {
-            // lookup the handler and create it if we've not seen it yet
             /** @type {?} */
-            let handler = this.componentDeactivationHandlers.get(component);
-            if (!handler) {
-                /** @type {?} */
-                const isPrimaryHandler = this.componentDeactivationHandlers.size === 0;
-                handler = new NavigationSession.ComponentDeactivationHandler(component, this.appModalInteractionContext, isPrimaryHandler);
-                this.componentDeactivationHandlers.set(component, handler);
-            }
-            return handler.canDeactivate(nextState);
+            const activity = yield interactionContext.getCurrentActivity();
+            console.log('cancelling', { activity });
+            activity.cancel(null);
         });
     }
     /**
-     * @param {?} url
+     * @protected
+     * @param {?} nextState
+     * @return {?}
+     */
+    isNotJustAChangeInRouteId(nextState) {
+        // Because places with a route-id cover two route segments we get asked to deactivate
+        // if the route id is added or removed.  So if our path is still present the url
+        // then we shouldn't deactivate the place.
+        return !nextState.includesPathOf(this.component.placeDefinition);
+    }
+}
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceComponentDeactivationHandler.prototype.canDeactivatePromise;
+    /** @type {?} */
+    PlaceComponentDeactivationHandler.prototype.component;
+    /** @type {?} */
+    PlaceComponentDeactivationHandler.prototype.navigationSession;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ */
+class NavigationSession extends GarbageCollector {
+    /**
+     * @param {?} context
+     */
+    constructor(context) {
+        super();
+        this.context = context;
+        this._visits = new Map();
+    }
+    /**
      * @return {?}
      */
-    setPopstateReturnUrl(url) {
-        this._popStateReturnUrl = url;
+    get interactionContext() {
+        return null;
     }
     /**
+     * @param {?} visit
+     * @return {?}
+     */
+    storeVisit(visit) {
+        this._visits.set(visit.placeDefinition, visit);
+    }
+    /**
+     * @param {?} placeDef
      * @return {?}
      */
-    get isPopState() {
-        return !!this._popStateReturnUrl;
+    getVisitFor(placeDef) {
+        return this._visits.get(placeDef);
     }
     /**
+     * @param {?} newUrl
      * @return {?}
      */
-    get popStateReturnUrl() {
-        return this._popStateReturnUrl;
+    onBackClickedDuringNavigationInteraction(newUrl) {
+        return this.illegalTransition('onBackClickedDuringNavigationInteraction');
     }
     /**
      * @return {?}
@@ -2928,573 +3232,733 @@ class NavigationSession {
     getVisits() {
         return Array.from(this._visits.values());
     }
-}
-if (false) {
     /**
-     * @type {?}
-     * @private
+     * @protected
+     * @template R
+     * @param {?} message
+     * @return {?}
      */
-    NavigationSession.prototype._alreadyAccepted;
+    illegalTransition(message) {
+        return lang.illegalState(`${message.toString()} not supported by ${this.toString()}`);
+    }
     /**
-     * @type {?}
-     * @private
+     * @protected
+     * @return {?}
      */
-    NavigationSession.prototype._visits;
+    currentRouterUrl() {
+        return this.context.router.routerState ? this.context.router.routerState.snapshot.url : null;
+    }
+    /**
+     * @protected
+     * @param {?} event
+     * @return {?}
+     */
+    createActiveSession(event) {
+        // TODO: check if the event is purely for interaction context changes.
+        return new NavigationSession.Active(this.context, event.navigationTrigger === 'popstate', this.currentRouterUrl());
+    }
+    /**
+     * @protected
+     * @param {?} url
+     * @return {?}
+     */
+    updateLocation(url) {
+        this.context.angularLocation.go(url);
+    }
+    /**
+     * @return {?}
+     */
+    toString() {
+        return this.constructor.name;
+    }
+}
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], NavigationSession.prototype, "updateLocation", null);
+if (false) {
     /**
      * @type {?}
      * @private
      */
-    NavigationSession.prototype._popStateReturnUrl;
+    NavigationSession.prototype._visits;
+    /** @type {?} */
+    NavigationSession.prototype.isPopState;
     /** @type {?} */
-    NavigationSession.prototype.isExternal;
+    NavigationSession.prototype.active;
     /** @type {?} */
-    NavigationSession.prototype.dialogOpenOnStart;
+    NavigationSession.prototype.startingUrl;
     /**
      * @type {?}
-     * @private
+     * @protected
      */
-    NavigationSession.prototype.componentDeactivationHandlers;
-    /** @type {?} */
-    NavigationSession.prototype.firstNavigation;
+    NavigationSession.prototype.context;
     /**
-     * @type {?}
-     * @private
+     * @abstract
+     * @param {?} event
+     * @return {?}
      */
-    NavigationSession.prototype.appModalInteractionContext;
+    NavigationSession.prototype.onStart = function (event) { };
+    /**
+     * @abstract
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationSession.prototype.onCancel = function (event) { };
+    /**
+     * @abstract
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationSession.prototype.onError = function (event) { };
+    /**
+     * @abstract
+     * @param {?} event
+     * @return {?}
+     */
+    NavigationSession.prototype.onEnd = function (event) { };
+    /**
+     * @abstract
+     * @param {?} component
+     * @param {?} nextState
+     * @return {?}
+     */
+    NavigationSession.prototype.canDeactivatePlace = function (component, nextState) { };
 }
 (function (NavigationSession) {
-    class External extends NavigationSession {
+    class Context {
         /**
-         * @param {?} isFirstTime
-         * @param {?} appModelInteractionContext
+         * @param {?} router
+         * @param {?} modalInteractionService
+         * @param {?} angularLocation
+         * @param {?} notifySuccess
          */
-        constructor(isFirstTime, appModelInteractionContext) {
-            super(isFirstTime, appModelInteractionContext);
-            this.isExternal = true;
+        constructor(router, modalInteractionService, angularLocation, notifySuccess) {
+            this.router = router;
+            this.modalInteractionService = modalInteractionService;
+            this.angularLocation = angularLocation;
+            this.notifySuccess = notifySuccess;
         }
     }
+    NavigationSession.Context = Context;
     if (false) {
         /** @type {?} */
-        External.prototype.isExternal;
+        Context.prototype.router;
+        /** @type {?} */
+        Context.prototype.modalInteractionService;
+        /** @type {?} */
+        Context.prototype.angularLocation;
+        /** @type {?} */
+        Context.prototype.notifySuccess;
     }
-    class Internal extends NavigationSession {
+    class Idle extends NavigationSession {
         /**
-         * @param {?} visit
-         * @param {?} appModelInteractionContext
+         * @param {?} context
          */
-        constructor(visit, appModelInteractionContext) {
-            super(false, appModelInteractionContext);
-            this.isExternal = false;
-            this.storeVisit(visit);
+        constructor(context) {
+            super(context);
+            this.active = false;
+            this.startingUrl = null;
+        }
+        /**
+         * @param {?} component
+         * @param {?} nextState
+         * @return {?}
+         */
+        canDeactivatePlace(component, nextState) {
+            return __awaiter(this, void 0, void 0, function* () {
+                return this.illegalTransition('canDeactivatePlace');
+            });
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onStart(event) {
+            // calling angularLocation.go() to clear back state can trigger router cycles to the current url if we don't ignore them
+            if (event.url === this.currentRouterUrl()) {
+                Logger.get(this).info(`navigation started to same url -> ${event.url}`);
+                return this;
+            }
+            if (event.url === (`${this.currentRouterUrl()}(aup-interaction:modal)`)) {
+                Logger.get(this).info(`navigation started with interaction outlet -> ${event.url}`);
+                return new ModalInteractionSession(this.context, event.url);
+            }
+            return this.createActiveSession(event);
         }
-    }
-    if (false) {
-        /** @type {?} */
-        Internal.prototype.isExternal;
-    }
-    class Factory {
         /**
-         * @param {?} interactionContext
+         * @param {?} event
+         * @return {?}
          */
-        constructor(interactionContext) {
-            this.interactionContext = interactionContext;
+        onCancel(event) {
+            return this.illegalTransition(event);
         }
         /**
-         * @param {?} visit
+         * @param {?} event
          * @return {?}
          */
-        createInternal(visit) {
-            return new Internal(visit, this.interactionContext);
+        onEnd(event) {
+            return this.illegalTransition(event);
         }
         /**
-         * @param {?} firstTimeRoute
+         * @param {?} event
          * @return {?}
          */
-        createExternal(firstTimeRoute) {
-            return new External(firstTimeRoute, this.interactionContext);
+        onError(event) {
+            return this.illegalTransition(event);
         }
     }
-    NavigationSession.Factory = Factory;
+    NavigationSession.Idle = Idle;
     if (false) {
         /** @type {?} */
-        Factory.prototype.interactionContext;
+        Idle.prototype.isPopState;
+        /** @type {?} */
+        Idle.prototype.active;
+        /** @type {?} */
+        Idle.prototype.startingUrl;
     }
-    class ComponentDeactivationHandler {
+    class Active extends NavigationSession {
         /**
-         * @param {?} component
-         * @param {?} appModelInteractionContext
-         * @param {?} primary
+         * @param {?} context
+         * @param {?} isPopState
+         * @param {?} startingUrl
          */
-        constructor(component, appModelInteractionContext, primary) {
-            this.component = component;
-            this.appModelInteractionContext = appModelInteractionContext;
-            this.primary = primary;
-            this.alreadyAccepted = false;
-            // super();
+        constructor(context, isPopState, startingUrl) {
+            super(context);
+            this.isPopState = isPopState;
+            this.startingUrl = startingUrl;
+            this.active = true;
+            this.componentDeactivationHandlers = new Map();
+            this._interactionContext = this.context.modalInteractionService.createExclusiveInteractionContext();
+            this.onDispose((/**
+             * @return {?}
+             */
+            () => {
+                // 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.
+                if (this._interactionContext) {
+                    this._interactionContext.dispose();
+                }
+            }));
         }
         /**
-         * @param {?} nextState
          * @return {?}
          */
-        canDeactivate(nextState) {
-            return __awaiter(this, void 0, void 0, function* () {
-                console.log(`${this.constructor.name}.canDeactivate`, { component: this.component });
-                if (this.alreadyAccepted) {
-                    // We'll get called multiple times if there's any parameter sanitisation so
-                    // we always return true if we accepted on a previous cycle of the current
-                    // navigation session.
-                    return true;
-                }
-                else {
-                    if (this.primary && this.appModelInteractionContext.isActive()) {
-                        // We check the global interaction first
-                        yield this.cancelCurrentActivityOf(this.appModelInteractionContext);
-                        return false;
-                    }
-                    this.alreadyAccepted = yield this.canDeactivateComponent(nextState);
-                    return this.alreadyAccepted;
-                }
-            });
+        get interactionContext() {
+            return this._interactionContext;
         }
         /**
-         * @protected
-         * @param {?} nextState
+         * @param {?} event
          * @return {?}
          */
-        canDeactivateComponent(nextState) {
-            return __awaiter(this, void 0, void 0, function* () {
-                // check if the component has an active interaction.  This will handle
-                // an inplace interaction contexts
-                /** @type {?} */
-                const hasCustomInteractionContext = this.component.interactionContext &&
-                    !this.isAppModalInteractionContext(this.component.interactionContext) &&
-                    this.component.interactionContext.isActive();
-                if (hasCustomInteractionContext) {
-                    this.cancelCurrentActivityOf(this.component.interactionContext);
-                    return false;
-                }
-                if (this.isLeavingCurrentPlace(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();
-                }
-                return true;
-            });
+        onStart(event) {
+            // active sessions can have many cancel start cycles.
+            return this;
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onEnd(event) {
+            // navigation succeeded
+            this.context.notifySuccess(this);
+            return new Idle(this.context);
+        }
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onCancel(event) {
+            // active sessions can have many cancel start cycles.
+            return 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 {?} interactionContext
+         * @param {?} locationTriggerUrl
          * @return {?}
          */
-        isAppModalInteractionContext(interactionContext) {
-            return this.appModelInteractionContext === interactionContext;
+        onBackClickedDuringNavigationInteraction(locationTriggerUrl) {
+            /** @type {?} */
+            const context = this.detachInteractionContext();
+            context.getCurrentActivity().then((/**
+             * @param {?} activity
+             * @return {?}
+             */
+            activity => {
+                context.addActivityListener({
+                    /**
+                     * @return {?}
+                     */
+                    onActivityFinished() {
+                        context.dispose();
+                    },
+                    /**
+                     * @return {?}
+                     */
+                    onActivityStarted() {
+                    }
+                });
+                activity.cancel(null);
+            }));
+            return new CancelledDuringNavigationInteraction(this.context, this.startingUrl, locationTriggerUrl);
         }
         /**
-         * @protected
-         * @param {?} interactionContext
+         * @param {?} component
+         * @param {?} nextState
          * @return {?}
          */
-        cancelCurrentActivityOf(interactionContext) {
+        canDeactivatePlace(component, nextState) {
             return __awaiter(this, void 0, void 0, function* () {
+                // lookup the handler and create it if we've not seen it yet
                 /** @type {?} */
-                const activity = yield interactionContext.getCurrentActivity();
-                console.log('cancelling', { activity });
-                activity.cancel(null);
+                let handler = this.componentDeactivationHandlers.get(component);
+                if (!handler) {
+                    /** @type {?} */
+                    const isPrimaryHandler = this.componentDeactivationHandlers.size === 0;
+                    handler = new PlaceComponentDeactivationHandler(component, this);
+                    this.componentDeactivationHandlers.set(component, handler);
+                }
+                return handler.canDeactivate(nextState);
             });
         }
         /**
-         * @protected
-         * @param {?} nextState
+         * @private
+         * @return {?}
+         */
+        detachInteractionContext() {
+            /** @type {?} */
+            const context = this._interactionContext;
+            this._interactionContext = null;
+            return context;
+        }
+        /**
          * @return {?}
          */
-        isLeavingCurrentPlace(nextState) {
-            return !nextState.includesPathOf(this.component.placeDefinition);
+        toString() {
+            return `${this.constructor.name}(startingUrl: ${this.startingUrl}, isPopState:${this.isPopState})`;
         }
     }
-    NavigationSession.ComponentDeactivationHandler = ComponentDeactivationHandler;
+    NavigationSession.Active = Active;
     if (false) {
+        /** @type {?} */
+        Active.prototype.active;
         /**
          * @type {?}
          * @private
          */
-        ComponentDeactivationHandler.prototype.alreadyAccepted;
-        /** @type {?} */
-        ComponentDeactivationHandler.prototype.component;
+        Active.prototype.componentDeactivationHandlers;
+        /**
+         * @type {?}
+         * @private
+         */
+        Active.prototype._interactionContext;
         /** @type {?} */
-        ComponentDeactivationHandler.prototype.appModelInteractionContext;
+        Active.prototype.isPopState;
         /** @type {?} */
-        ComponentDeactivationHandler.prototype.primary;
-    }
-})(NavigationSession || (NavigationSession = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class PlaceHistory {
-    constructor() {
-        this._history = new Map();
+        Active.prototype.startingUrl;
     }
-    // @Trace()
-    /**
-     * @param {?} state
-     * @return {?}
-     */
-    add(state) {
-        /** @type {?} */
-        const history = this.getHistory(state.placeDefinition);
-        /** @type {?} */
-        const previousState = ___default.first(history);
-        if (!previousState || state.hasChangedFrom(previousState)) {
-            history.unshift(state); // LIFO
-            this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
+    class ModalInteractionSession extends NavigationSession {
+        /**
+         * @param {?} context
+         * @param {?} startingUrl
+         */
+        constructor(context, startingUrl) {
+            super(context);
+            this.startingUrl = startingUrl;
+            this.active = false;
+            this.isPopState = false;
         }
-    }
-    /**
-     * @param {?} placeDef
-     * @return {?}
-     */
-    getHistory(placeDef) {
-        /** @type {?} */
-        let history = this._history.get(placeDef);
-        if (!history) {
-            history = [];
-            this.setHistory(placeDef, history);
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        static hasInteraction(url) {
+            return url.endsWith('(aup-interaction:modal)');
         }
-        return history;
-    }
-    /**
-     * @private
-     * @param {?} placeDef
-     * @param {?} history
-     * @return {?}
-     */
-    setHistory(placeDef, history) {
-        this._history.set(placeDef, history);
-    }
-}
-PlaceHistory.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-PlaceHistory.ctorParameters = () => [];
-/** @nocollapse */ PlaceHistory.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(); }, token: PlaceHistory, providedIn: "root" });
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceHistory.prototype._history;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @param {?} options
- * @return {?}
- */
-function Place(options) {
-    return (/**
-     * @param {?} target
-     * @return {?}
-     */
-    (target) => {
-        if (PlaceComponent.isPlaceComponentConstructor(target)) {
-            PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, isNil(options.authenticate) ? false : options.authenticate, options.data, PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
-             * @param {?} c
-             * @return {?}
-             */
-            c => PlaceComponent.getDefinition(c)))));
+        /**
+         * @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;
         }
-        else {
-            lang.illegalState(`${target} must extend PlaceComponent to use the @Place decorator`);
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onCancel(event) {
+            // this.updateLocation(this.startingUrl);
+            return this;
         }
-    });
-}
-(function (Place) {
-    /**
-     * @record
-     */
-    function Options() { }
-    Place.Options = Options;
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        onEnd(event) {
+            if (this.context.modalInteractionService.isActive()) {
+                return this;
+            }
+            else {
+                return new Idle(this.context);
+            }
+        }
+        /**
+         * @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;
+            });
+        }
+    }
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [NavigationStart]),
+        __metadata("design:returntype", NavigationSession)
+    ], ModalInteractionSession.prototype, "onStart", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [NavigationCancel]),
+        __metadata("design:returntype", NavigationSession)
+    ], ModalInteractionSession.prototype, "onCancel", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [NavigationEnd]),
+        __metadata("design:returntype", NavigationSession)
+    ], ModalInteractionSession.prototype, "onEnd", null);
+    NavigationSession.ModalInteractionSession = ModalInteractionSession;
     if (false) {
         /** @type {?} */
-        Options.prototype.path;
-        /** @type {?|undefined} */
-        Options.prototype.data;
-        /** @type {?|undefined} */
-        Options.prototype.authenticate;
-        /** @type {?|undefined} */
-        Options.prototype.children;
-        /** @type {?|undefined} */
-        Options.prototype.defaultChild;
+        ModalInteractionSession.prototype.active;
+        /** @type {?} */
+        ModalInteractionSession.prototype.isPopState;
+        /** @type {?} */
+        ModalInteractionSession.prototype.startingUrl;
     }
-})(Place || (Place = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-// WARNING: interface has both a type and a value, skipping emit
-var Formatter;
-(function (Formatter) {
-    class StringType {
+    class CancelledDuringNavigationInteraction extends NavigationSession {
         /**
-         * @param {?} value
+         * @param {?} context
+         * @param {?} startingUrl
+         * @param {?} locationChangeTriggerUrl
+         */
+        constructor(context, startingUrl, locationChangeTriggerUrl) {
+            super(context);
+            this.startingUrl = startingUrl;
+            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);
+        }
+        /**
+         * @param {?} component
+         * @param {?} nextState
          * @return {?}
          */
-        format(value) {
-            return value;
+        canDeactivatePlace(component, nextState) {
+            return __awaiter(this, void 0, void 0, function* () {
+                return false;
+            });
         }
         /**
-         * @param {?} value
+         * @param {?} event
          * @return {?}
          */
-        parse(value) {
-            return value;
+        onCancel(event) {
+            return this.ignore(event);
         }
-    }
-    class NumberType {
         /**
-         * @param {?} value
+         * @param {?} event
          * @return {?}
          */
-        format(value) {
-            return ___default.isNumber(value) && !___default.isNaN(value) ? `${value}` : null;
+        onEnd(event) {
+            return this.ignore(event);
         }
         /**
-         * @param {?} value
+         * @param {?} event
          * @return {?}
          */
-        parse(value) {
-            /** @type {?} */
-            const parsed = Number.parseFloat(value);
-            return ___default.isNaN(parsed) ? null : parsed;
+        onError(event) {
+            return this.ignore(event);
         }
-    }
-    class BooleanType {
         /**
-         * @param {?} value
+         * @param {?} event
          * @return {?}
          */
-        format(value) {
-            return value ? 'true' : 'false';
+        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);
+            }
         }
         /**
-         * @param {?} value
+         * @param {?} event
+         * @param {?=} reason
          * @return {?}
          */
-        parse(value) {
-            return value === 'true';
+        ignore(event, reason) {
+            reason = reason ? ` (${reason})` : '';
+            Logger.get(this).info(`ignoring router event${reason}: ${event.constructor.name} -> ${event.url}`);
+            return this;
+        }
+        /**
+         * @return {?}
+         */
+        toString() {
+            return `${this.constructor.name}(startingUrl: ${this.startingUrl}, locationChangeTriggerUrl:${this.locationChangeTriggerUrl})`;
         }
     }
-    Formatter.STRING = new StringType();
-    Formatter.NUMBER = new NumberType();
-    Formatter.BOOLEAN = new BooleanType();
-})(Formatter || (Formatter = {}));
+    NavigationSession.CancelledDuringNavigationInteraction = CancelledDuringNavigationInteraction;
+    if (false) {
+        /** @type {?} */
+        CancelledDuringNavigationInteraction.prototype.active;
+        /** @type {?} */
+        CancelledDuringNavigationInteraction.prototype.isPopState;
+        /**
+         * @type {?}
+         * @private
+         */
+        CancelledDuringNavigationInteraction.prototype.capturedFauxRouterStart;
+        /** @type {?} */
+        CancelledDuringNavigationInteraction.prototype.startingUrl;
+        /** @type {?} */
+        CancelledDuringNavigationInteraction.prototype.locationChangeTriggerUrl;
+    }
+})(NavigationSession || (NavigationSession = {}));
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @record
- * @template T
- */
-function RouteIdOptions() { }
-if (false) {
-    /** @type {?|undefined} */
-    RouteIdOptions.prototype.as;
-    /** @type {?|undefined} */
-    RouteIdOptions.prototype.optional;
-    /** @type {?|undefined} */
-    RouteIdOptions.prototype.remember;
-    /** @type {?|undefined} */
-    RouteIdOptions.prototype.defaultValue;
-}
-/**
- * @record
- * @template T
- */
-function RouteParameterOptions() { }
-if (false) {
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.as;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.optional;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.remember;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.storeInUrl;
-}
-/**
- * @record
- * @template T
- */
-function RouteListParameterOptions() { }
-if (false) {
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.as;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.optional;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.remember;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.storeInUrl;
-}
-/**
- * @template T
- * @param {?} type
- * @param {?=} options
- * @return {?}
- */
-function RouteId(type, options) {
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
+class PlaceHistory {
+    constructor() {
+        this._history = new Map();
+    }
+    // @Trace()
+    /**
+     * @param {?} state
      * @return {?}
      */
-    (prototype, propertyKey) => {
+    add(state) {
         /** @type {?} */
-        const param = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
-/**
- * @template T
- * @param {?=} options
- * @return {?}
- */
-function VisitParameter(options) {
-    /** @type {?} */
-    const opts = Opts.get(options);
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
+        const history = this.getHistory(state.placeDefinition);
+        /** @type {?} */
+        const previousState = ___default.first(history);
+        if (!previousState || state.hasChangedFrom(previousState)) {
+            history.unshift(state); // LIFO
+            this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
+        }
+    }
+    /**
+     * @param {?} placeDef
      * @return {?}
      */
-    (prototype, propertyKey) => {
+    getHistory(placeDef) {
         /** @type {?} */
-        const param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
-/**
- * @template E
- * @param {?=} options
- * @return {?}
- */
-function VisitParameterList(options) {
-    /** @type {?} */
-    const opts = Opts.get(options);
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
+        let history = this._history.get(placeDef);
+        if (!history) {
+            history = [];
+            this.setHistory(placeDef, history);
+        }
+        return history;
+    }
+    /**
+     * @private
+     * @param {?} placeDef
+     * @param {?} history
      * @return {?}
      */
-    (prototype, propertyKey) => {
-        /** @type {?} */
-        const param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
+    setHistory(placeDef, history) {
+        this._history.set(placeDef, history);
+    }
+}
+PlaceHistory.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+PlaceHistory.ctorParameters = () => [];
+/** @nocollapse */ PlaceHistory.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(); }, token: PlaceHistory, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceHistory.prototype._history;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-let NoopGatewayPlace = class NoopGatewayPlace extends PlaceComponent {
+class UrlSnapshot {
     /**
-     * @param {?} router
+     * @param {?} urlTree
      */
-    constructor(router) {
-        super();
-        this.router = router;
+    constructor(urlTree) {
+        this.urlTree = urlTree;
+        // console.log({ segments: this.urlTree.root.children.primary.segments });
     }
     /**
      * @return {?}
      */
-    ngOnInit() {
-        this.router.navigateByUrl(this.returnUrl.value);
+    cloneUrlSegmentList() {
+        return [...this.urlTree.root.children.primary.segments];
     }
-};
-NoopGatewayPlace.ctorParameters = () => [
-    { type: Router }
-];
-NoopGatewayPlace.decorators = [
-    { type: Component, args: [{
-                template: ''
-            }] }
-];
-/** @nocollapse */
-NoopGatewayPlace.ctorParameters = () => [
-    { type: Router }
-];
-__decorate([
-    VisitParameter({ storeInUrl: Formatter.STRING }),
-    __metadata("design:type", MutableValueModel)
-], NoopGatewayPlace.prototype, "returnUrl", void 0);
-NoopGatewayPlace = __decorate([
-    Place({
-        path: 'aup-gateway-route',
-        authenticate: false
-    }),
-    __metadata("design:paramtypes", [Router])
-], NoopGatewayPlace);
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    updateVisitSegments(visit) {
+        // Ugly, but it works for now.
+        /** @type {?} */
+        const segments = this.cloneUrlSegmentList();
+        /** @type {?} */
+        const visitSegments = this.convertToUrlSegments(visit);
+        /** @type {?} */
+        const replaceAt = segments.findIndex((/**
+         * @param {?} segment
+         * @return {?}
+         */
+        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;
+    }
+    /**
+     * Converts the visit into segments.  Please not that these segments are not e
+     * @param {?} visit
+     * @return {?}
+     */
+    convertToUrlSegments(visit) {
+        return visit.placeDefinition.hasRouteId() ?
+            [
+                // NOTE:
+                // It's important to attach the params to the root path and not the id.  If we attach them
+                // to an empty id then the angular router won't match the pattern.
+                new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
+                new UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
+            ]
+            :
+                [
+                    new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
+                ];
+    }
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    createRedirectCommandsFor(visit) {
+        /** @type {?} */
+        const segments = this.updateVisitSegments(visit);
+        /** @type {?} */
+        const commands = [];
+        segments.forEach((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => {
+            commands.push(s.path);
+            if (s.parameterMap.keys.length > 0) {
+                commands.push(s.parameters);
+            }
+        }));
+        return commands;
+    }
+    /**
+     * @param {?} placeDef
+     * @return {?}
+     */
+    includesPathOf(placeDef) {
+        return this.cloneUrlSegmentList().find((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.path === placeDef.path));
+    }
+}
 if (false) {
     /** @type {?} */
-    NoopGatewayPlace.prototype.returnUrl;
-    /** @type {?} */
-    NoopGatewayPlace.prototype.router;
+    UrlSnapshot.prototype.urlTree;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-const noopPlaceDef = PlaceComponent.getDefinition(NoopGatewayPlace);
 class PlaceRouter extends GarbageCollector {
     /**
      * @param {?} router
      * @param {?} urlSerializer
-     * @param {?} interactionContext
      * @param {?} angularLocation
      * @param {?} placeHistory
+     * @param {?} modalInteractionService
      */
-    constructor(router, urlSerializer, interactionContext, angularLocation, placeHistory) {
+    constructor(router, urlSerializer, angularLocation, placeHistory, modalInteractionService) {
         super();
         this.router = router;
         this.urlSerializer = urlSerializer;
-        this.interactionContext = interactionContext;
         this.angularLocation = angularLocation;
         this.placeHistory = placeHistory;
+        this.modalInteractionService = modalInteractionService;
         this.firstRoute = true;
         this._navigationSessionModel = new MutableValueModel();
         this._activeVisits = new MutableListModel();
-        this.initialRedirectStarted = false;
-        this.initialRedirectFinished = false;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.activeVisitIndex = chain(this._activeVisits).indexBy('placeDefinition');
-        this.navigationSessionFactory = new NavigationSession.Factory(interactionContext);
-        angularLocation.onUrlChange((/**
-         * @param {?} url
+        this.navigationSessionActive = chain(this.navigationSessionModel).pluck('active');
+        this._navigationSessionContext = new NavigationSession.Context(this.router, this.modalInteractionService, this.angularLocation, (/**
+         * @param {?} session
          * @return {?}
          */
-        url => {
-            console.log(`location.onUrlChange -> ${url}`);
+        session => {
+            this.processNavigationSuccess(session);
         }));
+        this._navigationSessionModel.value = new NavigationSession.Idle(this._navigationSessionContext);
         // TODO: make setup the callbacks in during module initiation to make this testable.
         this.router.events.subscribe((/**
          * @param {?} event
@@ -3505,28 +3969,75 @@ class PlaceRouter extends GarbageCollector {
             // ======================
             // NavigationStart -> .... -> NavigationCancel --> redirect, go around again in the same session
             // NavigationStart -> .... -> NavigationEnd --> navigation complete, end session.
-            // NavigationStart -> .... -> NavigationError --> navigation canceled, end session.
+            // NavigationStart -> .... -> NavigationError --> navigation aborted, end session.
             // =======================
             if (event instanceof NavigationStart) {
-                this.onAngularRouterStarted(event);
+                this.runStateTransition((/**
+                 * @param {?} session
+                 * @return {?}
+                 */
+                session => session.onStart(event)));
             }
             if (event instanceof NavigationEnd) {
-                this.onAngularRouterFinished(false);
+                this.runStateTransition((/**
+                 * @param {?} session
+                 * @return {?}
+                 */
+                session => session.onEnd(event)));
             }
             if (event instanceof NavigationError) {
-                this.onAngularRouterFinished(true);
+                this.runStateTransition((/**
+                 * @param {?} session
+                 * @return {?}
+                 */
+                session => session.onError(event)));
+            }
+            if (event instanceof NavigationCancel) {
+                this.runStateTransition((/**
+                 * @param {?} session
+                 * @return {?}
+                 */
+                session => session.onCancel(event)));
             }
         }));
-        this.navigationSessionActive = chain(this.navigationSessionModel).isNotNil();
-        this.navigationSessionActive.subscribe((/**
-         * @param {?} active
+        // Push dialog state to the url so we can capture the back button.
+        this.modalInteractionService.addActivityListener(new PlaceRouter.InteractionRouteMediator(this.navigationSessionActive, this.router));
+        // 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.
+        angularLocation.onUrlChange((/**
+         * @param {?} url
          * @return {?}
          */
-        active => {
-            console.log('navigationSessionActive', active);
+        url => {
+            console.log(`#### url changed -> ${url}`);
+            /** @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 txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
-        // txo.observe('this.navigationSessionModel', this.navigationSessionModel);
+    }
+    /**
+     * @private
+     * @param {?} session
+     * @return {?}
+     */
+    processNavigationSuccess(session) {
+        /** @type {?} */
+        const visits = session.getVisits();
+        visits.forEach((/**
+         * @param {?} v
+         * @return {?}
+         */
+        v => this.placeHistory.add(v)));
+        // Update visits before we end the navigation session.  This allows the placeOutets to
+        // ignore visit changes that occur while the navigation is in progress
+        this._activeVisits.value = visits;
     }
     /**
      * @return {?}
@@ -3570,14 +4081,6 @@ class PlaceRouter extends GarbageCollector {
             })));
         });
     }
-    /**
-     * @param {?} visit
-     * @param {?=} navigationExtras
-     * @return {?}
-     */
-    createRedirectFor(visit, navigationExtras) {
-        return this.router.createUrlTree(this.createRouteParameters(visit), navigationExtras);
-    }
     // @Trace()
     /**
      * @param {?} activatedRoute
@@ -3599,15 +4102,6 @@ class PlaceRouter extends GarbageCollector {
                 router => {
                     /** @type {?} */
                     const commands = this.parseUrl(this.router.routerState.snapshot).createRedirectCommandsFor(next);
-                    // // we have to to use the definition for route id as our redirection always includes
-                    // // the id in the url segements (but leaves it blank when there's no id). I.e. in the
-                    // // no id case we're doing the following redirect [<placePath>, ""] -> ["..", <id>]
-                    // const relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
-                    // const commands = [
-                    //   relativePath,
-                    //   ...this.createRouteParameters(next),
-                    //   ...this.extractChildPath(activatedRoute.snapshot)
-                    // ];
                     console.log('### Push Changes to route Redirect', { commands });
                     return router.navigate(commands);
                 }));
@@ -3616,85 +4110,112 @@ class PlaceRouter extends GarbageCollector {
     }
     /**
      * @param {?} visit
-     * @param {?} customNavigation
+     * @param {?} runNavigationCommands
      * @return {?}
      */
-    doNavigation(visit, customNavigation) {
+    doNavigation(visit, runNavigationCommands) {
         return __awaiter(this, void 0, void 0, function* () {
-            this._navigationSessionModel.value = this.navigationSessionFactory.createInternal(visit);
+            if (this.navigationSessionActive.value) {
+                lang.illegalState('Navigation already in progress');
+            }
+            this.runStateTransition((/**
+             * @param {?} current
+             * @return {?}
+             */
+            current => {
+                /** @type {?} */
+                const session = new NavigationSession.Active(this._navigationSessionContext, false, this.router.routerState.snapshot.url);
+                session.storeVisit(visit);
+                return session;
+            }));
             try {
-                yield customNavigation(this.router);
+                yield runNavigationCommands(this.router);
             }
             finally {
                 // Router has finished (since there was no router change required) so we
                 // need to end the navigation session.
-                if (this.navigationSession && !this.router.getCurrentNavigation()) {
-                    this.onAngularRouterFinished(false);
+                if (this.navigationSession.active && !this.router.getCurrentNavigation()) {
+                    this.runStateTransition((/**
+                     * @param {?} session
+                     * @return {?}
+                     */
+                    session => session.onEnd(new NavigationEnd(-1, '', ''))));
                 }
             }
         });
     }
     /**
-     * @private
-     * @param {?} visit
+     * @protected
+     * @param {?} transition
      * @return {?}
      */
-    createRouteParameters(visit) {
+    runStateTransition(transition) {
         /** @type {?} */
-        const def = visit.placeDefinition;
-        return visit.hasRouteId() ?
-            [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
-            [def.getFormattedRouteParameters(visit)];
-    }
-    // @Trace()
-    /**
-     * @private
-     * @param {?} event
-     * @return {?}
-     */
-    onAngularRouterStarted(event) {
-        if (!this.navigationSession) { // We been activated by an external route rather than placeRouter.go(visit)
-            console.log('navigation started', { firstTime: this.firstRoute });
-            /** @type {?} */
-            const session = this.navigationSessionFactory.createExternal(this.firstRoute);
-            if (event.navigationTrigger === 'popstate') {
-                session.setPopstateReturnUrl(this.router.routerState.snapshot.url);
-            }
-            this._navigationSessionModel.value = session;
+        const previous = this._navigationSessionModel.value;
+        /** @type {?} */
+        const next = transition(this.navigationSession);
+        this._navigationSessionModel.value = next;
+        if (next !== previous) {
+            previous.dispose();
+            Logger.get(this).info(`Router State Transition: ${previous.toString()} -> ${next.toString()}`);
         }
-        this.firstRoute = false;
     }
-    // @Trace()
     /**
      * @private
-     * @param {?} cancelled
+     * @param {?} visit
      * @return {?}
      */
-    onAngularRouterFinished(cancelled) {
+    createRouteParameters(visit) {
         /** @type {?} */
-        const session = this._navigationSessionModel.value;
-        if (!cancelled) {
-            // Update visits before we end the navigation session.  This allows the placeOutets to
-            // ignore visit changes that occur while the navigation is in progress
-            /** @type {?} */
-            const visits = session.getVisits();
-            visits.forEach((/**
-             * @param {?} v
-             * @return {?}
-             */
-            v => this.placeHistory.add(v)));
-            this._activeVisits.value = visits;
-        }
-        else {
-            // Angular doesn't preserve the url when a guard cancels the back button.
-            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
-            if (session.isPopState) {
-                console.log('cancelled during popstate');
-                this.angularLocation.go(session.popStateReturnUrl);
-            }
-        }
-        this._navigationSessionModel.value = null;
+        const def = visit.placeDefinition;
+        return visit.hasRouteId() ?
+            [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
+            [def.getFormattedRouteParameters(visit)];
     }
+    // private onAngularRouterStarted(event: NavigationStart) {
+    //   if (!this.navigationSession) {
+    //     // We been activated by an external route rather than placeRouter.go(visit)
+    //     this._navigationSessionModel.value = this.createExternalNavigationSession(event);
+    //   }
+    //   this.firstRoute = false;
+    // }
+    //
+    // private createExternalNavigationSession(event: NavigationStart) {
+    //   return new NavigationSession.Active(
+    //     this.modalInteractionService,
+    //     this.angularLocation,
+    //     // event.url,
+    //     event.navigationTrigger === 'popstate'
+    //   );
+    // }
+    // private onAngularRouterFinished(cancelled: boolean) {
+    //   const session = this._navigationSessionModel.value;
+    //   if (session.backClickedDuringCanDeactivateInteraction) {
+    //     // we swallow this finished event but keep the session alive as we're going to
+    //     // get another route started event, which will trigger anohter canDeactivate dialog
+    //     // if we start a new session.
+    //     // session.resetInteractionSession()
+    //   } else {
+    //     if (!cancelled) {
+    //       const visits = session.getVisits();
+    //       visits.forEach(v => this.placeHistory.add(v));
+    //       // Update visits before we end the navigation session.  This allows the placeOutets to
+    //       // ignore visit changes that occur while the navigation is in progress
+    //       this._activeVisits.value = visits;
+    //     } else {
+    //       // TODO: move this to the navigation session
+    //       // Angular doesn't preserve the url when a guard cancels the back button.
+    //       // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+    //       // session.rememberPopStateReturnUrl(this.router.routerState.snapshot.url);
+    //       if (session.isPopState) {
+    //         console.log('cancelled during popstate');
+    //         // this.angularLocation.go(session.previousUrl);
+    //       }
+    //     }
+    //     session.dispose();
+    //     this._navigationSessionModel.value = null;
+    //   }
+    // }
     /**
      * @param {?} activatedRoute
      * @return {?}
@@ -3711,35 +4232,7 @@ class PlaceRouter extends GarbageCollector {
      * @return {?}
      */
     parseUrl(snapshot) {
-        return new PlaceRouter.UrlHelper(this.urlSerializer.parse(snapshot.url));
-    }
-    // TODO: this all only sort of works.  Opening dialogs and clicking back multiple times breaks things.
-    // TODO: next stage is to investigate tracking dialog state in a different placeoutlet and keeping those
-    // TODO: urls out of the history.
-    /**
-     * @param {?} activatedRoute
-     * @param {?} state
-     * @return {?}
-     */
-    performInitialNavigationIntercept(activatedRoute, state) {
-        assert.isTruthy(this.isInitialNavigation());
-        Logger.get(this).info(`Redirecting to: ${noopPlaceDef.path}`, { returnUrl: state.url });
-        if (!this.initialRedirectFinished) {
-            this.initialRedirectFinished = true;
-            return this.router.createUrlTree([noopPlaceDef.path, {
-                    returnUrl: state.url
-                }], {
-                replaceUrl: true,
-                // make sure we update our history
-                skipLocationChange: false
-            });
-        }
-    }
-    /**
-     * @return {?}
-     */
-    isInitialNavigation() {
-        return this.navigationSession.firstNavigation && !this.initialRedirectFinished;
+        return new UrlSnapshot(this.urlSerializer.parse(snapshot.url));
     }
 }
 PlaceRouter.decorators = [
@@ -3751,17 +4244,11 @@ PlaceRouter.decorators = [
 PlaceRouter.ctorParameters = () => [
     { type: Router },
     { type: UrlSerializer },
-    { type: InteractionContext },
     { type: Location },
-    { type: PlaceHistory }
+    { type: PlaceHistory },
+    { type: ModalInteractionService }
 ];
-/** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(InteractionContext), ɵɵinject(Location), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Visit, Object]),
-    __metadata("design:returntype", Promise)
-], PlaceRouter.prototype, "navigate", null);
+/** @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" });
 if (false) {
     /**
      * @type {?}
@@ -3786,137 +4273,88 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.navigationSessionFactory;
+    PlaceRouter.prototype._navigationSessionContext;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.initialRedirectStarted;
+    PlaceRouter.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.initialRedirectFinished;
+    PlaceRouter.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.router;
+    PlaceRouter.prototype.angularLocation;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.urlSerializer;
+    PlaceRouter.prototype.placeHistory;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.interactionContext;
-    /** @type {?} */
-    PlaceRouter.prototype.angularLocation;
-    /** @type {?} */
-    PlaceRouter.prototype.placeHistory;
+    PlaceRouter.prototype.modalInteractionService;
 }
 (function (PlaceRouter) {
-    class UrlHelper {
-        /**
-         * @param {?} urlTree
-         */
-        constructor(urlTree) {
-            this.urlTree = urlTree;
-            console.log({ segments: this.urlTree.root.children.primary.segments });
-        }
+    PlaceRouter.INTERACTION_ROUTER_OUTLET = 'aup-interaction';
+    class InteractionRouteMediator {
         /**
-         * @return {?}
-         */
-        cloneUrlSegmentList() {
-            return [...this.urlTree.root.children.primary.segments];
-        }
-        /**
-         * @param {?} visit
-         * @return {?}
+         * @param {?} navigationSessionModelActive
+         * @param {?} router
          */
-        updateVisitSegments(visit) {
-            // Ugly, but it works for now.
-            /** @type {?} */
-            const segments = this.cloneUrlSegmentList();
-            /** @type {?} */
-            const visitSegments = this.convertToUrlSegments(visit);
-            /** @type {?} */
-            const replaceAt = segments.findIndex((/**
-             * @param {?} segment
-             * @return {?}
-             */
-            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;
+        constructor(navigationSessionModelActive, router) {
+            this.navigationSessionModelActive = navigationSessionModelActive;
+            this.router = router;
         }
         /**
-         * Converts the visit into segments.  Please not that these segments are not e
-         * @param {?} visit
          * @return {?}
          */
-        convertToUrlSegments(visit) {
-            return visit.placeDefinition.hasRouteId() ?
-                [
-                    // NOTE:
-                    // It's important to attach the params to the root path and not the id.  If we attach them
-                    // to an empty id then the angular router won't match the pattern.
-                    new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
-                    new UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
-                ]
-                :
-                    [
-                        new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
-                    ];
+        get isNavigating() {
+            return this.navigationSessionModelActive.value;
         }
+        // If we're not in a navigation we push
+        // @Trace()
         /**
-         * @param {?} visit
          * @return {?}
          */
-        createRedirectCommandsFor(visit) {
-            /** @type {?} */
-            const segments = this.updateVisitSegments(visit);
-            /** @type {?} */
-            const commands = [];
-            segments.forEach((/**
-             * @param {?} s
-             * @return {?}
-             */
-            s => {
-                commands.push(s.path);
-                if (s.parameterMap.keys.length > 0) {
-                    commands.push(s.parameters);
-                }
-            }));
-            return commands;
+        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()
         /**
-         * @param {?} placeDef
          * @return {?}
          */
-        includesPathOf(placeDef) {
-            return this.cloneUrlSegmentList().find((/**
-             * @param {?} s
-             * @return {?}
-             */
-            s => s.path === placeDef.path));
+        onActivityFinished() {
+            if (!this.isNavigating) {
+                this.router.navigate(['.', {
+                        outlets: {
+                            [PlaceRouter.INTERACTION_ROUTER_OUTLET]: null
+                        }
+                    }], {
+                    replaceUrl: true // remove the interaction from the history.
+                });
+            }
         }
     }
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Visit]),
-        __metadata("design:returntype", Array)
-    ], UrlHelper.prototype, "createRedirectCommandsFor", null);
-    PlaceRouter.UrlHelper = UrlHelper;
+    PlaceRouter.InteractionRouteMediator = InteractionRouteMediator;
     if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        UrlHelper.prototype.urlTree;
+        /** @type {?} */
+        InteractionRouteMediator.prototype.navigationSessionModelActive;
+        /** @type {?} */
+        InteractionRouteMediator.prototype.router;
     }
 })(PlaceRouter || (PlaceRouter = {}));
 
@@ -4011,7 +4449,6 @@ class PlaceOutletComponent extends DisposableComponent {
         this.placeConfig = placeConfig;
         this.placeChanged = new EventEmitter();
         this._activePlace = new MutableValueModel();
-        this._previousPlace = new MutableValueModel();
         this._activePlaceVisitModel = new DelegatingValueModel();
         this._inOutletActivation = new Guard$1();
         this._inOutletDeactivation = new Guard$1();
@@ -4033,32 +4470,12 @@ class PlaceOutletComponent extends DisposableComponent {
             .pluck('placeDefinition')
             .pluckList('children')
             .pluck('component');
-        // TODO: This is a hack to prevent animation during the NoopGatewayPlace
-        /** @type {?} */
-        const activePlaceType = chain(this._activePlace).map((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => {
-            return (/** @type {?} */ (p.constructor));
-        }), {
-            postponeWhile: chain(this.activePlaceModel).isNil()
-        });
         /** @type {?} */
-        const previousPlaceType = chain(this._previousPlace).map((/**
+        const activatePlaceType = chain(this.activePlaceModel).map((/**
          * @param {?} p
          * @return {?}
          */
         p => (/** @type {?} */ (p.constructor))));
-        this.ready = chain.reduce(activePlaceType, previousPlaceType, (/**
-         * @param {?} current
-         * @param {?} previous
-         * @return {?}
-         */
-        (current, previous) => {
-            return !!current && current !== NoopGatewayPlace && previous !== NoopGatewayPlace;
-        }));
-        this.enableAnimation = valueOf.all(this.ready, this.animateModel).areTruthy();
         this.placeAnimationOrder = chain(this.customPlaceAnimationOrderModel)
             .otherwise(defaultPlaceAnimationOrder)
             .reduce((/**
@@ -4068,14 +4485,14 @@ class PlaceOutletComponent extends DisposableComponent {
         (placesInOrder) => {
             /** @type {?} */
             let placeIndex = 0;
-            if (activePlaceType.value) {
-                placeIndex = placesInOrder.indexOf(activePlaceType.value);
-                if (isNil(this.initialPlaceIndex && placeIndex >= 0)) {
+            if (activatePlaceType.value) {
+                placeIndex = placesInOrder.indexOf(activatePlaceType.value);
+                if (isNil(this.initialPlaceIndex)) {
                     this.initialPlaceIndex = placeIndex;
                 }
             }
             return isNil(this.initialPlaceIndex) ? 0 : placeIndex - this.initialPlaceIndex;
-        }), { dependsOn: activePlaceType });
+        }), { dependsOn: activatePlaceType });
         // Push incoming changes into the component
         this.routerVisit = chain(this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
         // Our router visit will change when our active is nullified during deactivation, which will push a null visit
@@ -4104,8 +4521,6 @@ class PlaceOutletComponent extends DisposableComponent {
          * @return {?}
          */
         place => this.placeChanged.emit(place)));
-        // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
-        // txo.observe('inRouteVisitUpdate', inRouteVisitUpdate);
     }
     /**
      * @return {?}
@@ -4210,7 +4625,7 @@ class PlaceOutletComponent extends DisposableComponent {
                 console.error(error);
             }
         }));
-        if (!this.enableAnimation.value) {
+        if (!this.animateModel.value) {
             // we're not animating so trigger any post animation callbacks now.
             this.animationDone();
         }
@@ -4224,7 +4639,6 @@ class PlaceOutletComponent extends DisposableComponent {
          * @return {?}
          */
         () => {
-            this._previousPlace.value = this._activePlace.value;
             this._activePlace.value = null;
             this._activatedRouteModel.value = null;
             this._placeDefinition.value = null;
@@ -4251,7 +4665,7 @@ class PlaceOutletComponent extends DisposableComponent {
 PlaceOutletComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-place-outlet',
-                template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n     [@.disabled]=\"!enableAnimation.value\"\n     (@routeAnimations.start)=\"animationStarted()\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated()\">\n  </router-outlet>\n</div>\n\n",
+                template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n     [@.disabled]=\"!animateModel.value\"\n     (@routeAnimations.start)=\"animationStarted()\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated()\">\n  </router-outlet>\n</div>\n\n",
                 animations: [LEFT_RIGHT_PLACE_ANIMATION],
                 styles: [":host{display:flex;flex-direction:column;min-height:0;overflow-x:hidden}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
             }] }
@@ -4265,7 +4679,7 @@ PlaceOutletComponent.ctorParameters = () => [
 ];
 PlaceOutletComponent.propDecorators = {
     animate: [{ type: Input }],
-    animateModel: [{ type: Input, args: ['animateModel',] }],
+    animateModel: [{ type: Input }],
     customPlaceAnimationOrderModel: [{ type: Input, args: ['placeAnimationOrderModel',] }],
     customPlaceAnimationOrder: [{ type: Input, args: ['placeAnimationOrder',] }],
     placeChanged: [{ type: Output }],
@@ -4305,11 +4719,6 @@ if (false) {
      * @private
      */
     PlaceOutletComponent.prototype._activePlace;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype._previousPlace;
     /**
      * @type {?}
      * @private
@@ -4362,10 +4771,6 @@ if (false) {
      * @private
      */
     PlaceOutletComponent.prototype.routerVisit;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.ready;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.enableAnimation;
     /**
      * @type {?}
      * @private
@@ -4650,8 +5055,7 @@ PlaceModule.decorators = [
                     PlaceOutletComponent,
                     TabbedPlaceNavigationComponent,
                     ListPlaceNavComponent,
-                    AbstractPlaceNavigationComponent,
-                    NoopGatewayPlace
+                    AbstractPlaceNavigationComponent
                 ],
                 entryComponents: [BusyOverlayComponent],
                 exports: [
@@ -5031,82 +5435,6 @@ if (false) {
     ActivityOutletContext.prototype.componentReady = function (component) { };
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class InteractionGuard {
-    /**
-     * @param {?} router
-     * @param {?} injector
-     * @param {?} interactionContext
-     */
-    constructor(router, injector, interactionContext) {
-        this.router = router;
-        this.injector = injector;
-        this.interactionContext = interactionContext;
-    }
-    /**
-     * @param {?} route
-     * @param {?} state
-     * @return {?}
-     */
-    canActivate(route, state) {
-        return true;
-    }
-    /**
-     * @param {?} component
-     * @param {?} currentRoute
-     * @param {?} currentState
-     * @param {?=} nextState
-     * @return {?}
-     */
-    canDeactivate(component, currentRoute, currentState, nextState) {
-        return !this.interactionContext.isActive();
-    }
-}
-InteractionGuard.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-InteractionGuard.ctorParameters = () => [
-    { type: Router },
-    { type: Injector },
-    { type: InteractionContext }
-];
-/** @nocollapse */ InteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(InteractionContext)); }, token: InteractionGuard, providedIn: "root" });
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
-    __metadata("design:returntype", Object)
-], InteractionGuard.prototype, "canActivate", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [NoopComponent, ActivatedRouteSnapshot, RouterStateSnapshot, RouterStateSnapshot]),
-    __metadata("design:returntype", Object)
-], InteractionGuard.prototype, "canDeactivate", null);
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionGuard.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionGuard.prototype.injector;
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionGuard.prototype.interactionContext;
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -5130,10 +5458,56 @@ if (false) {
      */
     NavItem.prototype.icon = function () { };
     /**
-     * @return {?}
+     * @return {?}
+     */
+    NavItem.prototype.tooltip = function () { };
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @param {?} options
+ * @return {?}
+ */
+function Place(options) {
+    return (/**
+     * @param {?} target
+     * @return {?}
+     */
+    (target) => {
+        if (PlaceComponent.isPlaceComponentConstructor(target)) {
+            PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, isNil(options.authenticate) ? false : options.authenticate, options.data, PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            c => PlaceComponent.getDefinition(c)))));
+        }
+        else {
+            lang.illegalState(`${target} must extend PlaceComponent to use the @Place decorator`);
+        }
+    });
+}
+(function (Place) {
+    /**
+     * @record
      */
-    NavItem.prototype.tooltip = function () { };
-}
+    function Options() { }
+    Place.Options = Options;
+    if (false) {
+        /** @type {?} */
+        Options.prototype.path;
+        /** @type {?|undefined} */
+        Options.prototype.data;
+        /** @type {?|undefined} */
+        Options.prototype.authenticate;
+        /** @type {?|undefined} */
+        Options.prototype.children;
+        /** @type {?|undefined} */
+        Options.prototype.defaultChild;
+    }
+})(Place || (Place = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -5168,7 +5542,7 @@ class VisitSanitiser {
                 const routeId = visit.getRouteId();
                 /** @type {?} */
                 const sanitisedValue = yield routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector);
-                console.log({ routeId, sanitisedValue });
+                // console.log({routeId, sanitisedValue});
                 // ###------- EARLY EXIT --------###
                 if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
                     // if the route id has changed we redirect immediately as other
@@ -5222,6 +5596,137 @@ if (false) {
     VisitSanitiser.prototype.injector;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * This a work around for the fact that an activated route with multiple segments doesn't
+ * include the segment params in the paramMap as well as each segment returns an empty
+ * param map even when `parameter`s has content.
+ */
+class ConsolidatedParameterMap {
+    /**
+     * @param {?} paramMap
+     * @param {?} urlSegments
+     */
+    constructor(paramMap, urlSegments) {
+        this.paramMaps = [paramMap].concat((urlSegments || []).map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => new ParamMapAdapter(s.parameters)))).filter((/**
+         * @param {?} m
+         * @return {?}
+         */
+        m => !!m)); // the activated route param map can be null
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    get(name) {
+        /** @type {?} */
+        const paramMap = this.paramMaps.find((/**
+         * @param {?} m
+         * @return {?}
+         */
+        m => m.has(name)));
+        return paramMap.get(name);
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    getAll(name) {
+        /** @type {?} */
+        const paramMap = this.paramMaps.find((/**
+         * @param {?} m
+         * @return {?}
+         */
+        m => m.has(name)));
+        return paramMap.getAll(name);
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    has(name) {
+        return !!this.paramMaps.find((/**
+         * @param {?} m
+         * @return {?}
+         */
+        m => m.has(name)));
+    }
+    /**
+     * @return {?}
+     */
+    get keys() {
+        return this.paramMaps.reduce((/**
+         * @param {?} result
+         * @param {?} params
+         * @return {?}
+         */
+        (result, params) => result.concat(params.keys)), []);
+    }
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [])
+], ConsolidatedParameterMap.prototype, "keys", null);
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    ConsolidatedParameterMap.prototype.paramMaps;
+}
+class ParamMapAdapter {
+    /**
+     * @param {?} params
+     */
+    constructor(params) {
+        this.params = params;
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    get(name) {
+        return this.params[name];
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    getAll(name) {
+        /** @type {?} */
+        const value = this.get(name);
+        return Array.isArray(value) ? value : [value];
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    has(name) {
+        return this.keys.includes(name);
+    }
+    /**
+     * @return {?}
+     */
+    get keys() {
+        return Object.keys(this.params);
+    }
+}
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    ParamMapAdapter.prototype.params;
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -5229,7 +5734,7 @@ if (false) {
 /**
  * @abstract
  */
-class AbstractEnterPlaceGuard {
+class AbstractPlaceGuard {
     /**
      * @param {?} router
      * @param {?} urlSerializer
@@ -5252,45 +5757,53 @@ class AbstractEnterPlaceGuard {
      */
     canActivate(activatedRoute, state) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.interceptInitialRouteOtherwise(activatedRoute, state, (/**
+            return this.authorisePlaceThen(activatedRoute, state, (/**
+             * @param {?} placeDefinition
              * @return {?}
              */
-            () => {
-                return this.authorisePlaceThen(activatedRoute, state, (/**
-                 * @param {?} placeDefinition
-                 * @return {?}
-                 */
-                (placeDefinition) => __awaiter(this, void 0, void 0, function* () {
-                    // Parse our route params.
-                    /** @type {?} */
-                    const params = new AbstractEnterPlaceGuard.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);
+            (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
                     /** @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
-                        /** @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 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;
+                }
+            })));
+        });
+    }
+    /**
+     * @param {?} component
+     * @param {?} currentRoute
+     * @param {?} currentState
+     * @param {?=} nextState
+     * @return {?}
+     */
+    canDeactivate(component, currentRoute, currentState, nextState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.placeRouter.navigationSession.canDeactivatePlace(component, this.placeRouter.parseUrl(nextState));
         });
     }
+    // @Trace()
     /**
      * @protected
      * @param {?} activatedRoute
@@ -5309,7 +5822,7 @@ class AbstractEnterPlaceGuard {
                     return canActivate(placeDefinition);
                 }
                 else {
-                    console.log("not authorised result", authorised);
+                    console.log('not authorised result', authorised);
                     return authorised;
                 }
             }
@@ -5318,29 +5831,6 @@ class AbstractEnterPlaceGuard {
             }
         });
     }
-    /**
-     * @protected
-     * @param {?} activatedRoute
-     * @param {?} state
-     * @param {?} canActivate
-     * @return {?}
-     */
-    interceptInitialRouteOtherwise(activatedRoute, state, canActivate) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // TODO: this all only sort of works.  Opening dialogs and clicking back multiple times breaks things.
-            // TODO: next stage is to investigate tracking dialog state in a different placeoutlet and keeping those
-            // TODO: urls out of the history.
-            if (this.placeRouter.isInitialNavigation()) {
-                // This is the very first entry into our app so we redirect to a dummy place so we can get bump our
-                // history by one.  This ensures that we can capture back button presses on the initial page without
-                // leaving our app.
-                return this.placeRouter.performInitialNavigationIntercept(activatedRoute, state);
-            }
-            else {
-                return canActivate();
-            }
-        });
-    }
     /**
      * @param {?} activatedRoute
      * @param {?} state
@@ -5351,194 +5841,85 @@ class AbstractEnterPlaceGuard {
             /** @type {?} */
             const authorised = this.getAuthGuard(this.injector).canActivate(activatedRoute, state);
             return (authorised instanceof Observable) ? authorised.toPromise() : authorised;
-        });
-    }
-}
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot, Function]),
-    __metadata("design:returntype", Promise)
-], AbstractEnterPlaceGuard.prototype, "authorisePlaceThen", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
-    __metadata("design:returntype", Promise)
-], AbstractEnterPlaceGuard.prototype, "isAuthorised", null);
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractEnterPlaceGuard.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractEnterPlaceGuard.prototype.urlSerializer;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractEnterPlaceGuard.prototype.placeRouter;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractEnterPlaceGuard.prototype.placeHistory;
-    /**
-     * @type {?}
-     * @private
-     */
-    AbstractEnterPlaceGuard.prototype.injector;
-    /**
-     * @abstract
-     * @param {?} injector
-     * @return {?}
-     */
-    AbstractEnterPlaceGuard.prototype.getAuthGuard = function (injector) { };
-}
-(function (AbstractEnterPlaceGuard) {
-    /**
-     * This a work around for the fact that an activated route with multiple segments doesn't
-     * include the segment params in the paramMap as well as each segment returns an empty
-     * param map even when `parameter`s has content.
-     */
-    class ConsolidatedParameterMap {
-        /**
-         * @param {?} paramMap
-         * @param {?} urlSegments
-         */
-        constructor(paramMap, urlSegments) {
-            this.paramMaps = [paramMap].concat((urlSegments || []).map((/**
-             * @param {?} s
-             * @return {?}
-             */
-            s => new ParamMapAdapter(s.parameters)))).filter((/**
-             * @param {?} m
-             * @return {?}
-             */
-            m => !!m)); // the activated route param map can be null
-        }
-        /**
-         * @param {?} name
-         * @return {?}
-         */
-        get(name) {
-            /** @type {?} */
-            const paramMap = this.paramMaps.find((/**
-             * @param {?} m
-             * @return {?}
-             */
-            m => m.has(name)));
-            return paramMap.get(name);
-        }
-        /**
-         * @param {?} name
-         * @return {?}
-         */
-        getAll(name) {
-            /** @type {?} */
-            const paramMap = this.paramMaps.find((/**
-             * @param {?} m
-             * @return {?}
-             */
-            m => m.has(name)));
-            return paramMap.getAll(name);
-        }
-        /**
-         * @param {?} name
-         * @return {?}
-         */
-        has(name) {
-            return !!this.paramMaps.find((/**
-             * @param {?} m
-             * @return {?}
-             */
-            m => m.has(name)));
-        }
-        /**
-         * @return {?}
-         */
-        get keys() {
-            return this.paramMaps.reduce((/**
-             * @param {?} result
-             * @param {?} params
-             * @return {?}
-             */
-            (result, params) => result.concat(params.keys)), []);
-        }
-    }
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [])
-    ], ConsolidatedParameterMap.prototype, "keys", null);
-    AbstractEnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        ConsolidatedParameterMap.prototype.paramMaps;
-    }
-    class ParamMapAdapter {
-        /**
-         * @param {?} params
-         */
-        constructor(params) {
-            this.params = params;
-        }
-        /**
-         * @param {?} name
-         * @return {?}
-         */
-        get(name) {
-            return this.params[name];
-        }
-        /**
-         * @param {?} name
-         * @return {?}
-         */
-        getAll(name) {
-            /** @type {?} */
-            const value = this.get(name);
-            return Array.isArray(value) ? value : [value];
-        }
-        /**
-         * @param {?} name
-         * @return {?}
-         */
-        has(name) {
-            return this.keys.includes(name);
-        }
-        /**
-         * @return {?}
-         */
-        get keys() {
-            return Object.keys(this.params);
-        }
-    }
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        ParamMapAdapter.prototype.params;
+        });
     }
-})(AbstractEnterPlaceGuard || (AbstractEnterPlaceGuard = {}));
+}
+__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 LeavePlaceGuard {
+class InteractionGuard {
     /**
+     * @param {?} router
+     * @param {?} injector
      * @param {?} placeRouter
+     * @param {?} angularLocation
+     * @param {?} modalInteractionService
      */
-    constructor(placeRouter) {
+    constructor(router, injector, placeRouter, angularLocation, modalInteractionService) {
+        this.router = router;
+        this.injector = injector;
         this.placeRouter = placeRouter;
+        this.angularLocation = angularLocation;
+        this.modalInteractionService = modalInteractionService;
+    }
+    /**
+     * @param {?} route
+     * @param {?} state
+     * @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
@@ -5549,26 +5930,60 @@ class LeavePlaceGuard {
      */
     canDeactivate(component, currentRoute, currentState, nextState) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.placeRouter.navigationSession.canDeactivate(component, this.placeRouter.parseUrl(nextState));
+            /** @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;
+            }
+            return true;
         });
     }
 }
-LeavePlaceGuard.decorators = [
+InteractionGuard.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
 /** @nocollapse */
-LeavePlaceGuard.ctorParameters = () => [
-    { type: PlaceRouter }
+InteractionGuard.ctorParameters = () => [
+    { type: Router },
+    { type: Injector },
+    { type: PlaceRouter },
+    { type: Location },
+    { type: ModalInteractionService }
 ];
-/** @nocollapse */ LeavePlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(ɵɵinject(PlaceRouter)); }, token: LeavePlaceGuard, providedIn: "root" });
+/** @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
      */
-    LeavePlaceGuard.prototype.placeRouter;
+    InteractionGuard.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionGuard.prototype.injector;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionGuard.prototype.placeRouter;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionGuard.prototype.angularLocation;
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionGuard.prototype.modalInteractionService;
 }
 
 /**
@@ -5598,6 +6013,68 @@ NoopAuthGuard.decorators = [
 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
+ */
+// WARNING: interface has both a type and a value, skipping emit
+var Formatter;
+(function (Formatter) {
+    class StringType {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        format(value) {
+            return value;
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        parse(value) {
+            return value;
+        }
+    }
+    class NumberType {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        format(value) {
+            return ___default.isNumber(value) && !___default.isNaN(value) ? `${value}` : null;
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        parse(value) {
+            /** @type {?} */
+            const parsed = Number.parseFloat(value);
+            return ___default.isNaN(parsed) ? null : parsed;
+        }
+    }
+    class BooleanType {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        format(value) {
+            return value ? 'true' : 'false';
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        parse(value) {
+            return value === 'true';
+        }
+    }
+    Formatter.STRING = new StringType();
+    Formatter.NUMBER = new NumberType();
+    Formatter.BOOLEAN = new BooleanType();
+})(Formatter || (Formatter = {}));
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -5611,6 +6088,119 @@ function JsonArray() { }
  */
 function JsonMap() { }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ * @template T
+ */
+function RouteIdOptions() { }
+if (false) {
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.as;
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.optional;
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.remember;
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.defaultValue;
+}
+/**
+ * @record
+ * @template T
+ */
+function RouteParameterOptions() { }
+if (false) {
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.as;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.optional;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.remember;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.defaultValue;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.storeInUrl;
+}
+/**
+ * @record
+ * @template T
+ */
+function RouteListParameterOptions() { }
+if (false) {
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.as;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.optional;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.remember;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.defaultValue;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.storeInUrl;
+}
+/**
+ * @template T
+ * @param {?} type
+ * @param {?=} options
+ * @return {?}
+ */
+function RouteId(type, options) {
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const param = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+/**
+ * @template T
+ * @param {?=} options
+ * @return {?}
+ */
+function VisitParameter(options) {
+    /** @type {?} */
+    const opts = Opts.get(options);
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+/**
+ * @template E
+ * @param {?=} options
+ * @return {?}
+ */
+function VisitParameterList(options) {
+    /** @type {?} */
+    const opts = Opts.get(options);
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -5670,5 +6260,5 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractEnterPlaceGuard, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NavigationSession, NoopAuthGuard, NoopComponent, NoopGatewayPlace, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, PlaceComponent as ɵba, Place as ɵbb, VisitParameter as ɵbc, Formatter as ɵbd, InteractionModule as ɵbe, ActivityContainerComponent as ɵbf, ActivityOutletComponent as ɵbg, ConfirmationDialogComponent as ɵbh, AbstractActivity as ɵbi, ACTIVITY_DATA as ɵbj, Activity as ɵbk, ConfirmThenDialogComponent as ɵbm, AlertDialogComponent as ɵbn, InteractionOutletComponent as ɵbp, InplaceInteractionContextComponent as ɵbq, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbr, DialogInteractionService as ɵbs, 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, InteractionContext as ɵu, PlaceHistory as ɵv, TabbedPlaceNavigationComponent as ɵw, AbstractPlaceNavigationComponent as ɵx, ListPlaceNavComponent as ɵy, NoopGatewayPlace as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractInputComponent, AbstractPlaceGuard, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionService, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionContextBase, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionService, NavigationSession, 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 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map