@coolon/angular-ui-powerups 0.0.66 → 0.0.68

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('uuid'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', 'lodash', '@coolon/typescript-utilities', '@angular/material/dialog', 'uuid', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.___default, global.typescriptUtilities, global.ng.material.dialog, global.uuid, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.ng.router, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver));
-}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, ___default, typescriptUtilities, dialog, uuid, icon, list, tooltip, router, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/router'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('uuid'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@angular/router', 'lodash', '@coolon/typescript-utilities', '@angular/material/dialog', 'uuid', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.ng.router, global.___default, global.typescriptUtilities, global.ng.material.dialog, global.uuid, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, ___default, typescriptUtilities, dialog, uuid, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
@@ -600,6 +600,25 @@
         return StringInputComponent;
     }(AbstractInputComponent));
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var NoopComponent = /** @class */ (function () {
+        function NoopComponent() {
+        }
+        NoopComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'angular-ui-powerups-noop',
+                        template: "",
+                        styles: [":host{display:block}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        NoopComponent.ctorParameters = function () { return []; };
+        return NoopComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1068,7 +1087,7 @@
      * @abstract
      * @template D, R, E
      */
-    exports.ɵba = /** @class */ (function (_super) {
+    exports.ɵbb = /** @class */ (function (_super) {
         __extends(Activity, _super);
         function Activity() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -1158,12 +1177,12 @@
          * @type {?}
          * @private
          */
-        exports.ɵba.prototype._busyModel;
+        exports.ɵbb.prototype._busyModel;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵba.prototype._activityContext;
+        exports.ɵbb.prototype._activityContext;
     }
     (function (Activity) {
         /**
@@ -1178,7 +1197,7 @@
             /** @type {?} */
             Callbacks.prototype.onCancel;
         }
-    })(exports.ɵba || (exports.ɵba = {}));
+    })(exports.ɵbb || (exports.ɵbb = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1335,7 +1354,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return AbstractActivity;
-    }(exports.ɵba));
+    }(exports.ɵbb));
 
     /**
      * @fileoverview added by tsickle
@@ -1359,7 +1378,7 @@
         AlertDialogComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -1381,7 +1400,7 @@
     /**
      * @template D, R, E
      */
-    exports.ɵbc = /** @class */ (function (_super) {
+    exports.ɵbd = /** @class */ (function (_super) {
         __extends(ConfirmThenDialogComponent, _super);
         function ConfirmThenDialogComponent(config, interactionContext) {
             var _this = _super.call(this) || this;
@@ -1440,7 +1459,7 @@
         ConfirmThenDialogComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -1453,9 +1472,9 @@
     }(AbstractActivity));
     if (false) {
         /** @type {?} */
-        exports.ɵbc.prototype.config;
+        exports.ɵbd.prototype.config;
         /** @type {?} */
-        exports.ɵbc.prototype.interactionContext;
+        exports.ɵbd.prototype.interactionContext;
     }
     (function (ConfirmThenDialogComponent) {
         /**
@@ -1472,7 +1491,7 @@
             /** @type {?} */
             Data.prototype.data;
         }
-    })(exports.ɵbc || (exports.ɵbc = {}));
+    })(exports.ɵbd || (exports.ɵbd = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1506,7 +1525,7 @@
         ConfirmationDialogComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -1824,7 +1843,7 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this.startActivity(exports.ɵbc, {
+            return this.startActivity(exports.ɵbd, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
@@ -1994,6 +2013,25 @@
         ActivityContainerComponent.prototype._activityList;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var InteractionOutletComponent = /** @class */ (function () {
+        function InteractionOutletComponent() {
+        }
+        InteractionOutletComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'angular-ui-powerups-interaction-outlet',
+                        template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
+                        styles: [":host{display:block}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        InteractionOutletComponent.ctorParameters = function () { return []; };
+        return InteractionOutletComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2054,9 +2092,11 @@
     }(pectin.ValueModel));
     var DialogInteractionService = /** @class */ (function (_super) {
         __extends(DialogInteractionService, _super);
-        function DialogInteractionService(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+        function DialogInteractionService(dialogService, location, router, dialogServiceDefaults, matDialogDefaultConfig) {
             var _this = _super.call(this) || this;
             _this.dialogService = dialogService;
+            _this.location = location;
+            _this.router = router;
             _this.dialogServiceDefaults = dialogServiceDefaults;
             _this.matDialogDefaultConfig = matDialogDefaultConfig;
             _this._activityList = new pectin.DelegatingListModel();
@@ -2138,6 +2178,7 @@
              */
             function () {
                 _this.currentActivityId = uuid.v1();
+                // this.location.go(this.router.routerState.snapshot.url, "aup");
                 /** @type {?} */
                 var self = _this;
                 /** @type {?} */
@@ -2167,7 +2208,7 @@
                          */
                         function (result) {
                             resolve(result);
-                            matDialogRef.close(result);
+                            matDialogRef.close(true); // return true to let the after close listener know we've already handled it.
                         },
                         onCancel: /**
                          * @param {?} error
@@ -2175,9 +2216,18 @@
                          */
                         function (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 {?}
+                     */
+                    function (promiseAlreadyFinished) {
+                        if (!promiseAlreadyFinished) {
+                            reject("auto-closed");
+                        }
+                    }));
                     matDialogRef.updateSize();
                 })).finally((/**
                  * @return {?}
@@ -2218,6 +2268,7 @@
          * @return {?}
          */
         function (alert) {
+            // TODO: Test disableClose === false
             return this._startActivity(AlertDialogComponent, alert, false);
         };
         /**
@@ -2246,7 +2297,7 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this._startActivity(exports.ɵbc, {
+            return this._startActivity(exports.ɵbd, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
@@ -2260,10 +2311,12 @@
         /** @nocollapse */
         DialogInteractionService.ctorParameters = function () { return [
             { type: material.MatDialog },
+            { type: common.Location },
+            { type: router.Router },
             { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
             { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.MAT_DIALOG_DEFAULT_OPTIONS,] }] }
         ]; };
-        /** @nocollapse */ DialogInteractionService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
+        /** @nocollapse */ DialogInteractionService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function DialogInteractionService_Factory() { return new DialogInteractionService(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(common.Location), core.ɵɵinject(router.Router), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionService, providedIn: "root" });
         return DialogInteractionService;
     }(InteractionContext));
     if (false) {
@@ -2288,6 +2341,10 @@
          */
         DialogInteractionService.prototype.dialogService;
         /** @type {?} */
+        DialogInteractionService.prototype.location;
+        /** @type {?} */
+        DialogInteractionService.prototype.router;
+        /** @type {?} */
         DialogInteractionService.prototype.dialogServiceDefaults;
         /** @type {?} */
         DialogInteractionService.prototype.matDialogDefaultConfig;
@@ -2307,23 +2364,26 @@
                             material.MatButtonModule,
                             material.MatDialogModule,
                             material.MatTabsModule,
-                            portal.PortalModule
+                            portal.PortalModule,
+                            router.RouterModule
                         ],
                         declarations: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbc,
+                            exports.ɵbd,
                             AlertDialogComponent,
-                            ActivityOutletComponent
+                            ActivityOutletComponent,
+                            InteractionOutletComponent
                         ],
                         exports: [
                             ActivityContainerComponent,
                             ActivityOutletComponent,
+                            InteractionOutletComponent
                         ],
                         entryComponents: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbc,
+                            exports.ɵbd,
                             AlertDialogComponent
                         ],
                         providers: [
@@ -2410,859 +2470,1020 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var PlaceDefinition = /** @class */ (function () {
-        function PlaceDefinition(component, path, authenticate, order, data, routeParameters, children) {
-            this.component = component;
-            this.path = path;
-            this.authenticate = authenticate;
-            this.order = order;
-            this.data = data;
-            this.routeParameters = routeParameters;
-            this.children = children;
-        }
-        /**
-         * @return {?}
-         */
-        PlaceDefinition.prototype.getRouteParameters = /**
-         * @return {?}
-         */
-        function () {
-            return this.routeParameters;
-        };
-        /**
-         * @template T
-         * @param {?} key
-         * @param {?=} defaultValue
-         * @return {?}
-         */
-        PlaceDefinition.prototype.getData = /**
-         * @template T
-         * @param {?} key
-         * @param {?=} defaultValue
-         * @return {?}
-         */
-        function (key, defaultValue) {
-            return this.data ?
-                ___default__default.isNil(this.data[key]) ? defaultValue : this.data[key] :
-                defaultValue;
-        };
-        /**
-         * @template T
-         * @param {?} keys
-         * @param {?=} defaultValue
-         * @return {?}
-         */
-        PlaceDefinition.prototype.searchData = /**
-         * @template T
-         * @param {?} keys
-         * @param {?=} defaultValue
-         * @return {?}
-         */
-        function (keys, defaultValue) {
-            var _this = this;
-            if (this.data) {
-                /** @type {?} */
-                var found = keys.find((/**
-                 * @param {?} key
-                 * @return {?}
-                 */
-                function (key) { return !___default__default.isNil(_this.data[key]); }));
-                return found ? this.data[found] : defaultValue;
-            }
-            else {
-                return defaultValue;
-            }
-        };
-        return PlaceDefinition;
-    }());
-    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;
-    }
-
     /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     * @abstract
+     * @template T, E
      */
-    // RAKE: making this Symbol(...) broke things.
-    /** @type {?} */
-    var DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
-    // this one seems ok.
-    /** @type {?} */
-    var ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-    exports.PlaceComponent = /** @class */ (function (_super) {
-        __extends(PlaceComponent, _super);
-        function PlaceComponent() {
-            return _super.call(this) || this;
+      /**
+     * @abstract
+     * @template T, E
+     */
+    exports.ParameterDefinition = /** @class */ (function () {
+        function ParameterDefinition(propertyName, options, urlFormat) {
+            this.propertyName = propertyName;
+            this.urlFormat = urlFormat;
+            this.options = typescriptUtilities.Opts.get(options);
+            this.remember = this.options.getOptional('remember', false);
+            this.defaultValue = this.options.getOptional('defaultValue', null);
         }
-        /**
-         * @param {?} resolvedParameters
-         * @return {?}
-         */
-        PlaceComponent.prototype.initialiseBindings = /**
-         * @param {?} resolvedParameters
-         * @return {?}
-         */
-        function (resolvedParameters) {
-            var _this = this;
-            pectin.assert.isNil(this.resolvedParameters);
-            this.resolvedParameters = resolvedParameters;
-            this.placeDefinition.getRouteParameters().forEach((/**
-             * @param {?} parameterDef
-             * @return {?}
-             */
-            function (parameterDef) {
-                _this.installBinding(parameterDef);
-            }));
-        };
-        /**
-         * @private
-         * @template T, S
-         * @param {?} parameterDef
-         * @return {?}
-         */
-        PlaceComponent.prototype.installBinding = /**
-         * @private
-         * @template T, S
-         * @param {?} parameterDef
-         * @return {?}
-         */
-        function (parameterDef) {
-            /** @type {?} */
-            var model = (/** @type {?} */ (this[parameterDef.propertyName]));
-            // this.txo.observe(parameterDef.propertyName, model);
-            this.registerDisposable(new pectin.Binding(this.resolvedParameters, model, {
-                toRight: /**
-                 * @param {?} parameters
-                 * @return {?}
-                 */
-                function (parameters) {
-                    return parameters.getValueOf(parameterDef);
-                },
-                toLeft: /**
-                 * @param {?} value
-                 * @param {?=} currentParameters
-                 * @return {?}
-                 */
-                function (value, currentParameters) {
-                    return currentParameters.replace(parameterDef, value);
-                }
-            }));
-        };
-        Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
+        Object.defineProperty(ParameterDefinition.prototype, "name", {
             get: /**
              * @return {?}
              */
             function () {
-                return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
+                return this.options.getOptional('as', this.propertyName);
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(PlaceComponent.prototype, "childPlaces", {
-            get: /**
+        Object.defineProperty(ParameterDefinition.prototype, "isRouteParameter", {
+            // @Trace()
+            get: 
+            // @Trace()
+            /**
              * @return {?}
              */
             function () {
-                return this.placeDefinition.children.map((/**
-                 * @param {?} d
-                 * @return {?}
-                 */
-                function (d) { return d.component; }));
+                return !!this.urlFormat;
             },
             enumerable: true,
             configurable: true
         });
         /**
+         * @protected
+         * @template K
+         * @param {?} key
          * @return {?}
          */
-        PlaceComponent.prototype.canDeactivate = /**
+        ParameterDefinition.prototype.getOptionValue = /**
+         * @protected
+         * @template K
+         * @param {?} key
          * @return {?}
          */
-        function () {
-            return true;
+        function (key) {
+            return this.options.getOptional(key, null);
         };
+        // @Trace()
+        // @Trace()
         /**
+         * @param {?} value
+         * @param {?} visit
+         * @param {?} placeHistory
+         * @param {?} injector
          * @return {?}
          */
-        PlaceComponent.prototype.onPlaceReady = /**
+        ParameterDefinition.prototype.sanitise = 
+        // @Trace()
+        /**
+         * @param {?} value
+         * @param {?} visit
+         * @param {?} placeHistory
+         * @param {?} injector
          * @return {?}
          */
-        function () {
+        function (value, visit, placeHistory, injector) {
+            return __awaiter(this, void 0, void 0, function () {
+                var previousVisit;
+                return __generator(this, function (_a) {
+                    if (this.isMissingFrom(visit)) {
+                        previousVisit = ___default__default.first(placeHistory.getHistory(visit.placeDefinition));
+                        if (this.remember && previousVisit) {
+                            value = previousVisit.getParameter(this.name);
+                        }
+                        return [2 /*return*/, this.isEmptyValue(value) ? this.defaultValue : value];
+                    }
+                    else {
+                        // todo: add custom sanitiser
+                        return [2 /*return*/, value];
+                    }
+                    return [2 /*return*/];
+                });
+            });
         };
-        __decorate([
-            fastMemoizeDecorator.Memoize(),
-            __metadata("design:type", PlaceDefinition),
-            __metadata("design:paramtypes", [])
-        ], PlaceComponent.prototype, "placeDefinition", null);
-        return PlaceComponent;
-    }(DisposableComponent));
-    if (false) {
         /**
-         * @type {?}
          * @private
+         * @param {?} visit
+         * @return {?}
          */
-        exports.PlaceComponent.prototype.resolvedParameters;
-    }
-    (function (PlaceComponent) {
-        /**
-         * @param {?} target
+        ParameterDefinition.prototype.isMissingFrom = /**
+         * @private
+         * @param {?} visit
          * @return {?}
          */
-        function isPlaceComponentConstructor(target) {
-            return pectin.lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent);
-        }
-        PlaceComponent.isPlaceComponentConstructor = isPlaceComponentConstructor;
+        function (visit) {
+            return !visit.hasParameter(this.name) || (this.isRouteId && !visit.hasRouteId());
+        };
+        return ParameterDefinition;
+    }());
+    if (false) {
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.isRouteId;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.isArray;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.remember;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.defaultValue;
         /**
-         * @param {?} klass
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        function getRouteParameters(klass) {
-            return typescriptUtilities.Klass.get(klass).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
-        }
-        PlaceComponent.getRouteParameters = getRouteParameters;
+        exports.ParameterDefinition.prototype.options;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.propertyName;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.urlFormat;
         /**
-         * @param {?} klass
+         * @abstract
+         * @param {?} value
          * @return {?}
          */
-        function getDefinition(klass) {
-            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
-        }
-        PlaceComponent.getDefinition = getDefinition;
+        exports.ParameterDefinition.prototype.isEmptyValue = function (value) { };
         /**
-         * @param {?} klass
-         * @param {?} definition
+         * @abstract
+         * @param {?} a
+         * @param {?} b
          * @return {?}
          */
-        function injectDefinition(klass, definition) {
-            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, definition, klass);
-        }
-        PlaceComponent.injectDefinition = injectDefinition;
-    })(exports.PlaceComponent || (exports.PlaceComponent = {}));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
-        __extends(AbstractPlaceNavigationComponent, _super);
-        function AbstractPlaceNavigationComponent() {
-            var _this = _super.call(this) || this;
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.placeDefinitions = chain(_this.placesModel).map((/**
-             * @param {?} c
+        exports.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
+         */
+        var /**
+         * @template T
+         */
+        RouteId = /** @class */ (function (_super) {
+            __extends(RouteId, _super);
+            function RouteId() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isRouteId = true;
+                _this.isArray = false;
+                return _this;
+            }
+            /**
+             * @param {?} value
              * @return {?}
              */
-            function (c) { return exports.PlaceComponent.getDefinition(c); }));
-            return _this;
+            RouteId.prototype.isEmptyValue = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return ___default__default.isNil(value);
+            };
+            /**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            RouteId.prototype.hasChanged = /**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) {
+                return a !== b;
+            };
+            return RouteId;
+        }(ParameterDefinition));
+        ParameterDefinition.RouteId = RouteId;
+        if (false) {
+            /** @type {?} */
+            RouteId.prototype.isRouteId;
+            /** @type {?} */
+            RouteId.prototype.isArray;
         }
         /**
-         * @param {?} placeDef
-         * @return {?}
+         * @template T
          */
-        AbstractPlaceNavigationComponent.prototype.getNav = /**
-         * @param {?} placeDef
-         * @return {?}
+        var /**
+         * @template T
          */
-        function (placeDef) {
-            /** @type {?} */
-            var navItem = (/** @type {?} */ (placeDef.getData('nav')));
-            return {
-                title: (/**
-                 * @return {?}
-                 */
-                function () { return navItem ? navItem.title() : placeDef.searchData(['navTitle', 'title']); }),
-                tooltip: (/**
-                 * @return {?}
-                 */
-                function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getData('navTooltip', null); }),
-                icon: (/**
-                 * @return {?}
-                 */
-                function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getData('navIcon', null); })
+        ValueParameter = /** @class */ (function (_super) {
+            __extends(ValueParameter, _super);
+            function ValueParameter() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isRouteId = false;
+                _this.isArray = false;
+                return _this;
+            }
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            ValueParameter.prototype.isEmptyValue = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return ___default__default.isNil(value);
             };
-        };
+            /**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            ValueParameter.prototype.hasChanged = /**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) {
+                return a !== b;
+            };
+            return ValueParameter;
+        }(ParameterDefinition));
+        ParameterDefinition.ValueParameter = ValueParameter;
+        if (false) {
+            /** @type {?} */
+            ValueParameter.prototype.isRouteId;
+            /** @type {?} */
+            ValueParameter.prototype.isArray;
+        }
         /**
-         * @return {?}
+         * @template T
          */
-        AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
-         * @return {?}
+        var /**
+         * @template T
          */
-        function () {
-        };
-        AbstractPlaceNavigationComponent.propDecorators = {
-            places: [{ type: core.Input }],
-            placesModel: [{ type: core.Input }]
-        };
-        __decorate([
-            pectin.StoreInListModel('placesModel'),
-            __metadata("design:type", Array)
-        ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [PlaceDefinition]),
-            __metadata("design:returntype", Object)
-        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
-        return AbstractPlaceNavigationComponent;
-    }(DisposableComponent));
-    if (false) {
-        /** @type {?} */
-        AbstractPlaceNavigationComponent.prototype.places;
-        /** @type {?} */
-        AbstractPlaceNavigationComponent.prototype.placesModel;
-        /** @type {?} */
-        AbstractPlaceNavigationComponent.prototype.placeDefinitions;
-    }
+        ArrayParameter = /** @class */ (function (_super) {
+            __extends(ArrayParameter, _super);
+            function ArrayParameter(parameterName, options, urlFormat) {
+                var _this = _super.call(this, parameterName, options, urlFormat) || this;
+                _this.isRouteId = false;
+                _this.isArray = true;
+                return _this;
+            }
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            ArrayParameter.prototype.isEmptyValue = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return ___default__default.isNil(value) || value.length < 1;
+            };
+            /**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            ArrayParameter.prototype.hasChanged = /**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            function (a, b) {
+                return !___default__default.isEqual(a, b);
+            };
+            return ArrayParameter;
+        }(ParameterDefinition));
+        ParameterDefinition.ArrayParameter = ArrayParameter;
+        if (false) {
+            /** @type {?} */
+            ArrayParameter.prototype.isRouteId;
+            /** @type {?} */
+            ArrayParameter.prototype.isArray;
+        }
+    })(exports.ParameterDefinition || (exports.ParameterDefinition = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var ListPlaceNavComponent = /** @class */ (function (_super) {
-        __extends(ListPlaceNavComponent, _super);
-        function ListPlaceNavComponent() {
-            var _this = _super.call(this) || this;
-            _this.expanded = true;
-            return _this;
+    exports.PlaceDefinition = /** @class */ (function () {
+        function PlaceDefinition(component, path, authenticate, order, data, routeParameters, children) {
+            this.component = component;
+            this.path = path;
+            this.authenticate = authenticate;
+            this.order = order;
+            this.data = data;
+            this.routeParameters = routeParameters;
+            this.children = children;
         }
         /**
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.expandMenu = /**
+        PlaceDefinition.prototype.hasRouteId = /**
          * @return {?}
          */
         function () {
-            this.expanded = true;
+            return !!this.getRouteIdParameterDef();
         };
         /**
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.collapseMenu = /**
+        PlaceDefinition.prototype.getRouteIdParameterDef = /**
          * @return {?}
          */
         function () {
-            this.expanded = false;
+            return this.routeParameters.find((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) { return p.isRouteId; }));
         };
         /**
+         * @param {?=} includeRouteId
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.toggleMenu = /**
+        PlaceDefinition.prototype.getRouteParameterDefs = /**
+         * @param {?=} includeRouteId
          * @return {?}
          */
-        function () {
-            this.expanded = !this.expanded;
-        };
-        ListPlaceNavComponent.decorators = [
-            { type: core.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",
-                        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}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        ListPlaceNavComponent.ctorParameters = function () { return []; };
-        ListPlaceNavComponent.propDecorators = {
-            expanded: [{ type: core.HostBinding, args: ['class.expanded',] }]
+        function (includeRouteId) {
+            if (includeRouteId === void 0) { includeRouteId = false; }
+            return this.getVisitParameterDefs({ includeRouteId: includeRouteId, includeRouteParameters: true });
         };
-        return ListPlaceNavComponent;
-    }(AbstractPlaceNavigationComponent));
-    if (false) {
-        /** @type {?} */
-        ListPlaceNavComponent.prototype.expanded;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PlaceHistory = /** @class */ (function () {
-        function PlaceHistory(router) {
-            this.router = router;
-            this._history = new Map();
-        }
         /**
-         * @param {?} state
+         * @param {?=} include
          * @return {?}
          */
-        PlaceHistory.prototype.add = /**
-         * @param {?} state
+        PlaceDefinition.prototype.getVisitParameterDefs = /**
+         * @param {?=} include
          * @return {?}
          */
-        function (state) {
+        function (include) {
             /** @type {?} */
-            var history = this.getHistory(state.placeDefinition);
+            var opts = typescriptUtilities.Opts.get(include);
+            // includes
             /** @type {?} */
-            var previousState = ___default__default.last(history);
-            if (!previousState || state.hasChanged(previousState)) {
-                history.unshift(state); // LIFO
-                this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
-            }
+            var includeRouteId = !include || opts.getOptional('includeRouteId', false);
+            /** @type {?} */
+            var includeRouteParameters = !include || opts.getOptional('includeRouteParameters', false);
+            /** @type {?} */
+            var includeNonRouteParameters = !include || opts.getOptional('includeNonRouteParameters', false);
+            return this.routeParameters.filter((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) {
+                return (includeRouteId && p.isRouteId)
+                    || (includeRouteParameters && p.isRouteParameter && !p.isRouteId) // route id is included in the line above
+                    || (includeNonRouteParameters && !p.isRouteParameter);
+            }));
         };
         /**
-         * @param {?} placeDef
+         * @template T
+         * @param {?} key
+         * @param {?=} defaultValue
          * @return {?}
          */
-        PlaceHistory.prototype.getHistory = /**
-         * @param {?} placeDef
+        PlaceDefinition.prototype.getPlaceData = /**
+         * @template T
+         * @param {?} key
+         * @param {?=} defaultValue
          * @return {?}
          */
-        function (placeDef) {
-            /** @type {?} */
-            var history = this._history.get(placeDef);
-            if (!history) {
-                history = [];
-                this.setHistory(placeDef, history);
-            }
-            return history;
+        function (key, defaultValue) {
+            return this.data ?
+                ___default__default.isNil(this.data[key]) ? defaultValue : this.data[key] :
+                defaultValue;
         };
         /**
-         * @private
-         * @param {?} placeDef
-         * @param {?} history
+         * @template T
+         * @param {?} keys
+         * @param {?=} defaultValue
          * @return {?}
          */
-        PlaceHistory.prototype.setHistory = /**
-         * @private
-         * @param {?} placeDef
-         * @param {?} history
+        PlaceDefinition.prototype.searchPlaceData = /**
+         * @template T
+         * @param {?} keys
+         * @param {?=} defaultValue
          * @return {?}
          */
-        function (placeDef, history) {
-            this._history.set(placeDef, history);
+        function (keys, defaultValue) {
+            var _this = this;
+            if (this.data) {
+                /** @type {?} */
+                var found = keys.find((/**
+                 * @param {?} key
+                 * @return {?}
+                 */
+                function (key) { return !___default__default.isNil(_this.data[key]); }));
+                return found ? this.data[found] : defaultValue;
+            }
+            else {
+                return defaultValue;
+            }
         };
-        PlaceHistory.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceHistory.ctorParameters = function () { return [
-            { type: router.Router }
-        ]; };
-        /** @nocollapse */ PlaceHistory.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(core.ɵɵinject(router.Router)); }, token: PlaceHistory, providedIn: "root" });
-        return PlaceHistory;
-    }());
-    if (false) {
         /**
-         * @type {?}
-         * @private
+         * @param {?} visit
+         * @return {?}
          */
-        PlaceHistory.prototype._history;
+        PlaceDefinition.prototype.getRouteIdFrom = /**
+         * @param {?} visit
+         * @return {?}
+         */
+        function (visit) {
+            /** @type {?} */
+            var routeIdParameterDef = this.getRouteIdParameterDef();
+            return routeIdParameterDef ? visit.getParameter(routeIdParameterDef.name) : null;
+        };
         /**
-         * @type {?}
-         * @private
+         * Returns angular router commands that specify the route id and any route parameters.  The result does
+         * not include any path information.
          */
-        PlaceHistory.prototype.router;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var NavigationSession = /** @class */ (function () {
-        function NavigationSession(isPopState, initialUrl) {
-            this.isPopState = isPopState;
-            this.initialUrl = initialUrl;
-            this._alreadyAccepted = [];
-            console.log('NavigationSession', { isPopState: isPopState, initialUrl: initialUrl });
-        }
+        // getFormattedRouterCommands(visit: Visit): any[] {
+        //   return this.hasRouteId() ?
+        //     [this.getFormattedRouteId(visit), this.getFormattedRouteParameters(visit)] :
+        //     [this.getFormattedRouteParameters(visit)];
+        // }
         /**
-         * @param {?} placeComponent
+         * Returns angular router commands that specify the route id and any route parameters.  The result does
+         * not include any path information.
+         * @param {?} visit
          * @return {?}
          */
-        NavigationSession.prototype.alreadyAccepted = /**
-         * @param {?} placeComponent
+        // getFormattedRouterCommands(visit: Visit): any[] {
+        //   return this.hasRouteId() ?
+        //     [this.getFormattedRouteId(visit), this.getFormattedRouteParameters(visit)] :
+        //     [this.getFormattedRouteParameters(visit)];
+        // }
+        PlaceDefinition.prototype.getFormattedRouteId = /**
+         * Returns angular router commands that specify the route id and any route parameters.  The result does
+         * not include any path information.
+         * @param {?} visit
          * @return {?}
          */
-        function (placeComponent) {
-            return this._alreadyAccepted.includes(placeComponent);
+        // getFormattedRouterCommands(visit: Visit): any[] {
+        //   return this.hasRouteId() ?
+        //     [this.getFormattedRouteId(visit), this.getFormattedRouteParameters(visit)] :
+        //     [this.getFormattedRouteParameters(visit)];
+        // }
+        function (visit) {
+            return visit.hasRouteId() ? this.getRouteIdParameterDef().urlFormat.format(visit.getRouteId()) : null;
         };
+        // @Trace()
+        // @Trace()
         /**
-         * @param {?} component
-         * @return {?}
-         */
-        NavigationSession.prototype.rememberAcceptanceOf = /**
-         * @param {?} component
+         * @param {?} visit
+         * @param {?=} includeRouteId
          * @return {?}
          */
-        function (component) {
-            this._alreadyAccepted.push(component);
-        };
-        return NavigationSession;
-    }());
-    if (false) {
+        PlaceDefinition.prototype.getFormattedRouteParameters = 
+        // @Trace()
         /**
-         * @type {?}
-         * @private
+         * @param {?} visit
+         * @param {?=} includeRouteId
+         * @return {?}
          */
-        NavigationSession.prototype._alreadyAccepted;
-        /** @type {?} */
-        NavigationSession.prototype.isPopState;
-        /** @type {?} */
-        NavigationSession.prototype.initialUrl;
-    }
-    var PlaceRouter = /** @class */ (function () {
-        function PlaceRouter(router$1, angularLocation) {
-            var _this = this;
-            this.router = router$1;
-            this._navigationSession = new pectin.MutableValueModel();
-            angularLocation.onUrlChange((/**
-             * @param {?} url
-             * @return {?}
-             */
-            function (url) {
-                console.log("### " + url);
-            }));
-            this.router.events.subscribe((/**
-             * @param {?} event
+        function (visit, includeRouteId) {
+            if (includeRouteId === void 0) { includeRouteId = false; }
+            /** @type {?} */
+            var result = {};
+            this.getVisitParameterDefs({
+                includeRouteId: includeRouteId, includeRouteParameters: true
+            }).forEach((/**
+             * @param {?} def
              * @return {?}
              */
-            function (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 router.NavigationStart && !_this.navigationSession) {
-                    _this._navigationSession.value = new NavigationSession(event.navigationTrigger === 'popstate', _this.router.routerState.snapshot.url);
-                }
-                if (event instanceof router.NavigationEnd) {
-                    console.log('navigation ended');
-                    _this._navigationSession.value = null;
-                }
-                if (event instanceof router.NavigationError) {
-                    console.log('navigation errored');
-                    _this._navigationSession.value = null;
+            function (def) {
+                /** @type {?} */
+                var value = visit.getParameter(def.name);
+                if (!def.isEmptyValue(value)) {
+                    if (def.isArray) {
+                        pectin.assert.isArray(value);
+                        result[def.name] = value.map((/**
+                         * @param {?} v
+                         * @return {?}
+                         */
+                        function (v) { return def.urlFormat.format(v); }));
+                    }
+                    else {
+                        pectin.assert.isFalsey(Array.isArray(value));
+                        result[def.name] = def.urlFormat.format(value);
+                    }
                 }
             }));
-        }
-        Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._navigationSession.value;
-            },
-            enumerable: true,
-            configurable: true
-        });
+            return result;
+        };
         /**
-         * @param {?} activatedRoute
-         * @param {?} previous
-         * @param {?} next
+         * @param {?} visit
          * @return {?}
          */
-        PlaceRouter.prototype.pushParameterChangesToRoute = /**
-         * @param {?} activatedRoute
-         * @param {?} previous
-         * @param {?} next
+        PlaceDefinition.prototype.getNonRouteParameters = /**
+         * @param {?} visit
          * @return {?}
          */
-        function (activatedRoute, previous, next) {
+        function (visit) {
             /** @type {?} */
-            var relativePath = !!previous.hasRouteId() ? '..' : '.';
-            this.router.navigate([relativePath].concat(this.createRouteParameters(next), this.getChildPath(activatedRoute.snapshot)), {
-                relativeTo: activatedRoute
-            });
+            var result = {};
+            this.getVisitParameterDefs({ includeNonRouteParameters: true }).forEach((/**
+             * @param {?} def
+             * @return {?}
+             */
+            function (def) {
+                /** @type {?} */
+                var value = visit.getParameter(def.name);
+                if (!def.isEmptyValue(value)) {
+                    result[def.name] = value;
+                }
+            }));
+            return result;
         };
         // @Trace()
         // @Trace()
         /**
-         * @param {?} activatedRoute
-         * @param {?} sanitised
+         * @param {?} params
          * @return {?}
          */
-        PlaceRouter.prototype.getRedirectUrlTree = 
+        PlaceDefinition.prototype.parseRouteParams = 
         // @Trace()
         /**
-         * @param {?} activatedRoute
-         * @param {?} sanitised
+         * @param {?} params
          * @return {?}
          */
-        function (activatedRoute, sanitised) {
+        function (params) {
             /** @type {?} */
-            var urlSegments = activatedRoute.url;
-            /** @type {?} */
-            var weHaveARouteId = sanitised.hasRouteId() && sanitised.getFormattedRouteId();
-            /** @type {?} */
-            var commands = (weHaveARouteId) ?
-                [urlSegments[0].path, sanitised.getFormattedRouteId(), sanitised.getFormattedParameters()] :
-                [urlSegments[0].path, sanitised.getFormattedParameters()];
-            return this.router.createUrlTree(commands);
+            var result = {};
+            this.getVisitParameterDefs({
+                includeRouteId: true,
+                includeRouteParameters: true,
+                includeNonRouteParameters: false
+            }).forEach((/**
+             * @param {?} def
+             * @return {?}
+             */
+            function (def) {
+                // params will return null for non existent names
+                if (params.has(def.name)) {
+                    if (def.isArray) {
+                        /** @type {?} */
+                        var values = params.getAll(def.name);
+                        result[def.name] = values.map((/**
+                         * @param {?} v
+                         * @return {?}
+                         */
+                        function (v) { return def.urlFormat.parse(v); }));
+                    }
+                    else {
+                        result[def.name] = def.urlFormat.parse(params.get(def.name));
+                    }
+                }
+            }));
+            return result;
         };
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", exports.ParameterDefinition)
+        ], PlaceDefinition.prototype, "getRouteIdParameterDef", null);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Object]),
+            __metadata("design:returntype", Array)
+        ], PlaceDefinition.prototype, "getRouteParameterDefs", null);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Object]),
+            __metadata("design:returntype", Array)
+        ], PlaceDefinition.prototype, "getVisitParameterDefs", null);
+        return PlaceDefinition;
+    }());
+    if (false) {
+        /** @type {?} */
+        exports.PlaceDefinition.prototype.component;
+        /** @type {?} */
+        exports.PlaceDefinition.prototype.path;
+        /** @type {?} */
+        exports.PlaceDefinition.prototype.authenticate;
+        /** @type {?} */
+        exports.PlaceDefinition.prototype.order;
+        /** @type {?} */
+        exports.PlaceDefinition.prototype.data;
+        /** @type {?} */
+        exports.PlaceDefinition.prototype.routeParameters;
+        /** @type {?} */
+        exports.PlaceDefinition.prototype.children;
+    }
+    (function (PlaceDefinition) {
         /**
-         * @protected
-         * @param {?} activatedRoute
+         * @record
+         */
+        function ParameterOptions() { }
+        PlaceDefinition.ParameterOptions = ParameterOptions;
+        if (false) {
+            /** @type {?|undefined} */
+            ParameterOptions.prototype.includeRouteId;
+            /** @type {?|undefined} */
+            ParameterOptions.prototype.includeRouteParameters;
+            /** @type {?|undefined} */
+            ParameterOptions.prototype.includeNonRouteParameters;
+        }
+    })(exports.PlaceDefinition || (exports.PlaceDefinition = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    // RAKE: making this Symbol(...) broke things.
+    /** @type {?} */
+    var DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
+    // this one seems ok.
+    /** @type {?} */
+    var ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+    exports.PlaceComponent = /** @class */ (function (_super) {
+        __extends(PlaceComponent, _super);
+        function PlaceComponent() {
+            return _super.call(this) || this;
+        }
+        /**
+         * @param {?} visit
          * @return {?}
          */
-        PlaceRouter.prototype.getChildPath = /**
-         * @protected
-         * @param {?} activatedRoute
+        PlaceComponent.prototype.initialiseBindings = /**
+         * @param {?} visit
          * @return {?}
          */
-        function (activatedRoute) {
-            return ___default__default.flatten(activatedRoute.children.map((/**
-             * @param {?} child
+        function (visit) {
+            var _this = this;
+            pectin.assert.isNil(this.visit);
+            this.visit = visit;
+            this.placeDefinition.getVisitParameterDefs().forEach((/**
+             * @param {?} parameterDef
              * @return {?}
              */
-            function (child) { return child.url; })));
+            function (parameterDef) {
+                _this.installBinding(parameterDef);
+            }));
         };
         /**
-         * @protected
-         * @param {?} parameters
+         * @private
+         * @template T, S
+         * @param {?} parameterDef
          * @return {?}
          */
-        PlaceRouter.prototype.createRouteParameters = /**
-         * @protected
-         * @param {?} parameters
+        PlaceComponent.prototype.installBinding = /**
+         * @private
+         * @template T, S
+         * @param {?} parameterDef
          * @return {?}
          */
-        function (parameters) {
+        function (parameterDef) {
             /** @type {?} */
-            var routeId = parameters.getFormattedRouteId();
-            return routeId ?
-                [routeId, parameters.getFormattedParameters()] :
-                [parameters.getFormattedParameters()];
-        };
-        PlaceRouter.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceRouter.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: common.Location }
-        ]; };
-        /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location)); }, token: PlaceRouter, providedIn: "root" });
-        return PlaceRouter;
-    }());
-    if (false) {
+            var model = (/** @type {?} */ (this[parameterDef.propertyName]));
+            // this.txo.observe(parameterDef.propertyName, model);
+            this.registerDisposable(new pectin.Binding(this.visit, model, {
+                toRight: /**
+                 * @param {?} visit
+                 * @return {?}
+                 */
+                function (visit) {
+                    /** @type {?} */
+                    var value = visit.getParameter(parameterDef.name);
+                    // console.log('push to component', {name:parameterDef.name, value, visit});
+                    return value;
+                },
+                toLeft: /**
+                 * @param {?} value
+                 * @param {?=} currentVisit
+                 * @return {?}
+                 */
+                function (value, currentVisit) {
+                    console.log('push to route', { name: parameterDef.name, value: value, currentVisit: currentVisit });
+                    return currentVisit.replace(parameterDef, value);
+                }
+            }));
+        };
+        Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PlaceComponent.prototype, "childPlaces", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.placeDefinition.children.map((/**
+                 * @param {?} d
+                 * @return {?}
+                 */
+                function (d) { return d.component; }));
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
-         * @type {?}
-         * @private
+         * @return {?}
+         */
+        PlaceComponent.prototype.canDeactivate = /**
+         * @return {?}
          */
-        PlaceRouter.prototype._navigationSession;
+        function () {
+            return true;
+        };
+        /**
+         * @return {?}
+         */
+        PlaceComponent.prototype.onPlaceReady = /**
+         * @return {?}
+         */
+        function () {
+        };
+        __decorate([
+            fastMemoizeDecorator.Memoize(),
+            __metadata("design:type", exports.PlaceDefinition),
+            __metadata("design:paramtypes", [])
+        ], PlaceComponent.prototype, "placeDefinition", null);
+        return PlaceComponent;
+    }(DisposableComponent));
+    if (false) {
         /**
          * @type {?}
          * @private
          */
-        PlaceRouter.prototype.router;
+        exports.PlaceComponent.prototype.visit;
     }
+    (function (PlaceComponent) {
+        /**
+         * @param {?} target
+         * @return {?}
+         */
+        function isPlaceComponentConstructor(target) {
+            return pectin.lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent);
+        }
+        PlaceComponent.isPlaceComponentConstructor = isPlaceComponentConstructor;
+        /**
+         * @param {?} klass
+         * @return {?}
+         */
+        function getRouteParameters(klass) {
+            return typescriptUtilities.Klass.get(klass).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
+        }
+        PlaceComponent.getRouteParameters = getRouteParameters;
+        /**
+         * @param {?} klass
+         * @return {?}
+         */
+        function getDefinition(klass) {
+            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+        }
+        PlaceComponent.getDefinition = getDefinition;
+        /**
+         * @param {?} klass
+         * @param {?} definition
+         * @return {?}
+         */
+        function injectDefinition(klass, definition) {
+            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, definition, klass);
+        }
+        PlaceComponent.injectDefinition = injectDefinition;
+    })(exports.PlaceComponent || (exports.PlaceComponent = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @abstract
-     * @template T, S
-     */
-      /**
-     * @abstract
-     * @template T, S
-     */
-    exports.ParameterDefinition = /** @class */ (function () {
-        function ParameterDefinition(propertyName, type, options) {
-            this.propertyName = propertyName;
-            this.type = type;
-            /** @type {?} */
-            var opts = typescriptUtilities.Opts.get(options);
-            this.name = opts.getOptional('as', propertyName);
-            this.remember = opts.getOptional('remember', false);
-            this.defaultValue = opts.getOptional('defaultValue', null);
+    var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
+        __extends(AbstractPlaceNavigationComponent, _super);
+        function AbstractPlaceNavigationComponent() {
+            var _this = _super.call(this) || this;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.placeDefinitions = chain(_this.placesModel).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            function (c) { return exports.PlaceComponent.getDefinition(c); }));
+            return _this;
         }
         /**
-         * @param {?} injector
+         * @param {?} placeDef
          * @return {?}
          */
-        ParameterDefinition.prototype.getSanitiser = /**
-         * @param {?} injector
+        AbstractPlaceNavigationComponent.prototype.getNav = /**
+         * @param {?} placeDef
          * @return {?}
          */
-        function (injector) {
-            if (this.remember || !___default__default.isNil(this.defaultValue)) {
-                return new ParameterDefinition.DefaultParameterSanitiser(this.remember, this.defaultValue, injector.get(PlaceHistory));
-            }
-            else {
-                return null;
-            }
+        function (placeDef) {
+            /** @type {?} */
+            var navItem = (/** @type {?} */ (placeDef.getPlaceData('nav')));
+            return {
+                title: (/**
+                 * @return {?}
+                 */
+                function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); }),
+                tooltip: (/**
+                 * @return {?}
+                 */
+                function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null); }),
+                icon: (/**
+                 * @return {?}
+                 */
+                function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); })
+            };
         };
-        return ParameterDefinition;
-    }());
+        /**
+         * @return {?}
+         */
+        AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        AbstractPlaceNavigationComponent.propDecorators = {
+            places: [{ type: core.Input }],
+            placesModel: [{ type: core.Input }]
+        };
+        __decorate([
+            pectin.StoreInListModel('placesModel'),
+            __metadata("design:type", Array)
+        ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [exports.PlaceDefinition]),
+            __metadata("design:returntype", Object)
+        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+        return AbstractPlaceNavigationComponent;
+    }(DisposableComponent));
     if (false) {
         /** @type {?} */
-        exports.ParameterDefinition.prototype.isRouteId;
+        AbstractPlaceNavigationComponent.prototype.places;
         /** @type {?} */
-        exports.ParameterDefinition.prototype.isArray;
+        AbstractPlaceNavigationComponent.prototype.placesModel;
         /** @type {?} */
-        exports.ParameterDefinition.prototype.name;
+        AbstractPlaceNavigationComponent.prototype.placeDefinitions;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ListPlaceNavComponent = /** @class */ (function (_super) {
+        __extends(ListPlaceNavComponent, _super);
+        function ListPlaceNavComponent() {
+            var _this = _super.call(this) || this;
+            _this.expanded = true;
+            return _this;
+        }
         /**
-         * @type {?}
-         * @private
+         * @return {?}
          */
-        exports.ParameterDefinition.prototype.remember;
-        /**
-         * @type {?}
-         * @private
+        ListPlaceNavComponent.prototype.expandMenu = /**
+         * @return {?}
          */
-        exports.ParameterDefinition.prototype.defaultValue;
-        /** @type {?} */
-        exports.ParameterDefinition.prototype.propertyName;
-        /** @type {?} */
-        exports.ParameterDefinition.prototype.type;
-    }
-    (function (ParameterDefinition) {
+        function () {
+            this.expanded = true;
+        };
         /**
-         * @record
-         * @template T
+         * @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;
-        }
+        ListPlaceNavComponent.prototype.collapseMenu = /**
+         * @return {?}
+         */
+        function () {
+            this.expanded = false;
+        };
         /**
-         * @template T
+         * @return {?}
          */
-        var /**
-         * @template T
+        ListPlaceNavComponent.prototype.toggleMenu = /**
+         * @return {?}
          */
-        RouteId = /** @class */ (function (_super) {
-            __extends(RouteId, _super);
-            function RouteId() {
-                var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.isRouteId = true;
-                _this.isArray = false;
-                return _this;
-            }
-            return RouteId;
-        }(ParameterDefinition));
-        ParameterDefinition.RouteId = RouteId;
-        if (false) {
-            /** @type {?} */
-            RouteId.prototype.isRouteId;
-            /** @type {?} */
-            RouteId.prototype.isArray;
+        function () {
+            this.expanded = !this.expanded;
+        };
+        ListPlaceNavComponent.decorators = [
+            { type: core.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     [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}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        ListPlaceNavComponent.ctorParameters = function () { return []; };
+        ListPlaceNavComponent.propDecorators = {
+            expanded: [{ type: core.HostBinding, args: ['class.expanded',] }]
+        };
+        return ListPlaceNavComponent;
+    }(AbstractPlaceNavigationComponent));
+    if (false) {
+        /** @type {?} */
+        ListPlaceNavComponent.prototype.expanded;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PlaceHistory = /** @class */ (function () {
+        function PlaceHistory(router) {
+            this.router = router;
+            this._history = new Map();
         }
+        // @Trace()
+        // @Trace()
         /**
-         * @template T
+         * @param {?} state
+         * @return {?}
          */
-        var /**
-         * @template T
+        PlaceHistory.prototype.add = 
+        // @Trace()
+        /**
+         * @param {?} state
+         * @return {?}
          */
-        ValueParameter = /** @class */ (function (_super) {
-            __extends(ValueParameter, _super);
-            function ValueParameter() {
-                var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.isRouteId = false;
-                _this.isArray = false;
-                return _this;
-            }
-            return ValueParameter;
-        }(ParameterDefinition));
-        ParameterDefinition.ValueParameter = ValueParameter;
-        if (false) {
+        function (state) {
             /** @type {?} */
-            ValueParameter.prototype.isRouteId;
+            var history = this.getHistory(state.placeDefinition);
             /** @type {?} */
-            ValueParameter.prototype.isArray;
-        }
+            var previousState = ___default__default.last(history);
+            if (!previousState || state.hasChangedFrom(previousState)) {
+                history.unshift(state); // LIFO
+                this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
+            }
+        };
         /**
-         * @template T
+         * @param {?} placeDef
+         * @return {?}
          */
-        var /**
-         * @template T
+        PlaceHistory.prototype.getHistory = /**
+         * @param {?} placeDef
+         * @return {?}
          */
-        ArrayParameter = /** @class */ (function (_super) {
-            __extends(ArrayParameter, _super);
-            function ArrayParameter() {
-                var _this = _super !== null && _super.apply(this, arguments) || this;
-                _this.isRouteId = false;
-                _this.isArray = true;
-                return _this;
-            }
-            return ArrayParameter;
-        }(ParameterDefinition));
-        ParameterDefinition.ArrayParameter = ArrayParameter;
-        if (false) {
-            /** @type {?} */
-            ArrayParameter.prototype.isRouteId;
+        function (placeDef) {
             /** @type {?} */
-            ArrayParameter.prototype.isArray;
-        }
+            var history = this._history.get(placeDef);
+            if (!history) {
+                history = [];
+                this.setHistory(placeDef, history);
+            }
+            return history;
+        };
         /**
-         * @template T, S
+         * @private
+         * @param {?} placeDef
+         * @param {?} history
+         * @return {?}
          */
-        var /**
-         * @template T, S
+        PlaceHistory.prototype.setHistory = /**
+         * @private
+         * @param {?} placeDef
+         * @param {?} history
+         * @return {?}
          */
-        DefaultParameterSanitiser = /** @class */ (function () {
-            function DefaultParameterSanitiser(remember, defaultValue, placeHistory) {
-                this.remember = remember;
-                this.defaultValue = defaultValue;
-                this.placeHistory = placeHistory;
-            }
-            /**
-             * @param {?} parameter
-             * @param {?=} visit
-             * @return {?}
-             */
-            DefaultParameterSanitiser.prototype.sanitise = /**
-             * @param {?} parameter
-             * @param {?=} visit
-             * @return {?}
-             */
-            function (parameter, visit) {
-                /** @type {?} */
-                var value = parameter.value;
-                if (parameter.isMissing()) {
-                    /** @type {?} */
-                    var previousVisit = ___default__default.first(this.placeHistory.getHistory(visit.placeDefinition));
-                    if (this.remember && previousVisit) {
-                        value = previousVisit.getValueOf(parameter.definition);
-                    }
-                    return parameter.isEmptyValue(value) ? this.defaultValue : value;
-                }
-                else {
-                    return value;
-                }
-            };
-            return DefaultParameterSanitiser;
-        }());
-        ParameterDefinition.DefaultParameterSanitiser = DefaultParameterSanitiser;
-        if (false) {
-            /** @type {?} */
-            DefaultParameterSanitiser.prototype.remember;
-            /** @type {?} */
-            DefaultParameterSanitiser.prototype.defaultValue;
-            /** @type {?} */
-            DefaultParameterSanitiser.prototype.placeHistory;
-        }
-    })(exports.ParameterDefinition || (exports.ParameterDefinition = {}));
+        function (placeDef, history) {
+            this._history.set(placeDef, history);
+        };
+        PlaceHistory.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceHistory.ctorParameters = function () { return [
+            { type: router.Router }
+        ]; };
+        /** @nocollapse */ PlaceHistory.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(core.ɵɵinject(router.Router)); }, token: PlaceHistory, providedIn: "root" });
+        return PlaceHistory;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceHistory.prototype._history;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceHistory.prototype.router;
+    }
 
     /**
      * @fileoverview added by tsickle
@@ -3270,791 +3491,682 @@
      */
     /**
      * @abstract
-     * @template S, T, R
      */
       /**
      * @abstract
-     * @template S, T, R
      */
-    exports.RouteParameterValue = /** @class */ (function () {
-        function RouteParameterValue(definition, rawValue) {
-            this.definition = definition;
-            this.rawValue = rawValue;
+    exports.NavigationSession = /** @class */ (function () {
+        function NavigationSession(firstNavigation) {
+            this.firstNavigation = firstNavigation;
+            this._alreadyAccepted = [];
+            this._visits = new Map();
         }
         /**
+         * @param {?} visit
          * @return {?}
          */
-        RouteParameterValue.prototype.isRouteId = /**
+        NavigationSession.prototype.storeVisit = /**
+         * @param {?} visit
          * @return {?}
          */
-        function () {
-            return this.definition.isRouteId;
+        function (visit) {
+            this._visits.set(visit.placeDefinition, visit);
         };
         /**
-         * @param {?} otherValue
+         * @param {?} placeDef
          * @return {?}
          */
-        RouteParameterValue.prototype.hasChanged = /**
-         * @param {?} otherValue
+        NavigationSession.prototype.getVisitFor = /**
+         * @param {?} placeDef
          * @return {?}
          */
-        function (otherValue) {
-            return this.isEmpty() ?
-                !this.isEmptyValue(otherValue) :
-                this.isEmptyValue(otherValue) || !this.isSameValue(otherValue);
+        function (placeDef) {
+            return this._visits.get(placeDef);
         };
         /**
-         * Return's true if the current value is empty.
+         * @param {?} params
+         * @return {?}
+         */
+        NavigationSession.prototype.mergePrivatePlaceParameters = /**
+         * @param {?} params
+         * @return {?}
          */
+        function (params) {
+            return null;
+        };
+        // @Trace()
+        // @Trace()
         /**
-         * Return's true if the current value is empty.
+         * @param {?} placeComponent
          * @return {?}
          */
-        RouteParameterValue.prototype.isEmpty = /**
-         * Return's true if the current value is empty.
+        NavigationSession.prototype.alreadyAccepted = 
+        // @Trace()
+        /**
+         * @param {?} placeComponent
          * @return {?}
          */
-        function () {
-            return this.isEmptyValue(this.value);
+        function (placeComponent) {
+            return this._alreadyAccepted.includes(placeComponent);
         };
+        // @Trace()
+        // @Trace()
         /**
-         * Returns true if the rawValue is undefined.  This
+         * @param {?} component
+         * @return {?}
+         */
+        NavigationSession.prototype.rememberAcceptanceOf = 
+        // @Trace()
+        /**
+         * @param {?} component
+         * @return {?}
          */
+        function (component) {
+            this._alreadyAccepted.push(component);
+        };
         /**
-         * Returns true if the rawValue is undefined.  This
+         * @param {?} url
          * @return {?}
          */
-        RouteParameterValue.prototype.isMissing = /**
-         * Returns true if the rawValue is undefined.  This
+        NavigationSession.prototype.setPopstateReturn = /**
+         * @param {?} url
          * @return {?}
          */
-        function () {
-            return ___default__default.isUndefined(this.rawValue);
+        function (url) {
+            this._popStateReturnUrl = url;
         };
+        Object.defineProperty(NavigationSession.prototype, "isPopState", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return !!this._popStateReturnUrl;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(NavigationSession.prototype, "popStateReturnUrl", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._popStateReturnUrl;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
-         * @param {?} visit
-         * @param {?} injector
          * @return {?}
          */
-        RouteParameterValue.prototype.sanitise = /**
-         * @param {?} visit
-         * @param {?} injector
+        NavigationSession.prototype.getVisits = /**
          * @return {?}
          */
-        function (visit, injector) {
-            return __awaiter(this, void 0, void 0, function () {
-                var sanitiser;
-                return __generator(this, function (_a) {
-                    sanitiser = this.definition.getSanitiser(injector);
-                    if (sanitiser) {
-                        return [2 /*return*/, sanitiser.sanitise(this, visit)];
-                    }
-                    else {
-                        return [2 /*return*/, this.value];
-                    }
-                    return [2 /*return*/];
-                });
-            });
+        function () {
+            return Array.from(this._visits.values());
         };
-        return RouteParameterValue;
+        return NavigationSession;
     }());
     if (false) {
-        /** @type {?} */
-        exports.RouteParameterValue.prototype.value;
-        /** @type {?} */
-        exports.RouteParameterValue.prototype.definition;
         /**
          * @type {?}
-         * @protected
-         */
-        exports.RouteParameterValue.prototype.rawValue;
-        /**
-         * @abstract
-         * @param {?} otherValue
-         * @return {?}
-         */
-        exports.RouteParameterValue.prototype.isSameValue = function (otherValue) { };
-        /**
-         * @abstract
-         * @return {?}
+         * @private
          */
-        exports.RouteParameterValue.prototype.formattedValue = function () { };
+        exports.NavigationSession.prototype._alreadyAccepted;
         /**
-         * @abstract
-         * @param {?} value
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        exports.RouteParameterValue.prototype.replace = function (value) { };
+        exports.NavigationSession.prototype._visits;
         /**
-         * @abstract
-         * @param {?} value
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        exports.RouteParameterValue.prototype.isEmptyValue = function (value) { };
+        exports.NavigationSession.prototype._popStateReturnUrl;
+        /** @type {?} */
+        exports.NavigationSession.prototype.isExternal;
+        /** @type {?} */
+        exports.NavigationSession.prototype.firstNavigation;
     }
-    (function (RouteParameterValue) {
-        /**
-         * @template T
-         * @param {?} def
-         * @param {?} paramMap
-         * @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);
+    (function (NavigationSession) {
+        var External = /** @class */ (function (_super) {
+            __extends(External, _super);
+            function External(isFirstTime) {
+                var _this = _super.call(this, isFirstTime) || this;
+                _this.isExternal = true;
+                return _this;
             }
-            else {
-                /** @type {?} */
-                var 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__default.isEmpty(rawValue) ? undefined : rawValue;
-                return new RouteParameterValue.Scalar(def, rawValue);
+            return External;
+        }(NavigationSession));
+        if (false) {
+            /** @type {?} */
+            External.prototype.isExternal;
+        }
+        var Internal = /** @class */ (function (_super) {
+            __extends(Internal, _super);
+            function Internal(visit) {
+                var _this = _super.call(this, false) || this;
+                _this.isExternal = false;
+                _this.storeVisit(visit);
+                return _this;
             }
+            return Internal;
+        }(NavigationSession));
+        if (false) {
+            /** @type {?} */
+            Internal.prototype.isExternal;
         }
-        RouteParameterValue.create = create;
         /**
-         * @template T
+         * @param {?} visit
+         * @return {?}
          */
-        var Scalar = /** @class */ (function (_super) {
-            __extends(Scalar, _super);
-            function Scalar() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            Object.defineProperty(Scalar.prototype, "value", {
-                get: /**
-                 * @return {?}
-                 */
-                function () {
-                    return this.definition.type.parse(this.rawValue);
-                },
-                enumerable: true,
-                configurable: true
-            });
-            /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            Scalar.prototype.isSameValue = /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            function (otherValue) {
-                return this.value === otherValue;
-            };
-            /**
-             * @param {?} value
-             * @return {?}
-             */
-            Scalar.prototype.replace = /**
-             * @param {?} value
-             * @return {?}
-             */
-            function (value) {
-                return new RouteParameterValue.Scalar(this.definition, this.isEmptyValue(value) ? undefined : this.definition.type.format(value));
-            };
-            /**
-             * @return {?}
-             */
-            Scalar.prototype.formattedValue = /**
-             * @return {?}
-             */
-            function () {
-                return this.isEmpty() ? undefined : this.definition.type.format(this.value);
-            };
-            /**
-             * @param {?} value
-             * @return {?}
-             */
-            Scalar.prototype.isEmptyValue = /**
-             * @param {?} value
-             * @return {?}
-             */
-            function (value) {
-                return ___default__default.isNil(value);
-            };
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Object),
-                __metadata("design:paramtypes", [])
-            ], Scalar.prototype, "value", null);
-            return Scalar;
-        }(RouteParameterValue));
-        RouteParameterValue.Scalar = Scalar;
+        function createInternal(visit) {
+            return new Internal(visit);
+        }
+        NavigationSession.createInternal = createInternal;
         /**
-         * @template T
+         * @param {?} firstTimeRoute
+         * @return {?}
          */
-        var Array = /** @class */ (function (_super) {
-            __extends(Array, _super);
-            function Array() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            Object.defineProperty(Array.prototype, "value", {
-                get: /**
-                 * @return {?}
-                 */
-                function () {
-                    var _this = this;
-                    return (this.rawValue || [])
-                        .filter((/**
-                     * @param {?} s
-                     * @return {?}
-                     */
-                    function (s) { return !___default__default.isEmpty(s); }))
-                        .map((/**
-                     * @param {?} raw
-                     * @return {?}
-                     */
-                    function (raw) { return _this.definition.type.parse(raw); }));
-                },
-                enumerable: true,
-                configurable: true
-            });
-            /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            Array.prototype.isSameValue = /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            function (otherValue) {
-                return ___default__default.isEqual(this.value, otherValue);
-            };
-            /**
-             * @param {?} value
-             * @return {?}
-             */
-            Array.prototype.replace = /**
-             * @param {?} value
-             * @return {?}
-             */
-            function (value) {
-                var _this = this;
-                return new RouteParameterValue.Array(this.definition, this.isEmptyValue(value) ? undefined : value.map((/**
-                 * @param {?} v
-                 * @return {?}
-                 */
-                function (v) { return _this.definition.type.format(v); })));
-            };
-            /**
-             * @return {?}
-             */
-            Array.prototype.formattedValue = /**
-             * @return {?}
-             */
-            function () {
-                var _this = this;
-                return this.isEmpty() ? [] : this.value.map((/**
-                 * @param {?} v
-                 * @return {?}
-                 */
-                function (v) { return _this.definition.type.format(v); }));
-            };
-            /**
-             * @param {?} value
-             * @return {?}
-             */
-            Array.prototype.isEmptyValue = /**
-             * @param {?} value
-             * @return {?}
-             */
-            function (value) {
-                return ___default__default.isNil(value) || value.length < 1;
-            };
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Array),
-                __metadata("design:paramtypes", [])
-            ], Array.prototype, "value", null);
-            return Array;
-        }(RouteParameterValue));
-        RouteParameterValue.Array = Array;
-    })(exports.RouteParameterValue || (exports.RouteParameterValue = {}));
+        function createExternal(firstTimeRoute) {
+            return new External(firstTimeRoute);
+        }
+        NavigationSession.createExternal = createExternal;
+    })(exports.NavigationSession || (exports.NavigationSession = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.ParameterSnapshot = /** @class */ (function () {
-        function ParameterSnapshot(placeDefinition, parameters) {
+    /**
+     * @record
+     */
+    function Params() { }
+    var Visit = /** @class */ (function () {
+        function Visit(placeDefinition, visitParameters) {
+            if (visitParameters === void 0) { visitParameters = {}; }
             this.placeDefinition = placeDefinition;
-            this.parameters = parameters;
+            this.visitParameters = visitParameters;
         }
+        // @Trace()
+        // @Trace()
         /**
-         * @param {?} other
-         * @param {?=} debug
-         * @return {?}
-         */
-        ParameterSnapshot.prototype.hasChanged = /**
-         * @param {?} other
-         * @param {?=} debug
-         * @return {?}
-         */
-        function (other, debug) {
-            if (debug === void 0) { debug = false; }
-            /** @type {?} */
-            var changed = this.parameters.find((/**
-             * @param {?} r
-             * @return {?}
-             */
-            function (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 {?}
-         */
-        ParameterSnapshot.prototype.getParameter = /**
-         * @template T, S
-         * @param {?} parameterDef
-         * @return {?}
-         */
-        function (parameterDef) {
-            return this.parameters.find((/**
-             * @param {?} r
-             * @return {?}
-             */
-            function (r) { return r.definition === parameterDef; }));
-        };
-        /**
-         * @template T, S
-         * @param {?} parameterDef
          * @return {?}
          */
-        ParameterSnapshot.prototype.getValueOf = /**
-         * @template T, S
-         * @param {?} parameterDef
+        Visit.prototype.getRouteId = 
+        // @Trace()
+        /**
          * @return {?}
          */
-        function (parameterDef) {
-            /** @type {?} */
-            var resolvedParameter = this.getParameter(parameterDef);
-            return resolvedParameter ? resolvedParameter.value : null;
+        function () {
+            return this.placeDefinition.getRouteIdFrom(this);
         };
+        // @Trace()
+        // @Trace()
         /**
          * @return {?}
          */
-        ParameterSnapshot.prototype.getRouteIdValue = /**
+        Visit.prototype.hasRouteId = 
+        // @Trace()
+        /**
          * @return {?}
          */
         function () {
-            return this.getRouteIdParameter() ? this.getRouteIdParameter().value : null;
+            return !___default.isNil(this.getRouteId());
         };
         /**
-         * @param {?} name
-         * @return {?}
-         */
-        ParameterSnapshot.prototype.getParameterValue = /**
-         * @param {?} name
-         * @return {?}
+         * 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.
          */
-        function (name) {
-            /** @type {?} */
-            var resolvedParameter = this.parameters.find((/**
-             * @param {?} r
-             * @return {?}
-             */
-            function (r) { return r.definition.name === name; }));
-            return resolvedParameter ? resolvedParameter.value : null;
-        };
         /**
-         * @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 {?}
          */
-        ParameterSnapshot.prototype.getRouteIdParameter = /**
-         * @private
+        Visit.prototype.getParameter = /**
+         * 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 {?}
          */
-        function () {
-            // 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 {?}
-             */
-            function (p) { return p.definition.isRouteId; }))));
+        function (parameterName) {
+            return this.visitParameters[parameterName];
         };
+        // @Trace()
+        // @Trace()
         /**
-         * @private
+         * @param {?} parameterName
          * @return {?}
          */
-        ParameterSnapshot.prototype.getRouteParameters = /**
-         * @private
+        Visit.prototype.hasParameter = 
+        // @Trace()
+        /**
+         * @param {?} parameterName
          * @return {?}
          */
-        function () {
-            return this.parameters.filter((/**
-             * @param {?} r
-             * @return {?}
-             */
-            function (r) { return !r.definition.isRouteId; }));
+        function (parameterName) {
+            return Object.keys(this.visitParameters).includes(parameterName);
         };
         /**
+         * @template S
+         * @param {?} parameter
+         * @param {?} value
          * @return {?}
          */
-        ParameterSnapshot.prototype.hasRouteId = /**
+        Visit.prototype.replace = /**
+         * @template S
+         * @param {?} parameter
+         * @param {?} value
          * @return {?}
          */
-        function () {
-            return !!this.getRouteIdParameter();
+        function (parameter, value) {
+            var _a;
+            return new Visit(this.placeDefinition, __assign({}, this.visitParameters, (_a = {}, _a[parameter.name] = value, _a)));
         };
         /**
+         * @template S
+         * @param {?} routeParams
          * @return {?}
          */
-        ParameterSnapshot.prototype.getFormattedRouteId = /**
+        Visit.prototype.mergeRouteParameters = /**
+         * @template S
+         * @param {?} routeParams
          * @return {?}
          */
-        function () {
+        function (routeParams) {
+            var _this = this;
+            // todo: whitelist parameters.
+            /** @type {?} */
+            var routeParameterKeys = Object.keys(routeParams);
             /** @type {?} */
-            var routeIdParam = this.getRouteIdParameter();
-            return routeIdParam ? routeIdParam.formattedValue() : null;
+            var params = {};
+            this.placeDefinition.getVisitParameterDefs().forEach((/**
+             * @param {?} def
+             * @return {?}
+             */
+            function (def) {
+                if (def.isRouteId || def.isRouteParameter) {
+                    if (routeParameterKeys.includes(def.name)) {
+                        params[def.name] = routeParams[def.name];
+                    }
+                }
+                else {
+                    // 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);
         };
         /**
+         * @param {?} other
          * @return {?}
          */
-        ParameterSnapshot.prototype.getNonEmptyParameters = /**
+        Visit.prototype.hasRoutingChangedFrom = /**
+         * @param {?} other
          * @return {?}
          */
-        function () {
-            return this.parameters.filter((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return !p.isEmpty(); }));
+        function (other) {
+            /** @type {?} */
+            var samePlace = other.placeDefinition === this.placeDefinition;
+            /** @type {?} */
+            var sameRouteParameters = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
         };
         /**
+         * @param {?} other
          * @return {?}
          */
-        ParameterSnapshot.prototype.getFormattedParameters = /**
+        Visit.prototype.hasChangedFrom = /**
+         * @param {?} other
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var params = {};
+        function (other) {
             /** @type {?} */
-            var routeIdParam = this.getNonEmptyParameters()
-                .filter((/**
-             * @param {?} p
+            var sameNonRouteParameters = ___default.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+        };
+        return Visit;
+    }());
+    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
+     */
+    var PlaceRouter = /** @class */ (function (_super) {
+        __extends(PlaceRouter, _super);
+        function PlaceRouter(router$1, angularLocation, placeHistory) {
+            var _this = _super.call(this) || this;
+            _this.router = router$1;
+            _this.angularLocation = angularLocation;
+            _this.placeHistory = placeHistory;
+            _this.firstRoute = true;
+            _this._navigationSessionModel = new pectin.MutableValueModel();
+            _this._activeVisits = new pectin.MutableListModel();
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.activeVisitIndex = chain(_this._activeVisits).indexBy('placeDefinition');
+            angularLocation.onUrlChange((/**
+             * @param {?} url
              * @return {?}
              */
-            function (p) { return !p.definition.isRouteId; }))
-                .forEach((/**
-             * @param {?} p
+            function (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 {?}
              */
-            function (p) { return params[p.definition.name] = p.formattedValue(); }));
-            return params;
-        };
+            function (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 router.NavigationStart) {
+                    _this.onAngularRouterStarted(event);
+                }
+                if (event instanceof router.NavigationEnd || event instanceof router.NavigationError) {
+                    _this.onAngularRouterFinished();
+                }
+            }));
+            _this.navigationSessionActive = chain(_this.navigationSessionModel).isNotNil();
+            _this.navigationSessionActive.subscribe((/**
+             * @param {?} active
+             * @return {?}
+             */
+            function (active) {
+                console.log('navigationSessionActive', active);
+            }));
+            return _this;
+            // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
+            // txo.observe('this.navigationSessionModel', this.navigationSessionModel);
+        }
+        Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._navigationSessionModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PlaceRouter.prototype, "navigationSessionModel", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._navigationSessionModel.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PlaceRouter.prototype, "activeVisits", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._activeVisits.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
+         *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
+         * @param visit
+         */
+        // @Trace()
+        /**
+         *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
+         * @param {?} visit
          * @return {?}
          */
-        ParameterSnapshot.prototype.getAllParameters = /**
+        // @Trace()
+        PlaceRouter.prototype.navigate = /**
+         *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
+         * @param {?} visit
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var params = {};
-            /** @type {?} */
-            var routeIdParam = this.parameters.forEach((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) {
-                params[p.definition.name] = p.value;
-            }));
-            return params;
+        // @Trace()
+        function (visit) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this.doNavigation(visit);
+                    return [2 /*return*/];
+                });
+            });
         };
         /**
-         * @template T, S
-         * @param {?} parameter
-         * @param {?} value
+         * @param {?} activatedRoute
+         * @param {?} previous
+         * @param {?} next
          * @return {?}
          */
-        ParameterSnapshot.prototype.replace = /**
-         * @template T, S
-         * @param {?} parameter
-         * @param {?} value
+        PlaceRouter.prototype.pushVisitChangesToRoute = /**
+         * @param {?} activatedRoute
+         * @param {?} previous
+         * @param {?} next
          * @return {?}
          */
-        function (parameter, value) {
-            return new ParameterSnapshot(this.placeDefinition, this.parameters.map((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) {
-                return p.definition === parameter ? p.replace(value) : p;
-            })));
+        function (activatedRoute, previous, next) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    // FIXME: no route id -> route id duplicates route parameters
+                    if (next.hasRoutingChangedFrom(previous)) {
+                        return [2 /*return*/, this.doNavigation(next, (/**
+                             * @param {?} router
+                             * @return {?}
+                             */
+                            function (router) {
+                                /** @type {?} */
+                                var relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
+                                /** @type {?} */
+                                var def = next.placeDefinition;
+                                /** @type {?} */
+                                var params = next.hasRouteId() ?
+                                    [def.getFormattedRouteId(next), def.getFormattedRouteParameters(next)] :
+                                    [def.getFormattedRouteParameters(next)];
+                                /** @type {?} */
+                                var commands = [relativePath].concat(params, _this.getChildPath(activatedRoute.snapshot));
+                                console.log('### Redirect', commands);
+                                return router.navigate(commands, {
+                                    relativeTo: activatedRoute
+                                });
+                            }))];
+                    }
+                    else {
+                        this.placeHistory.add(next);
+                    }
+                    return [2 /*return*/];
+                });
+            });
         };
         /**
-         * @param {?} injector
+         * @param {?} visit
+         * @param {?=} customNavigation
          * @return {?}
          */
-        ParameterSnapshot.prototype.sanitise = /**
-         * @param {?} injector
+        PlaceRouter.prototype.doNavigation = /**
+         * @param {?} visit
+         * @param {?=} customNavigation
          * @return {?}
          */
-        function (injector) {
+        function (visit, customNavigation) {
             return __awaiter(this, void 0, void 0, function () {
-                var routeId, sanitisedValue, result, routeParameters, i, routeParameter, sanitisedValue;
+                var def, parameterCommands, commands;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!this.hasRouteId()) return [3 /*break*/, 2];
-                            routeId = this.getRouteIdParameter();
-                            return [4 /*yield*/, routeId.sanitise(this, injector)];
+                            this._navigationSessionModel.value = exports.NavigationSession.createInternal(visit);
+                            _a.label = 1;
                         case 1:
-                            sanitisedValue = _a.sent();
-                            if (routeId.hasChanged(sanitisedValue)) {
-                                // if the route id has changed we redirect immediately as other
-                                // parameter sanitisers might use it.
-                                return [2 /*return*/, this.replace(routeId.definition, sanitisedValue)];
-                            }
-                            _a.label = 2;
+                            _a.trys.push([1, , 6, 7]);
+                            if (!customNavigation) return [3 /*break*/, 3];
+                            return [4 /*yield*/, customNavigation(this.router)];
                         case 2:
-                            result = this;
-                            routeParameters = this.getRouteParameters();
-                            i = 0;
-                            _a.label = 3;
+                            _a.sent();
+                            return [3 /*break*/, 5];
                         case 3:
-                            if (!(i < routeParameters.length)) return [3 /*break*/, 6];
-                            routeParameter = routeParameters[i];
-                            return [4 /*yield*/, routeParameter.sanitise(this, injector)];
+                            def = visit.placeDefinition;
+                            parameterCommands = visit.hasRouteId() ?
+                                [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
+                                [def.getFormattedRouteParameters(visit)];
+                            commands = [def.path].concat(parameterCommands);
+                            console.log('_doNavigation', visit, commands);
+                            return [4 /*yield*/, this.router.navigate(commands)];
                         case 4:
-                            sanitisedValue = _a.sent();
-                            if (routeParameter.hasChanged(sanitisedValue)) {
-                                result = result.replace(routeParameter.definition, sanitisedValue);
-                            }
+                            _a.sent();
                             _a.label = 5;
-                        case 5:
-                            i++;
-                            return [3 /*break*/, 3];
-                        case 6: return [2 /*return*/, result];
+                        case 5: return [3 /*break*/, 7];
+                        case 6:
+                            if (this.navigationSession && !this.router.getCurrentNavigation()) {
+                                this.onAngularRouterFinished();
+                            }
+                            return [7 /*endfinally*/];
+                        case 7: return [2 /*return*/];
                     }
                 });
             });
         };
-        var _a;
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.ParameterDefinition]),
-            __metadata("design:returntype", exports.RouteParameterValue)
-        ], ParameterSnapshot.prototype, "getParameter", null);
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.ParameterDefinition]),
-            __metadata("design:returntype", typeof (_a = typeof S !== "undefined" && S) === "function" ? _a : Object)
-        ], ParameterSnapshot.prototype, "getValueOf", null);
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [String]),
-            __metadata("design:returntype", Object)
-        ], ParameterSnapshot.prototype, "getParameterValue", null);
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", exports.RouteParameterValue.Scalar)
-        ], ParameterSnapshot.prototype, "getRouteIdParameter", null);
+        // @Trace()
+        // @Trace()
+        /**
+         * @private
+         * @param {?} event
+         * @return {?}
+         */
+        PlaceRouter.prototype.onAngularRouterStarted = 
+        // @Trace()
+        /**
+         * @private
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            if (!this.navigationSession) { // We been activated by an external route rather than placeRouter.go(visit)
+                console.log('navigation started', { firstTime: this.firstRoute });
+                /** @type {?} */
+                var session = exports.NavigationSession.createExternal(this.firstRoute);
+                if (event.navigationTrigger === 'popstate') {
+                    session.setPopstateReturn(this.router.routerState.snapshot.url);
+                }
+                this._navigationSessionModel.value = session;
+            }
+            this.firstRoute = false;
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @private
+         * @return {?}
+         */
+        PlaceRouter.prototype.onAngularRouterFinished = 
+        // @Trace()
+        /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            /** @type {?} */
+            var 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 {?} */
+            var visits = session.getVisits();
+            visits.forEach((/**
+             * @param {?} v
+             * @return {?}
+             */
+            function (v) {
+                _this.placeHistory.add(v);
+            }));
+            this._activeVisits.value = visits;
+            this._navigationSessionModel.value = null;
+        };
+        /**
+         * @param {?} activatedRoute
+         * @return {?}
+         */
+        PlaceRouter.prototype.getChildPath = /**
+         * @param {?} activatedRoute
+         * @return {?}
+         */
+        function (activatedRoute) {
+            return ___default__default.flatten(activatedRoute.children.map((/**
+             * @param {?} child
+             * @return {?}
+             */
+            function (child) { return child.url; })));
+        };
+        PlaceRouter.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceRouter.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: common.Location },
+            { type: PlaceHistory }
+        ]; };
+        /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
-            src.Memoize(),
+            pectin.Trace(),
             __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", Array)
-        ], ParameterSnapshot.prototype, "getRouteParameters", null);
-        return ParameterSnapshot;
-    }());
+            __metadata("design:paramtypes", [router.ActivatedRoute, Visit, Visit]),
+            __metadata("design:returntype", Promise)
+        ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
+        return PlaceRouter;
+    }(pectin.GarbageCollector));
     if (false) {
-        /** @type {?} */
-        exports.ParameterSnapshot.prototype.placeDefinition;
         /**
          * @type {?}
          * @private
          */
-        exports.ParameterSnapshot.prototype.parameters;
-    }
-    (function (ParameterSnapshot) {
+        PlaceRouter.prototype.firstRoute;
         /**
-         * @param {?} placeDef
-         * @param {?} params
-         * @param {?} urlSegments
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        function create(placeDef, params, urlSegments) {
-            /** @type {?} */
-            var paramMap = new ConsolidatedParameterMap(params, urlSegments);
-            /** @type {?} */
-            var resolvedParameters = placeDef.getRouteParameters().map((/**
-             * @param {?} def
-             * @return {?}
-             */
-            function (def) { return exports.RouteParameterValue.create(def, paramMap); }));
-            return new ParameterSnapshot(placeDef, resolvedParameters);
-        }
-        ParameterSnapshot.create = create;
+        PlaceRouter.prototype._navigationSessionModel;
         /**
-         * 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.
+         * @type {?}
+         * @private
          */
-        var ConsolidatedParameterMap = /** @class */ (function () {
-            function ConsolidatedParameterMap(paramMap, urlSegments) {
-                this.paramMaps = [paramMap].concat((urlSegments || []).map((/**
-                 * @param {?} s
-                 * @return {?}
-                 */
-                function (s) { return new ParamMapAdapter(s.parameters); }))).filter((/**
-                 * @param {?} m
-                 * @return {?}
-                 */
-                function (m) { return !!m; })); // the activated route param map can be null
-            }
-            /**
-             * @param {?} name
-             * @return {?}
-             */
-            ConsolidatedParameterMap.prototype.get = /**
-             * @param {?} name
-             * @return {?}
-             */
-            function (name) {
-                return this.paramMaps.find((/**
-                 * @param {?} m
-                 * @return {?}
-                 */
-                function (m) { return m.has(name); })).get(name);
-            };
-            /**
-             * @param {?} name
-             * @return {?}
-             */
-            ConsolidatedParameterMap.prototype.getAll = /**
-             * @param {?} name
-             * @return {?}
-             */
-            function (name) {
-                return this.paramMaps.find((/**
-                 * @param {?} m
-                 * @return {?}
-                 */
-                function (m) { return m.has(name); })).getAll(name);
-            };
-            /**
-             * @param {?} name
-             * @return {?}
-             */
-            ConsolidatedParameterMap.prototype.has = /**
-             * @param {?} name
-             * @return {?}
-             */
-            function (name) {
-                return !!this.paramMaps.find((/**
-                 * @param {?} m
-                 * @return {?}
-                 */
-                function (m) { return m.has(name); }));
-            };
-            Object.defineProperty(ConsolidatedParameterMap.prototype, "keys", {
-                get: /**
-                 * @return {?}
-                 */
-                function () {
-                    return this.paramMaps.reduce((/**
-                     * @param {?} result
-                     * @param {?} params
-                     * @return {?}
-                     */
-                    function (result, params) { return result.concat(params.keys); }), []);
-                },
-                enumerable: true,
-                configurable: true
-            });
-            __decorate([
-                src.Memoize(),
-                __metadata("design:type", Array),
-                __metadata("design:paramtypes", [])
-            ], ConsolidatedParameterMap.prototype, "keys", null);
-            return ConsolidatedParameterMap;
-        }());
-        if (false) {
-            /**
-             * @type {?}
-             * @private
-             */
-            ConsolidatedParameterMap.prototype.paramMaps;
-        }
-        var ParamMapAdapter = /** @class */ (function () {
-            function ParamMapAdapter(params) {
-                this.params = params;
-            }
-            /**
-             * @param {?} name
-             * @return {?}
-             */
-            ParamMapAdapter.prototype.get = /**
-             * @param {?} name
-             * @return {?}
-             */
-            function (name) {
-                return this.params[name];
-            };
-            /**
-             * @param {?} name
-             * @return {?}
-             */
-            ParamMapAdapter.prototype.getAll = /**
-             * @param {?} name
-             * @return {?}
-             */
-            function (name) {
-                /** @type {?} */
-                var value = this.get(name);
-                return Array.isArray(value) ? value : [value];
-            };
-            /**
-             * @param {?} name
-             * @return {?}
-             */
-            ParamMapAdapter.prototype.has = /**
-             * @param {?} name
-             * @return {?}
-             */
-            function (name) {
-                return this.keys.includes(name);
-            };
-            Object.defineProperty(ParamMapAdapter.prototype, "keys", {
-                get: /**
-                 * @return {?}
-                 */
-                function () {
-                    return Object.keys(this.params);
-                },
-                enumerable: true,
-                configurable: true
-            });
-            return ParamMapAdapter;
-        }());
-        if (false) {
-            /**
-             * @type {?}
-             * @private
-             */
-            ParamMapAdapter.prototype.params;
-        }
-    })(exports.ParameterSnapshot || (exports.ParameterSnapshot = {}));
+        PlaceRouter.prototype._activeVisits;
+        /** @type {?} */
+        PlaceRouter.prototype.navigationSessionActive;
+        /** @type {?} */
+        PlaceRouter.prototype.activeVisitIndex;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceRouter.prototype.router;
+        /** @type {?} */
+        PlaceRouter.prototype.angularLocation;
+        /** @type {?} */
+        PlaceRouter.prototype.placeHistory;
+    }
 
     /**
      * @fileoverview added by tsickle
@@ -4132,63 +4244,62 @@
     }
     var PlaceOutletComponent = /** @class */ (function (_super) {
         __extends(PlaceOutletComponent, _super);
-        function PlaceOutletComponent(router, placeHistory) {
+        function PlaceOutletComponent(router, placeRouter, placeHistory) {
             var _this = _super.call(this) || this;
             _this.router = router;
+            _this.placeRouter = placeRouter;
             _this.placeHistory = placeHistory;
             _this.animate = true;
+            _this.placeChanged = new core.EventEmitter();
             _this._activePlace = new pectin.MutableValueModel();
-            _this._incomingRouteChange = new pectin.Guard();
             _this._inOutletUpdate = new pectin.Guard();
             _this._activatedRouteModel = new pectin.MutableValueModel();
             _this._placeDefinition = new pectin.MutableValueModel();
-            _this._resolvedParameters = new pectin.MutableValueModel();
+            /**
+             * TODO: This is now really a visit
+             */
+            _this._placeVisit = new pectin.MutableValueModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            // Handle incoming route changes.
             /** @type {?} */
-            var paramMap = chain(_this._activatedRouteModel).pullObservableValue((/**
-             * @param {?} ar
-             * @return {?}
-             */
-            function (ar) { return ar.paramMap; }));
+            var inRouteVisitUpdate = new pectin.Guard();
             /** @type {?} */
-            var urls = chain(_this._activatedRouteModel).pullObservableValue((/**
-             * @param {?} ar
+            var routeVisit = chain(_this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
+            when.valueOf(routeVisit).changes((/**
+             * @param {?} visit
              * @return {?}
              */
-            function (ar) { return ar.url; }));
-            _this.placeConfigured = valueOf.all(chain(_this._inOutletUpdate).isFalsey(), _this._placeDefinition, paramMap, urls).areTruthy();
-            when.anyOf(paramMap, urls).changes((/**
-             * @return {?}
-             */
-            function () {
-                /** @type {?} */
-                var snapshot = exports.ParameterSnapshot.create(_this._placeDefinition.value, paramMap.value, urls.value);
-                _this._incomingRouteChange.whileTrue((/**
-                 * @return {?}
-                 */
-                function () {
-                    _this._resolvedParameters.value = snapshot;
-                    _this.placeHistory.add(snapshot);
-                }));
-            }), {
-                postponeUntil: _this.placeConfigured
-            });
-            when.valueOf(_this._resolvedParameters).changes((/**
+            function (visit) {
+                if (visit) {
+                    inRouteVisitUpdate.whileTrue((/**
+                     * @return {?}
+                     */
+                    function () {
+                        _this._placeVisit.value = visit;
+                    }));
+                }
+            }));
+            // Handle component based changes
+            when.valueOf(_this._placeVisit).changes((/**
              * @param {?} next
              * @param {?} previous
              * @return {?}
              */
             function (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 {?}
+             */
+            function (place) { return _this.placeChanged.emit(place); }));
             return _this;
             // 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 {?}
@@ -4198,17 +4309,22 @@
          */
         function () {
         };
-        Object.defineProperty(PlaceOutletComponent.prototype, "incomingRouteChange", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._incomingRouteChange;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(PlaceOutletComponent.prototype, "activePlace", {
+        /**
+         * @param {?} next
+         * @param {?} previous
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.pushVisitChangesToRoute = /**
+         * @param {?} next
+         * @param {?} previous
+         * @return {?}
+         */
+        function (next, previous) {
+            /** @type {?} */
+            var activatedRoute = this._activatedRouteModel.value;
+            this.placeRouter.pushVisitChangesToRoute(activatedRoute, previous, next);
+        };
+        Object.defineProperty(PlaceOutletComponent.prototype, "activePlaceModel", {
             get: /**
              * @return {?}
              */
@@ -4238,7 +4354,7 @@
                     _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);
@@ -4293,32 +4409,15 @@
             }
         };
         /**
-         * @param {?} next
-         * @param {?} previous
-         * @return {?}
-         */
-        PlaceOutletComponent.prototype.pushChangesToRoute = /**
-         * @param {?} next
-         * @param {?} previous
-         * @return {?}
-         */
-        function (next, previous) {
-            /** @type {?} */
-            var activatedRoute = this._activatedRouteModel.value;
-            this.router.pushParameterChangesToRoute(activatedRoute, previous, next);
-        };
-        /**
-         * @param {?} snapshot
-         * @param {?} callback
+         * @param {?} placeDestination
          * @return {?}
          */
-        PlaceOutletComponent.prototype.sanitise = /**
-         * @param {?} snapshot
-         * @param {?} callback
+        PlaceOutletComponent.prototype.activate = /**
+         * @param {?} placeDestination
          * @return {?}
          */
-        function (snapshot, callback) {
-            return snapshot;
+        function (placeDestination) {
+            // this.router.
         };
         PlaceOutletComponent.decorators = [
             { type: core.Component, args: [{
@@ -4330,11 +4429,13 @@
         ];
         /** @nocollapse */
         PlaceOutletComponent.ctorParameters = function () { return [
+            { type: router.Router },
             { type: PlaceRouter },
             { type: PlaceHistory }
         ]; };
         PlaceOutletComponent.propDecorators = {
             animate: [{ type: core.Input }],
+            placeChanged: [{ type: core.Output }],
             routerOut: [{ type: core.ViewChild, args: ['routeOutlet', { static: true },] }]
         };
         return PlaceOutletComponent;
@@ -4343,17 +4444,14 @@
         /** @type {?} */
         PlaceOutletComponent.prototype.animate;
         /** @type {?} */
+        PlaceOutletComponent.prototype.placeChanged;
+        /** @type {?} */
         PlaceOutletComponent.prototype.routerOut;
         /**
          * @type {?}
          * @private
          */
         PlaceOutletComponent.prototype._activePlace;
-        /**
-         * @type {?}
-         * @private
-         */
-        PlaceOutletComponent.prototype._incomingRouteChange;
         /**
          * @type {?}
          * @private
@@ -4369,18 +4467,21 @@
          * @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
@@ -4400,7 +4501,7 @@
         TabbedPlaceNavigationComponent.decorators = [
             { type: core.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: [""]
                     }] }
         ];
@@ -4464,7 +4565,8 @@
                             NumberInputComponent,
                             StringInputComponent,
                             PasswordInputComponent,
-                            SelectInputComponent
+                            SelectInputComponent,
+                            NoopComponent
                         ],
                         imports: [
                             common.CommonModule,
@@ -4485,7 +4587,8 @@
                             PasswordInputComponent,
                             SelectInputComponent,
                             InteractionModule,
-                            PlaceModule
+                            PlaceModule,
+                            NoopComponent
                         ]
                     },] }
         ];
@@ -4857,12 +4960,25 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var CloseInteractionGuard = /** @class */ (function () {
-        function CloseInteractionGuard(router, injector, interactionContext) {
+    var InteractionGuard = /** @class */ (function () {
+        function InteractionGuard(router, injector, interactionContext) {
             this.router = router;
             this.injector = injector;
             this.interactionContext = interactionContext;
         }
+        /**
+         * @param {?} route
+         * @param {?} state
+         * @return {?}
+         */
+        InteractionGuard.prototype.canActivate = /**
+         * @param {?} route
+         * @param {?} state
+         * @return {?}
+         */
+        function (route, state) {
+            return true;
+        };
         /**
          * @param {?} component
          * @param {?} currentRoute
@@ -4870,7 +4986,7 @@
          * @param {?=} nextState
          * @return {?}
          */
-        CloseInteractionGuard.prototype.canDeactivate = /**
+        InteractionGuard.prototype.canDeactivate = /**
          * @param {?} component
          * @param {?} currentRoute
          * @param {?} currentState
@@ -4880,36 +4996,48 @@
         function (component, currentRoute, currentState, nextState) {
             return !this.interactionContext.isActive();
         };
-        CloseInteractionGuard.decorators = [
+        InteractionGuard.decorators = [
             { type: core.Injectable, args: [{
                         providedIn: 'root'
                     },] }
         ];
         /** @nocollapse */
-        CloseInteractionGuard.ctorParameters = function () { return [
+        InteractionGuard.ctorParameters = function () { return [
             { type: router.Router },
             { type: core.Injector },
             { type: InteractionContext }
         ]; };
-        /** @nocollapse */ CloseInteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function CloseInteractionGuard_Factory() { return new CloseInteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(InteractionContext)); }, token: CloseInteractionGuard, providedIn: "root" });
-        return CloseInteractionGuard;
+        /** @nocollapse */ InteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(InteractionContext)); }, token: InteractionGuard, providedIn: "root" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [router.ActivatedRouteSnapshot, router.RouterStateSnapshot]),
+            __metadata("design:returntype", Object)
+        ], InteractionGuard.prototype, "canActivate", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [NoopComponent, router.ActivatedRouteSnapshot, router.RouterStateSnapshot, router.RouterStateSnapshot]),
+            __metadata("design:returntype", Object)
+        ], InteractionGuard.prototype, "canDeactivate", null);
+        return InteractionGuard;
     }());
     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;
     }
 
     /**
@@ -4937,7 +5065,289 @@
         /**
          * @return {?}
          */
-        NavItem.prototype.tooltip = function () { };
+        NavItem.prototype.tooltip = function () { };
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @param {?} options
+     * @return {?}
+     */
+    function Place(options) {
+        return (/**
+         * @param {?} target
+         * @return {?}
+         */
+        function (target) {
+            if (exports.PlaceComponent.isPlaceComponentConstructor(target)) {
+                exports.PlaceComponent.injectDefinition(target, new exports.PlaceDefinition(target, options.path, ___default.isNil(options.authenticate) ? false : options.authenticate, options.order, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+                 * @param {?} c
+                 * @return {?}
+                 */
+                function (c) { return exports.PlaceComponent.getDefinition(c); }))));
+            }
+            else {
+                pectin.lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
+            }
+        });
+    }
+    (function (Place) {
+        /**
+         * @record
+         */
+        function Options() { }
+        Place.Options = Options;
+        if (false) {
+            /** @type {?} */
+            Options.prototype.path;
+            /** @type {?} */
+            Options.prototype.order;
+            /** @type {?|undefined} */
+            Options.prototype.data;
+            /** @type {?|undefined} */
+            Options.prototype.authenticate;
+            /** @type {?|undefined} */
+            Options.prototype.children;
+        }
+    })(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
+
+    (function (Formatter) {
+        var StringType = /** @class */ (function () {
+            function StringType() {
+            }
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            StringType.prototype.format = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return value;
+            };
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            StringType.prototype.parse = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return value;
+            };
+            return StringType;
+        }());
+        var NumberType = /** @class */ (function () {
+            function NumberType() {
+            }
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            NumberType.prototype.format = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return ___default__default.isNumber(value) && !___default__default.isNaN(value) ? "" + value : null;
+            };
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            NumberType.prototype.parse = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                /** @type {?} */
+                var parsed = Number.parseFloat(value);
+                return ___default__default.isNaN(parsed) ? null : parsed;
+            };
+            return NumberType;
+        }());
+        var BooleanType = /** @class */ (function () {
+            function BooleanType() {
+            }
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            BooleanType.prototype.format = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return value ? 'true' : 'false';
+            };
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            BooleanType.prototype.parse = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return value === 'true';
+            };
+            return BooleanType;
+        }());
+        Formatter.STRING = new StringType();
+        Formatter.NUMBER = new NumberType();
+        Formatter.BOOLEAN = new BooleanType();
+    })(exports.Formatter || (exports.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 {?}
+         */
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = new exports.ParameterDefinition.RouteId(propertyKey.toString(), options, type);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.UseDelegate()(prototype, propertyKey);
+        });
+    }
+    /**
+     * @template T
+     * @param {?=} options
+     * @return {?}
+     */
+    function VisitParameter(options) {
+        return (/**
+         * @param {?} prototype
+         * @param {?} propertyKey
+         * @return {?}
+         */
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = new exports.ParameterDefinition.ValueParameter(propertyKey.toString(), options, options.storeInUrl);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.UseDelegate()(prototype, propertyKey);
+        });
+    }
+    /**
+     * @template E
+     * @param {?=} options
+     * @return {?}
+     */
+    function VisitParameterList(options) {
+        return (/**
+         * @param {?} prototype
+         * @param {?} propertyKey
+         * @return {?}
+         */
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = new exports.ParameterDefinition.ArrayParameter(propertyKey.toString(), options, options.storeInUrl);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.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) { };
     }
 
     /**
@@ -4945,67 +5355,116 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
-     * @param {?} options
-     * @return {?}
+     * @record
+     * @template T
      */
-    function Place(options) {
-        return (/**
-         * @param {?} target
+    function ParameterSnapshot() { }
+    if (false) {
+        /** @type {?} */
+        ParameterSnapshot.prototype.definition;
+        /** @type {?} */
+        ParameterSnapshot.prototype.value;
+        /**
          * @return {?}
          */
-        function (target) {
-            if (exports.PlaceComponent.isPlaceComponentConstructor(target)) {
-                exports.PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, ___default.isNil(options.authenticate) ? false : options.authenticate, options.order, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
-                 * @param {?} c
-                 * @return {?}
-                 */
-                function (c) { return exports.PlaceComponent.getDefinition(c); }))));
-            }
-            else {
-                pectin.lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
-            }
-        });
+        ParameterSnapshot.prototype.isMissing = function () { };
     }
-    (function (Place) {
-        /**
-         * @record
-         */
-        function Options() { }
-        Place.Options = Options;
-        if (false) {
-            /** @type {?} */
-            Options.prototype.path;
-            /** @type {?} */
-            Options.prototype.order;
-            /** @type {?|undefined} */
-            Options.prototype.data;
-            /** @type {?|undefined} */
-            Options.prototype.authenticate;
-            /** @type {?|undefined} */
-            Options.prototype.children;
-        }
-    })(Place || (Place = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @record
-     */
-    function Visit() { }
-    if (false) {
-        /** @type {?} */
-        Visit.prototype.placeDefinition;
+    var VisitSanitiser = /** @class */ (function () {
+        function VisitSanitiser(activatedRoute, router, placeHistory, injector) {
+            this.activatedRoute = activatedRoute;
+            this.router = router;
+            this.placeHistory = placeHistory;
+            this.injector = injector;
+        }
+        // @Trace()
+        // @Trace()
         /**
+         * @param {?} visit
          * @return {?}
          */
-        Visit.prototype.getRouteIdValue = function () { };
+        VisitSanitiser.prototype.sanitise = 
+        // @Trace()
         /**
-         * @param {?} name
+         * @param {?} visit
          * @return {?}
          */
-        Visit.prototype.getParameterValue = function (name) { };
+        function (visit) {
+            return __awaiter(this, void 0, void 0, function () {
+                var placeDef, routeIdDef, routeId, sanitisedValue, parameterDefs, sanitisedVisit, i, def, value, sanitisedValue;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            placeDef = visit.placeDefinition;
+                            if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
+                            routeIdDef = placeDef.getRouteIdParameterDef();
+                            routeId = visit.getRouteId();
+                            return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
+                        case 1:
+                            sanitisedValue = _a.sent();
+                            console.log({ routeId: routeId, sanitisedValue: sanitisedValue });
+                            // ###------- EARLY EXIT --------###
+                            if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
+                                // if the route id has changed we redirect immediately as other
+                                // parameter sanitisers might use it.
+                                return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
+                            }
+                            _a.label = 2;
+                        case 2:
+                            // if we didn't replace the routeId we continue the url present parameters.
+                            parameterDefs = placeDef.getVisitParameterDefs({
+                                includeRouteParameters: true,
+                                includeNonRouteParameters: true
+                            });
+                            sanitisedVisit = visit;
+                            i = 0;
+                            _a.label = 3;
+                        case 3:
+                            if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
+                            def = parameterDefs[i];
+                            value = visit.getParameter(def.name);
+                            return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
+                        case 4:
+                            sanitisedValue = _a.sent();
+                            if (def.hasChanged(value, sanitisedValue)) {
+                                sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
+                            }
+                            _a.label = 5;
+                        case 5:
+                            i++;
+                            return [3 /*break*/, 3];
+                        case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
+                    }
+                });
+            });
+        };
+        return VisitSanitiser;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        VisitSanitiser.prototype.activatedRoute;
+        /**
+         * @type {?}
+         * @private
+         */
+        VisitSanitiser.prototype.router;
+        /**
+         * @type {?}
+         * @private
+         */
+        VisitSanitiser.prototype.placeHistory;
+        /**
+         * @type {?}
+         * @private
+         */
+        VisitSanitiser.prototype.injector;
     }
 
     /**
@@ -5020,6 +5479,22 @@
             this.interactionContext = interactionContext;
             this.angularLocation = angularLocation;
         }
+        /**
+         * @private
+         * @param {?} nextState
+         * @param {?} placeDefinitionPath
+         * @return {?}
+         */
+        LeavePlaceGuard.prototype.isLeavingTheCurrentPlace = /**
+         * @private
+         * @param {?} nextState
+         * @param {?} placeDefinitionPath
+         * @return {?}
+         */
+        function (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
@@ -5042,23 +5517,43 @@
                         case 0:
                             placeDefinitionPath = "/" + component.placeDefinition.path;
                             if (!this.placeRouter.navigationSession.alreadyAccepted(component)) return [3 /*break*/, 1];
+                            // 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 [2 /*return*/, true];
                         case 1:
-                            if (!!nextState.url.startsWith(placeDefinitionPath)) return [3 /*break*/, 3];
                             self_1 = this;
+                            canLeave = true;
+                            if (!this.isLeavingTheCurrentPlace(nextState, placeDefinitionPath)) return [3 /*break*/, 4];
+                            // 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 });
+                                this.interactionContext.currentActivity.cancel(null);
+                            }
+                            if (!canLeave) return [3 /*break*/, 3];
                             return [4 /*yield*/, component.canDeactivate()];
                         case 2:
+                            // TODO: Add tests: hit back -> confirm leave dialog -> hit back -> close dialog ->  hit back -> confirm leave dialog.
                             canLeave = _a.sent();
-                            // 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()) {
-                                canLeave = false;
-                                console.log("cancelling", { activity: this.interactionContext.currentActivity });
+                            _a.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            if (this.interactionContext.isActive()) {
+                                console.log('cancelling', { activity: this.interactionContext.currentActivity });
                                 this.interactionContext.currentActivity.cancel(null);
+                                canLeave = false;
+                            }
+                            else {
+                                canLeave = true;
                             }
-                            // 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.
+                            _a.label = 5;
+                        case 5:
                             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_1.placeRouter.navigationSession.rememberAcceptanceOf(component);
                             }
                             else {
@@ -5066,11 +5561,10 @@
                                 // 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);
+                                    this.angularLocation.go(this.placeRouter.navigationSession.popStateReturnUrl);
                                 }
                             }
                             return [2 /*return*/, canLeave];
-                        case 3: return [2 /*return*/, true];
                     }
                 });
             });
@@ -5097,321 +5591,292 @@
          * @private
          */
         LeavePlaceGuard.prototype.router;
-        /**
-         * @type {?}
-         * @private
-         */
-        LeavePlaceGuard.prototype.injector;
-        /**
-         * @type {?}
-         * @private
-         */
-        LeavePlaceGuard.prototype.placeRouter;
-        /** @type {?} */
-        LeavePlaceGuard.prototype.interactionContext;
-        /** @type {?} */
-        LeavePlaceGuard.prototype.angularLocation;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PlaceRouteGuard = /** @class */ (function () {
-        function PlaceRouteGuard(placeRouter, injector) {
-            this.placeRouter = placeRouter;
-            this.injector = injector;
-        }
-        /**
-         * @param {?} activatedRoute
-         * @param {?} state
-         * @return {?}
-         */
-        PlaceRouteGuard.prototype.canActivate = /**
-         * @param {?} activatedRoute
-         * @param {?} state
-         * @return {?}
-         */
-        function (activatedRoute, state) {
-            var _this = this;
-            if (exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
-                /** @type {?} */
-                var placeDefinition = exports.PlaceComponent.getDefinition(activatedRoute.component);
-                /** @type {?} */
-                var snapshot_1 = exports.ParameterSnapshot.create(placeDefinition, activatedRoute.paramMap, activatedRoute.url);
-                return snapshot_1.sanitise(this.injector).then((/**
-                 * @param {?} sanitised
-                 * @return {?}
-                 */
-                function (sanitised) {
-                    pectin.Logger.get(_this).info("ParameterSnapshot.sanitise ->", sanitised.getAllParameters());
-                    if (sanitised.hasChanged(snapshot_1, true)) {
-                        return _this.placeRouter.getRedirectUrlTree(activatedRoute, sanitised);
-                    }
-                    else {
-                        return true;
-                    }
-                }));
-            }
-            else {
-                return pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component);
-            }
-        };
-        PlaceRouteGuard.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceRouteGuard.ctorParameters = function () { return [
-            { type: PlaceRouter },
-            { type: core.Injector }
-        ]; };
-        /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(core.ɵɵinject(PlaceRouter), core.ɵɵinject(core.INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
-        return PlaceRouteGuard;
-    }());
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        PlaceRouteGuard.prototype.placeRouter;
-        /**
-         * @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 {?}
-         */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = new exports.ParameterDefinition.RouteId(propertyKey.toString(), type, options);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
-    /**
-     * @template T
-     * @param {?} type
-     * @param {?=} options
-     * @return {?}
-     */
-    function RouteParameter(type, options) {
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
-         * @return {?}
+        /**
+         * @type {?}
+         * @private
          */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = new exports.ParameterDefinition.ValueParameter(propertyKey.toString(), type, options);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
-    /**
-     * @template E
-     * @param {?} elementType
-     * @param {?=} options
-     * @return {?}
-     */
-    function RouteParameterList(elementType, options) {
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
-         * @return {?}
+        LeavePlaceGuard.prototype.injector;
+        /**
+         * @type {?}
+         * @private
          */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = new exports.ParameterDefinition.ArrayParameter(propertyKey.toString(), elementType, options);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
+        LeavePlaceGuard.prototype.placeRouter;
+        /** @type {?} */
+        LeavePlaceGuard.prototype.interactionContext;
+        /** @type {?} */
+        LeavePlaceGuard.prototype.angularLocation;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @record
-     * @template S
-     */
-    function ParameterSanitiser() { }
-    if (false) {
+    exports.PlaceRouteGuard = /** @class */ (function () {
+        function PlaceRouteGuard(router, placeRouter, placeHistory, injector) {
+            this.router = router;
+            this.placeRouter = placeRouter;
+            this.placeHistory = placeHistory;
+            this.injector = injector;
+        }
+        // @Trace()
+        // @Trace()
         /**
-         * @param {?} paramter
-         * @param {?=} visit
+         * @param {?} activatedRoute
+         * @param {?} state
+         * @return {?}
+         */
+        PlaceRouteGuard.prototype.canActivate = 
+        // @Trace()
+        /**
+         * @param {?} activatedRoute
+         * @param {?} state
          * @return {?}
          */
-        ParameterSanitiser.prototype.sanitise = function (paramter, visit) { };
+        function (activatedRoute, state) {
+            return __awaiter(this, void 0, void 0, function () {
+                var placeDefinition, params, parsedParams, initialVisit, sanitiser, updatedVisit, parameterCommands, commands;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 2];
+                            placeDefinition = exports.PlaceComponent.getDefinition(activatedRoute.component);
+                            // Parse our route params.
+                            params = new PlaceRouteGuard.ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                            parsedParams = placeDefinition.parseRouteParams(params);
+                            initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                            sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                            return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                        case 1:
+                            updatedVisit = _a.sent();
+                            // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
+                            this.placeRouter.navigationSession.storeVisit(updatedVisit);
+                            if (initialVisit.hasRoutingChangedFrom(updatedVisit)) {
+                                parameterCommands = updatedVisit.hasRouteId() ?
+                                    [placeDefinition.getFormattedRouteId(updatedVisit), placeDefinition.getFormattedRouteParameters(updatedVisit)] :
+                                    [placeDefinition.getFormattedRouteParameters(updatedVisit)];
+                                commands = [(activatedRoute.url[0].path)].concat(parameterCommands, this.placeRouter.getChildPath(activatedRoute));
+                                console.log('##### Redirect', commands);
+                                return [2 /*return*/, this.router.createUrlTree(commands, {
+                                        replaceUrl: true,
+                                        skipLocationChange: false
+                                    })];
+                            }
+                            else {
+                                return [2 /*return*/, true];
+                            }
+                            return [3 /*break*/, 3];
+                        case 2: return [2 /*return*/, pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        PlaceRouteGuard.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceRouteGuard.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: PlaceRouter },
+            { type: PlaceHistory },
+            { type: core.Injector }
+        ]; };
+        /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(core.ɵɵinject(router.Router), core.ɵɵinject(PlaceRouter), core.ɵɵinject(PlaceHistory), core.ɵɵinject(core.INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
+        return PlaceRouteGuard;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.PlaceRouteGuard.prototype.router;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.PlaceRouteGuard.prototype.placeRouter;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.PlaceRouteGuard.prototype.placeHistory;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.PlaceRouteGuard.prototype.injector;
     }
-
-    /**
-     * @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
-
-    (function (ParameterType) {
-        var StringType = /** @class */ (function () {
-            function StringType() {
+    (function (PlaceRouteGuard) {
+        /**
+         * 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.
+         */
+        var ConsolidatedParameterMap = /** @class */ (function () {
+            function ConsolidatedParameterMap(paramMap, urlSegments) {
+                this.paramMaps = [paramMap].concat((urlSegments || []).map((/**
+                 * @param {?} s
+                 * @return {?}
+                 */
+                function (s) { return new ParamMapAdapter(s.parameters); }))).filter((/**
+                 * @param {?} m
+                 * @return {?}
+                 */
+                function (m) { return !!m; })); // the activated route param map can be null
             }
             /**
-             * @param {?} value
+             * @param {?} name
              * @return {?}
              */
-            StringType.prototype.format = /**
-             * @param {?} value
+            ConsolidatedParameterMap.prototype.get = /**
+             * @param {?} name
              * @return {?}
              */
-            function (value) {
-                return value;
+            function (name) {
+                /** @type {?} */
+                var paramMap = this.paramMaps.find((/**
+                 * @param {?} m
+                 * @return {?}
+                 */
+                function (m) { return m.has(name); }));
+                return paramMap.get(name);
             };
             /**
-             * @param {?} value
+             * @param {?} name
              * @return {?}
              */
-            StringType.prototype.parse = /**
-             * @param {?} value
+            ConsolidatedParameterMap.prototype.getAll = /**
+             * @param {?} name
              * @return {?}
              */
-            function (value) {
-                return value;
+            function (name) {
+                /** @type {?} */
+                var paramMap = this.paramMaps.find((/**
+                 * @param {?} m
+                 * @return {?}
+                 */
+                function (m) { return m.has(name); }));
+                return paramMap.getAll(name);
             };
-            return StringType;
-        }());
-        var NumberType = /** @class */ (function () {
-            function NumberType() {
-            }
             /**
-             * @param {?} value
+             * @param {?} name
              * @return {?}
              */
-            NumberType.prototype.format = /**
-             * @param {?} value
+            ConsolidatedParameterMap.prototype.has = /**
+             * @param {?} name
              * @return {?}
              */
-            function (value) {
-                return "" + value;
+            function (name) {
+                return !!this.paramMaps.find((/**
+                 * @param {?} m
+                 * @return {?}
+                 */
+                function (m) { return m.has(name); }));
             };
+            Object.defineProperty(ConsolidatedParameterMap.prototype, "keys", {
+                get: /**
+                 * @return {?}
+                 */
+                function () {
+                    return this.paramMaps.reduce((/**
+                     * @param {?} result
+                     * @param {?} params
+                     * @return {?}
+                     */
+                    function (result, params) { return result.concat(params.keys); }), []);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            __decorate([
+                src.Memoize(),
+                __metadata("design:type", Array),
+                __metadata("design:paramtypes", [])
+            ], ConsolidatedParameterMap.prototype, "keys", null);
+            return ConsolidatedParameterMap;
+        }());
+        PlaceRouteGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
+        if (false) {
             /**
-             * @param {?} value
+             * @type {?}
+             * @private
+             */
+            ConsolidatedParameterMap.prototype.paramMaps;
+        }
+        var ParamMapAdapter = /** @class */ (function () {
+            function ParamMapAdapter(params) {
+                this.params = params;
+            }
+            /**
+             * @param {?} name
              * @return {?}
              */
-            NumberType.prototype.parse = /**
-             * @param {?} value
+            ParamMapAdapter.prototype.get = /**
+             * @param {?} name
              * @return {?}
              */
-            function (value) {
-                return ___default__default.isNil(value) || ___default__default.isEmpty(value) ? null : +value;
+            function (name) {
+                return this.params[name];
             };
-            return NumberType;
-        }());
-        var BooleanType = /** @class */ (function () {
-            function BooleanType() {
-            }
             /**
-             * @param {?} value
+             * @param {?} name
              * @return {?}
              */
-            BooleanType.prototype.format = /**
-             * @param {?} value
+            ParamMapAdapter.prototype.getAll = /**
+             * @param {?} name
              * @return {?}
              */
-            function (value) {
-                return value ? 'true' : 'false';
+            function (name) {
+                /** @type {?} */
+                var value = this.get(name);
+                return Array.isArray(value) ? value : [value];
             };
             /**
-             * @param {?} value
+             * @param {?} name
              * @return {?}
              */
-            BooleanType.prototype.parse = /**
-             * @param {?} value
+            ParamMapAdapter.prototype.has = /**
+             * @param {?} name
              * @return {?}
              */
-            function (value) {
-                return value === 'true';
+            function (name) {
+                return this.keys.includes(name);
             };
-            return BooleanType;
+            Object.defineProperty(ParamMapAdapter.prototype, "keys", {
+                get: /**
+                 * @return {?}
+                 */
+                function () {
+                    return Object.keys(this.params);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            return ParamMapAdapter;
         }());
-        ParameterType.STRING = new StringType();
-        ParameterType.NUMBER = new NumberType();
-        ParameterType.BOOLEAN = new BooleanType();
-    })(exports.ParameterType || (exports.ParameterType = {}));
+        if (false) {
+            /**
+             * @type {?}
+             * @private
+             */
+            ParamMapAdapter.prototype.params;
+        }
+    })(exports.PlaceRouteGuard || (exports.PlaceRouteGuard = {}));
 
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
-    exports.Activity = exports.ɵba;
+    exports.Activity = exports.ɵbb;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
-    exports.CloseInteractionGuard = CloseInteractionGuard;
     exports.CommandDirective = CommandDirective;
-    exports.ConfirmThenDialogComponent = exports.ɵbc;
+    exports.ConfirmThenDialogComponent = exports.ɵbd;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
     exports.DEFINITION_META_DATA_KEY = DEFINITION_META_DATA_KEY;
     exports.DIALOG_INTERACTION_SERVICE_DEFAULTS = DIALOG_INTERACTION_SERVICE_DEFAULTS;
@@ -5421,59 +5886,64 @@
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.FocusBindingDirective = FocusBindingDirective;
     exports.InteractionContext = InteractionContext;
+    exports.InteractionGuard = InteractionGuard;
     exports.InteractionModule = InteractionModule;
+    exports.InteractionOutletComponent = InteractionOutletComponent;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.LeavePlaceGuard = LeavePlaceGuard;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
+    exports.NoopComponent = NoopComponent;
     exports.NumberInputComponent = NumberInputComponent;
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
-    exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceHistory = PlaceHistory;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
-    exports.PlaceRouteGuard = PlaceRouteGuard;
     exports.PlaceRouter = PlaceRouter;
     exports.Point = Point;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.ResizeAwareComponent = ResizeAwareComponent;
     exports.RouteId = RouteId;
-    exports.RouteParameter = RouteParameter;
-    exports.RouteParameterList = RouteParameterList;
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
+    exports.Visit = Visit;
+    exports.VisitParameter = VisitParameter;
+    exports.VisitParameterList = VisitParameterList;
+    exports.VisitSanitiser = VisitSanitiser;
     exports.leftRightPlaceAnimation = leftRightPlaceAnimation;
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
     exports.ɵa = CommandDirective;
     exports.ɵb = FocusBindingDirective;
-    exports.ɵbd = AlertDialogComponent;
-    exports.ɵbf = DIALOG_INTERACTION_SERVICE_DEFAULTS;
-    exports.ɵbg = DialogInteractionService;
+    exports.ɵba = ACTIVITY_DATA;
+    exports.ɵbe = AlertDialogComponent;
+    exports.ɵbg = InteractionOutletComponent;
+    exports.ɵbh = DIALOG_INTERACTION_SERVICE_DEFAULTS;
+    exports.ɵbi = DialogInteractionService;
     exports.ɵc = DisposableComponent;
     exports.ɵd = NumberInputComponent;
     exports.ɵe = AbstractInputComponent;
     exports.ɵf = StringInputComponent;
     exports.ɵg = PasswordInputComponent;
     exports.ɵh = SelectInputComponent;
-    exports.ɵi = PlaceModule;
-    exports.ɵj = EmptyStateComponent;
-    exports.ɵk = BusyOverlayComponent;
-    exports.ɵl = PlaceOutletComponent;
-    exports.ɵm = leftRightPlaceAnimation;
-    exports.ɵn = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵo = PlaceRouter;
-    exports.ɵp = PlaceHistory;
-    exports.ɵq = TabbedPlaceNavigationComponent;
-    exports.ɵr = AbstractPlaceNavigationComponent;
-    exports.ɵs = ListPlaceNavComponent;
-    exports.ɵt = InteractionModule;
-    exports.ɵu = ActivityContainerComponent;
-    exports.ɵv = InteractionContext;
-    exports.ɵw = ActivityOutletComponent;
-    exports.ɵx = ConfirmationDialogComponent;
-    exports.ɵy = AbstractActivity;
-    exports.ɵz = ACTIVITY_DATA;
+    exports.ɵi = NoopComponent;
+    exports.ɵj = PlaceModule;
+    exports.ɵk = EmptyStateComponent;
+    exports.ɵl = BusyOverlayComponent;
+    exports.ɵm = PlaceOutletComponent;
+    exports.ɵn = leftRightPlaceAnimation;
+    exports.ɵo = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵp = PlaceRouter;
+    exports.ɵq = PlaceHistory;
+    exports.ɵr = TabbedPlaceNavigationComponent;
+    exports.ɵs = AbstractPlaceNavigationComponent;
+    exports.ɵt = ListPlaceNavComponent;
+    exports.ɵu = InteractionModule;
+    exports.ɵv = ActivityContainerComponent;
+    exports.ɵw = InteractionContext;
+    exports.ɵx = ActivityOutletComponent;
+    exports.ɵy = ConfirmationDialogComponent;
+    exports.ɵz = AbstractActivity;
 
     Object.defineProperty(exports, '__esModule', { value: true });