@coolon/angular-ui-powerups 0.0.66 → 0.0.68

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

@@ -1,22 +1,22 @@
-import { DOCUMENT, CommonModule, Location } from '@angular/common';
+import { DOCUMENT, Location, CommonModule } from '@angular/common';
 import { EventEmitter, Input, Output, HostListener, Component, Directive, ElementRef, Inject, NgZone, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, Optional, ɵɵdefineInjectable, ɵɵinject, NgModule, HostBinding, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgressSpinnerModule, MatInputModule, MatFormFieldModule, MatSelectModule } from '@angular/material';
 import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __decorate, __metadata, __awaiter } from 'tslib';
-import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Guard as Guard$1, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Trace, Guard as Guard$1, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
-import ___default, { last, isNil } from 'lodash';
-import { assert as assert$1, Klass, Opts } from '@coolon/typescript-utilities';
+import { Router, RouterModule, NavigationStart, NavigationEnd, NavigationError, ActivatedRoute, 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 { v1 } from 'uuid';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router, NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@angular/router';
-import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator/dist/src';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -340,6 +340,24 @@ StringInputComponent.decorators = [
 /** @nocollapse */
 StringInputComponent.ctorParameters = () => [];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class NoopComponent {
+    constructor() {
+    }
+}
+NoopComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'angular-ui-powerups-noop',
+                template: "",
+                styles: [":host{display:block}"]
+            }] }
+];
+/** @nocollapse */
+NoopComponent.ctorParameters = () => [];
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -963,7 +981,7 @@ class AlertDialogComponent extends AbstractActivity {
 AlertDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-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<p matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\">{{alert.ok()}}</button>\n</p>\n",
+                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<p matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</p>\n",
                 styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
             }] }
 ];
@@ -1031,7 +1049,7 @@ class ConfirmThenDialogComponent extends AbstractActivity {
 ConfirmThenDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-confirmation-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\">{{confirm.ok()}}</button>\n</p>\n\n",
+                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</p>\n\n",
                 styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
             }] }
 ];
@@ -1091,7 +1109,7 @@ class ConfirmationDialogComponent extends AbstractActivity {
 ConfirmationDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-confirmation-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done()\">{{confirm.ok()}}</button>\n</p>\n\n",
+                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</p>\n\n",
                 styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
             }] }
 ];
@@ -1464,6 +1482,24 @@ if (false) {
     ActivityContainerComponent.prototype._activityList;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class InteractionOutletComponent {
+    constructor() {
+    }
+}
+InteractionOutletComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'angular-ui-powerups-interaction-outlet',
+                template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
+                styles: [":host{display:block}"]
+            }] }
+];
+/** @nocollapse */
+InteractionOutletComponent.ctorParameters = () => [];
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1507,12 +1543,16 @@ class Guard extends ValueModel {
 class DialogInteractionService extends InteractionContext {
     /**
      * @param {?} dialogService
+     * @param {?} location
+     * @param {?} router
      * @param {?} dialogServiceDefaults
      * @param {?} matDialogDefaultConfig
      */
-    constructor(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+    constructor(dialogService, location, router, dialogServiceDefaults, matDialogDefaultConfig) {
         super();
         this.dialogService = dialogService;
+        this.location = location;
+        this.router = router;
         this.dialogServiceDefaults = dialogServiceDefaults;
         this.matDialogDefaultConfig = matDialogDefaultConfig;
         this._activityList = new DelegatingListModel();
@@ -1567,6 +1607,7 @@ class DialogInteractionService extends InteractionContext {
          */
         () => {
             this.currentActivityId = v1();
+            // this.location.go(this.router.routerState.snapshot.url, "aup");
             /** @type {?} */
             const self = this;
             /** @type {?} */
@@ -1596,7 +1637,7 @@ class DialogInteractionService extends InteractionContext {
                      */
                     onDone(result) {
                         resolve(result);
-                        matDialogRef.close(result);
+                        matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
                     },
                     /**
                      * @param {?} error
@@ -1604,9 +1645,18 @@ class DialogInteractionService extends InteractionContext {
                      */
                     onCancel(error) {
                         reject(error);
-                        matDialogRef.close(error);
+                        matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
                     }
                 };
+                matDialogRef.afterClosed().subscribe((/**
+                 * @param {?} promiseAlreadyFinished
+                 * @return {?}
+                 */
+                promiseAlreadyFinished => {
+                    if (!promiseAlreadyFinished) {
+                        reject("auto-closed");
+                    }
+                }));
                 matDialogRef.updateSize();
             })).finally((/**
              * @return {?}
@@ -1633,6 +1683,7 @@ class DialogInteractionService extends InteractionContext {
      * @return {?}
      */
     alert(alert) {
+        // TODO: Test disableClose === false
         return this._startActivity(AlertDialogComponent, alert, false);
     }
     /**
@@ -1665,10 +1716,12 @@ DialogInteractionService.decorators = [
 /** @nocollapse */
 DialogInteractionService.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,] }] }
 ];
-/** @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" });
+/** @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" });
 if (false) {
     /**
      * @type {?}
@@ -1691,6 +1744,10 @@ if (false) {
      */
     DialogInteractionService.prototype.dialogService;
     /** @type {?} */
+    DialogInteractionService.prototype.location;
+    /** @type {?} */
+    DialogInteractionService.prototype.router;
+    /** @type {?} */
     DialogInteractionService.prototype.dialogServiceDefaults;
     /** @type {?} */
     DialogInteractionService.prototype.matDialogDefaultConfig;
@@ -1709,18 +1766,21 @@ InteractionModule.decorators = [
                     MatButtonModule,
                     MatDialogModule,
                     MatTabsModule,
-                    PortalModule
+                    PortalModule,
+                    RouterModule
                 ],
                 declarations: [
                     ActivityContainerComponent,
                     ConfirmationDialogComponent,
                     ConfirmThenDialogComponent,
                     AlertDialogComponent,
-                    ActivityOutletComponent
+                    ActivityOutletComponent,
+                    InteractionOutletComponent
                 ],
                 exports: [
                     ActivityContainerComponent,
                     ActivityOutletComponent,
+                    InteractionOutletComponent
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -1802,6 +1862,234 @@ EmptyStateComponent.decorators = [
 /** @nocollapse */
 EmptyStateComponent.ctorParameters = () => [];
 
+/**
+ * @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);
+        this.defaultValue = this.options.getOptional('defaultValue', null);
+    }
+    /**
+     * @return {?}
+     */
+    get name() {
+        return this.options.getOptional('as', this.propertyName);
+    }
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    get isRouteParameter() {
+        return !!this.urlFormat;
+    }
+    /**
+     * @protected
+     * @template K
+     * @param {?} key
+     * @return {?}
+     */
+    getOptionValue(key) {
+        return this.options.getOptional(key, null);
+    }
+    // @Trace()
+    /**
+     * @param {?} value
+     * @param {?} visit
+     * @param {?} placeHistory
+     * @param {?} injector
+     * @return {?}
+     */
+    sanitise(value, visit, placeHistory, injector) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isMissingFrom(visit)) {
+                /** @type {?} */
+                const previousVisit = ___default.first(placeHistory.getHistory(visit.placeDefinition));
+                if (this.remember && previousVisit) {
+                    value = previousVisit.getParameter(this.name);
+                }
+                return this.isEmptyValue(value) ? this.defaultValue : value;
+            }
+            else {
+                // todo: add custom sanitiser
+                return value;
+            }
+        });
+    }
+    /**
+     * @private
+     * @param {?} visit
+     * @return {?}
+     */
+    isMissingFrom(visit) {
+        return !visit.hasParameter(this.name) || (this.isRouteId && !visit.hasRouteId());
+    }
+}
+if (false) {
+    /** @type {?} */
+    ParameterDefinition.prototype.isRouteId;
+    /** @type {?} */
+    ParameterDefinition.prototype.isArray;
+    /** @type {?} */
+    ParameterDefinition.prototype.remember;
+    /** @type {?} */
+    ParameterDefinition.prototype.defaultValue;
+    /**
+     * @type {?}
+     * @private
+     */
+    ParameterDefinition.prototype.options;
+    /** @type {?} */
+    ParameterDefinition.prototype.propertyName;
+    /** @type {?} */
+    ParameterDefinition.prototype.urlFormat;
+    /**
+     * @abstract
+     * @param {?} value
+     * @return {?}
+     */
+    ParameterDefinition.prototype.isEmptyValue = function (value) { };
+    /**
+     * @abstract
+     * @param {?} a
+     * @param {?} b
+     * @return {?}
+     */
+    ParameterDefinition.prototype.hasChanged = function (a, b) { };
+}
+(function (ParameterDefinition) {
+    /**
+     * @record
+     * @template T
+     */
+    function Options() { }
+    ParameterDefinition.Options = Options;
+    if (false) {
+        /** @type {?|undefined} */
+        Options.prototype.as;
+        /** @type {?|undefined} */
+        Options.prototype.optional;
+        /** @type {?|undefined} */
+        Options.prototype.remember;
+        /** @type {?|undefined} */
+        Options.prototype.defaultValue;
+    }
+    /**
+     * @template T
+     */
+    class RouteId extends ParameterDefinition {
+        constructor() {
+            super(...arguments);
+            this.isRouteId = true;
+            this.isArray = false;
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        isEmptyValue(value) {
+            return ___default.isNil(value);
+        }
+        /**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        hasChanged(a, b) {
+            return a !== b;
+        }
+    }
+    ParameterDefinition.RouteId = RouteId;
+    if (false) {
+        /** @type {?} */
+        RouteId.prototype.isRouteId;
+        /** @type {?} */
+        RouteId.prototype.isArray;
+    }
+    /**
+     * @template T
+     */
+    class ValueParameter extends ParameterDefinition {
+        constructor() {
+            super(...arguments);
+            this.isRouteId = false;
+            this.isArray = false;
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        isEmptyValue(value) {
+            return ___default.isNil(value);
+        }
+        /**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        hasChanged(a, b) {
+            return a !== b;
+        }
+    }
+    ParameterDefinition.ValueParameter = ValueParameter;
+    if (false) {
+        /** @type {?} */
+        ValueParameter.prototype.isRouteId;
+        /** @type {?} */
+        ValueParameter.prototype.isArray;
+    }
+    /**
+     * @template T
+     */
+    class ArrayParameter extends ParameterDefinition {
+        /**
+         * @param {?} parameterName
+         * @param {?} options
+         * @param {?} urlFormat
+         */
+        constructor(parameterName, options, urlFormat) {
+            super(parameterName, options, urlFormat);
+            this.isRouteId = false;
+            this.isArray = true;
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        isEmptyValue(value) {
+            return ___default.isNil(value) || value.length < 1;
+        }
+        /**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        hasChanged(a, b) {
+            return !___default.isEqual(a, b);
+        }
+    }
+    ParameterDefinition.ArrayParameter = ArrayParameter;
+    if (false) {
+        /** @type {?} */
+        ArrayParameter.prototype.isRouteId;
+        /** @type {?} */
+        ArrayParameter.prototype.isArray;
+    }
+})(ParameterDefinition || (ParameterDefinition = {}));
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1828,8 +2116,49 @@ class PlaceDefinition {
     /**
      * @return {?}
      */
-    getRouteParameters() {
-        return this.routeParameters;
+    hasRouteId() {
+        return !!this.getRouteIdParameterDef();
+    }
+    /**
+     * @return {?}
+     */
+    getRouteIdParameterDef() {
+        return this.routeParameters.find((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => p.isRouteId));
+    }
+    /**
+     * @param {?=} includeRouteId
+     * @return {?}
+     */
+    getRouteParameterDefs(includeRouteId = false) {
+        return this.getVisitParameterDefs({ includeRouteId, includeRouteParameters: true });
+    }
+    /**
+     * @param {?=} include
+     * @return {?}
+     */
+    getVisitParameterDefs(include) {
+        /** @type {?} */
+        const opts = Opts.get(include);
+        // includes
+        /** @type {?} */
+        const includeRouteId = !include || opts.getOptional('includeRouteId', false);
+        /** @type {?} */
+        const includeRouteParameters = !include || opts.getOptional('includeRouteParameters', false);
+        /** @type {?} */
+        const includeNonRouteParameters = !include || opts.getOptional('includeNonRouteParameters', false);
+        return this.routeParameters.filter((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => {
+            return (includeRouteId && p.isRouteId)
+                || (includeRouteParameters && p.isRouteParameter && !p.isRouteId) // route id is included in the line above
+                || (includeNonRouteParameters && !p.isRouteParameter);
+        }));
     }
     /**
      * @template T
@@ -1837,7 +2166,7 @@ class PlaceDefinition {
      * @param {?=} defaultValue
      * @return {?}
      */
-    getData(key, defaultValue) {
+    getPlaceData(key, defaultValue) {
         return this.data ?
             ___default.isNil(this.data[key]) ? defaultValue : this.data[key] :
             defaultValue;
@@ -1848,7 +2177,7 @@ class PlaceDefinition {
      * @param {?=} defaultValue
      * @return {?}
      */
-    searchData(keys, defaultValue) {
+    searchPlaceData(keys, defaultValue) {
         if (this.data) {
             /** @type {?} */
             const found = keys.find((/**
@@ -1862,23 +2191,169 @@ class PlaceDefinition {
             return defaultValue;
         }
     }
-}
-if (false) {
-    /** @type {?} */
-    PlaceDefinition.prototype.component;
-    /** @type {?} */
-    PlaceDefinition.prototype.path;
-    /** @type {?} */
-    PlaceDefinition.prototype.authenticate;
-    /** @type {?} */
-    PlaceDefinition.prototype.order;
-    /** @type {?} */
-    PlaceDefinition.prototype.data;
-    /** @type {?} */
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    getRouteIdFrom(visit) {
+        /** @type {?} */
+        const routeIdParameterDef = this.getRouteIdParameterDef();
+        return routeIdParameterDef ? visit.getParameter(routeIdParameterDef.name) : null;
+    }
+    /**
+     * Returns angular router commands that specify the route id and any route parameters.  The result does
+     * not include any path information.
+     * @param {?} visit
+     * @return {?}
+     */
+    // getFormattedRouterCommands(visit: Visit): any[] {
+    //   return this.hasRouteId() ?
+    //     [this.getFormattedRouteId(visit), this.getFormattedRouteParameters(visit)] :
+    //     [this.getFormattedRouteParameters(visit)];
+    // }
+    getFormattedRouteId(visit) {
+        return visit.hasRouteId() ? this.getRouteIdParameterDef().urlFormat.format(visit.getRouteId()) : null;
+    }
+    // @Trace()
+    /**
+     * @param {?} visit
+     * @param {?=} includeRouteId
+     * @return {?}
+     */
+    getFormattedRouteParameters(visit, includeRouteId = false) {
+        /** @type {?} */
+        const result = {};
+        this.getVisitParameterDefs({
+            includeRouteId, includeRouteParameters: true
+        }).forEach((/**
+         * @param {?} def
+         * @return {?}
+         */
+        def => {
+            /** @type {?} */
+            const value = visit.getParameter(def.name);
+            if (!def.isEmptyValue(value)) {
+                if (def.isArray) {
+                    assert.isArray(value);
+                    result[def.name] = value.map((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    v => def.urlFormat.format(v)));
+                }
+                else {
+                    assert.isFalsey(Array.isArray(value));
+                    result[def.name] = def.urlFormat.format(value);
+                }
+            }
+        }));
+        return result;
+    }
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    getNonRouteParameters(visit) {
+        /** @type {?} */
+        const result = {};
+        this.getVisitParameterDefs({ includeNonRouteParameters: true }).forEach((/**
+         * @param {?} def
+         * @return {?}
+         */
+        def => {
+            /** @type {?} */
+            const value = visit.getParameter(def.name);
+            if (!def.isEmptyValue(value)) {
+                result[def.name] = value;
+            }
+        }));
+        return result;
+    }
+    // @Trace()
+    /**
+     * @param {?} params
+     * @return {?}
+     */
+    parseRouteParams(params) {
+        /** @type {?} */
+        const result = {};
+        this.getVisitParameterDefs({
+            includeRouteId: true,
+            includeRouteParameters: true,
+            includeNonRouteParameters: false
+        }).forEach((/**
+         * @param {?} def
+         * @return {?}
+         */
+        def => {
+            // params will return null for non existent names
+            if (params.has(def.name)) {
+                if (def.isArray) {
+                    /** @type {?} */
+                    const values = params.getAll(def.name);
+                    result[def.name] = values.map((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    v => def.urlFormat.parse(v)));
+                }
+                else {
+                    result[def.name] = def.urlFormat.parse(params.get(def.name));
+                }
+            }
+        }));
+        return result;
+    }
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", ParameterDefinition)
+], PlaceDefinition.prototype, "getRouteIdParameterDef", null);
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Array)
+], PlaceDefinition.prototype, "getRouteParameterDefs", null);
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Array)
+], PlaceDefinition.prototype, "getVisitParameterDefs", null);
+if (false) {
+    /** @type {?} */
+    PlaceDefinition.prototype.component;
+    /** @type {?} */
+    PlaceDefinition.prototype.path;
+    /** @type {?} */
+    PlaceDefinition.prototype.authenticate;
+    /** @type {?} */
+    PlaceDefinition.prototype.order;
+    /** @type {?} */
+    PlaceDefinition.prototype.data;
+    /** @type {?} */
     PlaceDefinition.prototype.routeParameters;
     /** @type {?} */
     PlaceDefinition.prototype.children;
 }
+(function (PlaceDefinition) {
+    /**
+     * @record
+     */
+    function ParameterOptions() { }
+    PlaceDefinition.ParameterOptions = ParameterOptions;
+    if (false) {
+        /** @type {?|undefined} */
+        ParameterOptions.prototype.includeRouteId;
+        /** @type {?|undefined} */
+        ParameterOptions.prototype.includeRouteParameters;
+        /** @type {?|undefined} */
+        ParameterOptions.prototype.includeNonRouteParameters;
+    }
+})(PlaceDefinition || (PlaceDefinition = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -1895,13 +2370,13 @@ class PlaceComponent extends DisposableComponent {
         super();
     }
     /**
-     * @param {?} resolvedParameters
+     * @param {?} visit
      * @return {?}
      */
-    initialiseBindings(resolvedParameters) {
-        assert.isNil(this.resolvedParameters);
-        this.resolvedParameters = resolvedParameters;
-        this.placeDefinition.getRouteParameters().forEach((/**
+    initialiseBindings(visit) {
+        assert.isNil(this.visit);
+        this.visit = visit;
+        this.placeDefinition.getVisitParameterDefs().forEach((/**
          * @param {?} parameterDef
          * @return {?}
          */
@@ -1919,21 +2394,25 @@ class PlaceComponent extends DisposableComponent {
         /** @type {?} */
         const model = (/** @type {?} */ (this[parameterDef.propertyName]));
         // this.txo.observe(parameterDef.propertyName, model);
-        this.registerDisposable(new Binding(this.resolvedParameters, model, {
+        this.registerDisposable(new Binding(this.visit, model, {
             /**
-             * @param {?} parameters
+             * @param {?} visit
              * @return {?}
              */
-            toRight(parameters) {
-                return parameters.getValueOf(parameterDef);
+            toRight(visit) {
+                /** @type {?} */
+                const value = visit.getParameter(parameterDef.name);
+                // console.log('push to component', {name:parameterDef.name, value, visit});
+                return value;
             },
             /**
              * @param {?} value
-             * @param {?=} currentParameters
+             * @param {?=} currentVisit
              * @return {?}
              */
-            toLeft(value, currentParameters) {
-                return currentParameters.replace(parameterDef, value);
+            toLeft(value, currentVisit) {
+                console.log('push to route', { name: parameterDef.name, value, currentVisit });
+                return currentVisit.replace(parameterDef, value);
             }
         }));
     }
@@ -1966,7 +2445,7 @@ class PlaceComponent extends DisposableComponent {
     }
 }
 __decorate([
-    Memoize(),
+    Memoize$1(),
     __metadata("design:type", PlaceDefinition),
     __metadata("design:paramtypes", [])
 ], PlaceComponent.prototype, "placeDefinition", null);
@@ -1975,7 +2454,7 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceComponent.prototype.resolvedParameters;
+    PlaceComponent.prototype.visit;
 }
 (function (PlaceComponent) {
     /**
@@ -2033,20 +2512,20 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
      */
     getNav(placeDef) {
         /** @type {?} */
-        const navItem = (/** @type {?} */ (placeDef.getData('nav')));
+        const navItem = (/** @type {?} */ (placeDef.getPlaceData('nav')));
         return {
             title: (/**
              * @return {?}
              */
-            () => navItem ? navItem.title() : placeDef.searchData(['navTitle', 'title'])),
+            () => navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title'])),
             tooltip: (/**
              * @return {?}
              */
-            () => navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getData('navTooltip', null)),
+            () => navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null)),
             icon: (/**
              * @return {?}
              */
-            () => navItem && navItem.icon ? navItem.icon() : placeDef.getData('navIcon', null))
+            () => navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null))
         };
     }
     /**
@@ -2068,7 +2547,7 @@ __decorate([
     __metadata("design:type", ListModel)
 ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
 __decorate([
-    Memoize$1(),
+    Memoize(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [PlaceDefinition]),
     __metadata("design:returntype", Object)
@@ -2113,7 +2592,7 @@ class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
 ListPlaceNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-list-place-nav',
-                template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     [replaceUrl]=\"true\"\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
                 styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:inherit}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
             }] }
 ];
@@ -2139,6 +2618,7 @@ class PlaceHistory {
         this.router = router;
         this._history = new Map();
     }
+    // @Trace()
     /**
      * @param {?} state
      * @return {?}
@@ -2148,7 +2628,7 @@ class PlaceHistory {
         const history = this.getHistory(state.placeDefinition);
         /** @type {?} */
         const previousState = ___default.last(history);
-        if (!previousState || state.hasChanged(previousState)) {
+        if (!previousState || state.hasChangedFrom(previousState)) {
             history.unshift(state); // LIFO
             this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
         }
@@ -2203,952 +2683,523 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @abstract
+ */
 class NavigationSession {
     /**
-     * @param {?} isPopState
-     * @param {?} initialUrl
+     * @protected
+     * @param {?} firstNavigation
      */
-    constructor(isPopState, initialUrl) {
-        this.isPopState = isPopState;
-        this.initialUrl = initialUrl;
+    constructor(firstNavigation) {
+        this.firstNavigation = firstNavigation;
         this._alreadyAccepted = [];
-        console.log('NavigationSession', { isPopState, initialUrl });
+        this._visits = new Map();
     }
     /**
-     * @param {?} placeComponent
+     * @param {?} visit
      * @return {?}
      */
-    alreadyAccepted(placeComponent) {
-        return this._alreadyAccepted.includes(placeComponent);
+    storeVisit(visit) {
+        this._visits.set(visit.placeDefinition, visit);
     }
     /**
-     * @param {?} component
+     * @param {?} placeDef
      * @return {?}
      */
-    rememberAcceptanceOf(component) {
-        this._alreadyAccepted.push(component);
+    getVisitFor(placeDef) {
+        return this._visits.get(placeDef);
     }
-}
-if (false) {
     /**
-     * @type {?}
-     * @private
+     * @param {?} params
+     * @return {?}
      */
-    NavigationSession.prototype._alreadyAccepted;
-    /** @type {?} */
-    NavigationSession.prototype.isPopState;
-    /** @type {?} */
-    NavigationSession.prototype.initialUrl;
-}
-class PlaceRouter {
+    mergePrivatePlaceParameters(params) {
+        return null;
+    }
+    // @Trace()
     /**
-     * @param {?} router
-     * @param {?} angularLocation
+     * @param {?} placeComponent
+     * @return {?}
      */
-    constructor(router, angularLocation) {
-        this.router = router;
-        this._navigationSession = new MutableValueModel();
-        angularLocation.onUrlChange((/**
-         * @param {?} url
-         * @return {?}
-         */
-        url => {
-            console.log(`### ${url}`);
-        }));
-        this.router.events.subscribe((/**
-         * @param {?} event
-         * @return {?}
-         */
-        event => {
-            // console.log(`${event.constructor.name}`, location.pathname, angularLocation.getState());
-            // NavigationStart -> .... -> NavigationCancel === redirect (so don't ask again)
-            // NavigationStart -> .... -> NavigationEnd === navigated (so ask next time)
-            // NavigationStart -> .... -> NavigationError === canceled (guard cancelled so ask next time)
-            if (event instanceof NavigationStart && !this.navigationSession) {
-                this._navigationSession.value = new NavigationSession(event.navigationTrigger === 'popstate', this.router.routerState.snapshot.url);
-            }
-            if (event instanceof NavigationEnd) {
-                console.log('navigation ended');
-                this._navigationSession.value = null;
-            }
-            if (event instanceof NavigationError) {
-                console.log('navigation errored');
-                this._navigationSession.value = null;
-            }
-        }));
+    alreadyAccepted(placeComponent) {
+        return this._alreadyAccepted.includes(placeComponent);
     }
+    // @Trace()
     /**
+     * @param {?} component
      * @return {?}
      */
-    get navigationSession() {
-        return this._navigationSession.value;
+    rememberAcceptanceOf(component) {
+        this._alreadyAccepted.push(component);
     }
     /**
-     * @param {?} activatedRoute
-     * @param {?} previous
-     * @param {?} next
+     * @param {?} url
      * @return {?}
      */
-    pushParameterChangesToRoute(activatedRoute, previous, next) {
-        /** @type {?} */
-        const relativePath = !!previous.hasRouteId() ? '..' : '.';
-        this.router.navigate([relativePath].concat(this.createRouteParameters(next), this.getChildPath(activatedRoute.snapshot)), {
-            relativeTo: activatedRoute
-        });
+    setPopstateReturn(url) {
+        this._popStateReturnUrl = url;
     }
-    // @Trace()
     /**
-     * @param {?} activatedRoute
-     * @param {?} sanitised
      * @return {?}
      */
-    getRedirectUrlTree(activatedRoute, sanitised) {
-        /** @type {?} */
-        const urlSegments = activatedRoute.url;
-        /** @type {?} */
-        const weHaveARouteId = sanitised.hasRouteId() && sanitised.getFormattedRouteId();
-        /** @type {?} */
-        const commands = (weHaveARouteId) ?
-            [urlSegments[0].path, sanitised.getFormattedRouteId(), sanitised.getFormattedParameters()] :
-            [urlSegments[0].path, sanitised.getFormattedParameters()];
-        return this.router.createUrlTree(commands);
+    get isPopState() {
+        return !!this._popStateReturnUrl;
     }
     /**
-     * @protected
-     * @param {?} activatedRoute
      * @return {?}
      */
-    getChildPath(activatedRoute) {
-        return ___default.flatten(activatedRoute.children.map((/**
-         * @param {?} child
-         * @return {?}
-         */
-        child => child.url)));
+    get popStateReturnUrl() {
+        return this._popStateReturnUrl;
     }
     /**
-     * @protected
-     * @param {?} parameters
      * @return {?}
      */
-    createRouteParameters(parameters) {
-        /** @type {?} */
-        const routeId = parameters.getFormattedRouteId();
-        return routeId ?
-            [routeId, parameters.getFormattedParameters()] :
-            [parameters.getFormattedParameters()];
+    getVisits() {
+        return Array.from(this._visits.values());
     }
 }
-PlaceRouter.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-PlaceRouter.ctorParameters = () => [
-    { type: Router },
-    { type: Location }
-];
-/** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(Location)); }, token: PlaceRouter, providedIn: "root" });
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype._navigationSession;
+    NavigationSession.prototype._alreadyAccepted;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouter.prototype.router;
+    NavigationSession.prototype._visits;
+    /**
+     * @type {?}
+     * @private
+     */
+    NavigationSession.prototype._popStateReturnUrl;
+    /** @type {?} */
+    NavigationSession.prototype.isExternal;
+    /** @type {?} */
+    NavigationSession.prototype.firstNavigation;
 }
+(function (NavigationSession) {
+    class External extends NavigationSession {
+        /**
+         * @param {?} isFirstTime
+         */
+        constructor(isFirstTime) {
+            super(isFirstTime);
+            this.isExternal = true;
+        }
+    }
+    if (false) {
+        /** @type {?} */
+        External.prototype.isExternal;
+    }
+    class Internal extends NavigationSession {
+        /**
+         * @param {?} visit
+         */
+        constructor(visit) {
+            super(false);
+            this.isExternal = false;
+            this.storeVisit(visit);
+        }
+    }
+    if (false) {
+        /** @type {?} */
+        Internal.prototype.isExternal;
+    }
+    /**
+     * @param {?} visit
+     * @return {?}
+     */
+    function createInternal(visit) {
+        return new Internal(visit);
+    }
+    NavigationSession.createInternal = createInternal;
+    /**
+     * @param {?} firstTimeRoute
+     * @return {?}
+     */
+    function createExternal(firstTimeRoute) {
+        return new External(firstTimeRoute);
+    }
+    NavigationSession.createExternal = createExternal;
+})(NavigationSession || (NavigationSession = {}));
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
- * @abstract
- * @template T, S
+ * @record
  */
-class ParameterDefinition {
+function Params() { }
+class Visit {
     /**
-     * @param {?} propertyName
-     * @param {?} type
-     * @param {?} options
+     * @param {?} placeDefinition
+     * @param {?=} visitParameters
      */
-    constructor(propertyName, type, options) {
-        this.propertyName = propertyName;
-        this.type = type;
-        /** @type {?} */
-        const opts = Opts.get(options);
-        this.name = opts.getOptional('as', propertyName);
-        this.remember = opts.getOptional('remember', false);
-        this.defaultValue = opts.getOptional('defaultValue', null);
+    constructor(placeDefinition, visitParameters = {}) {
+        this.placeDefinition = placeDefinition;
+        this.visitParameters = visitParameters;
     }
+    // @Trace()
     /**
-     * @param {?} injector
      * @return {?}
      */
-    getSanitiser(injector) {
-        if (this.remember || !___default.isNil(this.defaultValue)) {
-            return new ParameterDefinition.DefaultParameterSanitiser(this.remember, this.defaultValue, injector.get(PlaceHistory));
-        }
-        else {
-            return null;
-        }
+    getRouteId() {
+        return this.placeDefinition.getRouteIdFrom(this);
     }
-}
-if (false) {
-    /** @type {?} */
-    ParameterDefinition.prototype.isRouteId;
-    /** @type {?} */
-    ParameterDefinition.prototype.isArray;
-    /** @type {?} */
-    ParameterDefinition.prototype.name;
+    // @Trace()
     /**
-     * @type {?}
-     * @private
+     * @return {?}
      */
-    ParameterDefinition.prototype.remember;
+    hasRouteId() {
+        return !isNil(this.getRouteId());
+    }
     /**
-     * @type {?}
-     * @private
+     * Returns the value of the place parameter with the specified name.  The parameter
+     * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+     * same as the the ValueModel property name.
+     * @param {?} parameterName the field name of the property model or the `as` option if specified.
+     * @return {?}
      */
-    ParameterDefinition.prototype.defaultValue;
-    /** @type {?} */
-    ParameterDefinition.prototype.propertyName;
-    /** @type {?} */
-    ParameterDefinition.prototype.type;
-}
-(function (ParameterDefinition) {
+    getParameter(parameterName) {
+        return this.visitParameters[parameterName];
+    }
+    // @Trace()
     /**
-     * @record
-     * @template T
+     * @param {?} parameterName
+     * @return {?}
      */
-    function Options() { }
-    ParameterDefinition.Options = Options;
-    if (false) {
-        /** @type {?|undefined} */
-        Options.prototype.as;
-        /** @type {?|undefined} */
-        Options.prototype.optional;
-        /** @type {?|undefined} */
-        Options.prototype.remember;
-        /** @type {?|undefined} */
-        Options.prototype.defaultValue;
-    }
-    /**
-     * @template T
-     */
-    class RouteId extends ParameterDefinition {
-        constructor() {
-            super(...arguments);
-            this.isRouteId = true;
-            this.isArray = false;
-        }
-    }
-    ParameterDefinition.RouteId = RouteId;
-    if (false) {
-        /** @type {?} */
-        RouteId.prototype.isRouteId;
-        /** @type {?} */
-        RouteId.prototype.isArray;
+    hasParameter(parameterName) {
+        return Object.keys(this.visitParameters).includes(parameterName);
     }
     /**
-     * @template T
+     * @template S
+     * @param {?} parameter
+     * @param {?} value
+     * @return {?}
      */
-    class ValueParameter extends ParameterDefinition {
-        constructor() {
-            super(...arguments);
-            this.isRouteId = false;
-            this.isArray = false;
-        }
-    }
-    ParameterDefinition.ValueParameter = ValueParameter;
-    if (false) {
-        /** @type {?} */
-        ValueParameter.prototype.isRouteId;
-        /** @type {?} */
-        ValueParameter.prototype.isArray;
+    replace(parameter, value) {
+        return new Visit(this.placeDefinition, Object.assign({}, this.visitParameters, { [parameter.name]: value }));
     }
     /**
-     * @template T
+     * @template S
+     * @param {?} routeParams
+     * @return {?}
      */
-    class ArrayParameter extends ParameterDefinition {
-        constructor() {
-            super(...arguments);
-            this.isRouteId = false;
-            this.isArray = true;
-        }
-    }
-    ParameterDefinition.ArrayParameter = ArrayParameter;
-    if (false) {
+    mergeRouteParameters(routeParams) {
+        // todo: whitelist parameters.
         /** @type {?} */
-        ArrayParameter.prototype.isRouteId;
+        const routeParameterKeys = Object.keys(routeParams);
         /** @type {?} */
-        ArrayParameter.prototype.isArray;
-    }
-    /**
-     * @template T, S
-     */
-    class DefaultParameterSanitiser {
-        /**
-         * @param {?} remember
-         * @param {?} defaultValue
-         * @param {?} placeHistory
-         */
-        constructor(remember, defaultValue, placeHistory) {
-            this.remember = remember;
-            this.defaultValue = defaultValue;
-            this.placeHistory = placeHistory;
-        }
-        /**
-         * @param {?} parameter
-         * @param {?=} visit
+        const params = {};
+        this.placeDefinition.getVisitParameterDefs().forEach((/**
+         * @param {?} def
          * @return {?}
          */
-        sanitise(parameter, visit) {
-            /** @type {?} */
-            let value = parameter.value;
-            if (parameter.isMissing()) {
-                /** @type {?} */
-                const previousVisit = ___default.first(this.placeHistory.getHistory(visit.placeDefinition));
-                if (this.remember && previousVisit) {
-                    value = previousVisit.getValueOf(parameter.definition);
+        def => {
+            if (def.isRouteId || def.isRouteParameter) {
+                if (routeParameterKeys.includes(def.name)) {
+                    params[def.name] = routeParams[def.name];
                 }
-                return parameter.isEmptyValue(value) ? this.defaultValue : value;
             }
             else {
-                return value;
+                // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
+                // defaults and remember sanitisation process.
+                if (this.hasParameter(def.name)) {
+                    params[def.name] = this.getParameter(def.name);
+                }
             }
-        }
+        }));
+        return new Visit(this.placeDefinition, params);
     }
-    ParameterDefinition.DefaultParameterSanitiser = DefaultParameterSanitiser;
-    if (false) {
+    /**
+     * @param {?} other
+     * @return {?}
+     */
+    hasRoutingChangedFrom(other) {
         /** @type {?} */
-        DefaultParameterSanitiser.prototype.remember;
+        const samePlace = other.placeDefinition === this.placeDefinition;
         /** @type {?} */
-        DefaultParameterSanitiser.prototype.defaultValue;
+        const sameRouteParameters = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        return !samePlace || !sameRouteParameters;
+    }
+    /**
+     * @param {?} other
+     * @return {?}
+     */
+    hasChangedFrom(other) {
         /** @type {?} */
-        DefaultParameterSanitiser.prototype.placeHistory;
+        const sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
     }
-})(ParameterDefinition || (ParameterDefinition = {}));
+}
+if (false) {
+    /** @type {?} */
+    Visit.prototype.placeDefinition;
+    /**
+     * @type {?}
+     * @private
+     */
+    Visit.prototype.visitParameters;
+}
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @abstract
- * @template S, T, R
- */
-class RouteParameterValue {
+class PlaceRouter extends GarbageCollector {
     /**
-     * @param {?} definition
-     * @param {?} rawValue
+     * @param {?} router
+     * @param {?} angularLocation
+     * @param {?} placeHistory
      */
-    constructor(definition, rawValue) {
-        this.definition = definition;
-        this.rawValue = rawValue;
+    constructor(router, angularLocation, placeHistory) {
+        super();
+        this.router = router;
+        this.angularLocation = angularLocation;
+        this.placeHistory = placeHistory;
+        this.firstRoute = true;
+        this._navigationSessionModel = new MutableValueModel();
+        this._activeVisits = new MutableListModel();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.activeVisitIndex = chain(this._activeVisits).indexBy('placeDefinition');
+        angularLocation.onUrlChange((/**
+         * @param {?} url
+         * @return {?}
+         */
+        url => {
+            console.log(`location.onUrlChange -> ${url}`);
+        }));
+        // TODO: make setup the callbacks in during module initiation to make this testable.
+        this.router.events.subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
+            // Routing event sequence
+            // ======================
+            // NavigationStart -> .... -> NavigationCancel --> redirect, go around again in the same session
+            // NavigationStart -> .... -> NavigationEnd --> navigation complete, end session.
+            // NavigationStart -> .... -> NavigationError --> navigation canceled, end session.
+            // =======================
+            if (event instanceof NavigationStart) {
+                this.onAngularRouterStarted(event);
+            }
+            if (event instanceof NavigationEnd || event instanceof NavigationError) {
+                this.onAngularRouterFinished();
+            }
+        }));
+        this.navigationSessionActive = chain(this.navigationSessionModel).isNotNil();
+        this.navigationSessionActive.subscribe((/**
+         * @param {?} active
+         * @return {?}
+         */
+        active => {
+            console.log('navigationSessionActive', active);
+        }));
+        // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
+        // txo.observe('this.navigationSessionModel', this.navigationSessionModel);
     }
     /**
      * @return {?}
      */
-    isRouteId() {
-        return this.definition.isRouteId;
+    get navigationSession() {
+        return this._navigationSessionModel.value;
     }
     /**
-     * @param {?} otherValue
      * @return {?}
      */
-    hasChanged(otherValue) {
-        return this.isEmpty() ?
-            !this.isEmptyValue(otherValue) :
-            this.isEmptyValue(otherValue) || !this.isSameValue(otherValue);
+    get navigationSessionModel() {
+        return this._navigationSessionModel.readonly;
     }
     /**
-     * Return's true if the current value is empty.
      * @return {?}
      */
-    isEmpty() {
-        return this.isEmptyValue(this.value);
+    get activeVisits() {
+        return this._activeVisits.readonly;
     }
     /**
-     * Returns true if the rawValue is undefined.  This
+     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
+     * @param {?} visit
      * @return {?}
      */
-    isMissing() {
-        return ___default.isUndefined(this.rawValue);
+    // @Trace()
+    navigate(visit) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.doNavigation(visit);
+        });
     }
     /**
-     * @param {?} visit
-     * @param {?} injector
+     * @param {?} activatedRoute
+     * @param {?} previous
+     * @param {?} next
      * @return {?}
      */
-    sanitise(visit, injector) {
+    pushVisitChangesToRoute(activatedRoute, previous, next) {
         return __awaiter(this, void 0, void 0, function* () {
-            /** @type {?} */
-            const sanitiser = this.definition.getSanitiser(injector);
-            if (sanitiser) {
-                return sanitiser.sanitise(this, visit);
+            // FIXME: no route id -> route id duplicates route parameters
+            if (next.hasRoutingChangedFrom(previous)) {
+                return this.doNavigation(next, (/**
+                 * @param {?} router
+                 * @return {?}
+                 */
+                router => {
+                    /** @type {?} */
+                    const relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
+                    /** @type {?} */
+                    const def = next.placeDefinition;
+                    /** @type {?} */
+                    const params = next.hasRouteId() ?
+                        [def.getFormattedRouteId(next), def.getFormattedRouteParameters(next)] :
+                        [def.getFormattedRouteParameters(next)];
+                    /** @type {?} */
+                    const commands = [relativePath].concat(params, this.getChildPath(activatedRoute.snapshot));
+                    console.log('### Redirect', commands);
+                    return router.navigate(commands, {
+                        relativeTo: activatedRoute
+                    });
+                }));
             }
             else {
-                return this.value;
+                this.placeHistory.add(next);
             }
         });
     }
-}
-if (false) {
-    /** @type {?} */
-    RouteParameterValue.prototype.value;
-    /** @type {?} */
-    RouteParameterValue.prototype.definition;
-    /**
-     * @type {?}
-     * @protected
-     */
-    RouteParameterValue.prototype.rawValue;
-    /**
-     * @abstract
-     * @param {?} otherValue
-     * @return {?}
-     */
-    RouteParameterValue.prototype.isSameValue = function (otherValue) { };
-    /**
-     * @abstract
-     * @return {?}
-     */
-    RouteParameterValue.prototype.formattedValue = function () { };
-    /**
-     * @abstract
-     * @param {?} value
-     * @return {?}
-     */
-    RouteParameterValue.prototype.replace = function (value) { };
     /**
-     * @abstract
-     * @param {?} value
+     * @param {?} visit
+     * @param {?=} customNavigation
      * @return {?}
      */
-    RouteParameterValue.prototype.isEmptyValue = function (value) { };
-}
-(function (RouteParameterValue) {
+    doNavigation(visit, customNavigation) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._navigationSessionModel.value = NavigationSession.createInternal(visit);
+            try {
+                if (customNavigation) {
+                    yield customNavigation(this.router);
+                }
+                else {
+                    /** @type {?} */
+                    const def = visit.placeDefinition;
+                    /** @type {?} */
+                    const parameterCommands = visit.hasRouteId() ?
+                        [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
+                        [def.getFormattedRouteParameters(visit)];
+                    /** @type {?} */
+                    const commands = [def.path].concat(parameterCommands);
+                    console.log('_doNavigation', visit, commands);
+                    yield this.router.navigate(commands);
+                }
+            }
+            finally {
+                if (this.navigationSession && !this.router.getCurrentNavigation()) {
+                    this.onAngularRouterFinished();
+                }
+            }
+        });
+    }
+    // @Trace()
     /**
-     * @template T
-     * @param {?} def
-     * @param {?} paramMap
+     * @private
+     * @param {?} event
      * @return {?}
      */
-    function create(def, paramMap) {
-        // NOTE: Using undefined is important as it triggers the isMissing flag which is used by defaultValue and remember flags
-        if (def.isArray) {
-            return new RouteParameterValue.Array(def, paramMap.has(def.name) ? paramMap.getAll(def.name) : undefined);
-        }
-        else {
+    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 {?} */
-            let rawValue = paramMap.has(def.name) ? paramMap.get(def.name) : undefined;
-            // route ids are always present so we have to check if it's empty to flag it as missing..
-            rawValue = def.isRouteId && ___default.isEmpty(rawValue) ? undefined : rawValue;
-            return new RouteParameterValue.Scalar(def, rawValue);
+            const session = NavigationSession.createExternal(this.firstRoute);
+            if (event.navigationTrigger === 'popstate') {
+                session.setPopstateReturn(this.router.routerState.snapshot.url);
+            }
+            this._navigationSessionModel.value = session;
         }
+        this.firstRoute = false;
     }
-    RouteParameterValue.create = create;
+    // @Trace()
     /**
-     * @template T
+     * @private
+     * @return {?}
      */
-    class Scalar extends RouteParameterValue {
-        /**
-         * @return {?}
-         */
-        get value() {
-            return this.definition.type.parse(this.rawValue);
-        }
-        /**
-         * @param {?} otherValue
-         * @return {?}
-         */
-        isSameValue(otherValue) {
-            return this.value === otherValue;
-        }
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        replace(value) {
-            return new RouteParameterValue.Scalar(this.definition, this.isEmptyValue(value) ? undefined : this.definition.type.format(value));
-        }
-        /**
-         * @return {?}
-         */
-        formattedValue() {
-            return this.isEmpty() ? undefined : this.definition.type.format(this.value);
-        }
-        /**
-         * @param {?} value
+    onAngularRouterFinished() {
+        /** @type {?} */
+        const session = this._navigationSessionModel.value;
+        // Update visits before we end the navigation session.  This allows the place out let to
+        // gate ignore changes that occur while the visit is active
+        /** @type {?} */
+        const visits = session.getVisits();
+        visits.forEach((/**
+         * @param {?} v
          * @return {?}
          */
-        isEmptyValue(value) {
-            return ___default.isNil(value);
-        }
+        v => {
+            this.placeHistory.add(v);
+        }));
+        this._activeVisits.value = visits;
+        this._navigationSessionModel.value = null;
     }
-    __decorate([
-        Memoize$1(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], Scalar.prototype, "value", null);
-    RouteParameterValue.Scalar = Scalar;
     /**
-     * @template T
+     * @param {?} activatedRoute
+     * @return {?}
      */
-    class Array extends RouteParameterValue {
-        /**
-         * @return {?}
-         */
-        get value() {
-            return (this.rawValue || [])
-                .filter((/**
-             * @param {?} s
-             * @return {?}
-             */
-            s => !___default.isEmpty(s)))
-                .map((/**
-             * @param {?} raw
-             * @return {?}
-             */
-            raw => this.definition.type.parse(raw)));
-        }
-        /**
-         * @param {?} otherValue
-         * @return {?}
-         */
-        isSameValue(otherValue) {
-            return ___default.isEqual(this.value, otherValue);
-        }
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        replace(value) {
-            return new RouteParameterValue.Array(this.definition, this.isEmptyValue(value) ? undefined : value.map((/**
-             * @param {?} v
-             * @return {?}
-             */
-            v => this.definition.type.format(v))));
-        }
-        /**
-         * @return {?}
-         */
-        formattedValue() {
-            return this.isEmpty() ? [] : this.value.map((/**
-             * @param {?} v
-             * @return {?}
-             */
-            v => this.definition.type.format(v)));
-        }
-        /**
-         * @param {?} value
+    getChildPath(activatedRoute) {
+        return ___default.flatten(activatedRoute.children.map((/**
+         * @param {?} child
          * @return {?}
          */
-        isEmptyValue(value) {
-            return ___default.isNil(value) || value.length < 1;
-        }
-    }
-    __decorate([
-        Memoize$1(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [])
-    ], Array.prototype, "value", null);
-    RouteParameterValue.Array = Array;
-})(RouteParameterValue || (RouteParameterValue = {}));
-
-var _a;
-class ParameterSnapshot {
-    /**
-     * @param {?} placeDefinition
-     * @param {?} parameters
-     */
-    constructor(placeDefinition, parameters) {
-        this.placeDefinition = placeDefinition;
-        this.parameters = parameters;
-    }
-    /**
-     * @param {?} other
-     * @param {?=} debug
-     * @return {?}
-     */
-    hasChanged(other, debug = false) {
-        /** @type {?} */
-        const changed = this.parameters.find((/**
-         * @param {?} r
-         * @return {?}
-         */
-        (r) => {
-            return r.hasChanged(other.getValueOf(r.definition));
-        }));
-        if (changed && debug) {
-            console.log({
-                name: changed.definition.name,
-                mine: changed.value,
-                theirs: other.getValueOf(changed.definition)
-            });
-        }
-        return !!changed;
-    }
-    /**
-     * @template T, S
-     * @param {?} parameterDef
-     * @return {?}
-     */
-    getParameter(parameterDef) {
-        return this.parameters.find((/**
-         * @param {?} r
-         * @return {?}
-         */
-        r => r.definition === parameterDef));
-    }
-    /**
-     * @template T, S
-     * @param {?} parameterDef
-     * @return {?}
-     */
-    getValueOf(parameterDef) {
-        /** @type {?} */
-        const resolvedParameter = this.getParameter(parameterDef);
-        return resolvedParameter ? resolvedParameter.value : null;
-    }
-    /**
-     * @return {?}
-     */
-    getRouteIdValue() {
-        return this.getRouteIdParameter() ? this.getRouteIdParameter().value : null;
-    }
-    /**
-     * @param {?} name
-     * @return {?}
-     */
-    getParameterValue(name) {
-        /** @type {?} */
-        const resolvedParameter = this.parameters.find((/**
-         * @param {?} r
-         * @return {?}
-         */
-        r => r.definition.name === name));
-        return resolvedParameter ? resolvedParameter.value : null;
+        child => child.url)));
     }
+}
+PlaceRouter.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+PlaceRouter.ctorParameters = () => [
+    { type: Router },
+    { type: Location },
+    { type: PlaceHistory }
+];
+/** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(Location), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ActivatedRoute, Visit, Visit]),
+    __metadata("design:returntype", Promise)
+], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
+if (false) {
     /**
+     * @type {?}
      * @private
-     * @return {?}
      */
-    getRouteIdParameter() {
-        // RouteId's are never arrays: see parameter-decorators.ts createDefinition methods. It would be nice to
-        // capture this in the type system though
-        return (/** @type {?} */ (this.parameters.find((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => p.definition.isRouteId))));
-    }
+    PlaceRouter.prototype.firstRoute;
     /**
+     * @type {?}
      * @private
-     * @return {?}
-     */
-    getRouteParameters() {
-        return this.parameters.filter((/**
-         * @param {?} r
-         * @return {?}
-         */
-        r => !r.definition.isRouteId));
-    }
-    /**
-     * @return {?}
-     */
-    hasRouteId() {
-        return !!this.getRouteIdParameter();
-    }
-    /**
-     * @return {?}
-     */
-    getFormattedRouteId() {
-        /** @type {?} */
-        const routeIdParam = this.getRouteIdParameter();
-        return routeIdParam ? routeIdParam.formattedValue() : null;
-    }
-    /**
-     * @return {?}
-     */
-    getNonEmptyParameters() {
-        return this.parameters.filter((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => !p.isEmpty()));
-    }
-    /**
-     * @return {?}
-     */
-    getFormattedParameters() {
-        /** @type {?} */
-        const params = {};
-        /** @type {?} */
-        const routeIdParam = this.getNonEmptyParameters()
-            .filter((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => !p.definition.isRouteId))
-            .forEach((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => params[p.definition.name] = p.formattedValue()));
-        return params;
-    }
-    /**
-     * @return {?}
-     */
-    getAllParameters() {
-        /** @type {?} */
-        const params = {};
-        /** @type {?} */
-        const routeIdParam = this.parameters.forEach((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => {
-            params[p.definition.name] = p.value;
-        }));
-        return params;
-    }
-    /**
-     * @template T, S
-     * @param {?} parameter
-     * @param {?} value
-     * @return {?}
      */
-    replace(parameter, value) {
-        return new ParameterSnapshot(this.placeDefinition, this.parameters.map((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => {
-            return p.definition === parameter ? p.replace(value) : p;
-        })));
-    }
+    PlaceRouter.prototype._navigationSessionModel;
     /**
-     * @param {?} injector
-     * @return {?}
+     * @type {?}
+     * @private
      */
-    sanitise(injector) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.hasRouteId()) {
-                /** @type {?} */
-                const routeId = this.getRouteIdParameter();
-                /** @type {?} */
-                const sanitisedValue = yield routeId.sanitise(this, injector);
-                if (routeId.hasChanged(sanitisedValue)) {
-                    // if the route id has changed we redirect immediately as other
-                    // parameter sanitisers might use it.
-                    return this.replace(routeId.definition, sanitisedValue);
-                }
-            }
-            /** @type {?} */
-            let result = this;
-            /** @type {?} */
-            const routeParameters = this.getRouteParameters();
-            for (let i = 0; i < routeParameters.length; i++) {
-                /** @type {?} */
-                const routeParameter = routeParameters[i];
-                /** @type {?} */
-                const sanitisedValue = yield routeParameter.sanitise(this, injector);
-                if (routeParameter.hasChanged(sanitisedValue)) {
-                    result = result.replace(routeParameter.definition, sanitisedValue);
-                }
-            }
-            return result;
-        });
-    }
-}
-__decorate([
-    Memoize$1(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ParameterDefinition]),
-    __metadata("design:returntype", RouteParameterValue)
-], ParameterSnapshot.prototype, "getParameter", null);
-__decorate([
-    Memoize$1(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ParameterDefinition]),
-    __metadata("design:returntype", typeof (_a = typeof S !== "undefined" && S) === "function" ? _a : Object)
-], ParameterSnapshot.prototype, "getValueOf", null);
-__decorate([
-    Memoize$1(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String]),
-    __metadata("design:returntype", Object)
-], ParameterSnapshot.prototype, "getParameterValue", null);
-__decorate([
-    Memoize$1(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", RouteParameterValue.Scalar)
-], ParameterSnapshot.prototype, "getRouteIdParameter", null);
-__decorate([
-    Memoize$1(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Array)
-], ParameterSnapshot.prototype, "getRouteParameters", null);
-if (false) {
+    PlaceRouter.prototype._activeVisits;
     /** @type {?} */
-    ParameterSnapshot.prototype.placeDefinition;
+    PlaceRouter.prototype.navigationSessionActive;
+    /** @type {?} */
+    PlaceRouter.prototype.activeVisitIndex;
     /**
      * @type {?}
      * @private
      */
-    ParameterSnapshot.prototype.parameters;
+    PlaceRouter.prototype.router;
+    /** @type {?} */
+    PlaceRouter.prototype.angularLocation;
+    /** @type {?} */
+    PlaceRouter.prototype.placeHistory;
 }
-(function (ParameterSnapshot) {
-    /**
-     * @param {?} placeDef
-     * @param {?} params
-     * @param {?} urlSegments
-     * @return {?}
-     */
-    function create(placeDef, params, urlSegments) {
-        /** @type {?} */
-        const paramMap = new ConsolidatedParameterMap(params, urlSegments);
-        /** @type {?} */
-        const resolvedParameters = placeDef.getRouteParameters().map((/**
-         * @param {?} def
-         * @return {?}
-         */
-        def => RouteParameterValue.create(def, paramMap)));
-        return new ParameterSnapshot(placeDef, resolvedParameters);
-    }
-    ParameterSnapshot.create = create;
-    /**
-     * 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) {
-            return this.paramMaps.find((/**
-             * @param {?} m
-             * @return {?}
-             */
-            m => m.has(name))).get(name);
-        }
-        /**
-         * @param {?} name
-         * @return {?}
-         */
-        getAll(name) {
-            return this.paramMaps.find((/**
-             * @param {?} m
-             * @return {?}
-             */
-            m => m.has(name))).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$1(),
-        __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;
-    }
-})(ParameterSnapshot || (ParameterSnapshot = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -3227,64 +3278,64 @@ if (false) {
 class PlaceOutletComponent extends DisposableComponent {
     /**
      * @param {?} router
+     * @param {?} placeRouter
      * @param {?} placeHistory
      */
-    constructor(router, placeHistory) {
+    constructor(router, placeRouter, placeHistory) {
         super();
         this.router = router;
+        this.placeRouter = placeRouter;
         this.placeHistory = placeHistory;
         this.animate = true;
+        this.placeChanged = new EventEmitter();
         this._activePlace = new MutableValueModel();
-        this._incomingRouteChange = new Guard$1();
         this._inOutletUpdate = new Guard$1();
         this._activatedRouteModel = new MutableValueModel();
         this._placeDefinition = new MutableValueModel();
-        this._resolvedParameters = new MutableValueModel();
+        /**
+         * TODO: This is now really a visit
+         */
+        this._placeVisit = new MutableValueModel();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        // Handle incoming route changes.
         /** @type {?} */
-        const paramMap = chain(this._activatedRouteModel).pullObservableValue((/**
-         * @param {?} ar
-         * @return {?}
-         */
-        ar => ar.paramMap));
+        const inRouteVisitUpdate = new Guard$1();
         /** @type {?} */
-        const urls = chain(this._activatedRouteModel).pullObservableValue((/**
-         * @param {?} ar
-         * @return {?}
-         */
-        ar => ar.url));
-        this.placeConfigured = valueOf.all(chain(this._inOutletUpdate).isFalsey(), this._placeDefinition, paramMap, urls).areTruthy();
-        when.anyOf(paramMap, urls).changes((/**
+        const routeVisit = chain(this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
+        when.valueOf(routeVisit).changes((/**
+         * @param {?} visit
          * @return {?}
          */
-        () => {
-            /** @type {?} */
-            const snapshot = ParameterSnapshot.create(this._placeDefinition.value, paramMap.value, urls.value);
-            this._incomingRouteChange.whileTrue((/**
-             * @return {?}
-             */
-            () => {
-                this._resolvedParameters.value = snapshot;
-                this.placeHistory.add(snapshot);
-            }));
-        }), {
-            postponeUntil: this.placeConfigured
-        });
-        when.valueOf(this._resolvedParameters).changes((/**
+        (visit) => {
+            if (visit) {
+                inRouteVisitUpdate.whileTrue((/**
+                 * @return {?}
+                 */
+                () => {
+                    this._placeVisit.value = visit;
+                }));
+            }
+        }));
+        // Handle component based changes
+        when.valueOf(this._placeVisit).changes((/**
          * @param {?} next
          * @param {?} previous
          * @return {?}
          */
         (next, previous) => {
-            this.placeHistory.add(next); // the above route change doesn't seem to propagate back in, so I'm add the state to the history manually for now.
-            this.pushChangesToRoute(next, previous);
+            this.pushVisitChangesToRoute(next, previous);
         }), {
-            unless: this.incomingRouteChange
+            unless: inRouteVisitUpdate
         });
+        chain(this._activePlace)
+            .postponeWhile(placeRouter.navigationSessionActive)
+            .subscribe((/**
+         * @param {?} place
+         * @return {?}
+         */
+        place => this.placeChanged.emit(place)));
         // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
-        // txo.observe('paramMap', paramMap);
-        // txo.observe('urls', urls);
-        // txo.observe('this._resolvedParameters', this._resolvedParameters);
+        // txo.observe('inRouteVisitUpdate', inRouteVisitUpdate);
     }
     /**
      * @return {?}
@@ -3292,15 +3343,19 @@ class PlaceOutletComponent extends DisposableComponent {
     ngOnInit() {
     }
     /**
+     * @param {?} next
+     * @param {?} previous
      * @return {?}
      */
-    get incomingRouteChange() {
-        return this._incomingRouteChange;
+    pushVisitChangesToRoute(next, previous) {
+        /** @type {?} */
+        const activatedRoute = this._activatedRouteModel.value;
+        this.placeRouter.pushVisitChangesToRoute(activatedRoute, previous, next);
     }
     /**
      * @return {?}
      */
-    get activePlace() {
+    get activePlaceModel() {
         return this._activePlace.readonly;
     }
     /**
@@ -3317,7 +3372,7 @@ class PlaceOutletComponent extends DisposableComponent {
                 this._activePlace.value = place;
                 this._activatedRouteModel.value = routerOutlet.activatedRoute;
                 this._placeDefinition.value = place.placeDefinition;
-                place.initialiseBindings(this._resolvedParameters);
+                place.initialiseBindings(this._placeVisit);
             }
             catch (error) {
                 console.error(error);
@@ -3359,22 +3414,11 @@ class PlaceOutletComponent extends DisposableComponent {
         }
     }
     /**
-     * @param {?} next
-     * @param {?} previous
+     * @param {?} placeDestination
      * @return {?}
      */
-    pushChangesToRoute(next, previous) {
-        /** @type {?} */
-        const activatedRoute = this._activatedRouteModel.value;
-        this.router.pushParameterChangesToRoute(activatedRoute, previous, next);
-    }
-    /**
-     * @param {?} snapshot
-     * @param {?} callback
-     * @return {?}
-     */
-    sanitise(snapshot, callback) {
-        return snapshot;
+    activate(placeDestination) {
+        // this.router.
     }
 }
 PlaceOutletComponent.decorators = [
@@ -3387,28 +3431,27 @@ PlaceOutletComponent.decorators = [
 ];
 /** @nocollapse */
 PlaceOutletComponent.ctorParameters = () => [
+    { type: Router },
     { type: PlaceRouter },
     { type: PlaceHistory }
 ];
 PlaceOutletComponent.propDecorators = {
     animate: [{ type: Input }],
+    placeChanged: [{ type: Output }],
     routerOut: [{ type: ViewChild, args: ['routeOutlet', { static: true },] }]
 };
 if (false) {
     /** @type {?} */
     PlaceOutletComponent.prototype.animate;
     /** @type {?} */
+    PlaceOutletComponent.prototype.placeChanged;
+    /** @type {?} */
     PlaceOutletComponent.prototype.routerOut;
     /**
      * @type {?}
      * @private
      */
     PlaceOutletComponent.prototype._activePlace;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype._incomingRouteChange;
     /**
      * @type {?}
      * @private
@@ -3424,18 +3467,21 @@ if (false) {
      * @private
      */
     PlaceOutletComponent.prototype._placeDefinition;
-    /** @type {?} */
-    PlaceOutletComponent.prototype._resolvedParameters;
     /**
+     * TODO: This is now really a visit
      * @type {?}
-     * @private
      */
-    PlaceOutletComponent.prototype.placeConfigured;
+    PlaceOutletComponent.prototype._placeVisit;
     /**
      * @type {?}
      * @private
      */
     PlaceOutletComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.placeRouter;
     /**
      * @type {?}
      * @private
@@ -3455,7 +3501,7 @@ class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
 TabbedPlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-tabbed-place-navigation',
-                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span>{{getNav(place).title()}}</span>\n  </a>\n</nav>\n",
+                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     [replaceUrl]=\"true\"\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span>{{getNav(place).title()}}</span>\n  </a>\n</nav>\n",
                 styles: [""]
             }] }
 ];
@@ -3513,7 +3559,8 @@ AngularUiPowerupsModule.decorators = [
                     NumberInputComponent,
                     StringInputComponent,
                     PasswordInputComponent,
-                    SelectInputComponent
+                    SelectInputComponent,
+                    NoopComponent
                 ],
                 imports: [
                     CommonModule,
@@ -3534,7 +3581,8 @@ AngularUiPowerupsModule.decorators = [
                     PasswordInputComponent,
                     SelectInputComponent,
                     InteractionModule,
-                    PlaceModule
+                    PlaceModule,
+                    NoopComponent
                 ]
             },] }
 ];
@@ -3874,16 +3922,24 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class CloseInteractionGuard {
+class InteractionGuard {
     /**
      * @param {?} router
      * @param {?} injector
      * @param {?} interactionContext
      */
-    constructor(router, injector, interactionContext) {
-        this.router = router;
-        this.injector = injector;
-        this.interactionContext = 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
@@ -3896,34 +3952,46 @@ class CloseInteractionGuard {
         return !this.interactionContext.isActive();
     }
 }
-CloseInteractionGuard.decorators = [
+InteractionGuard.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
 /** @nocollapse */
-CloseInteractionGuard.ctorParameters = () => [
+InteractionGuard.ctorParameters = () => [
     { type: Router },
     { type: Injector },
     { type: InteractionContext }
 ];
-/** @nocollapse */ CloseInteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function CloseInteractionGuard_Factory() { return new CloseInteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(InteractionContext)); }, token: CloseInteractionGuard, providedIn: "root" });
+/** @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
      */
-    CloseInteractionGuard.prototype.router;
+    InteractionGuard.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    CloseInteractionGuard.prototype.injector;
+    InteractionGuard.prototype.injector;
     /**
      * @type {?}
      * @private
      */
-    CloseInteractionGuard.prototype.interactionContext;
+    InteractionGuard.prototype.interactionContext;
 }
 
 /**
@@ -4000,26 +4068,314 @@ function Place(options) {
     }
 })(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 {
+        /**
+         * @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
+ */
+/**
+ * @record
+ */
+function JsonArray() { }
+/**
+ * @record
+ */
+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) {
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, options.storeInUrl);
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+/**
+ * @template E
+ * @param {?=} options
+ * @return {?}
+ */
+function VisitParameterList(options) {
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, options.storeInUrl);
+        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
+ */
+/**
+ * @record
+ * @template S
+ */
+function ParameterSanitiser() { }
+if (false) {
+    /**
+     * @param {?} parameterValue
+     * @param {?=} visit
+     * @param {?=} injector
+     * @return {?}
+     */
+    ParameterSanitiser.prototype.sanitise = function (parameterValue, visit, injector) { };
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @record
+ * @template T
  */
-function Visit() { }
+function ParameterSnapshot() { }
 if (false) {
     /** @type {?} */
-    Visit.prototype.placeDefinition;
+    ParameterSnapshot.prototype.definition;
+    /** @type {?} */
+    ParameterSnapshot.prototype.value;
     /**
      * @return {?}
      */
-    Visit.prototype.getRouteIdValue = function () { };
+    ParameterSnapshot.prototype.isMissing = function () { };
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class VisitSanitiser {
+    /**
+     * @param {?} activatedRoute
+     * @param {?} router
+     * @param {?} placeHistory
+     * @param {?} injector
+     */
+    constructor(activatedRoute, router, placeHistory, injector) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.placeHistory = placeHistory;
+        this.injector = injector;
+    }
+    // @Trace()
     /**
-     * @param {?} name
+     * @param {?} visit
      * @return {?}
      */
-    Visit.prototype.getParameterValue = function (name) { };
+    sanitise(visit) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            const placeDef = visit.placeDefinition;
+            if (placeDef.hasRouteId()) {
+                /** @type {?} */
+                const routeIdDef = placeDef.getRouteIdParameterDef();
+                /** @type {?} */
+                const routeId = visit.getRouteId();
+                /** @type {?} */
+                const sanitisedValue = yield routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector);
+                console.log({ routeId, sanitisedValue });
+                // ###------- EARLY EXIT --------###
+                if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
+                    // if the route id has changed we redirect immediately as other
+                    // parameter sanitisers might use it.
+                    return visit.replace(routeIdDef, sanitisedValue);
+                }
+            }
+            // if we didn't replace the routeId we continue the url present parameters.
+            /** @type {?} */
+            const parameterDefs = placeDef.getVisitParameterDefs({
+                includeRouteParameters: true,
+                includeNonRouteParameters: true
+            });
+            /** @type {?} */
+            let sanitisedVisit = visit;
+            for (let i = 0; i < parameterDefs.length; i++) {
+                /** @type {?} */
+                const def = parameterDefs[i];
+                /** @type {?} */
+                const value = visit.getParameter(def.name);
+                /** @type {?} */
+                const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector);
+                if (def.hasChanged(value, sanitisedValue)) {
+                    sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
+                }
+            }
+            return sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit;
+        });
+    }
+}
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.activatedRoute;
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.placeHistory;
+    /**
+     * @type {?}
+     * @private
+     */
+    VisitSanitiser.prototype.injector;
 }
 
 /**
@@ -4041,6 +4397,16 @@ class LeavePlaceGuard {
         this.interactionContext = interactionContext;
         this.angularLocation = angularLocation;
     }
+    /**
+     * @private
+     * @param {?} nextState
+     * @param {?} placeDefinitionPath
+     * @return {?}
+     */
+    isLeavingTheCurrentPlace(nextState, placeDefinitionPath) {
+        // TODO: this will break with child routes... need to examine the router states properly.
+        return !nextState.url.startsWith(placeDefinitionPath);
+    }
     /**
      * @param {?} component
      * @param {?} currentRoute
@@ -4095,41 +4461,65 @@ class LeavePlaceGuard {
             //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
             //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c"
             // }
+            // TODO: Add tests
             if (this.placeRouter.navigationSession.alreadyAccepted(component)) {
+                // 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 {
-                // TODO: this will break with child routes... need to examine the router states properly.
-                if (!nextState.url.startsWith(placeDefinitionPath)) {
-                    /** @type {?} */
-                    const self = this;
-                    /** @type {?} */
-                    let canLeave = yield component.canDeactivate();
-                    // component is happy to leave but we need to check if it's left an interaction
-                    // open.  If so we close and stay where we are.
-                    if (canLeave && this.interactionContext.isActive()) {
+                /** @type {?} */
+                const self = this;
+                /** @type {?} */
+                let canLeave = true;
+                if (this.isLeavingTheCurrentPlace(nextState, placeDefinitionPath)) {
+                    // we check the interaction first, so that components that don't need to check if they're in an
+                    // interaction during the canDeactivate cycle.
+                    // TODO: Add tests: show dialog -> hit back -> same route
+                    if (this.interactionContext.isActive()) {
                         canLeave = false;
-                        console.log("cancelling", { activity: this.interactionContext.currentActivity });
+                        console.log('cancelling', { activity: this.interactionContext.currentActivity });
                         this.interactionContext.currentActivity.cancel(null);
                     }
-                    // If we're still leaving then remember it since angular will call this method multiple
-                    // times if any route parameters are changed along the way.
+                    // No interaction in progress, so ask the component .
+                    // This may start an interaction, hence checking the interaction context above. 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.
                     if (canLeave) {
-                        self.placeRouter.navigationSession.rememberAcceptanceOf(component);
+                        // TODO: Add tests: hit back -> confirm leave dialog -> hit back -> close dialog ->  hit back -> confirm leave dialog.
+                        canLeave = yield component.canDeactivate();
+                    }
+                    // We also block back button parameter changes while the dialog is open.
+                    // NOTE: Now that I'm catching parameter changes I could possibly retry using a fragment or
+                    // query parameter to track the dialog being open.  Previously I was just checking this on
+                    // path changes... if that worked it'd fix the case where the back button breaks with an activity
+                    // open on the first page: https://coolon.atlassian.net/browse/AUP-33
+                }
+                else {
+                    if (this.interactionContext.isActive()) {
+                        console.log('cancelling', { activity: this.interactionContext.currentActivity });
+                        this.interactionContext.currentActivity.cancel(null);
+                        canLeave = false;
                     }
                     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 (this.placeRouter.navigationSession.isPopState) {
-                            console.log('cancelled during popstate');
-                            this.angularLocation.go(this.placeRouter.navigationSession.initialUrl);
-                        }
+                        canLeave = true;
                     }
-                    return canLeave;
+                }
+                if (canLeave) {
+                    // We'll get called multiple times if there's any parameter sanitisation so
+                    // we remember the acceptance for the duration of the current navigation session.
+                    self.placeRouter.navigationSession.rememberAcceptanceOf(component);
                 }
                 else {
-                    return true;
+                    // Angular doesn't preserve the url when a guard cancels the back button.
+                    // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+                    if (this.placeRouter.navigationSession.isPopState) {
+                        console.log('cancelled during popstate');
+                        this.angularLocation.go(this.placeRouter.navigationSession.popStateReturnUrl);
+                    }
                 }
+                return canLeave;
             }
         });
     }
@@ -4176,41 +4566,62 @@ if (false) {
  */
 class PlaceRouteGuard {
     /**
+     * @param {?} router
      * @param {?} placeRouter
+     * @param {?} placeHistory
      * @param {?} injector
      */
-    constructor(placeRouter, injector) {
+    constructor(router, placeRouter, placeHistory, injector) {
+        this.router = router;
         this.placeRouter = placeRouter;
+        this.placeHistory = placeHistory;
         this.injector = injector;
     }
+    // @Trace()
     /**
      * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
      */
     canActivate(activatedRoute, state) {
-        if (PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
-            /** @type {?} */
-            const placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
-            /** @type {?} */
-            const snapshot = ParameterSnapshot.create(placeDefinition, activatedRoute.paramMap, activatedRoute.url);
-            return snapshot.sanitise(this.injector).then((/**
-             * @param {?} sanitised
-             * @return {?}
-             */
-            sanitised => {
-                Logger.get(this).info("ParameterSnapshot.sanitise ->", sanitised.getAllParameters());
-                if (sanitised.hasChanged(snapshot, true)) {
-                    return this.placeRouter.getRedirectUrlTree(activatedRoute, sanitised);
+        return __awaiter(this, void 0, void 0, function* () {
+            if (PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
+                /** @type {?} */
+                const placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
+                // Parse our route params.
+                /** @type {?} */
+                const params = new PlaceRouteGuard.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 updatedVisit = 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(updatedVisit);
+                if (initialVisit.hasRoutingChangedFrom(updatedVisit)) {
+                    /** @type {?} */
+                    const parameterCommands = updatedVisit.hasRouteId() ?
+                        [placeDefinition.getFormattedRouteId(updatedVisit), placeDefinition.getFormattedRouteParameters(updatedVisit)] :
+                        [placeDefinition.getFormattedRouteParameters(updatedVisit)];
+                    /** @type {?} */
+                    const commands = [(activatedRoute.url[0].path)].concat(parameterCommands, this.placeRouter.getChildPath(activatedRoute));
+                    console.log('##### Redirect', commands);
+                    return this.router.createUrlTree(commands, {
+                        replaceUrl: true,
+                        skipLocationChange: false
+                    });
                 }
                 else {
                     return true;
                 }
-            }));
-        }
-        else {
-            return lang.illegalState(`expected component to be an instance of PlaceComponent, got ${activatedRoute.component}`);
-        }
+            }
+            else {
+                return lang.illegalState(`expected component to be an instance of PlaceComponent, got ${activatedRoute.component}`);
+            }
+        });
     }
 }
 PlaceRouteGuard.decorators = [
@@ -4220,205 +4631,163 @@ PlaceRouteGuard.decorators = [
 ];
 /** @nocollapse */
 PlaceRouteGuard.ctorParameters = () => [
+    { type: Router },
     { type: PlaceRouter },
+    { type: PlaceHistory },
     { type: Injector }
 ];
-/** @nocollapse */ PlaceRouteGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(ɵɵinject(PlaceRouter), ɵɵinject(INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
+/** @nocollapse */ PlaceRouteGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(ɵɵinject(Router), ɵɵinject(PlaceRouter), ɵɵinject(PlaceHistory), ɵɵinject(INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.placeRouter;
+    PlaceRouteGuard.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.injector;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function JsonArray() { }
-/**
- * @record
- */
-function JsonMap() { }
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- * @template T
- */
-function ParameterOptions() { }
-if (false) {
-    /** @type {?|undefined} */
-    ParameterOptions.prototype.as;
-    /** @type {?|undefined} */
-    ParameterOptions.prototype.optional;
-    /** @type {?|undefined} */
-    ParameterOptions.prototype.remember;
-    /** @type {?|undefined} */
-    ParameterOptions.prototype.defaultValue;
-}
-/**
- * @record
- * @template T
- */
-function ListParameterOptions() { }
-if (false) {
-    /** @type {?|undefined} */
-    ListParameterOptions.prototype.as;
-    /** @type {?|undefined} */
-    ListParameterOptions.prototype.optional;
-    /** @type {?|undefined} */
-    ListParameterOptions.prototype.remember;
-    /** @type {?|undefined} */
-    ListParameterOptions.prototype.defaultValue;
-}
-/**
- * @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(), type, options);
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
-/**
- * @template T
- * @param {?} type
- * @param {?=} options
- * @return {?}
- */
-function RouteParameter(type, options) {
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
-     * @return {?}
+    PlaceRouteGuard.prototype.placeRouter;
+    /**
+     * @type {?}
+     * @private
      */
-    (prototype, propertyKey) => {
-        /** @type {?} */
-        const param = new ParameterDefinition.ValueParameter(propertyKey.toString(), type, options);
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
-/**
- * @template E
- * @param {?} elementType
- * @param {?=} options
- * @return {?}
- */
-function RouteParameterList(elementType, options) {
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
-     * @return {?}
+    PlaceRouteGuard.prototype.placeHistory;
+    /**
+     * @type {?}
+     * @private
      */
-    (prototype, propertyKey) => {
-        /** @type {?} */
-        const param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), elementType, options);
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
+    PlaceRouteGuard.prototype.injector;
 }
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- * @template S
- */
-function ParameterSanitiser() { }
-if (false) {
+(function (PlaceRouteGuard) {
     /**
-     * @param {?} paramter
-     * @param {?=} visit
-     * @return {?}
+     * 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.
      */
-    ParameterSanitiser.prototype.sanitise = function (paramter, visit) { };
-}
-
-/**
- * @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 ParameterType;
-(function (ParameterType) {
-    class StringType {
+    class ConsolidatedParameterMap {
         /**
-         * @param {?} value
+         * @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 {?}
          */
-        format(value) {
-            return value;
+        get(name) {
+            /** @type {?} */
+            const paramMap = this.paramMaps.find((/**
+             * @param {?} m
+             * @return {?}
+             */
+            m => m.has(name)));
+            return paramMap.get(name);
         }
         /**
-         * @param {?} value
+         * @param {?} name
          * @return {?}
          */
-        parse(value) {
-            return value;
+        getAll(name) {
+            /** @type {?} */
+            const paramMap = this.paramMaps.find((/**
+             * @param {?} m
+             * @return {?}
+             */
+            m => m.has(name)));
+            return paramMap.getAll(name);
         }
-    }
-    class NumberType {
         /**
-         * @param {?} value
+         * @param {?} name
          * @return {?}
          */
-        format(value) {
-            return `${value}`;
+        has(name) {
+            return !!this.paramMaps.find((/**
+             * @param {?} m
+             * @return {?}
+             */
+            m => m.has(name)));
         }
         /**
-         * @param {?} value
          * @return {?}
          */
-        parse(value) {
-            return ___default.isNil(value) || ___default.isEmpty(value) ? null : +value;
+        get keys() {
+            return this.paramMaps.reduce((/**
+             * @param {?} result
+             * @param {?} params
+             * @return {?}
+             */
+            (result, params) => result.concat(params.keys)), []);
         }
     }
-    class BooleanType {
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Array),
+        __metadata("design:paramtypes", [])
+    ], ConsolidatedParameterMap.prototype, "keys", null);
+    PlaceRouteGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
+    if (false) {
         /**
-         * @param {?} value
+         * @type {?}
+         * @private
+         */
+        ConsolidatedParameterMap.prototype.paramMaps;
+    }
+    class ParamMapAdapter {
+        /**
+         * @param {?} params
+         */
+        constructor(params) {
+            this.params = params;
+        }
+        /**
+         * @param {?} name
          * @return {?}
          */
-        format(value) {
-            return value ? 'true' : 'false';
+        get(name) {
+            return this.params[name];
         }
         /**
-         * @param {?} value
+         * @param {?} name
          * @return {?}
          */
-        parse(value) {
-            return value === 'true';
+        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);
         }
     }
-    ParameterType.STRING = new StringType();
-    ParameterType.NUMBER = new NumberType();
-    ParameterType.BOOLEAN = new BooleanType();
-})(ParameterType || (ParameterType = {}));
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        ParamMapAdapter.prototype.params;
+    }
+})(PlaceRouteGuard || (PlaceRouteGuard = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -4440,5 +4809,5 @@ var ParameterType;
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CloseInteractionGuard, CommandDirective, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NumberInputComponent, ParameterDefinition, ParameterSnapshot, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterList, RouteParameterValue, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, Activity as ɵba, ConfirmThenDialogComponent as ɵbc, AlertDialogComponent as ɵbd, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbf, DialogInteractionService as ɵbg, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, leftRightPlaceAnimation as ɵm, LEFT_RIGHT_PLACE_ANIMATION as ɵn, PlaceRouter as ɵo, PlaceHistory as ɵp, TabbedPlaceNavigationComponent as ɵq, AbstractPlaceNavigationComponent as ɵr, ListPlaceNavComponent as ɵs, InteractionModule as ɵt, ActivityContainerComponent as ɵu, InteractionContext as ɵv, ActivityOutletComponent as ɵw, ConfirmationDialogComponent as ɵx, AbstractActivity as ɵy, ACTIVITY_DATA as ɵz };
+export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InteractionContext, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NavigationSession, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, ACTIVITY_DATA as ɵba, Activity as ɵbb, ConfirmThenDialogComponent as ɵbd, AlertDialogComponent as ɵbe, InteractionOutletComponent as ɵbg, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbh, DialogInteractionService as ɵbi, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, NoopComponent as ɵi, PlaceModule as ɵj, EmptyStateComponent as ɵk, BusyOverlayComponent as ɵl, PlaceOutletComponent as ɵm, leftRightPlaceAnimation as ɵn, LEFT_RIGHT_PLACE_ANIMATION as ɵo, PlaceRouter as ɵp, PlaceHistory as ɵq, TabbedPlaceNavigationComponent as ɵr, AbstractPlaceNavigationComponent as ɵs, ListPlaceNavComponent as ɵt, InteractionModule as ɵu, ActivityContainerComponent as ɵv, InteractionContext as ɵw, ActivityOutletComponent as ɵx, ConfirmationDialogComponent as ɵy, AbstractActivity as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map