@coolon/angular-ui-powerups 0.0.37 → 0.0.41

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/platform-browser'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator'), require('lodash'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), require('@typescript-plus/fast-memoize-decorator/dist/src')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/platform-browser', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tabs', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator', 'lodash', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', '@typescript-plus/fast-memoize-decorator/dist/src'], 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.platformBrowser, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tabs, global.ng.material.tooltip, global.ng.router, global.fastMemoizeDecorator, global.lodash, null, global.ng.animations, global.ResizeObserver, global.src));
-}(this, function (exports, common, core, forms, material, platformBrowser, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tabs, tooltip, router, fastMemoizeDecorator, lodash, reflectMetadata, animations$1, ResizeObserver, src) { '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('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), 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('lodash'), 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', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'lodash', '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.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.ng.router, global.src, global.fastMemoizeDecorator, global.lodash, null, global.ng.animations, global.ResizeObserver));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tooltip, router, src, fastMemoizeDecorator, lodash, reflectMetadata, animations$1, ResizeObserver) { 'use strict';
 
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
 
@@ -479,6 +479,126 @@
         return NumberInputComponent;
     }(AbstractInputComponent));
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PasswordInputComponent = /** @class */ (function (_super) {
+        __extends(PasswordInputComponent, _super);
+        function PasswordInputComponent() {
+            return _super.call(this) || this;
+        }
+        /**
+         * @return {?}
+         */
+        PasswordInputComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        PasswordInputComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'angular-ui-powerups-password-input',
+                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        PasswordInputComponent.ctorParameters = function () { return []; };
+        return PasswordInputComponent;
+    }(AbstractInputComponent));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @template T
+     */
+    var SelectInputComponent = /** @class */ (function (_super) {
+        __extends(SelectInputComponent, _super);
+        function SelectInputComponent() {
+            var _this = _super.call(this) || this;
+            _this.optionLabelFormat = (/**
+             * @param {?} option
+             * @return {?}
+             */
+            function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; });
+            return _this;
+        }
+        /**
+         * @return {?}
+         */
+        SelectInputComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        SelectInputComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'angular-ui-powerups-select-input',
+                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"valueModel\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value\" [value]=\"option\">{{optionLabelFormat(option)}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        SelectInputComponent.ctorParameters = function () { return []; };
+        SelectInputComponent.propDecorators = {
+            optionsModel: [{ type: core.Input }],
+            options: [{ type: core.Input }],
+            optionLabel: [{ type: core.Input }],
+            optionLabelFormat: [{ type: core.Input }]
+        };
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], SelectInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], SelectInputComponent.prototype, "options", void 0);
+        return SelectInputComponent;
+    }(AbstractInputComponent));
+    if (false) {
+        /** @type {?} */
+        SelectInputComponent.prototype.optionsModel;
+        /** @type {?} */
+        SelectInputComponent.prototype.options;
+        /** @type {?} */
+        SelectInputComponent.prototype.optionLabel;
+        /** @type {?} */
+        SelectInputComponent.prototype.optionLabelFormat;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var StringInputComponent = /** @class */ (function (_super) {
+        __extends(StringInputComponent, _super);
+        function StringInputComponent() {
+            return _super.call(this) || this;
+        }
+        /**
+         * @return {?}
+         */
+        StringInputComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        StringInputComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'angular-ui-powerups-string-input',
+                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        StringInputComponent.ctorParameters = function () { return []; };
+        return StringInputComponent;
+    }(AbstractInputComponent));
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -855,126 +975,6 @@
         FocusBindingDirective.prototype.ngZone;
     }
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var StringInputComponent = /** @class */ (function (_super) {
-        __extends(StringInputComponent, _super);
-        function StringInputComponent() {
-            return _super.call(this) || this;
-        }
-        /**
-         * @return {?}
-         */
-        StringInputComponent.prototype.ngOnInit = /**
-         * @return {?}
-         */
-        function () {
-        };
-        StringInputComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-string-input',
-                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
-                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        StringInputComponent.ctorParameters = function () { return []; };
-        return StringInputComponent;
-    }(AbstractInputComponent));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PasswordInputComponent = /** @class */ (function (_super) {
-        __extends(PasswordInputComponent, _super);
-        function PasswordInputComponent() {
-            return _super.call(this) || this;
-        }
-        /**
-         * @return {?}
-         */
-        PasswordInputComponent.prototype.ngOnInit = /**
-         * @return {?}
-         */
-        function () {
-        };
-        PasswordInputComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-password-input',
-                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
-                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        PasswordInputComponent.ctorParameters = function () { return []; };
-        return PasswordInputComponent;
-    }(AbstractInputComponent));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @template T
-     */
-    var SelectInputComponent = /** @class */ (function (_super) {
-        __extends(SelectInputComponent, _super);
-        function SelectInputComponent() {
-            var _this = _super.call(this) || this;
-            _this.optionLabelFormat = (/**
-             * @param {?} option
-             * @return {?}
-             */
-            function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; });
-            return _this;
-        }
-        /**
-         * @return {?}
-         */
-        SelectInputComponent.prototype.ngOnInit = /**
-         * @return {?}
-         */
-        function () {
-        };
-        SelectInputComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-select-input',
-                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"valueModel\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value\" [value]=\"option\">{{optionLabelFormat(option)}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        SelectInputComponent.ctorParameters = function () { return []; };
-        SelectInputComponent.propDecorators = {
-            optionsModel: [{ type: core.Input }],
-            options: [{ type: core.Input }],
-            optionLabel: [{ type: core.Input }],
-            optionLabelFormat: [{ type: core.Input }]
-        };
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], SelectInputComponent.prototype, "optionsModel", void 0);
-        __decorate([
-            pectin.StoreInListModel('optionsModel'),
-            __metadata("design:type", Array)
-        ], SelectInputComponent.prototype, "options", void 0);
-        return SelectInputComponent;
-    }(AbstractInputComponent));
-    if (false) {
-        /** @type {?} */
-        SelectInputComponent.prototype.optionsModel;
-        /** @type {?} */
-        SelectInputComponent.prototype.options;
-        /** @type {?} */
-        SelectInputComponent.prototype.optionLabel;
-        /** @type {?} */
-        SelectInputComponent.prototype.optionLabelFormat;
-    }
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1048,7 +1048,7 @@
     /**
      * @template D, R, E
      */
-    exports.ɵr = /** @class */ (function () {
+    exports.ɵu = /** @class */ (function () {
         function ActivityOutletComponent(componentFactoryResolver, viewContainerRef, injector) {
             this.componentFactoryResolver = componentFactoryResolver;
             this.viewContainerRef = viewContainerRef;
@@ -1170,27 +1170,27 @@
     }());
     if (false) {
         /** @type {?} */
-        exports.ɵr.prototype.interactionContext;
+        exports.ɵu.prototype.interactionContext;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵr.prototype.activityComponentRef;
+        exports.ɵu.prototype.activityComponentRef;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵr.prototype.componentFactoryResolver;
+        exports.ɵu.prototype.componentFactoryResolver;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵr.prototype.viewContainerRef;
+        exports.ɵu.prototype.viewContainerRef;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵr.prototype.injector;
+        exports.ɵu.prototype.injector;
         /* Skipping unhandled member: ;*/
     }
     (function (ActivityOutletComponent) {
@@ -1251,7 +1251,7 @@
              */
             OutletInteractionContext.prototype.context;
         }
-    })(exports.ɵr || (exports.ɵr = {}));
+    })(exports.ɵu || (exports.ɵu = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1477,7 +1477,6 @@
             var _this = _super.call(this) || this;
             _this.confirm = confirm;
             pectin.assert.notNil(confirm);
-            console.log(confirm);
             return _this;
         }
         /**
@@ -1519,7 +1518,7 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.ɵq = /** @class */ (function (_super) {
+    exports.ɵt = /** @class */ (function (_super) {
         __extends(ActivityContainerComponent, _super);
         function ActivityContainerComponent() {
             var _this = _super.call(this) || this;
@@ -1630,7 +1629,6 @@
          */
         function () {
             var _this = this;
-            // TODO: notify selected tab they are ready.  activty.afterAnimationComplete
             this.activityTabs.value = this.activityTabs.value.filter((/**
              * @param {?} tab
              * @return {?}
@@ -1653,31 +1651,31 @@
             parentInteractionContext: [{ type: core.Input }],
             initialActivity: [{ type: core.Input }],
             tabs: [{ type: core.ViewChild, args: ['tabs', { static: true },] }],
-            outlets: [{ type: core.ViewChildren, args: [exports.ɵr,] }]
+            outlets: [{ type: core.ViewChildren, args: [exports.ɵu,] }]
         };
         return ActivityContainerComponent;
     }(DisposableComponent));
     if (false) {
         /** @type {?} */
-        exports.ɵq.prototype.parentInteractionContext;
+        exports.ɵt.prototype.parentInteractionContext;
         /** @type {?} */
-        exports.ɵq.prototype.initialActivity;
+        exports.ɵt.prototype.initialActivity;
         /** @type {?} */
-        exports.ɵq.prototype.tabs;
+        exports.ɵt.prototype.tabs;
         /** @type {?} */
-        exports.ɵq.prototype.outlets;
+        exports.ɵt.prototype.outlets;
         /** @type {?} */
-        exports.ɵq.prototype.activityTabs;
+        exports.ɵt.prototype.activityTabs;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵq.prototype.obsoleteTabs;
+        exports.ɵt.prototype.obsoleteTabs;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵq.prototype.lastActivityTab;
+        exports.ɵt.prototype.lastActivityTab;
     }
     (function (ActivityContainerComponent) {
         /**
@@ -1696,7 +1694,7 @@
             /** @type {?} */
             ActivityContext.prototype.onCancel;
         }
-    })(exports.ɵq || (exports.ɵq = {}));
+    })(exports.ɵt || (exports.ɵt = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1752,7 +1750,7 @@
                 autoFocus: false
             };
             /** @type {?} */
-            var matDialogRef = (/** @type {?} */ (this.dialogService.open(exports.ɵq, config)));
+            var matDialogRef = (/** @type {?} */ (this.dialogService.open(exports.ɵt, config)));
             return new Promise((/**
              * @param {?} resolve
              * @param {?} reject
@@ -1844,13 +1842,13 @@
                             portal.PortalModule
                         ],
                         declarations: [
-                            exports.ɵq,
+                            exports.ɵt,
                             ConfirmationDialogComponent,
                             AlertDialogComponent,
-                            exports.ɵr
+                            exports.ɵu
                         ],
                         entryComponents: [
-                            exports.ɵq,
+                            exports.ɵt,
                             ConfirmationDialogComponent,
                             AlertDialogComponent
                         ],
@@ -1938,88 +1936,175 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var ResolvedRouteParameterSnapshot = /** @class */ (function () {
-        function ResolvedRouteParameterSnapshot(parameters) {
-            this.parameters = parameters;
+    // TODO: there are really two types of snapshot, ones with id's and ones without.
+    // Id snapshot are repesented by 2 url segments
+    // ID => [{'/basePath', params}, {'id', params}]
+    // NO ID => [{'/basePath', params}]
+    exports.ParameterSnapshot = /** @class */ (function () {
+        function ParameterSnapshot(placeDefinition, resolved) {
+            this.placeDefinition = placeDefinition;
+            this.resolved = resolved;
         }
         /**
-         * @template T
-         * @param {?} parameter
+         * @param {?} other
          * @return {?}
          */
-        ResolvedRouteParameterSnapshot.prototype.get = /**
-         * @template T
-         * @param {?} parameter
+        ParameterSnapshot.prototype.hasChanged = /**
+         * @param {?} other
          * @return {?}
          */
-        function (parameter) {
+        function (other) {
             /** @type {?} */
-            var resolved = this.parameters.find((/**
-             * @param {?} p
+            var changed = this.resolved.find((/**
+             * @param {?} r
              * @return {?}
              */
-            function (p) { return p.parameterDef === parameter; }));
-            return resolved ? resolved.resolvedValue : null;
+            function (r) {
+                return !r.isSame(other.getResolvedParameterValue(r.parameterDef));
+            }));
+            if (changed) {
+                console.log({ mine: changed, theirs: other.getResolvedParameter(changed.parameterDef) });
+            }
+            return !!changed;
         };
         /**
-         * @template T
-         * @param {?} parameter
-         * @param {?} value
+         * @param {?} other
          * @return {?}
          */
-        ResolvedRouteParameterSnapshot.prototype.replace = /**
-         * @template T
-         * @param {?} parameter
-         * @param {?} value
+        ParameterSnapshot.prototype.asUrlSegment = /**
+         * @param {?} other
          * @return {?}
          */
-        function (parameter, value) {
-            return new ResolvedRouteParameterSnapshot(this.parameters.filter((/**
-             * @param {?} p
-             * @return {?}
+        function (other) {
+            pectin.assert.isTruthy(this.hasChanged(other));
+            /** @type {?} */
+            var routeParts = [];
+            /** @type {?} */
+            var gainedId = this.getFormattedRouteId() && !other.getFormattedRouteId();
+            /** @type {?} */
+            var sameId = this.getFormattedRouteId() === other.getFormattedRouteId();
+            /** @type {?} */
+            var lostId = (!this.getFormattedRouteId() && other.getFormattedRouteId());
+            /** @type {?} */
+            var changedId = (this.getFormattedRouteId() !== other.getFormattedRouteId());
+            if (lostId || changedId) {
+                routeParts.push('..');
+                if (changedId) {
+                    routeParts.push(this.getFormattedRouteId());
+                }
+            }
+            else {
+                routeParts.push('.');
+            }
+            routeParts.push(this.getFormattedParameters());
+            return routeParts;
+        };
+        /**
+         * @template T, S
+         * @param {?} parameterDef
+         * @return {?}
+         */
+        ParameterSnapshot.prototype.getResolvedParameter = /**
+         * @template T, S
+         * @param {?} parameterDef
+         * @return {?}
+         */
+        function (parameterDef) {
+            return this.resolved.find((/**
+             * @param {?} r
+             * @return {?}
              */
-            function (p) { return p.parameterDef !== parameter; })).concat({
-                parameterDef: parameter,
-                resolvedValue: value
-            }));
+            function (r) { return r.parameterDef === parameterDef; }));
+        };
+        /**
+         * @template T, S
+         * @param {?} parameterDef
+         * @return {?}
+         */
+        ParameterSnapshot.prototype.getResolvedParameterValue = /**
+         * @template T, S
+         * @param {?} parameterDef
+         * @return {?}
+         */
+        function (parameterDef) {
+            /** @type {?} */
+            var resolvedParameter = this.getResolvedParameter(parameterDef);
+            return resolvedParameter ? resolvedParameter.value : null;
         };
         /**
          * @return {?}
          */
-        ResolvedRouteParameterSnapshot.prototype.getFormattedRouteId = /**
+        ParameterSnapshot.prototype.getRouteId = /**
          * @return {?}
          */
         function () {
+            return this.getResolvedRouteId() ? this.getResolvedRouteId().value : null;
+        };
+        /**
+         * @param {?} name
+         * @return {?}
+         */
+        ParameterSnapshot.prototype.getRouteParameter = /**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
             /** @type {?} */
-            var routeIdParam = this.getRouteIdParam();
-            return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
+            var resolvedParameter = this.resolved.find((/**
+             * @param {?} r
+             * @return {?}
+             */
+            function (r) { return r.parameterDef.name === name; }));
+            return resolvedParameter ? resolvedParameter.value : null;
         };
         /**
          * @private
          * @return {?}
          */
-        ResolvedRouteParameterSnapshot.prototype.getRouteIdParam = /**
+        ParameterSnapshot.prototype.getResolvedRouteId = /**
          * @private
          * @return {?}
          */
         function () {
-            return this.parameters.find((/**
+            // 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.resolved.find((/**
              * @param {?} p
              * @return {?}
              */
-            function (p) { return p.parameterDef.isRouteId; }));
+            function (p) { return p.parameterDef.isRouteId; }))));
+        };
+        /**
+         * @return {?}
+         */
+        ParameterSnapshot.prototype.hasRouteId = /**
+         * @return {?}
+         */
+        function () {
+            return !!this.getResolvedRouteId();
+        };
+        /**
+         * @return {?}
+         */
+        ParameterSnapshot.prototype.getFormattedRouteId = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var routeIdParam = this.getResolvedRouteId();
+            return routeIdParam ? routeIdParam.formattedValue() : null;
         };
         /**
          * @return {?}
          */
-        ResolvedRouteParameterSnapshot.prototype.getFormattedParameters = /**
+        ParameterSnapshot.prototype.getFormattedParameters = /**
          * @return {?}
          */
         function () {
             /** @type {?} */
             var params = {};
             /** @type {?} */
-            var routeIdParam = this.parameters.filter((/**
+            var routeIdParam = this.resolved.filter((/**
              * @param {?} p
              * @return {?}
              */
@@ -2028,91 +2113,325 @@
              * @return {?}
              */
             function (p) {
-                params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
+                params[p.parameterDef.name] = p.formattedValue();
             }));
             return params;
         };
         /**
+         * @template T, S
+         * @param {?} parameter
+         * @param {?} value
          * @return {?}
          */
-        ResolvedRouteParameterSnapshot.prototype.hasRouteId = /**
+        ParameterSnapshot.prototype.replace = /**
+         * @template T, S
+         * @param {?} parameter
+         * @param {?} value
          * @return {?}
          */
-        function () {
-            return !!this.getRouteIdParam();
+        function (parameter, value) {
+            return new ParameterSnapshot(this.placeDefinition, this.resolved.map((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) {
+                return p.parameterDef === parameter ? p.replace(value) : p;
+            })));
+        };
+        /**
+         * @param {?} url
+         * @return {?}
+         */
+        ParameterSnapshot.prototype.updateUrl = /**
+         * @param {?} url
+         * @return {?}
+         */
+        function (url) {
+            return url;
         };
+        var _a;
         __decorate([
-            pectin.Trace(),
+            src.Memoize(),
             __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], ResolvedRouteParameterSnapshot.prototype, "getFormattedRouteId", null);
+            __metadata("design:paramtypes", [Object]),
+            __metadata("design:returntype", ParameterSnapshot.ResolvedParameter)
+        ], ParameterSnapshot.prototype, "getResolvedParameter", null);
         __decorate([
-            pectin.Trace(),
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Object]),
+            __metadata("design:returntype", typeof (_a = typeof S !== "undefined" && S) === "function" ? _a : Object)
+        ], ParameterSnapshot.prototype, "getResolvedParameterValue", null);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [String]),
+            __metadata("design:returntype", Object)
+        ], ParameterSnapshot.prototype, "getRouteParameter", null);
+        __decorate([
+            src.Memoize(),
             __metadata("design:type", Function),
             __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], ResolvedRouteParameterSnapshot.prototype, "getFormattedParameters", null);
-        return ResolvedRouteParameterSnapshot;
+            __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
+        ], ParameterSnapshot.prototype, "getResolvedRouteId", null);
+        return ParameterSnapshot;
     }());
     if (false) {
         /** @type {?} */
-        ResolvedRouteParameterSnapshot.prototype.parameters;
+        exports.ParameterSnapshot.prototype.placeDefinition;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.ParameterSnapshot.prototype.resolved;
     }
+    (function (ParameterSnapshot) {
+        /**
+         * @param {?} placeDef
+         * @param {?} paramMap
+         * @return {?}
+         */
+        function create(placeDef, paramMap) {
+            /** @type {?} */
+            var resolvedParameters = placeDef.getRouteParameters()
+                .map((/**
+             * @param {?} def
+             * @return {?}
+             */
+            function (def) {
+                if (def.isArray) {
+                    /** @type {?} */
+                    var value = paramMap.has(def.name) ? paramMap.getAll(def.name).map((/**
+                     * @param {?} raw
+                     * @return {?}
+                     */
+                    function (raw) { return def.type.parse(raw); })) : null;
+                    return new ResolvedArrayParameter(def, value);
+                }
+                else {
+                    /** @type {?} */
+                    var value = paramMap.has(def.name) ? def.type.parse(paramMap.get(def.name)) : null;
+                    return new ResolvedValueParameter(def, value);
+                }
+            }));
+            return new ParameterSnapshot(placeDef, resolvedParameters);
+        }
+        ParameterSnapshot.create = create;
+        /**
+         * @abstract
+         * @template T, S
+         */
+        var /**
+         * @abstract
+         * @template T, S
+         */
+        ResolvedParameter = /** @class */ (function () {
+            function ResolvedParameter(parameterDef, value) {
+                this.parameterDef = parameterDef;
+                this.value = value;
+            }
+            /**
+             * @return {?}
+             */
+            ResolvedParameter.prototype.isRouteId = /**
+             * @return {?}
+             */
+            function () {
+                return this.parameterDef.isRouteId;
+            };
+            return ResolvedParameter;
+        }());
+        ParameterSnapshot.ResolvedParameter = ResolvedParameter;
+        if (false) {
+            /** @type {?} */
+            ResolvedParameter.prototype.parameterDef;
+            /** @type {?} */
+            ResolvedParameter.prototype.value;
+            /**
+             * @abstract
+             * @param {?} dest
+             * @return {?}
+             */
+            ResolvedParameter.prototype.injectRouteParam = function (dest) { };
+            /**
+             * @abstract
+             * @param {?} otherValue
+             * @return {?}
+             */
+            ResolvedParameter.prototype.isSame = function (otherValue) { };
+            /**
+             * @abstract
+             * @return {?}
+             */
+            ResolvedParameter.prototype.formattedValue = function () { };
+            /**
+             * @abstract
+             * @param {?} value
+             * @return {?}
+             */
+            ResolvedParameter.prototype.replace = function (value) { };
+        }
+        /**
+         * @template T
+         */
+        var ResolvedValueParameter = /** @class */ (function (_super) {
+            __extends(ResolvedValueParameter, _super);
+            function ResolvedValueParameter() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            /**
+             * @param {?} otherValue
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.isSame = /**
+             * @param {?} otherValue
+             * @return {?}
+             */
+            function (otherValue) {
+                return this.value === otherValue;
+            };
+            /**
+             * @param {?} dest
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.injectRouteParam = /**
+             * @param {?} dest
+             * @return {?}
+             */
+            function (dest) {
+                dest[this.parameterDef.name] = this.parameterDef.type.format(this.value);
+            };
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.replace = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return new ResolvedValueParameter(this.parameterDef, value);
+            };
+            /**
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.formattedValue = /**
+             * @return {?}
+             */
+            function () {
+                return !lodash.isNil(this.value) ? this.parameterDef.type.format(this.value) : null;
+            };
+            __decorate([
+                pectin.Trace(),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", [Object]),
+                __metadata("design:returntype", Boolean)
+            ], ResolvedValueParameter.prototype, "isSame", null);
+            return ResolvedValueParameter;
+        }(ResolvedParameter));
+        ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
+        /**
+         * @template T
+         */
+        var ResolvedArrayParameter = /** @class */ (function (_super) {
+            __extends(ResolvedArrayParameter, _super);
+            function ResolvedArrayParameter() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            /**
+             * @param {?} otherValue
+             * @return {?}
+             */
+            ResolvedArrayParameter.prototype.isSame = /**
+             * @param {?} otherValue
+             * @return {?}
+             */
+            function (otherValue) {
+                return lodash.isEqual(this.value, otherValue);
+            };
+            /**
+             * @param {?} dest
+             * @return {?}
+             */
+            ResolvedArrayParameter.prototype.injectRouteParam = /**
+             * @param {?} dest
+             * @return {?}
+             */
+            function (dest) {
+                var _this = this;
+                dest[this.parameterDef.name] = this.value.map((/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                function (v) { return _this.parameterDef.type.format(v); }));
+            };
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            ResolvedArrayParameter.prototype.replace = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return new ResolvedArrayParameter(this.parameterDef, value);
+            };
+            /**
+             * @return {?}
+             */
+            ResolvedArrayParameter.prototype.formattedValue = /**
+             * @return {?}
+             */
+            function () {
+                var _this = this;
+                return this.value ? this.value.map((/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                function (v) { return _this.parameterDef.type.format(v); })) : [];
+            };
+            __decorate([
+                pectin.Trace(),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", [Array]),
+                __metadata("design:returntype", Boolean)
+            ], ResolvedArrayParameter.prototype, "isSame", null);
+            return ResolvedArrayParameter;
+        }(ResolvedParameter));
+        ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
+    })(exports.ParameterSnapshot || (exports.ParameterSnapshot = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.RouteParameterBindings = /** @class */ (function (_super) {
-        __extends(RouteParameterBindings, _super);
-        function RouteParameterBindings(component, placeService) {
+    // 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(activatedRoute, placeService) {
             var _this = _super.call(this) || this;
-            _this.component = component;
+            _this.activatedRoute = activatedRoute;
             _this._incomingRouteChange = new pectin.MutableValueModel(false);
             _this.resolvedParameters = 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;
-            _this.txo = new pectin.TransactionObserver(); //.onEvent(e => console.log(e.toString()));
-            //.onEvent(e => console.log(e.toString()));
-            /** @type {?} */
-            var routeParameterDefs = typescriptUtilities.Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-            routeParameterDefs.forEach((/**
-             * @param {?} parameter
+            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.placeDefinition.getRouteParameters().forEach((/**
+             * @param {?} p
              * @return {?}
              */
-            function (parameter) { return _this.installBinding(parameter); }));
-            /** @type {?} */
-            var incomingResolvedRouteParameters = observe.valuesFrom(component.activatedRoute.paramMap)
+            function (p) { return _this.installBinding(p); }));
+            observe.valuesFrom(activatedRoute.paramMap)
                 .last()
                 .map((/**
              * @param {?} params
              * @return {?}
              */
-            function (params) {
-                /** @type {?} */
-                var result = [];
-                routeParameterDefs.forEach((/**
-                 * @param {?} parameterDef
-                 * @return {?}
-                 */
-                function (parameterDef) {
-                    /** @type {?} */
-                    var resolvedValue;
-                    if (parameterDef.isArray) {
-                        resolvedValue = params.getAll(parameterDef.name).map((/**
-                         * @param {?} v
-                         * @return {?}
-                         */
-                        function (v) { return parameterDef.type.parse(v); }));
-                    }
-                    else {
-                        resolvedValue = parameterDef.type.parse(params.get(parameterDef.name));
-                    }
-                    result.push({ parameterDef: parameterDef, resolvedValue: resolvedValue });
-                }));
-                return new ResolvedRouteParameterSnapshot(result);
-            }));
-            incomingResolvedRouteParameters.subscribe((/**
+            function (params) { return exports.ParameterSnapshot.create(_this.placeDefinition, params); }))
+                .subscribe((/**
              * @param {?} resolvedParameters
              * @return {?}
              */
@@ -2128,17 +2447,15 @@
              */
             function (params, previous) {
                 placeService.notifyRouteParametersChanged({
-                    placeComponent: component,
+                    activatedRoute: _this.activatedRoute,
                     next: params,
                     previous: previous,
                     updateRoute: !_this.incomingRouteChange.value // we update the route if it's a component triggered change.
                 });
             }));
-            _this.txo.observe('incomingResolvedRouteParameters', incomingResolvedRouteParameters);
-            _this.txo.observe('this.routeIsChanging', _this.incomingRouteChange);
             return _this;
         }
-        Object.defineProperty(RouteParameterBindings.prototype, "incomingRouteChange", {
+        Object.defineProperty(PlaceComponent.prototype, "incomingRouteChange", {
             get: /**
              * @return {?}
              */
@@ -2149,28 +2466,28 @@
             configurable: true
         });
         /**
-         * @protected
-         * @template T
-         * @param {?} parameter
+         * @private
+         * @template T, S
+         * @param {?} parameterDef
          * @return {?}
          */
-        RouteParameterBindings.prototype.installBinding = /**
-         * @protected
-         * @template T
-         * @param {?} parameter
+        PlaceComponent.prototype.installBinding = /**
+         * @private
+         * @template T, S
+         * @param {?} parameterDef
          * @return {?}
          */
-        function (parameter) {
+        function (parameterDef) {
             /** @type {?} */
-            var model = this.getModelFor(parameter);
-            // this.txo.observe(parameter.propertyName, model);
+            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.get(parameter);
+                    return parameters.getResolvedParameterValue(parameterDef);
                 },
                 toLeft: /**
                  * @param {?} value
@@ -2178,66 +2495,11 @@
                  * @return {?}
                  */
                 function (value, currentParameters) {
-                    return currentParameters.replace(parameter, value);
+                    return currentParameters.replace(parameterDef, value);
                 }
             }));
         };
-        /**
-         * @private
-         * @template T
-         * @param {?} parameter
-         * @return {?}
-         */
-        RouteParameterBindings.prototype.getModelFor = /**
-         * @private
-         * @template T
-         * @param {?} parameter
-         * @return {?}
-         */
-        function (parameter) {
-            return this.component[parameter.propertyName];
-        };
-        return RouteParameterBindings;
-    }(pectin.GarbageCollector));
-    if (false) {
-        /** @type {?} */
-        exports.RouteParameterBindings.prototype._incomingRouteChange;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.RouteParameterBindings.prototype.txo;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.RouteParameterBindings.prototype.resolvedParameters;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.RouteParameterBindings.prototype.component;
-    }
-    (function (RouteParameterBindings) {
-        RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-    })(exports.RouteParameterBindings || (exports.RouteParameterBindings = {}));
-
-    /**
-     * @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';
-    exports.PlaceComponent = /** @class */ (function (_super) {
-        __extends(PlaceComponent, _super);
-        function PlaceComponent(activatedRoute, placeService) {
-            var _this = _super.call(this) || this;
-            _this.activatedRoute = activatedRoute;
-            _this.routeBindingMediator = _this.registerDisposable(new exports.RouteParameterBindings(_this, placeService));
-            return _this;
-        }
-        Object.defineProperty(PlaceComponent.prototype, "placeConfig", {
+        Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
             get: /**
              * @return {?}
              */
@@ -2256,10 +2518,14 @@
         function () {
             return true;
         };
+        // @Trace()
+        // @Trace()
         /**
          * @return {?}
          */
-        PlaceComponent.prototype.onPlaceReady = /**
+        PlaceComponent.prototype.onPlaceReady = 
+        // @Trace()
+        /**
          * @return {?}
          */
         function () {
@@ -2268,21 +2534,17 @@
             fastMemoizeDecorator.Memoize(),
             __metadata("design:type", PlaceComponent.Definition),
             __metadata("design:paramtypes", [])
-        ], PlaceComponent.prototype, "placeConfig", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], PlaceComponent.prototype, "onPlaceReady", null);
+        ], PlaceComponent.prototype, "placeDefinition", null);
         return PlaceComponent;
     }(DisposableComponent));
     if (false) {
+        /** @type {?} */
+        exports.PlaceComponent.prototype._incomingRouteChange;
         /**
          * @type {?}
          * @private
          */
-        exports.PlaceComponent.prototype.routeBindingMediator;
+        exports.PlaceComponent.prototype.resolvedParameters;
         /** @type {?} */
         exports.PlaceComponent.prototype.activatedRoute;
     }
@@ -2295,17 +2557,31 @@
                 this.order = options.order;
                 this.data = options.data;
                 this.authenticate = lodash.isNil(options.authenticate) || options.authenticate;
+                this.children = (options.children || []).map((/**
+                 * @param {?} c
+                 * @return {?}
+                 */
+                function (c) { return PlaceComponent.getDefinition(c).component; }));
             }
             /**
-             * @param {?} construcable
+             * @return {?}
+             */
+            Definition.prototype.getRouteParameters = /**
+             * @return {?}
+             */
+            function () {
+                return typescriptUtilities.Klass.get(this.component).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
+            };
+            /**
+             * @param {?} constructable
              * @return {?}
              */
             Definition.prototype.isDescriptorForType = /**
-             * @param {?} construcable
+             * @param {?} constructable
              * @return {?}
              */
-            function (construcable) {
-                return pectin.lang.constructorChain(construcable).includes(PlaceComponent);
+            function (constructable) {
+                return pectin.lang.constructorChain(constructable).includes(PlaceComponent);
             };
             /**
              * @param {?} placeComponent
@@ -2362,6 +2638,12 @@
                     return defaultValue;
                 }
             };
+            __decorate([
+                fastMemoizeDecorator.Memoize(),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", []),
+                __metadata("design:returntype", Array)
+            ], Definition.prototype, "getRouteParameters", null);
             return Definition;
         }());
         PlaceComponent.Definition = Definition;
@@ -2375,6 +2657,8 @@
             /** @type {?} */
             Definition.prototype.data;
             /** @type {?} */
+            Definition.prototype.children;
+            /** @type {?} */
             Definition.prototype.component;
         }
         /**
@@ -2391,15 +2675,24 @@
             Options.prototype.data;
             /** @type {?|undefined} */
             Options.prototype.authenticate;
+            /** @type {?|undefined} */
+            Options.prototype.children;
+        }
+        /**
+         * @record
+         */
+        function ChildOptions() { }
+        PlaceComponent.ChildOptions = ChildOptions;
+        if (false) {
+            /** @type {?} */
+            ChildOptions.prototype.parent;
         }
         /**
          * @param {?} klass
          * @return {?}
          */
         function getDefinition(klass) {
-            /** @type {?} */
-            var placeOptions = Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
-            return new Definition(klass, placeOptions);
+            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
         }
         PlaceComponent.getDefinition = getDefinition;
         /**
@@ -2408,20 +2701,157 @@
          * @return {?}
          */
         function injectDefinition(klass, options) {
-            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, options, klass);
+            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, new Definition(klass, options), 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
+             * @return {?}
+             */
+            function (c) { return exports.PlaceComponent.getDefinition(c); }));
+            return _this;
+        }
+        /**
+         * @param {?} placeDef
+         * @return {?}
+         */
+        AbstractPlaceNavigationComponent.prototype.getNav = /**
+         * @param {?} placeDef
+         * @return {?}
+         */
+        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); })
+            };
+        };
+        /**
+         * @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.PlaceComponent.Definition]),
+            __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;
+    }
+
+    /**
+     * @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;
+        }
+        /**
+         * @return {?}
+         */
+        ListPlaceNavComponent.prototype.expandMenu = /**
+         * @return {?}
+         */
+        function () {
+            this.expanded = true;
+        };
+        /**
+         * @return {?}
+         */
+        ListPlaceNavComponent.prototype.collapseMenu = /**
+         * @return {?}
+         */
+        function () {
+            this.expanded = false;
+        };
+        /**
+         * @return {?}
+         */
+        ListPlaceNavComponent.prototype.toggleMenu = /**
+         * @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',] }]
+        };
+        return ListPlaceNavComponent;
+    }(AbstractPlaceNavigationComponent));
+    if (false) {
+        /** @type {?} */
+        ListPlaceNavComponent.prototype.expanded;
+    }
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var PlaceService = /** @class */ (function (_super) {
         __extends(PlaceService, _super);
-        function PlaceService(router) {
+        function PlaceService(router, injector) {
             var _this = _super.call(this) || this;
             _this.router = router;
+            _this.injector = injector;
             _this._activePlaces = new pectin.MutableListModel();
             return _this;
         }
@@ -2435,33 +2865,45 @@
             enumerable: true,
             configurable: true
         });
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} place
          * @return {?}
          */
-        PlaceService.prototype.onActivate = /**
+        PlaceService.prototype.onActivate = 
+        // @Trace()
+        /**
          * @param {?} place
          * @return {?}
          */
         function (place) {
             this._activePlaces.push(place);
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} place
          * @return {?}
          */
-        PlaceService.prototype.onDeactivate = /**
+        PlaceService.prototype.onDeactivate = 
+        // @Trace()
+        /**
          * @param {?} place
          * @return {?}
          */
         function (place) {
             this._activePlaces.remove(place);
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} params
          * @return {?}
          */
-        PlaceService.prototype.notifyRouteParametersChanged = /**
+        PlaceService.prototype.notifyRouteParametersChanged = 
+        // @Trace()
+        /**
          * @param {?} params
          * @return {?}
          */
@@ -2475,10 +2917,29 @@
                 /** @type {?} */
                 var path = routeId ? [relativePath, routeId, params.next.getFormattedParameters()] : [relativePath, params.next.getFormattedParameters()];
                 this.router.navigate(path, {
-                    relativeTo: params.placeComponent.activatedRoute
+                    relativeTo: params.activatedRoute
                 });
             }
         };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        PlaceService.prototype.sanitise = 
+        // @Trace()
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        function (snapshot) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, snapshot];
+                });
+            });
+        };
         PlaceService.decorators = [
             { type: core.Injectable, args: [{
                         providedIn: 'root'
@@ -2486,27 +2947,10 @@
         ];
         /** @nocollapse */
         PlaceService.ctorParameters = function () { return [
-            { type: router.Router }
+            { type: router.Router },
+            { type: core.Injector }
         ]; };
-        /** @nocollapse */ PlaceService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(core.ɵɵinject(router.Router)); }, token: PlaceService, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.PlaceComponent]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "onActivate", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.PlaceComponent]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "onDeactivate", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "notifyRouteParametersChanged", null);
+        /** @nocollapse */ PlaceService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR)); }, token: PlaceService, providedIn: "root" });
         return PlaceService;
     }(pectin.GarbageCollector));
     if (false) {
@@ -2520,6 +2964,11 @@
          * @protected
          */
         PlaceService.prototype.router;
+        /**
+         * @type {?}
+         * @protected
+         */
+        PlaceService.prototype.injector;
     }
 
     /**
@@ -2562,20 +3011,66 @@
             })
         ])
     ];
+    /**
+     * @param {?} duration
+     * @return {?}
+     */
+    function leftRightPlaceAnimation(duration) {
+        return animations$1.trigger('routeAnimations', [
+            animations$1.transition(':increment', right, { params: { duration: duration } }),
+            animations$1.transition(':decrement', left, { params: { duration: duration } })
+        ]);
+    }
     /** @type {?} */
-    var LEFT_RIGHT_PLACE_ANIMATION = animations$1.trigger('routeAnimations', [
-        animations$1.transition(':increment', right, { params: { duration: '.3s' } }),
-        animations$1.transition(':decrement', left, { params: { duration: '.3s' } })
-    ]);
+    var LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation("0.3s");
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var PlaceOutletComponent = /** @class */ (function () {
-        function PlaceOutletComponent(placeService) {
-            this.placeService = placeService;
-            this.animate = true;
+    var PlaceOutletComponent = /** @class */ (function (_super) {
+        __extends(PlaceOutletComponent, _super);
+        function PlaceOutletComponent(placeService, activatedRoute) {
+            var _this = _super.call(this) || this;
+            _this.placeService = placeService;
+            _this.activatedRoute = activatedRoute;
+            _this.animate = true;
+            _this.outletUrlSegment = 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.myPath = observe.listsFrom(activatedRoute.url).last().map((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) { return s.toString(); })).reduce((/**
+             * @param {?} bits
+             * @return {?}
+             */
+            function (bits) { return bits.join(','); }));
+            console.log("new outlet@(" + _this.myPath.value + ")");
+            _this.outletChildPath = chain(_this.outletUrlSegment).map((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) { return s.toString(); })).reduce((/**
+             * @param {?} bits
+             * @return {?}
+             */
+            function (bits) { return bits.join(","); }));
+            _this.state = chain(_this.myPath).map((/**
+             * @param {?} path
+             * @return {?}
+             */
+            function (path) {
+                return "outlet@(" + path + "), child path->" + _this.outletChildPath.value;
+            }), { dependsOn: _this.outletChildPath });
+            when.valueOf(_this.state).changes((/**
+             * @param {?} debug
+             * @return {?}
+             */
+            function (debug) {
+                console.log("Outlet Changed -> " + debug);
+            }));
+            return _this;
         }
         /**
          * @return {?}
@@ -2585,26 +3080,71 @@
          */
         function () {
         };
+        /**
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.ngAfterViewInit = /**
+         * @return {?}
+         */
+        function () {
+            // this.routerOutLetQuery.changes.subscribe(() => {
+            //   this.updateRouterOutlet(this.routerOutLetQuery.first);
+            // });
+        };
+        /**
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.ngAfterViewChecked = /**
+         * @return {?}
+         */
+        function () {
+            // console.log(`@AfterViewChecked: ${this.state.value}`);
+            this.updateRouterOutlet(this.routerOutLetQuery.first);
+        };
+        // @Trace()
+        // ngOnDestroy(): void {
+        //   console.log('outletSegments', this.outletUrlSegment.value);
+        //   console.log('mySegments', this.myPath.value);
+        //   super.ngOnDestroy();
+        // }
+        // @Trace()
+        // @Trace()
+        // ngOnDestroy(): void {
+        //   console.log('outletSegments', this.outletUrlSegment.value);
+        //   console.log('mySegments', this.myPath.value);
+        //   super.ngOnDestroy();
+        // }
+        // @Trace()
         /**
          * @param {?} $event
          * @return {?}
          */
-        PlaceOutletComponent.prototype.onActivate = /**
+        PlaceOutletComponent.prototype.onOutletActivated = 
+        // @Trace()
+        // ngOnDestroy(): void {
+        //   console.log('outletSegments', this.outletUrlSegment.value);
+        //   console.log('mySegments', this.myPath.value);
+        //   super.ngOnDestroy();
+        // }
+        // @Trace()
+        /**
          * @param {?} $event
          * @return {?}
          */
         function ($event) {
+            // console.log(this.routerOutLet.activatedRoute.snapshot.url);
             this.currentPlace = $event;
             this.placeService.onActivate($event);
             if (!this.animate) {
-                this.notifyPlaceReady();
+                // we're not animating so trigger any post animation callbacks now.
+                this.animationDone();
             }
         };
         /**
          * @param {?} $event
          * @return {?}
          */
-        PlaceOutletComponent.prototype.onDeactivate = /**
+        PlaceOutletComponent.prototype.onOutletDeactivated = /**
          * @param {?} $event
          * @return {?}
          */
@@ -2630,44 +3170,53 @@
          * @return {?}
          */
         function () {
-            this.notifyPlaceReady();
+            if (this.currentPlace) {
+                this.currentPlace.onPlaceReady();
+            }
         };
+        // @Trace()
+        // @Trace()
         /**
          * @private
+         * @param {?} first
          * @return {?}
          */
-        PlaceOutletComponent.prototype.notifyPlaceReady = /**
+        PlaceOutletComponent.prototype.updateRouterOutlet = 
+        // @Trace()
+        /**
          * @private
+         * @param {?} first
          * @return {?}
          */
-        function () {
-            if (this.currentPlace) {
-                this.currentPlace.onPlaceReady();
+        function (first) {
+            if (first.isActivated) {
+                this.outletUrlSegment.value = first.activatedRoute.snapshot.url;
             }
         };
         PlaceOutletComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'angular-ui-powerups-place-outlet',
-                        template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onActivate($event)\"\n                 (deactivate)=\"onDeactivate($event)\">\n  </router-outlet>\n</div>\n\n",
+                        template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated($event)\"\n                 (deactivate)=\"onOutletDeactivated($event)\">\n  </router-outlet>\n</div>\n\n",
                         animations: [LEFT_RIGHT_PLACE_ANIMATION],
                         styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
                     }] }
         ];
         /** @nocollapse */
         PlaceOutletComponent.ctorParameters = function () { return [
-            { type: PlaceService }
+            { type: PlaceService },
+            { type: router.ActivatedRoute }
         ]; };
         PlaceOutletComponent.propDecorators = {
             animate: [{ type: core.Input }],
-            routerOutLet: [{ type: core.ViewChild, args: ['routerOutlet', { static: false },] }]
+            routerOutLetQuery: [{ type: core.ViewChildren, args: [router.RouterOutlet,] }]
         };
         return PlaceOutletComponent;
-    }());
+    }(DisposableComponent));
     if (false) {
         /** @type {?} */
         PlaceOutletComponent.prototype.animate;
         /** @type {?} */
-        PlaceOutletComponent.prototype.routerOutLet;
+        PlaceOutletComponent.prototype.routerOutLetQuery;
         /**
          * @type {?}
          * @private
@@ -2677,64 +3226,54 @@
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.placeService;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
-        __extends(TabbedPlaceNavigationComponent, _super);
-        function TabbedPlaceNavigationComponent() {
-            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.orderedPlaces = chain(_this.placesModel).map((/**
-             * @param {?} c
-             * @return {?}
-             */
-            function (c) { return exports.PlaceComponent.getDefinition(c); })).sortBy('order');
-            return _this;
-        }
+        PlaceOutletComponent.prototype.myPath;
         /**
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        TabbedPlaceNavigationComponent.prototype.ngOnInit = /**
-         * @return {?}
+        PlaceOutletComponent.prototype.outletUrlSegment;
+        /**
+         * @type {?}
+         * @private
          */
-        function () {
-        };
+        PlaceOutletComponent.prototype.outletChildPath;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype.state;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype.placeService;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype.activatedRoute;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
+        __extends(TabbedPlaceNavigationComponent, _super);
+        function TabbedPlaceNavigationComponent() {
+            return _super.call(this) || this;
+        }
         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 placeDescriptor of orderedPlaces.value\"\n     [routerLink]='placeDescriptor.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"placeDescriptor.searchData(['navTooltip', 'navTitle'])\">\n    <mat-icon *ngIf=\"placeDescriptor.getData('navIcon')\">{{placeDescriptor.getData('navIcon')}}</mat-icon>\n    <span>{{placeDescriptor.getData(\"navTitle\", 'missing @Place({data: {navTitle: ??}\\})')}}</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     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: [""]
                     }] }
         ];
         /** @nocollapse */
         TabbedPlaceNavigationComponent.ctorParameters = function () { return []; };
-        TabbedPlaceNavigationComponent.propDecorators = {
-            places: [{ type: core.Input }],
-            placesModel: [{ type: core.Input }]
-        };
-        __decorate([
-            pectin.StoreInListModel('placesModel'),
-            __metadata("design:type", Array)
-        ], TabbedPlaceNavigationComponent.prototype, "places", void 0);
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], TabbedPlaceNavigationComponent.prototype, "placesModel", void 0);
         return TabbedPlaceNavigationComponent;
-    }(DisposableComponent));
-    if (false) {
-        /** @type {?} */
-        TabbedPlaceNavigationComponent.prototype.places;
-        /** @type {?} */
-        TabbedPlaceNavigationComponent.prototype.placesModel;
-        /** @type {?} */
-        TabbedPlaceNavigationComponent.prototype.orderedPlaces;
-    }
+    }(AbstractPlaceNavigationComponent));
 
     /**
      * @fileoverview added by tsickle
@@ -2759,14 +3298,16 @@
                             EmptyStateComponent,
                             BusyOverlayComponent,
                             PlaceOutletComponent,
-                            TabbedPlaceNavigationComponent
+                            TabbedPlaceNavigationComponent,
+                            ListPlaceNavComponent
                         ],
                         entryComponents: [BusyOverlayComponent],
                         exports: [
                             BusyOverlayComponent,
                             PlaceOutletComponent,
                             EmptyStateComponent,
-                            TabbedPlaceNavigationComponent
+                            TabbedPlaceNavigationComponent,
+                            ListPlaceNavComponent
                         ],
                         providers: [
                             PlaceService
@@ -2791,16 +3332,16 @@
                             NumberInputComponent,
                             StringInputComponent,
                             PasswordInputComponent,
-                            SelectInputComponent,
+                            SelectInputComponent
                         ],
                         imports: [
                             common.CommonModule,
-                            platformBrowser.BrowserModule,
                             animations.BrowserAnimationsModule,
                             forms.FormsModule,
                             material.MatInputModule,
                             material.MatFormFieldModule,
                             material.MatSelectModule,
+                            tabs.MatTabsModule,
                             PlaceModule,
                             InteractionModule
                         ],
@@ -2812,7 +3353,7 @@
                             PasswordInputComponent,
                             SelectInputComponent,
                             InteractionModule,
-                            PlaceModule,
+                            PlaceModule
                         ]
                     },] }
         ];
@@ -3193,14 +3734,37 @@
     /**
      * @record
      */
-    function IPlaceComponent() { }
+    function NavItem() { }
+    if (false) {
+        /**
+         * @return {?}
+         */
+        NavItem.prototype.title = function () { };
+        /**
+         * @return {?}
+         */
+        NavItem.prototype.icon = function () { };
+        /**
+         * @return {?}
+         */
+        NavItem.prototype.tooltip = function () { };
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function PlaceComponentLike() { }
     if (false) {
         /** @type {?} */
-        IPlaceComponent.prototype.activatedRoute;
+        PlaceComponentLike.prototype.activatedRoute;
         /**
          * @return {?}
          */
-        IPlaceComponent.prototype.onPlaceReady = function () { };
+        PlaceComponentLike.prototype.onPlaceReady = function () { };
     }
 
     /**
@@ -3210,13 +3774,13 @@
     /**
      * @record
      */
-    function IPlaceService() { }
+    function PlaceUpdatesService() { }
     if (false) {
         /**
          * @param {?} params
          * @return {?}
          */
-        IPlaceService.prototype.notifyRouteParametersChanged = function (params) { };
+        PlaceUpdatesService.prototype.notifyRouteParametersChanged = function (params) { };
     }
 
     /**
@@ -3240,6 +3804,28 @@
         });
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function Visit() { }
+    if (false) {
+        /** @type {?} */
+        Visit.prototype.placeDefinition;
+        /**
+         * @return {?}
+         */
+        Visit.prototype.getRouteId = function () { };
+        /**
+         * @param {?} name
+         * @return {?}
+         */
+        Visit.prototype.getRouteParameter = function (name) { };
+    }
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -3264,7 +3850,24 @@
          * @return {?}
          */
         function (component, currentRoute, currentState, nextState) {
-            return component.canDeactivate();
+            // HACK: this will break with child routes...
+            /** @type {?} */
+            var path = "/" + component.placeDefinition.path;
+            console.log({
+                placePath: path,
+                currentRoute: currentRoute.toString(),
+                currentStateUrl: currentState.url,
+                nextStateUrl: nextState.url,
+                currentStateUrlTree: this.router.parseUrl(currentState.url).root.children[router.PRIMARY_OUTLET].segments,
+                nextStateUrlTree: this.router.parseUrl(nextState.url).root.children[router.PRIMARY_OUTLET].segments
+            });
+            // nextState is the full path...
+            if (!nextState.url.startsWith(path)) {
+                return component.canDeactivate();
+            }
+            else {
+                return true;
+            }
         };
         LeavePlaceGuard.decorators = [
             { type: core.Injectable, args: [{
@@ -3296,777 +3899,906 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    var PlaceRouteGuard = /** @class */ (function () {
+        function PlaceRouteGuard(placeService, router) {
+            this.placeService = placeService;
+            this.router = router;
+        }
+        /**
+         * @param {?} route
+         * @param {?} state
+         * @return {?}
+         */
+        PlaceRouteGuard.prototype.canActivate = /**
+         * @param {?} route
+         * @param {?} state
+         * @return {?}
+         */
+        function (route, state) {
+            // Implement this when adding child routes.
+            // TODO: there are really two types of snapshot, ones with id's and ones without.
+            // Id snapshot are repesented by 2 url segments
+            // ID => [{'/basePath', params}, {'id', params}]
+            // NO ID => [{'/basePath', params}]
+            // console.log({urlSegments: route.url});
+            // const snapshot = ParameterSnapshot.create(PlaceComponent.getDefinition(route.component as Constructable<PlaceComponent>), route.paramMap);
+            // return this.placeService.sanitise(snapshot).then(sanitised => {
+            //   if (sanitised.hasChanged(snapshot)) {
+            //     return this.router.createUrlTree(snapshot.updateUrl(route.url))
+            //   } else {
+            //     return true;
+            //   }
+            // });
+            return true;
+        };
+        PlaceRouteGuard.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceRouteGuard.ctorParameters = function () { return [
+            { type: PlaceService },
+            { type: router.Router }
+        ]; };
+        /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(core.ɵɵinject(PlaceService), core.ɵɵinject(router.Router)); }, token: PlaceRouteGuard, providedIn: "root" });
+        return PlaceRouteGuard;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceRouteGuard.prototype.placeService;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceRouteGuard.prototype.router;
+    }
+
     /**
-     * @abstract
-     * @template T, S
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-      /**
-     * @abstract
+    /**
      * @template T, S
      */
-    exports.Sanitiser = /** @class */ (function () {
-        function Sanitiser(parameterDef, snapshot, sanitiser) {
-            this.parameterDef = parameterDef;
-            this.snapshot = snapshot;
-            this.sanitiser = sanitiser;
+    var DefaultParameterSanitiser = /** @class */ (function () {
+        function DefaultParameterSanitiser(def, placeService, options) {
+            this.def = def;
+            this.placeService = placeService;
+            this.remember = lodash.isNil(options.remember) ? false : options.remember;
+            this.defaultValue = lodash.isNil(options.defaultValue) ? null : options.defaultValue;
         }
         /**
+         * @param {?} value
+         * @param {?} visit
          * @return {?}
          */
-        Sanitiser.prototype.isRouteId = /**
+        DefaultParameterSanitiser.prototype.sanitise = /**
+         * @param {?} value
+         * @param {?} visit
          * @return {?}
          */
-        function () {
-            return this.parameterDef.isRouteId;
+        function (value, visit) {
+            if (this.isBlank(value)) {
+                if (this.remember) {
+                    // value = null;
+                }
+                return this.isBlank(value) && !lodash.isNil(this.defaultValue) ? this.defaultValue : value;
+            }
+            else {
+                return value;
+            }
         };
-        Object.defineProperty(Sanitiser.prototype, "valueChanged", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return !lodash.isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(Sanitiser.prototype, "sanitisedValue", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._sanitisedValue;
-            },
-            enumerable: true,
-            configurable: true
-        });
         /**
+         * @private
+         * @param {?} value
          * @return {?}
          */
-        Sanitiser.prototype.sanitize = /**
+        DefaultParameterSanitiser.prototype.isBlank = /**
+         * @private
+         * @param {?} value
          * @return {?}
          */
-        function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            if (!this.sanitiser) return [3 /*break*/, 2];
-                            this.initialValue = this.readFrom(this.snapshot);
-                            _a = this;
-                            return [4 /*yield*/, this.sanitiser.sanitise(this.initialValue)];
-                        case 1:
-                            _a._sanitisedValue = _b.sent();
-                            if (this.initialValue !== this._sanitisedValue) {
-                                return [2 /*return*/, false];
-                            }
-                            _b.label = 2;
-                        case 2: return [2 /*return*/, true];
-                    }
-                });
-            });
+        function (value) {
+            /** @type {?} */
+            var isNil$1 = lodash.isNil(value);
+            return this.def.isArray ? !isNil$1 || value['length'] < 1 : isNil$1;
         };
-        return Sanitiser;
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Object, Object]),
+            __metadata("design:returntype", Object)
+        ], DefaultParameterSanitiser.prototype, "sanitise", null);
+        return DefaultParameterSanitiser;
     }());
     if (false) {
         /**
          * @type {?}
          * @private
          */
-        exports.Sanitiser.prototype.initialValue;
+        DefaultParameterSanitiser.prototype.remember;
         /**
          * @type {?}
          * @private
          */
-        exports.Sanitiser.prototype._sanitisedValue;
-        /** @type {?} */
-        exports.Sanitiser.prototype.parameterDef;
-        /** @type {?} */
-        exports.Sanitiser.prototype.snapshot;
-        /** @type {?} */
-        exports.Sanitiser.prototype.sanitiser;
-        /**
-         * @abstract
-         * @protected
-         * @param {?} snapshot
-         * @return {?}
-         */
-        exports.Sanitiser.prototype.readFrom = function (snapshot) { };
+        DefaultParameterSanitiser.prototype.defaultValue;
         /**
-         * @abstract
-         * @protected
-         * @param {?} initialValue
-         * @param {?} sanitisedValue
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        exports.Sanitiser.prototype.hasChanged = function (initialValue, sanitisedValue) { };
+        DefaultParameterSanitiser.prototype.def;
         /**
-         * @abstract
-         * @param {?} dest
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        exports.Sanitiser.prototype.injectRouteParam = function (dest) { };
+        DefaultParameterSanitiser.prototype.placeService;
     }
-    var RouteParameterSanitiser = /** @class */ (function () {
-        function RouteParameterSanitiser(parameterDefs, snapshot, injector) {
-            var _this = this;
-            this.parameterDefs = parameterDefs;
-            this.snapshot = snapshot;
-            this.injector = injector;
-            this.parameterSanitisers = [];
-            /** @type {?} */
-            var sanitisers = parameterDefs.map((/**
-             * @param {?} def
-             * @return {?}
-             */
-            function (def) {
-                return def.isArray ?
-                    new exports.Sanitiser.Array(def, snapshot, _this.getSanitiser(def)) :
-                    new exports.Sanitiser.Value(def, snapshot, _this.getSanitiser(def));
-            }));
-            this.routeIdSanitiser = sanitisers.find((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return p.isRouteId(); }));
-            this.parameterSanitisers = sanitisers.filter((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return !p.isRouteId(); }));
-        }
-        /**
-         * @return {?}
-         */
-        RouteParameterSanitiser.prototype.sanitise = /**
+
+    /**
+     * @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;
+        /** @type {?|undefined} */
+        ParameterOptions.prototype.sanitiser;
+    }
+    /**
+     * @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;
+        /** @type {?|undefined} */
+        ListParameterOptions.prototype.sanitiser;
+    }
+    /**
+     * @template T
+     * @param {?} type
+     * @param {?=} options
+     * @return {?}
+     */
+    function RouteId(type, options) {
+        // assert.isTruthy(type.isValid());
+        return (/**
+         * @param {?} prototype
+         * @param {?} propertyKey
          * @return {?}
          */
-        function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var e_1, _a, _b, _c, sanitiser, e_1_1;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            if (!this.routeIdSanitiser) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.routeIdSanitiser.sanitize()];
-                        case 1:
-                            _d.sent();
-                            if (this.routeIdSanitiser.valueChanged) {
-                                // if the route id isn't ok we redirect immediately as the query params may need to be sanitised in the
-                                // context of the route id.
-                                return [2 /*return*/, false];
-                            }
-                            _d.label = 2;
-                        case 2:
-                            _d.trys.push([2, 7, 8, 9]);
-                            _b = __values(this.parameterSanitisers), _c = _b.next();
-                            _d.label = 3;
-                        case 3:
-                            if (!!_c.done) return [3 /*break*/, 6];
-                            sanitiser = _c.value;
-                            return [4 /*yield*/, sanitiser.sanitize()];
-                        case 4:
-                            _d.sent();
-                            _d.label = 5;
-                        case 5:
-                            _c = _b.next();
-                            return [3 /*break*/, 3];
-                        case 6: return [3 /*break*/, 9];
-                        case 7:
-                            e_1_1 = _d.sent();
-                            e_1 = { error: e_1_1 };
-                            return [3 /*break*/, 9];
-                        case 8:
-                            try {
-                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                            return [7 /*endfinally*/];
-                        case 9: return [2 /*return*/, !this.parameterSanitisers.find((/**
-                             * @param {?} s
-                             * @return {?}
-                             */
-                            function (s) { return s.valueChanged; }))];
-                    }
-                });
-            });
-        };
-        /**
-         * @param {?} router
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = createDefinition(propertyKey, type, options, true);
+            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) {
+        // assert.isTruthy(type.isValid());
+        return (/**
+         * @param {?} prototype
+         * @param {?} propertyKey
          * @return {?}
          */
-        RouteParameterSanitiser.prototype.redirect = /**
-         * @param {?} router
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = createDefinition(propertyKey, type, options, false);
+            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) {
+        // assert.isTruthy(type.isValid());
+        return (/**
+         * @param {?} prototype
+         * @param {?} propertyKey
          * @return {?}
          */
-        function (router) {
-            pectin.assert.isTruthy(this.parameterSanitisers.length !== 0);
-            if (this.routeIdSanitiser.valueChanged) {
-                return router.navigate(['..', this.routeIdSanitiser.sanitisedValue]);
-            }
-            else {
-                /** @type {?} */
-                var routeParams_1 = {};
-                this.parameterSanitisers.forEach((/**
-                 * @param {?} s
-                 * @return {?}
-                 */
-                function (s) { return s.injectRouteParam(routeParams_1); }));
-                return router.navigate(['.', routeParams_1]);
-            }
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = createArrayDefinition(propertyKey, elementType, options);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.UseDelegate()(prototype, propertyKey);
+        });
+    }
+    /**
+     * @template T
+     * @param {?} propertyName
+     * @param {?} type
+     * @param {?} options
+     * @param {?} routeId
+     * @return {?}
+     */
+    function createDefinition(propertyName, type, options, routeId) {
+        /** @type {?} */
+        var opts = typescriptUtilities.Opts.get(options);
+        /** @type {?} */
+        var propertyNameAsString = pectin.assert.notNil(propertyName).toString();
+        /** @type {?} */
+        var def = {
+            name: opts.getOptional('as', propertyNameAsString),
+            propertyName: propertyNameAsString,
+            type: pectin.assert.notNil(type),
+            sanitiser: opts.getOptional('sanitiser', null),
+            isRouteId: routeId,
+            isArray: false
         };
-        /**
-         * @private
-         * @template T, S
-         * @param {?} def
-         * @return {?}
-         */
-        RouteParameterSanitiser.prototype.getSanitiser = /**
-         * @private
-         * @template T, S
-         * @param {?} def
-         * @return {?}
-         */
-        function (def) {
-            return def.sanitiser ? this.injector.get(def.sanitiser, new def.sanitiser()) : null;
+        return def;
+    }
+    /**
+     * @template T
+     * @param {?} propertyName
+     * @param {?} type
+     * @param {?} options
+     * @return {?}
+     */
+    function createArrayDefinition(propertyName, type, options) {
+        /** @type {?} */
+        var opts = typescriptUtilities.Opts.get(options);
+        /** @type {?} */
+        var propertyNameAsString = pectin.assert.notNil(propertyName).toString();
+        /** @type {?} */
+        var def = {
+            name: opts.getOptional('as', propertyNameAsString),
+            propertyName: propertyNameAsString,
+            type: pectin.assert.notNil(type),
+            sanitiser: opts.getOptional('sanitiser', null),
+            isRouteId: false,
+            isArray: true
         };
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", Object)
-        ], RouteParameterSanitiser.prototype, "getSanitiser", null);
-        return RouteParameterSanitiser;
-    }());
+        return def;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     * @template T, S
+     */
+    function ParameterDefinition() { }
     if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        RouteParameterSanitiser.prototype.routeIdSanitiser;
-        /**
-         * @type {?}
-         * @private
-         */
-        RouteParameterSanitiser.prototype.parameterSanitisers;
         /** @type {?} */
-        RouteParameterSanitiser.prototype.parameterDefs;
+        ParameterDefinition.prototype.name;
         /** @type {?} */
-        RouteParameterSanitiser.prototype.snapshot;
+        ParameterDefinition.prototype.propertyName;
         /** @type {?} */
-        RouteParameterSanitiser.prototype.injector;
+        ParameterDefinition.prototype.type;
+        /** @type {?} */
+        ParameterDefinition.prototype.sanitiser;
+        /** @type {?} */
+        ParameterDefinition.prototype.isRouteId;
+        /** @type {?} */
+        ParameterDefinition.prototype.isArray;
     }
-    (function (Sanitiser) {
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     * @template T
+     */
+    function ParameterSanitiser() { }
+    if (false) {
         /**
-         * @template T
+         * @param {?} value
+         * @param {?=} visit
+         * @return {?}
          */
-        var /**
+        ParameterSanitiser.prototype.sanitise = function (value, visit) { };
+    }
+    (function (ParameterSanitiser) {
+        /**
+         * @record
          * @template T
          */
-        Value = /** @class */ (function (_super) {
-            __extends(Value, _super);
-            function Value() {
-                return _super !== null && _super.apply(this, arguments) || this;
+        function Options() { }
+        ParameterSanitiser.Options = Options;
+        if (false) {
+            /** @type {?|undefined} */
+            Options.prototype.remember;
+            /** @type {?|undefined} */
+            Options.prototype.defaultValue;
+        }
+    })(ParameterSanitiser || (ParameterSanitiser = {}));
+
+    /**
+     * @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() {
             }
             /**
-             * @param {?} snapshot
+             * @param {?} value
              * @return {?}
              */
-            Value.prototype.readFrom = /**
-             * @param {?} snapshot
+            StringType.prototype.format = /**
+             * @param {?} value
              * @return {?}
              */
-            function (snapshot) {
-                /** @type {?} */
-                var rawValue = this.parameterDef.isRouteId ?
-                    snapshot.paramMap.get(this.parameterDef.name) :
-                    snapshot.queryParamMap.get(this.parameterDef.name);
-                return this.parameterDef.type.parse(rawValue);
+            function (value) {
+                return value;
             };
             /**
-             * @protected
-             * @param {?} initialValue
-             * @param {?} sanitisedValue
+             * @param {?} value
              * @return {?}
              */
-            Value.prototype.hasChanged = /**
-             * @protected
-             * @param {?} initialValue
-             * @param {?} sanitisedValue
+            StringType.prototype.parse = /**
+             * @param {?} value
              * @return {?}
              */
-            function (initialValue, sanitisedValue) {
-                return initialValue !== sanitisedValue;
+            function (value) {
+                return value;
             };
+            return StringType;
+        }());
+        var NumberType = /** @class */ (function () {
+            function NumberType() {
+            }
             /**
-             * @param {?} dest
+             * @param {?} value
              * @return {?}
              */
-            Value.prototype.injectRouteParam = /**
-             * @param {?} dest
+            NumberType.prototype.format = /**
+             * @param {?} value
              * @return {?}
              */
-            function (dest) {
-                dest[this.parameterDef.name] = this.parameterDef.type.format(this.sanitisedValue);
+            function (value) {
+                return "" + value;
             };
-            return Value;
-        }(Sanitiser));
-        Sanitiser.Value = Value;
-        /**
-         * @template T
-         */
-        var /**
-         * @template T
-         */
-        Array = /** @class */ (function (_super) {
-            __extends(Array, _super);
-            function Array() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
             /**
-             * @param {?} snapshot
+             * @param {?} value
              * @return {?}
              */
-            Array.prototype.readFrom = /**
-             * @param {?} snapshot
+            NumberType.prototype.parse = /**
+             * @param {?} value
              * @return {?}
              */
-            function (snapshot) {
-                var _this = this;
-                /** @type {?} */
-                var rawValues = snapshot.queryParamMap.getAll(this.parameterDef.name);
-                return rawValues.map((/**
-                 * @param {?} value
-                 * @return {?}
-                 */
-                function (value) { return _this.parameterDef.type.parse(value); }));
+            function (value) {
+                return lodash.isNil(value) || lodash.isEmpty(value) ? null : +value;
             };
+            return NumberType;
+        }());
+        var BooleanType = /** @class */ (function () {
+            function BooleanType() {
+            }
             /**
-             * @protected
-             * @param {?} initialValue
-             * @param {?} sanitisedValue
+             * @param {?} value
              * @return {?}
              */
-            Array.prototype.hasChanged = /**
-             * @protected
-             * @param {?} initialValue
-             * @param {?} sanitisedValue
+            BooleanType.prototype.format = /**
+             * @param {?} value
              * @return {?}
              */
-            function (initialValue, sanitisedValue) {
-                return initialValue !== sanitisedValue;
+            function (value) {
+                return value ? 'true' : 'false';
             };
             /**
-             * @param {?} dest
+             * @param {?} value
+             * @return {?}
+             */
+            BooleanType.prototype.parse = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return value === 'true';
+            };
+            return BooleanType;
+        }());
+        ParameterType.STRING = new StringType();
+        ParameterType.NUMBER = new NumberType();
+        ParameterType.BOOLEAN = new BooleanType();
+    })(exports.ParameterType || (exports.ParameterType = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @template T, S
+     */
+      /**
+     * @template T, S
+     */
+    exports.Sanitiser = /** @class */ (function () {
+        function Sanitiser(parameterDef, snapshot, sanitiser) {
+            this.parameterDef = parameterDef;
+            this.snapshot = snapshot;
+            this.sanitiser = sanitiser;
+        }
+        /**
+         * @return {?}
+         */
+        Sanitiser.prototype.isRouteId = /**
+         * @return {?}
+         */
+        function () {
+            return this.parameterDef.isRouteId;
+        };
+        Object.defineProperty(Sanitiser.prototype, "valueChanged", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return !lodash.isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Sanitiser.prototype, "sanitisedValue", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._sanitisedValue;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @protected
+         * @param {?} snapshot
+         * @return {?}
+         */
+        Sanitiser.prototype.readFrom = /**
+         * @protected
+         * @param {?} snapshot
+         * @return {?}
+         */
+        function (snapshot) {
+            return pectin.lang.abstractMethod(this.constructor);
+        };
+        /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        Sanitiser.prototype.hasChanged = /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        function (initialValue, sanitisedValue) {
+            return pectin.lang.abstractMethod(this.constructor);
+        };
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        Sanitiser.prototype.injectRouteParam = /**
+         * @param {?} dest
+         * @return {?}
+         */
+        function (dest) {
+            pectin.lang.abstractMethod(this.constructor);
+        };
+        /**
+         * @return {?}
+         */
+        Sanitiser.prototype.sanitize = /**
+         * @return {?}
+         */
+        function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this.sanitiser) return [3 /*break*/, 2];
+                            this.initialValue = this.readFrom(this.snapshot);
+                            _a = this;
+                            return [4 /*yield*/, this.sanitiser.sanitise(this.initialValue)];
+                        case 1:
+                            _a._sanitisedValue = _b.sent();
+                            if (this.initialValue !== this._sanitisedValue) {
+                                return [2 /*return*/, false];
+                            }
+                            _b.label = 2;
+                        case 2: return [2 /*return*/, true];
+                    }
+                });
+            });
+        };
+        return Sanitiser;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.Sanitiser.prototype.initialValue;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.Sanitiser.prototype._sanitisedValue;
+        /** @type {?} */
+        exports.Sanitiser.prototype.parameterDef;
+        /** @type {?} */
+        exports.Sanitiser.prototype.snapshot;
+        /** @type {?} */
+        exports.Sanitiser.prototype.sanitiser;
+    }
+    var RouteParameterSanitiser = /** @class */ (function () {
+        function RouteParameterSanitiser(parameterDefs, snapshot, placeService, injector) {
+            var _this = this;
+            this.parameterDefs = parameterDefs;
+            this.snapshot = snapshot;
+            this.placeService = placeService;
+            this.injector = injector;
+            this.parameterSanitisers = [];
+            /** @type {?} */
+            var sanitisers = parameterDefs.map((/**
+             * @param {?} def
              * @return {?}
              */
-            Array.prototype.injectRouteParam = /**
-             * @param {?} dest
+            function (def) {
+                return def.isArray ?
+                    new exports.Sanitiser.Array(def, snapshot, _this.getSanitiser(def)) :
+                    new exports.Sanitiser.Value(def, snapshot, _this.getSanitiser(def));
+            }));
+            this.routeIdSanitiser = sanitisers.find((/**
+             * @param {?} p
              * @return {?}
              */
-            function (dest) {
-                var _this = this;
-                dest[this.parameterDef.name] = this.sanitisedValue.map((/**
-                 * @param {?} v
-                 * @return {?}
-                 */
-                function (v) { return _this.parameterDef.type.format(v); }));
-            };
-            return Array;
-        }(Sanitiser));
-        Sanitiser.Array = Array;
-    })(exports.Sanitiser || (exports.Sanitiser = {}));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PlaceRouteGuard = /** @class */ (function () {
-        function PlaceRouteGuard(router, injector) {
-            this.router = router;
-            this.injector = injector;
+            function (p) { return p.isRouteId(); }));
+            this.parameterSanitisers = sanitisers.filter((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) { return !p.isRouteId(); }));
         }
         /**
-         * @param {?} route
-         * @param {?} state
          * @return {?}
          */
-        PlaceRouteGuard.prototype.canActivate = /**
-         * @param {?} route
-         * @param {?} state
+        RouteParameterSanitiser.prototype.sanitise = /**
          * @return {?}
          */
-        function (route, state) {
-            var _this = this;
-            /** @type {?} */
-            var routeParameters = typescriptUtilities.Klass.get(route.component).getMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-            /** @type {?} */
-            var sanitiser = new RouteParameterSanitiser(routeParameters, route, this.injector);
-            return sanitiser.sanitise().then((/**
-             * @param {?} proceed
-             * @return {?}
-             */
-            function (proceed) {
-                if (!proceed) {
-                    sanitiser.redirect(_this.router);
-                }
-                return proceed;
-            }));
+        function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var e_1, _a, _b, _c, sanitiser, e_1_1;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!this.routeIdSanitiser) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.routeIdSanitiser.sanitize()];
+                        case 1:
+                            _d.sent();
+                            if (this.routeIdSanitiser.valueChanged) {
+                                // if the route id isn't ok we redirect immediately as the query params may need to be sanitised in the
+                                // context of the route id.
+                                return [2 /*return*/, false];
+                            }
+                            _d.label = 2;
+                        case 2:
+                            _d.trys.push([2, 7, 8, 9]);
+                            _b = __values(this.parameterSanitisers), _c = _b.next();
+                            _d.label = 3;
+                        case 3:
+                            if (!!_c.done) return [3 /*break*/, 6];
+                            sanitiser = _c.value;
+                            return [4 /*yield*/, sanitiser.sanitize()];
+                        case 4:
+                            _d.sent();
+                            _d.label = 5;
+                        case 5:
+                            _c = _b.next();
+                            return [3 /*break*/, 3];
+                        case 6: return [3 /*break*/, 9];
+                        case 7:
+                            e_1_1 = _d.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 9];
+                        case 8:
+                            try {
+                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 9: return [2 /*return*/, !this.parameterSanitisers.find((/**
+                             * @param {?} s
+                             * @return {?}
+                             */
+                            function (s) { return s.valueChanged; }))];
+                    }
+                });
+            });
         };
-        PlaceRouteGuard.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceRouteGuard.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: core.Injector }
-        ]; };
-        /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [router.ActivatedRouteSnapshot, router.RouterStateSnapshot]),
-            __metadata("design:returntype", Object)
-        ], PlaceRouteGuard.prototype, "canActivate", null);
-        return PlaceRouteGuard;
-    }());
-    if (false) {
         /**
-         * @type {?}
          * @private
+         * @template T, S
+         * @param {?} def
+         * @return {?}
          */
-        PlaceRouteGuard.prototype.router;
-        /**
-         * @type {?}
+        RouteParameterSanitiser.prototype.getSanitiser = /**
          * @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.sanitiser;
-    }
-    /**
-     * @record
-     * @template T
-     */
-    function ListParameterOptions() { }
-    if (false) {
-        /** @type {?|undefined} */
-        ListParameterOptions.prototype.as;
-        /** @type {?|undefined} */
-        ListParameterOptions.prototype.optional;
-        /** @type {?|undefined} */
-        ListParameterOptions.prototype.listSanitiser;
-    }
-    /**
-     * @template T
-     * @param {?} type
-     * @param {?=} options
-     * @return {?}
-     */
-    function RouteId(type, options) {
-        // assert.isTruthy(type.isValid());
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
+         * @template T, S
+         * @param {?} def
          * @return {?}
          */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = createDefinition(propertyKey, type, options, true);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
-    /**
-     * @template T
-     * @param {?} type
-     * @param {?=} options
-     * @return {?}
-     */
-    function RouteParameter(type, options) {
-        // assert.isTruthy(type.isValid());
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
+        function (def) {
+            if (def.sanitiser) {
+                if (this.isSanitiserContructor(def.sanitiser)) {
+                    return this.injector.get(def.sanitiser, new def.sanitiser());
+                }
+                else {
+                    return new DefaultParameterSanitiser(def, this.placeService, def.sanitiser);
+                }
+            }
+            else {
+                return null;
+            }
+        };
+        /**
          * @return {?}
          */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = createDefinition(propertyKey, type, options, false);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
-    /**
-     * @template E
-     * @param {?} elementType
-     * @param {?=} options
-     * @return {?}
-     */
-    function RouteParameterList(elementType, options) {
-        // assert.isTruthy(type.isValid());
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
+        RouteParameterSanitiser.prototype.routeIdHasChanged = /**
          * @return {?}
          */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = createArrayDefinition(propertyKey, elementType, options);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
-    /**
-     * @template T
-     * @param {?} propertyName
-     * @param {?} type
-     * @param {?} options
-     * @param {?} routeId
-     * @return {?}
-     */
-    function createDefinition(propertyName, type, options, routeId) {
-        /** @type {?} */
-        var opts = typescriptUtilities.Opts.get(options);
-        /** @type {?} */
-        var propertyNameAsString = pectin.assert.notNil(propertyName).toString();
-        /** @type {?} */
-        var def = {
-            name: opts.getOptional('as', propertyNameAsString),
-            propertyName: propertyNameAsString,
-            type: pectin.assert.notNil(type),
-            sanitiser: opts.getOptional('sanitiser', null),
-            isRouteId: routeId,
-            isArray: false
+        function () {
+            pectin.assert.isTruthy(this.parameterSanitisers.length !== 0);
+            return this.routeIdSanitiser && this.routeIdSanitiser.valueChanged;
+        };
+        /**
+         * @return {?}
+         */
+        RouteParameterSanitiser.prototype.getRedirectParams = /**
+         * @return {?}
+         */
+        function () {
+            if (this.routeIdHasChanged()) {
+                return [this.routeIdSanitiser.sanitisedValue];
+            }
+            else {
+                /** @type {?} */
+                var routeParams_1 = {};
+                this.parameterSanitisers.forEach((/**
+                 * @param {?} s
+                 * @return {?}
+                 */
+                function (s) { return s.injectRouteParam(routeParams_1); }));
+                return [routeParams_1];
+            }
         };
-        return def;
-    }
-    /**
-     * @template T
-     * @param {?} propertyName
-     * @param {?} type
-     * @param {?} options
-     * @return {?}
-     */
-    function createArrayDefinition(propertyName, type, options) {
-        /** @type {?} */
-        var opts = typescriptUtilities.Opts.get(options);
-        /** @type {?} */
-        var propertyNameAsString = pectin.assert.notNil(propertyName).toString();
-        /** @type {?} */
-        var def = {
-            name: opts.getOptional('as', propertyNameAsString),
-            propertyName: propertyNameAsString,
-            type: pectin.assert.notNil(type),
-            sanitiser: opts.getOptional('listSanitiser', null),
-            isRouteId: false,
-            isArray: true
+        /**
+         * @private
+         * @template S
+         * @param {?} value
+         * @return {?}
+         */
+        RouteParameterSanitiser.prototype.isSanitiserContructor = /**
+         * @private
+         * @template S
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            return lodash.isFunction(value) && pectin.lang.constructorChain((/** @type {?} */ ((/** @type {?} */ (value))))).includes(exports.Sanitiser);
         };
-        return def;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @record
-     * @template E, S
-     */
-    function ParameterDefinition() { }
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Object]),
+            __metadata("design:returntype", Object)
+        ], RouteParameterSanitiser.prototype, "getSanitiser", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", Array)
+        ], RouteParameterSanitiser.prototype, "getRedirectParams", null);
+        return RouteParameterSanitiser;
+    }());
     if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        RouteParameterSanitiser.prototype.routeIdSanitiser;
+        /**
+         * @type {?}
+         * @private
+         */
+        RouteParameterSanitiser.prototype.parameterSanitisers;
         /** @type {?} */
-        ParameterDefinition.prototype.name;
-        /** @type {?} */
-        ParameterDefinition.prototype.propertyName;
-        /** @type {?} */
-        ParameterDefinition.prototype.type;
+        RouteParameterSanitiser.prototype.parameterDefs;
         /** @type {?} */
-        ParameterDefinition.prototype.sanitiser;
+        RouteParameterSanitiser.prototype.snapshot;
         /** @type {?} */
-        ParameterDefinition.prototype.isRouteId;
+        RouteParameterSanitiser.prototype.placeService;
         /** @type {?} */
-        ParameterDefinition.prototype.isArray;
+        RouteParameterSanitiser.prototype.injector;
     }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @record
-     * @template T
-     */
-    function ParameterSanitiser() { }
-    if (false) {
+    (function (Sanitiser) {
         /**
-         * @param {?} value
-         * @return {?}
+         * @template T
          */
-        ParameterSanitiser.prototype.sanitise = function (value) { };
-    }
-
-    /**
-     * @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() {
+        var /**
+         * @template T
+         */
+        Value = /** @class */ (function (_super) {
+            __extends(Value, _super);
+            function Value() {
+                return _super !== null && _super.apply(this, arguments) || this;
             }
             /**
-             * @param {?} value
+             * @param {?} snapshot
              * @return {?}
              */
-            StringType.prototype.format = /**
-             * @param {?} value
+            Value.prototype.readFrom = /**
+             * @param {?} snapshot
              * @return {?}
              */
-            function (value) {
-                return value;
+            function (snapshot) {
+                /** @type {?} */
+                var rawValue = snapshot.paramMap.get(this.parameterDef.name);
+                return this.parameterDef.type.parse(rawValue);
             };
             /**
-             * @param {?} value
+             * @protected
+             * @param {?} initialValue
+             * @param {?} sanitisedValue
              * @return {?}
              */
-            StringType.prototype.parse = /**
-             * @param {?} value
+            Value.prototype.hasChanged = /**
+             * @protected
+             * @param {?} initialValue
+             * @param {?} sanitisedValue
              * @return {?}
              */
-            function (value) {
-                return value;
+            function (initialValue, sanitisedValue) {
+                return initialValue !== sanitisedValue;
             };
-            return StringType;
-        }());
-        var NumberType = /** @class */ (function () {
-            function NumberType() {
-            }
             /**
-             * @param {?} value
+             * @param {?} dest
              * @return {?}
              */
-            NumberType.prototype.format = /**
-             * @param {?} value
+            Value.prototype.injectRouteParam = /**
+             * @param {?} dest
              * @return {?}
              */
-            function (value) {
-                return "" + value;
+            function (dest) {
+                dest[this.parameterDef.name] = this.parameterDef.type.format(this.sanitisedValue);
             };
+            return Value;
+        }(Sanitiser));
+        Sanitiser.Value = Value;
+        /**
+         * @template T
+         */
+        var /**
+         * @template T
+         */
+        Array = /** @class */ (function (_super) {
+            __extends(Array, _super);
+            function Array() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
             /**
-             * @param {?} value
+             * @param {?} snapshot
              * @return {?}
              */
-            NumberType.prototype.parse = /**
-             * @param {?} value
+            Array.prototype.readFrom = /**
+             * @param {?} snapshot
              * @return {?}
              */
-            function (value) {
-                return +value;
+            function (snapshot) {
+                var _this = this;
+                /** @type {?} */
+                var rawValues = snapshot.paramMap.getAll(this.parameterDef.name);
+                return rawValues.map((/**
+                 * @param {?} value
+                 * @return {?}
+                 */
+                function (value) { return _this.parameterDef.type.parse(value); }));
             };
-            return NumberType;
-        }());
-        var BooleanType = /** @class */ (function () {
-            function BooleanType() {
-            }
             /**
-             * @param {?} value
+             * @protected
+             * @param {?} initialValue
+             * @param {?} sanitisedValue
              * @return {?}
              */
-            BooleanType.prototype.format = /**
-             * @param {?} value
+            Array.prototype.hasChanged = /**
+             * @protected
+             * @param {?} initialValue
+             * @param {?} sanitisedValue
              * @return {?}
              */
-            function (value) {
-                return value ? 'true' : 'false';
+            function (initialValue, sanitisedValue) {
+                return initialValue !== sanitisedValue;
             };
             /**
-             * @param {?} value
+             * @param {?} dest
              * @return {?}
              */
-            BooleanType.prototype.parse = /**
-             * @param {?} value
+            Array.prototype.injectRouteParam = /**
+             * @param {?} dest
              * @return {?}
              */
-            function (value) {
-                return value === 'true';
+            function (dest) {
+                var _this = this;
+                dest[this.parameterDef.name] = this.sanitisedValue.map((/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                function (v) { return _this.parameterDef.type.format(v); }));
             };
-            return BooleanType;
-        }());
-        ParameterType.STRING = new StringType();
-        ParameterType.NUMBER = new NumberType();
-        ParameterType.BOOLEAN = new BooleanType();
-    })(exports.ParameterType || (exports.ParameterType = {}));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @record
-     * @template T
-     */
-    function ResolvedParameter() { }
-    if (false) {
-        /** @type {?} */
-        ResolvedParameter.prototype.parameterDef;
-        /** @type {?} */
-        ResolvedParameter.prototype.resolvedValue;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var VisitSnapshot = /** @class */ (function () {
-        function VisitSnapshot() {
-        }
-        return VisitSnapshot;
-    }());
+            return Array;
+        }(Sanitiser));
+        Sanitiser.Array = Array;
+    })(exports.Sanitiser || (exports.Sanitiser = {}));
 
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
-    exports.ActivityContainerComponent = exports.ɵq;
-    exports.ActivityOutletComponent = exports.ɵr;
+    exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
+    exports.ActivityContainerComponent = exports.ɵt;
+    exports.ActivityOutletComponent = exports.ɵu;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CommandDirective = CommandDirective;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
     exports.DEFINITION_META_DATA_KEY = DEFINITION_META_DATA_KEY;
+    exports.DefaultParameterSanitiser = DefaultParameterSanitiser;
     exports.DialogInteractionService = DialogInteractionService;
     exports.Dimension = Dimension;
     exports.DisposableComponent = DisposableComponent;
@@ -4077,6 +4809,7 @@
     exports.InteractionModule = InteractionModule;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.LeavePlaceGuard = LeavePlaceGuard;
+    exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.NumberInputComponent = NumberInputComponent;
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
@@ -4085,8 +4818,8 @@
     exports.PlaceRouteGuard = PlaceRouteGuard;
     exports.PlaceService = PlaceService;
     exports.Point = Point;
+    exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.ResizeAwareComponent = ResizeAwareComponent;
-    exports.ResolvedRouteParameterSnapshot = ResolvedRouteParameterSnapshot;
     exports.RouteId = RouteId;
     exports.RouteParameter = RouteParameter;
     exports.RouteParameterList = RouteParameterList;
@@ -4094,10 +4827,12 @@
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
-    exports.VisitSnapshot = VisitSnapshot;
+    exports.leftRightPlaceAnimation = leftRightPlaceAnimation;
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
     exports.ɵa = CommandDirective;
     exports.ɵb = FocusBindingDirective;
+    exports.ɵbb = DialogInteractionService;
+    exports.ɵbc = InteractionContext;
     exports.ɵc = DisposableComponent;
     exports.ɵd = NumberInputComponent;
     exports.ɵe = AbstractInputComponent;
@@ -4108,16 +4843,17 @@
     exports.ɵj = EmptyStateComponent;
     exports.ɵk = BusyOverlayComponent;
     exports.ɵl = PlaceOutletComponent;
-    exports.ɵm = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵn = PlaceService;
-    exports.ɵo = TabbedPlaceNavigationComponent;
-    exports.ɵp = InteractionModule;
-    exports.ɵs = ConfirmationDialogComponent;
-    exports.ɵt = AbstractActivity;
-    exports.ɵu = ACTIVITY_DATA;
-    exports.ɵw = AlertDialogComponent;
-    exports.ɵy = DialogInteractionService;
-    exports.ɵz = InteractionContext;
+    exports.ɵm = leftRightPlaceAnimation;
+    exports.ɵn = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵo = PlaceService;
+    exports.ɵp = TabbedPlaceNavigationComponent;
+    exports.ɵq = AbstractPlaceNavigationComponent;
+    exports.ɵr = ListPlaceNavComponent;
+    exports.ɵs = InteractionModule;
+    exports.ɵv = ConfirmationDialogComponent;
+    exports.ɵw = AbstractActivity;
+    exports.ɵx = ACTIVITY_DATA;
+    exports.ɵz = AlertDialogComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });