@coolon/angular-ui-powerups 0.0.37 → 0.0.41

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

@@ -1,26 +1,25 @@
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { EventEmitter, Input, Output, HostListener, Component, Directive, ElementRef, Inject, NgZone, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, ɵɵdefineInjectable, ɵɵinject, NgModule, INJECTOR } from '@angular/core';
+import { EventEmitter, Input, Output, HostListener, Component, Directive, ElementRef, Inject, NgZone, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, ɵɵdefineInjectable, ɵɵinject, NgModule, HostBinding, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgressSpinnerModule, MatInputModule, MatFormFieldModule, MatSelectModule } from '@angular/material';
-import { BrowserModule } from '@angular/platform-browser';
+import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __decorate, __metadata, __awaiter } from 'tslib';
-import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, assert, UnaryCommand, lang, Dsl, Logger, ListModel, StoreInListModel, EventListenerList, DelegatingValueModel, Trace, MutableListModel, StoreInValueModel, MutableValueModel, TransactionObserver, Binding, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, EventListenerList, DelegatingValueModel, Trace, MutableListModel, StoreInValueModel, MutableValueModel, Binding, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { Deferred } from '@coolon/pectin/lib/promise/deferred.class';
 import { assert as assert$1, Klass, Opts } from '@coolon/typescript-utilities';
 import { MatDialog as MatDialog$1 } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
-import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router, RouterModule, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator';
-import { isNil } from 'lodash';
+import { Router, ActivatedRoute, RouterOutlet, RouterModule, PRIMARY_OUTLET } from '@angular/router';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
+import { isNil, isEqual, isEmpty, isFunction } from 'lodash';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
-import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator/dist/src';
 
 /**
  * @fileoverview added by tsickle
@@ -237,6 +236,110 @@ NumberInputComponent.decorators = [
 /** @nocollapse */
 NumberInputComponent.ctorParameters = () => [];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class PasswordInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+PasswordInputComponent.decorators = [
+    { type: 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 = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @template T
+ */
+class SelectInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
+        this.optionLabelFormat = (/**
+         * @param {?} option
+         * @return {?}
+         */
+        (option) => (option && this.optionLabel) ? option[this.optionLabel] : option);
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+SelectInputComponent.decorators = [
+    { type: 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 = () => [];
+SelectInputComponent.propDecorators = {
+    optionsModel: [{ type: Input }],
+    options: [{ type: Input }],
+    optionLabel: [{ type: Input }],
+    optionLabelFormat: [{ type: Input }]
+};
+__decorate([
+    UseDelegate(),
+    __metadata("design:type", ListModel)
+], SelectInputComponent.prototype, "optionsModel", void 0);
+__decorate([
+    StoreInListModel('optionsModel'),
+    __metadata("design:type", Array)
+], SelectInputComponent.prototype, "options", void 0);
+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
+ */
+class StringInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+StringInputComponent.decorators = [
+    { type: 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 = () => [];
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -545,110 +648,6 @@ if (false) {
     FocusBindingDirective.prototype.ngZone;
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class StringInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-StringInputComponent.decorators = [
-    { type: 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 = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class PasswordInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-PasswordInputComponent.decorators = [
-    { type: 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 = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @template T
- */
-class SelectInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-        this.optionLabelFormat = (/**
-         * @param {?} option
-         * @return {?}
-         */
-        (option) => (option && this.optionLabel) ? option[this.optionLabel] : option);
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-SelectInputComponent.decorators = [
-    { type: 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 = () => [];
-SelectInputComponent.propDecorators = {
-    optionsModel: [{ type: Input }],
-    options: [{ type: Input }],
-    optionLabel: [{ type: Input }],
-    optionLabelFormat: [{ type: Input }]
-};
-__decorate([
-    UseDelegate(),
-    __metadata("design:type", ListModel)
-], SelectInputComponent.prototype, "optionsModel", void 0);
-__decorate([
-    StoreInListModel('optionsModel'),
-    __metadata("design:type", Array)
-], SelectInputComponent.prototype, "options", void 0);
-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
@@ -1066,7 +1065,6 @@ class ConfirmationDialogComponent extends AbstractActivity {
         super();
         this.confirm = confirm;
         assert.notNil(confirm);
-        console.log(confirm);
     }
     /**
      * @return {?}
@@ -1177,7 +1175,6 @@ class ActivityContainerComponent extends DisposableComponent {
      * @return {?}
      */
     onAnimationFinished() {
-        // TODO: notify selected tab they are ready.  activty.afterAnimationComplete
         this.activityTabs.value = this.activityTabs.value.filter((/**
          * @param {?} tab
          * @return {?}
@@ -1449,166 +1446,414 @@ EmptyStateComponent.decorators = [
 /** @nocollapse */
 EmptyStateComponent.ctorParameters = () => [];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ResolvedRouteParameterSnapshot {
+var _a;
+// 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}]
+class ParameterSnapshot {
     /**
-     * @param {?} parameters
+     * @param {?} placeDefinition
+     * @param {?} resolved
      */
-    constructor(parameters) {
-        this.parameters = parameters;
+    constructor(placeDefinition, resolved) {
+        this.placeDefinition = placeDefinition;
+        this.resolved = resolved;
     }
     /**
-     * @template T
-     * @param {?} parameter
+     * @param {?} other
      * @return {?}
      */
-    get(parameter) {
+    hasChanged(other) {
         /** @type {?} */
-        const resolved = this.parameters.find((/**
-         * @param {?} p
+        const changed = this.resolved.find((/**
+         * @param {?} r
          * @return {?}
          */
-        p => p.parameterDef === parameter));
-        return resolved ? resolved.resolvedValue : null;
+        (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 {?}
      */
-    replace(parameter, value) {
-        return new ResolvedRouteParameterSnapshot(this.parameters.filter((/**
-         * @param {?} p
+    asUrlSegment(other) {
+        assert.isTruthy(this.hasChanged(other));
+        /** @type {?} */
+        const routeParts = [];
+        /** @type {?} */
+        const gainedId = this.getFormattedRouteId() && !other.getFormattedRouteId();
+        /** @type {?} */
+        const sameId = this.getFormattedRouteId() === other.getFormattedRouteId();
+        /** @type {?} */
+        const lostId = (!this.getFormattedRouteId() && other.getFormattedRouteId());
+        /** @type {?} */
+        const 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 {?}
+     */
+    getResolvedParameter(parameterDef) {
+        return this.resolved.find((/**
+         * @param {?} r
          * @return {?}
          */
-        p => p.parameterDef !== parameter)).concat({
-            parameterDef: parameter,
-            resolvedValue: value
-        }));
+        r => r.parameterDef === parameterDef));
     }
     /**
+     * @template T, S
+     * @param {?} parameterDef
      * @return {?}
      */
-    getFormattedRouteId() {
+    getResolvedParameterValue(parameterDef) {
         /** @type {?} */
-        const routeIdParam = this.getRouteIdParam();
-        return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
+        const resolvedParameter = this.getResolvedParameter(parameterDef);
+        return resolvedParameter ? resolvedParameter.value : null;
     }
     /**
-     * @private
      * @return {?}
      */
-    getRouteIdParam() {
-        return this.parameters.find((/**
-         * @param {?} p
+    getRouteId() {
+        return this.getResolvedRouteId() ? this.getResolvedRouteId().value : null;
+    }
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    getRouteParameter(name) {
+        /** @type {?} */
+        const resolvedParameter = this.resolved.find((/**
+         * @param {?} r
          * @return {?}
          */
-        p => p.parameterDef.isRouteId));
+        r => r.parameterDef.name === name));
+        return resolvedParameter ? resolvedParameter.value : null;
     }
     /**
+     * @private
      * @return {?}
      */
-    getFormattedParameters() {
-        /** @type {?} */
-        const params = {};
-        /** @type {?} */
-        const routeIdParam = this.parameters.filter((/**
+    getResolvedRouteId() {
+        // 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 {?}
          */
-        p => !p.parameterDef.isRouteId)).forEach((/**
+        p => p.parameterDef.isRouteId))));
+    }
+    /**
+     * @return {?}
+     */
+    hasRouteId() {
+        return !!this.getResolvedRouteId();
+    }
+    /**
+     * @return {?}
+     */
+    getFormattedRouteId() {
+        /** @type {?} */
+        const routeIdParam = this.getResolvedRouteId();
+        return routeIdParam ? routeIdParam.formattedValue() : null;
+    }
+    /**
+     * @return {?}
+     */
+    getFormattedParameters() {
+        /** @type {?} */
+        const params = {};
+        /** @type {?} */
+        const routeIdParam = this.resolved.filter((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => !p.parameterDef.isRouteId)).forEach((/**
          * @param {?} p
          * @return {?}
          */
         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 {?}
      */
-    hasRouteId() {
-        return !!this.getRouteIdParam();
+    replace(parameter, value) {
+        return new ParameterSnapshot(this.placeDefinition, this.resolved.map((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => {
+            return p.parameterDef === parameter ? p.replace(value) : p;
+        })));
+    }
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    updateUrl(url) {
+        return url;
     }
 }
 __decorate([
-    Trace(),
+    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([
-    Trace(),
+    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([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", Object)
+], ParameterSnapshot.prototype, "getRouteParameter", null);
+__decorate([
+    Memoize(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ResolvedRouteParameterSnapshot.prototype, "getFormattedParameters", null);
+    __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
+], ParameterSnapshot.prototype, "getResolvedRouteId", null);
 if (false) {
     /** @type {?} */
-    ResolvedRouteParameterSnapshot.prototype.parameters;
+    ParameterSnapshot.prototype.placeDefinition;
+    /**
+     * @type {?}
+     * @private
+     */
+    ParameterSnapshot.prototype.resolved;
 }
+(function (ParameterSnapshot) {
+    /**
+     * @param {?} placeDef
+     * @param {?} paramMap
+     * @return {?}
+     */
+    function create(placeDef, paramMap) {
+        /** @type {?} */
+        const resolvedParameters = placeDef.getRouteParameters()
+            .map((/**
+         * @param {?} def
+         * @return {?}
+         */
+        def => {
+            if (def.isArray) {
+                /** @type {?} */
+                const value = paramMap.has(def.name) ? paramMap.getAll(def.name).map((/**
+                 * @param {?} raw
+                 * @return {?}
+                 */
+                raw => def.type.parse(raw))) : null;
+                return new ResolvedArrayParameter(def, value);
+            }
+            else {
+                /** @type {?} */
+                const 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
+     */
+    class ResolvedParameter {
+        /**
+         * @param {?} parameterDef
+         * @param {?} value
+         */
+        constructor(parameterDef, value) {
+            this.parameterDef = parameterDef;
+            this.value = value;
+        }
+        /**
+         * @return {?}
+         */
+        isRouteId() {
+            return this.parameterDef.isRouteId;
+        }
+    }
+    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
+     */
+    class ResolvedValueParameter extends ResolvedParameter {
+        /**
+         * @param {?} otherValue
+         * @return {?}
+         */
+        isSame(otherValue) {
+            return this.value === otherValue;
+        }
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        injectRouteParam(dest) {
+            dest[this.parameterDef.name] = this.parameterDef.type.format(this.value);
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        replace(value) {
+            return new ResolvedValueParameter(this.parameterDef, value);
+        }
+        /**
+         * @return {?}
+         */
+        formattedValue() {
+            return !isNil(this.value) ? this.parameterDef.type.format(this.value) : null;
+        }
+    }
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Boolean)
+    ], ResolvedValueParameter.prototype, "isSame", null);
+    ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
+    /**
+     * @template T
+     */
+    class ResolvedArrayParameter extends ResolvedParameter {
+        /**
+         * @param {?} otherValue
+         * @return {?}
+         */
+        isSame(otherValue) {
+            return isEqual(this.value, otherValue);
+        }
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        injectRouteParam(dest) {
+            dest[this.parameterDef.name] = this.value.map((/**
+             * @param {?} v
+             * @return {?}
+             */
+            v => this.parameterDef.type.format(v)));
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        replace(value) {
+            return new ResolvedArrayParameter(this.parameterDef, value);
+        }
+        /**
+         * @return {?}
+         */
+        formattedValue() {
+            return this.value ? this.value.map((/**
+             * @param {?} v
+             * @return {?}
+             */
+            v => this.parameterDef.type.format(v))) : [];
+        }
+    }
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", Boolean)
+    ], ResolvedArrayParameter.prototype, "isSame", null);
+    ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
+})(ParameterSnapshot || (ParameterSnapshot = {}));
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class RouteParameterBindings extends GarbageCollector {
+// RAKE: making this Symbol(...) broke things.
+/** @type {?} */
+const DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
+// this one seems ok.
+/** @type {?} */
+const ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+class PlaceComponent extends DisposableComponent {
     /**
-     * @param {?} component
+     * @param {?} activatedRoute
      * @param {?} placeService
      */
-    constructor(component, placeService) {
+    constructor(activatedRoute, placeService) {
         super();
-        this.component = component;
+        this.activatedRoute = activatedRoute;
         this._incomingRouteChange = new MutableValueModel(false);
         this.resolvedParameters = new MutableValueModel();
-        const { chain, valueOf, before, when, after, observe } = Dsl.disposeWith(this);
-        this.txo = new TransactionObserver(); //.onEvent(e => console.log(e.toString()));
-        //.onEvent(e => console.log(e.toString()));
-        /** @type {?} */
-        const routeParameterDefs = Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-        routeParameterDefs.forEach((/**
-         * @param {?} parameter
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.placeDefinition.getRouteParameters().forEach((/**
+         * @param {?} p
          * @return {?}
          */
-        parameter => this.installBinding(parameter)));
-        /** @type {?} */
-        const incomingResolvedRouteParameters = observe.valuesFrom(component.activatedRoute.paramMap)
+        p => this.installBinding(p)));
+        observe.valuesFrom(activatedRoute.paramMap)
             .last()
             .map((/**
          * @param {?} params
          * @return {?}
          */
-        params => {
-            /** @type {?} */
-            const result = [];
-            routeParameterDefs.forEach((/**
-             * @param {?} parameterDef
-             * @return {?}
-             */
-            parameterDef => {
-                /** @type {?} */
-                let resolvedValue;
-                if (parameterDef.isArray) {
-                    resolvedValue = params.getAll(parameterDef.name).map((/**
-                     * @param {?} v
-                     * @return {?}
-                     */
-                    v => 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((/**
+        params => ParameterSnapshot.create(this.placeDefinition, params)))
+            .subscribe((/**
          * @param {?} resolvedParameters
          * @return {?}
          */
@@ -1624,14 +1869,12 @@ class RouteParameterBindings extends GarbageCollector {
          */
         (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 {?}
@@ -1640,22 +1883,22 @@ class RouteParameterBindings extends GarbageCollector {
         return this._incomingRouteChange.readonly;
     }
     /**
-     * @protected
-     * @template T
-     * @param {?} parameter
+     * @private
+     * @template T, S
+     * @param {?} parameterDef
      * @return {?}
      */
-    installBinding(parameter) {
+    installBinding(parameterDef) {
         /** @type {?} */
-        const model = this.getModelFor(parameter);
-        // this.txo.observe(parameter.propertyName, model);
+        const model = (/** @type {?} */ (this[parameterDef.propertyName]));
+        // this.txo.observe(parameterDef.propertyName, model);
         this.registerDisposable(new Binding(this.resolvedParameters, model, {
             /**
              * @param {?} parameters
              * @return {?}
              */
             toRight(parameters) {
-                return parameters.get(parameter);
+                return parameters.getResolvedParameterValue(parameterDef);
             },
             /**
              * @param {?} value
@@ -1663,64 +1906,14 @@ class RouteParameterBindings extends GarbageCollector {
              * @return {?}
              */
             toLeft(value, currentParameters) {
-                return currentParameters.replace(parameter, value);
+                return currentParameters.replace(parameterDef, value);
             }
         }));
     }
-    /**
-     * @private
-     * @template T
-     * @param {?} parameter
-     * @return {?}
-     */
-    getModelFor(parameter) {
-        return this.component[parameter.propertyName];
-    }
-}
-if (false) {
-    /** @type {?} */
-    RouteParameterBindings.prototype._incomingRouteChange;
-    /**
-     * @type {?}
-     * @private
-     */
-    RouteParameterBindings.prototype.txo;
-    /**
-     * @type {?}
-     * @private
-     */
-    RouteParameterBindings.prototype.resolvedParameters;
-    /**
-     * @type {?}
-     * @private
-     */
-    RouteParameterBindings.prototype.component;
-}
-(function (RouteParameterBindings) {
-    RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-})(RouteParameterBindings || (RouteParameterBindings = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-// RAKE: making this Symbol(...) broke things.
-/** @type {?} */
-const DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
-class PlaceComponent extends DisposableComponent {
-    /**
-     * @param {?} activatedRoute
-     * @param {?} placeService
-     */
-    constructor(activatedRoute, placeService) {
-        super();
-        this.activatedRoute = activatedRoute;
-        this.routeBindingMediator = this.registerDisposable(new RouteParameterBindings(this, placeService));
-    }
     /**
      * @return {?}
      */
-    get placeConfig() {
+    get placeDefinition() {
         return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
     }
     /**
@@ -1729,6 +1922,7 @@ class PlaceComponent extends DisposableComponent {
     canDeactivate() {
         return true;
     }
+    // @Trace()
     /**
      * @return {?}
      */
@@ -1736,22 +1930,18 @@ class PlaceComponent extends DisposableComponent {
     }
 }
 __decorate([
-    Memoize(),
+    Memoize$1(),
     __metadata("design:type", PlaceComponent.Definition),
     __metadata("design:paramtypes", [])
-], PlaceComponent.prototype, "placeConfig", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PlaceComponent.prototype, "onPlaceReady", null);
+], PlaceComponent.prototype, "placeDefinition", null);
 if (false) {
+    /** @type {?} */
+    PlaceComponent.prototype._incomingRouteChange;
     /**
      * @type {?}
      * @private
      */
-    PlaceComponent.prototype.routeBindingMediator;
+    PlaceComponent.prototype.resolvedParameters;
     /** @type {?} */
     PlaceComponent.prototype.activatedRoute;
 }
@@ -1768,13 +1958,24 @@ if (false) {
             this.order = options.order;
             this.data = options.data;
             this.authenticate = isNil(options.authenticate) || options.authenticate;
+            this.children = (options.children || []).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            c => PlaceComponent.getDefinition(c).component));
+        }
+        /**
+         * @return {?}
+         */
+        getRouteParameters() {
+            return Klass.get(this.component).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
         }
         /**
-         * @param {?} construcable
+         * @param {?} constructable
          * @return {?}
          */
-        isDescriptorForType(construcable) {
-            return lang.constructorChain(construcable).includes(PlaceComponent);
+        isDescriptorForType(constructable) {
+            return lang.constructorChain(constructable).includes(PlaceComponent);
         }
         /**
          * @param {?} placeComponent
@@ -1815,6 +2016,12 @@ if (false) {
             }
         }
     }
+    __decorate([
+        Memoize$1(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Array)
+    ], Definition.prototype, "getRouteParameters", null);
     PlaceComponent.Definition = Definition;
     if (false) {
         /** @type {?} */
@@ -1826,6 +2033,8 @@ if (false) {
         /** @type {?} */
         Definition.prototype.data;
         /** @type {?} */
+        Definition.prototype.children;
+        /** @type {?} */
         Definition.prototype.component;
     }
     /**
@@ -1842,15 +2051,24 @@ if (false) {
         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 {?} */
-        const placeOptions = Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
-        return new Definition(klass, placeOptions);
+        return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
     }
     PlaceComponent.getDefinition = getDefinition;
     /**
@@ -1859,7 +2077,7 @@ if (false) {
      * @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;
 })(PlaceComponent || (PlaceComponent = {}));
@@ -1868,13 +2086,129 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class PlaceService extends GarbageCollector {
-    /**
-     * @param {?} router
-     */
-    constructor(router) {
+class AbstractPlaceNavigationComponent extends DisposableComponent {
+    constructor() {
+        super();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.placeDefinitions = chain(this.placesModel).map((/**
+         * @param {?} c
+         * @return {?}
+         */
+        c => PlaceComponent.getDefinition(c)));
+    }
+    /**
+     * @param {?} placeDef
+     * @return {?}
+     */
+    getNav(placeDef) {
+        /** @type {?} */
+        const navItem = (/** @type {?} */ (placeDef.getData('nav')));
+        return {
+            title: (/**
+             * @return {?}
+             */
+            () => navItem ? navItem.title() : placeDef.searchData(['navTitle', 'title'])),
+            tooltip: (/**
+             * @return {?}
+             */
+            () => navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getData('navTooltip', null)),
+            icon: (/**
+             * @return {?}
+             */
+            () => navItem && navItem.icon ? navItem.icon() : placeDef.getData('navIcon', null))
+        };
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+AbstractPlaceNavigationComponent.propDecorators = {
+    places: [{ type: Input }],
+    placesModel: [{ type: Input }]
+};
+__decorate([
+    StoreInListModel('placesModel'),
+    __metadata("design:type", Array)
+], AbstractPlaceNavigationComponent.prototype, "places", void 0);
+__decorate([
+    UseDelegate(),
+    __metadata("design:type", ListModel)
+], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PlaceComponent.Definition]),
+    __metadata("design:returntype", Object)
+], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+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
+ */
+class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
+    constructor() {
+        super();
+        this.expanded = true;
+    }
+    /**
+     * @return {?}
+     */
+    expandMenu() {
+        this.expanded = true;
+    }
+    /**
+     * @return {?}
+     */
+    collapseMenu() {
+        this.expanded = false;
+    }
+    /**
+     * @return {?}
+     */
+    toggleMenu() {
+        this.expanded = !this.expanded;
+    }
+}
+ListPlaceNavComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'angular-ui-powerups-list-place-nav',
+                template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                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 = () => [];
+ListPlaceNavComponent.propDecorators = {
+    expanded: [{ type: HostBinding, args: ['class.expanded',] }]
+};
+if (false) {
+    /** @type {?} */
+    ListPlaceNavComponent.prototype.expanded;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class PlaceService extends GarbageCollector {
+    /**
+     * @param {?} router
+     * @param {?} injector
+     */
+    constructor(router, injector) {
         super();
         this.router = router;
+        this.injector = injector;
         this._activePlaces = new MutableListModel();
     }
     /**
@@ -1883,6 +2217,7 @@ class PlaceService extends GarbageCollector {
     get activePlaces() {
         return this._activePlaces.readonly;
     }
+    // @Trace()
     /**
      * @param {?} place
      * @return {?}
@@ -1890,6 +2225,7 @@ class PlaceService extends GarbageCollector {
     onActivate(place) {
         this._activePlaces.push(place);
     }
+    // @Trace()
     /**
      * @param {?} place
      * @return {?}
@@ -1897,6 +2233,7 @@ class PlaceService extends GarbageCollector {
     onDeactivate(place) {
         this._activePlaces.remove(place);
     }
+    // @Trace()
     /**
      * @param {?} params
      * @return {?}
@@ -1911,10 +2248,20 @@ class PlaceService extends GarbageCollector {
             /** @type {?} */
             const path = routeId ? [relativePath, routeId, params.next.getFormattedParameters()] : [relativePath, params.next.getFormattedParameters()];
             this.router.navigate(path, {
-                relativeTo: params.placeComponent.activatedRoute
+                relativeTo: params.activatedRoute
             });
         }
     }
+    // @Trace()
+    /**
+     * @param {?} snapshot
+     * @return {?}
+     */
+    sanitise(snapshot) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return snapshot;
+        });
+    }
 }
 PlaceService.decorators = [
     { type: Injectable, args: [{
@@ -1923,27 +2270,10 @@ PlaceService.decorators = [
 ];
 /** @nocollapse */
 PlaceService.ctorParameters = () => [
-    { type: Router }
+    { type: Router },
+    { type: Injector }
 ];
-/** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(ɵɵinject(Router)); }, token: PlaceService, providedIn: "root" });
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [PlaceComponent]),
-    __metadata("design:returntype", void 0)
-], PlaceService.prototype, "onActivate", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [PlaceComponent]),
-    __metadata("design:returntype", void 0)
-], PlaceService.prototype, "onDeactivate", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], PlaceService.prototype, "notifyRouteParametersChanged", null);
+/** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(ɵɵinject(Router), ɵɵinject(INJECTOR)); }, token: PlaceService, providedIn: "root" });
 if (false) {
     /**
      * @type {?}
@@ -1955,6 +2285,11 @@ if (false) {
      * @protected
      */
     PlaceService.prototype.router;
+    /**
+     * @type {?}
+     * @protected
+     */
+    PlaceService.prototype.injector;
 }
 
 /**
@@ -1997,45 +2332,114 @@ const right = [
         })
     ])
 ];
+/**
+ * @param {?} duration
+ * @return {?}
+ */
+function leftRightPlaceAnimation(duration) {
+    return trigger('routeAnimations', [
+        transition(':increment', right, { params: { duration: duration } }),
+        transition(':decrement', left, { params: { duration: duration } })
+    ]);
+}
 /** @type {?} */
-const LEFT_RIGHT_PLACE_ANIMATION = trigger('routeAnimations', [
-    transition(':increment', right, { params: { duration: '.3s' } }),
-    transition(':decrement', left, { params: { duration: '.3s' } })
-]);
+const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation("0.3s");
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class PlaceOutletComponent {
+class PlaceOutletComponent extends DisposableComponent {
     /**
      * @param {?} placeService
+     * @param {?} activatedRoute
      */
-    constructor(placeService) {
+    constructor(placeService, activatedRoute) {
+        super();
         this.placeService = placeService;
+        this.activatedRoute = activatedRoute;
         this.animate = true;
+        this.outletUrlSegment = new MutableListModel();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.myPath = observe.listsFrom(activatedRoute.url).last().map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.toString())).reduce((/**
+         * @param {?} bits
+         * @return {?}
+         */
+        bits => bits.join(',')));
+        console.log(`new outlet@(${this.myPath.value})`);
+        this.outletChildPath = chain(this.outletUrlSegment).map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.toString())).reduce((/**
+         * @param {?} bits
+         * @return {?}
+         */
+        bits => bits.join(",")));
+        this.state = chain(this.myPath).map((/**
+         * @param {?} path
+         * @return {?}
+         */
+        path => {
+            return `outlet@(${path}), child path->${this.outletChildPath.value}`;
+        }), { dependsOn: this.outletChildPath });
+        when.valueOf(this.state).changes((/**
+         * @param {?} debug
+         * @return {?}
+         */
+        debug => {
+            console.log(`Outlet Changed -> ${debug}`);
+        }));
     }
     /**
      * @return {?}
      */
     ngOnInit() {
     }
+    /**
+     * @return {?}
+     */
+    ngAfterViewInit() {
+        // this.routerOutLetQuery.changes.subscribe(() => {
+        //   this.updateRouterOutlet(this.routerOutLetQuery.first);
+        // });
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterViewChecked() {
+        // 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()
     /**
      * @param {?} $event
      * @return {?}
      */
-    onActivate($event) {
+    onOutletActivated($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 {?}
      */
-    onDeactivate($event) {
+    onOutletDeactivated($event) {
         this.currentPlace = null;
         this.placeService.onDeactivate($event);
     }
@@ -2050,100 +2454,99 @@ class PlaceOutletComponent {
      * @return {?}
      */
     animationDone() {
-        this.notifyPlaceReady();
+        if (this.currentPlace) {
+            this.currentPlace.onPlaceReady();
+        }
     }
+    // @Trace()
     /**
      * @private
+     * @param {?} first
      * @return {?}
      */
-    notifyPlaceReady() {
-        if (this.currentPlace) {
-            this.currentPlace.onPlaceReady();
+    updateRouterOutlet(first) {
+        if (first.isActivated) {
+            this.outletUrlSegment.value = first.activatedRoute.snapshot.url;
         }
     }
 }
 PlaceOutletComponent.decorators = [
     { type: 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 = () => [
-    { type: PlaceService }
+    { type: PlaceService },
+    { type: ActivatedRoute }
 ];
 PlaceOutletComponent.propDecorators = {
     animate: [{ type: Input }],
-    routerOutLet: [{ type: ViewChild, args: ['routerOutlet', { static: false },] }]
+    routerOutLetQuery: [{ type: ViewChildren, args: [RouterOutlet,] }]
 };
 if (false) {
     /** @type {?} */
     PlaceOutletComponent.prototype.animate;
     /** @type {?} */
-    PlaceOutletComponent.prototype.routerOutLet;
+    PlaceOutletComponent.prototype.routerOutLetQuery;
     /**
      * @type {?}
      * @private
      */
     PlaceOutletComponent.prototype.currentPlace;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.myPath;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.outletUrlSegment;
+    /**
+     * @type {?}
+     * @private
+     */
+    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
  */
-class TabbedPlaceNavigationComponent extends DisposableComponent {
+class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
     constructor() {
         super();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.orderedPlaces = chain(this.placesModel).map((/**
-         * @param {?} c
-         * @return {?}
-         */
-        c => PlaceComponent.getDefinition(c))).sortBy('order');
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
     }
 }
 TabbedPlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-tabbed-place-navigation',
-                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let 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 = () => [];
-TabbedPlaceNavigationComponent.propDecorators = {
-    places: [{ type: Input }],
-    placesModel: [{ type: Input }]
-};
-__decorate([
-    StoreInListModel('placesModel'),
-    __metadata("design:type", Array)
-], TabbedPlaceNavigationComponent.prototype, "places", void 0);
-__decorate([
-    UseDelegate(),
-    __metadata("design:type", ListModel)
-], TabbedPlaceNavigationComponent.prototype, "placesModel", void 0);
-if (false) {
-    /** @type {?} */
-    TabbedPlaceNavigationComponent.prototype.places;
-    /** @type {?} */
-    TabbedPlaceNavigationComponent.prototype.placesModel;
-    /** @type {?} */
-    TabbedPlaceNavigationComponent.prototype.orderedPlaces;
-}
 
 /**
  * @fileoverview added by tsickle
@@ -2167,14 +2570,16 @@ PlaceModule.decorators = [
                     EmptyStateComponent,
                     BusyOverlayComponent,
                     PlaceOutletComponent,
-                    TabbedPlaceNavigationComponent
+                    TabbedPlaceNavigationComponent,
+                    ListPlaceNavComponent
                 ],
                 entryComponents: [BusyOverlayComponent],
                 exports: [
                     BusyOverlayComponent,
                     PlaceOutletComponent,
                     EmptyStateComponent,
-                    TabbedPlaceNavigationComponent
+                    TabbedPlaceNavigationComponent,
+                    ListPlaceNavComponent
                 ],
                 providers: [
                     PlaceService
@@ -2196,16 +2601,16 @@ AngularUiPowerupsModule.decorators = [
                     NumberInputComponent,
                     StringInputComponent,
                     PasswordInputComponent,
-                    SelectInputComponent,
+                    SelectInputComponent
                 ],
                 imports: [
                     CommonModule,
-                    BrowserModule,
                     BrowserAnimationsModule,
                     FormsModule,
                     MatInputModule,
                     MatFormFieldModule,
                     MatSelectModule,
+                    MatTabsModule$1,
                     PlaceModule,
                     InteractionModule
                 ],
@@ -2217,7 +2622,7 @@ AngularUiPowerupsModule.decorators = [
                     PasswordInputComponent,
                     SelectInputComponent,
                     InteractionModule,
-                    PlaceModule,
+                    PlaceModule
                 ]
             },] }
 ];
@@ -2566,14 +2971,37 @@ if (false) {
 /**
  * @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 () { };
 }
 
 /**
@@ -2583,13 +3011,13 @@ if (false) {
 /**
  * @record
  */
-function IPlaceService() { }
+function PlaceUpdatesService() { }
 if (false) {
     /**
      * @param {?} params
      * @return {?}
      */
-    IPlaceService.prototype.notifyRouteParametersChanged = function (params) { };
+    PlaceUpdatesService.prototype.notifyRouteParametersChanged = function (params) { };
 }
 
 /**
@@ -2613,6 +3041,28 @@ function Place(options) {
     });
 }
 
+/**
+ * @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
@@ -2634,7 +3084,24 @@ class LeavePlaceGuard {
      * @return {?}
      */
     canDeactivate(component, currentRoute, currentState, nextState) {
-        return component.canDeactivate();
+        // HACK: this will break with child routes...
+        /** @type {?} */
+        const 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[PRIMARY_OUTLET].segments,
+            nextStateUrlTree: this.router.parseUrl(nextState.url).root.children[PRIMARY_OUTLET].segments
+        });
+        // nextState is the full path...
+        if (!nextState.url.startsWith(path)) {
+            return component.canDeactivate();
+        }
+        else {
+            return true;
+        }
     }
 }
 LeavePlaceGuard.decorators = [
@@ -2665,342 +3132,136 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @abstract
- * @template T, S
- */
-class Sanitiser {
+class PlaceRouteGuard {
     /**
-     * @param {?} parameterDef
-     * @param {?} snapshot
-     * @param {?} sanitiser
+     * @param {?} placeService
+     * @param {?} router
      */
-    constructor(parameterDef, snapshot, sanitiser) {
-        this.parameterDef = parameterDef;
-        this.snapshot = snapshot;
-        this.sanitiser = sanitiser;
+    constructor(placeService, router) {
+        this.placeService = placeService;
+        this.router = router;
     }
     /**
+     * @param {?} route
+     * @param {?} state
      * @return {?}
      */
-    isRouteId() {
-        return this.parameterDef.isRouteId;
-    }
-    /**
-     * @return {?}
-     */
-    get valueChanged() {
-        return !isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
-    }
-    /**
-     * @return {?}
-     */
-    get sanitisedValue() {
-        return this._sanitisedValue;
-    }
-    /**
-     * @return {?}
-     */
-    sanitize() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.sanitiser) {
-                this.initialValue = this.readFrom(this.snapshot);
-                this._sanitisedValue = yield this.sanitiser.sanitise(this.initialValue);
-                if (this.initialValue !== this._sanitisedValue) {
-                    return false;
-                }
-            }
-            return true;
-        });
+    canActivate(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: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+PlaceRouteGuard.ctorParameters = () => [
+    { type: PlaceService },
+    { type: Router }
+];
+/** @nocollapse */ PlaceRouteGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(ɵɵinject(PlaceService), ɵɵinject(Router)); }, token: PlaceRouteGuard, providedIn: "root" });
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    Sanitiser.prototype.initialValue;
+    PlaceRouteGuard.prototype.placeService;
     /**
      * @type {?}
      * @private
      */
-    Sanitiser.prototype._sanitisedValue;
-    /** @type {?} */
-    Sanitiser.prototype.parameterDef;
-    /** @type {?} */
-    Sanitiser.prototype.snapshot;
-    /** @type {?} */
-    Sanitiser.prototype.sanitiser;
-    /**
-     * @abstract
-     * @protected
-     * @param {?} snapshot
-     * @return {?}
-     */
-    Sanitiser.prototype.readFrom = function (snapshot) { };
-    /**
-     * @abstract
-     * @protected
-     * @param {?} initialValue
-     * @param {?} sanitisedValue
-     * @return {?}
-     */
-    Sanitiser.prototype.hasChanged = function (initialValue, sanitisedValue) { };
-    /**
-     * @abstract
-     * @param {?} dest
-     * @return {?}
-     */
-    Sanitiser.prototype.injectRouteParam = function (dest) { };
+    PlaceRouteGuard.prototype.router;
 }
-class RouteParameterSanitiser {
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @template T, S
+ */
+class DefaultParameterSanitiser {
     /**
-     * @param {?} parameterDefs
-     * @param {?} snapshot
-     * @param {?} injector
+     * @param {?} def
+     * @param {?} placeService
+     * @param {?} options
      */
-    constructor(parameterDefs, snapshot, injector) {
-        this.parameterDefs = parameterDefs;
-        this.snapshot = snapshot;
-        this.injector = injector;
-        this.parameterSanitisers = [];
-        /** @type {?} */
-        const sanitisers = parameterDefs.map((/**
-         * @param {?} def
-         * @return {?}
-         */
-        def => {
-            return def.isArray ?
-                new Sanitiser.Array(def, snapshot, this.getSanitiser(def)) :
-                new Sanitiser.Value(def, snapshot, this.getSanitiser(def));
-        }));
-        this.routeIdSanitiser = sanitisers.find((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => p.isRouteId()));
-        this.parameterSanitisers = sanitisers.filter((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => !p.isRouteId()));
+    constructor(def, placeService, options) {
+        this.def = def;
+        this.placeService = placeService;
+        this.remember = isNil(options.remember) ? false : options.remember;
+        this.defaultValue = isNil(options.defaultValue) ? null : options.defaultValue;
     }
     /**
+     * @param {?} value
+     * @param {?} visit
      * @return {?}
      */
-    sanitise() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.routeIdSanitiser) {
-                yield this.routeIdSanitiser.sanitize();
-                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 false;
-                }
-            }
-            for (const sanitiser of this.parameterSanitisers) {
-                yield sanitiser.sanitize();
+    sanitise(value, visit) {
+        if (this.isBlank(value)) {
+            if (this.remember) {
+                // value = null;
             }
-            return !this.parameterSanitisers.find((/**
-             * @param {?} s
-             * @return {?}
-             */
-            s => s.valueChanged));
-        });
-    }
-    /**
-     * @param {?} router
-     * @return {?}
-     */
-    redirect(router) {
-        assert.isTruthy(this.parameterSanitisers.length !== 0);
-        if (this.routeIdSanitiser.valueChanged) {
-            return router.navigate(['..', this.routeIdSanitiser.sanitisedValue]);
+            return this.isBlank(value) && !isNil(this.defaultValue) ? this.defaultValue : value;
         }
         else {
-            /** @type {?} */
-            const routeParams = {};
-            this.parameterSanitisers.forEach((/**
-             * @param {?} s
-             * @return {?}
-             */
-            s => s.injectRouteParam(routeParams)));
-            return router.navigate(['.', routeParams]);
+            return value;
         }
     }
     /**
      * @private
-     * @template T, S
-     * @param {?} def
+     * @param {?} value
      * @return {?}
      */
-    getSanitiser(def) {
-        return def.sanitiser ? this.injector.get(def.sanitiser, new def.sanitiser()) : null;
+    isBlank(value) {
+        /** @type {?} */
+        const isNil$1 = isNil(value);
+        return this.def.isArray ? !isNil$1 || value['length'] < 1 : isNil$1;
     }
 }
 __decorate([
-    Memoize$1(),
+    Trace(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
+    __metadata("design:paramtypes", [Object, Object]),
     __metadata("design:returntype", Object)
-], RouteParameterSanitiser.prototype, "getSanitiser", null);
+], DefaultParameterSanitiser.prototype, "sanitise", null);
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    RouteParameterSanitiser.prototype.routeIdSanitiser;
+    DefaultParameterSanitiser.prototype.remember;
     /**
      * @type {?}
      * @private
      */
-    RouteParameterSanitiser.prototype.parameterSanitisers;
-    /** @type {?} */
-    RouteParameterSanitiser.prototype.parameterDefs;
-    /** @type {?} */
-    RouteParameterSanitiser.prototype.snapshot;
-    /** @type {?} */
-    RouteParameterSanitiser.prototype.injector;
-}
-(function (Sanitiser) {
+    DefaultParameterSanitiser.prototype.defaultValue;
     /**
-     * @template T
+     * @type {?}
+     * @private
      */
-    class Value extends Sanitiser {
-        /**
-         * @param {?} snapshot
-         * @return {?}
-         */
-        readFrom(snapshot) {
-            /** @type {?} */
-            const rawValue = this.parameterDef.isRouteId ?
-                snapshot.paramMap.get(this.parameterDef.name) :
-                snapshot.queryParamMap.get(this.parameterDef.name);
-            return this.parameterDef.type.parse(rawValue);
-        }
-        /**
-         * @protected
-         * @param {?} initialValue
-         * @param {?} sanitisedValue
-         * @return {?}
-         */
-        hasChanged(initialValue, sanitisedValue) {
-            return initialValue !== sanitisedValue;
-        }
-        /**
-         * @param {?} dest
-         * @return {?}
-         */
-        injectRouteParam(dest) {
-            dest[this.parameterDef.name] = this.parameterDef.type.format(this.sanitisedValue);
-        }
-    }
-    Sanitiser.Value = Value;
+    DefaultParameterSanitiser.prototype.def;
     /**
-     * @template T
+     * @type {?}
+     * @private
      */
-    class Array extends Sanitiser {
-        /**
-         * @param {?} snapshot
-         * @return {?}
-         */
-        readFrom(snapshot) {
-            /** @type {?} */
-            const rawValues = snapshot.queryParamMap.getAll(this.parameterDef.name);
-            return rawValues.map((/**
-             * @param {?} value
-             * @return {?}
-             */
-            value => this.parameterDef.type.parse(value)));
-        }
-        /**
-         * @protected
-         * @param {?} initialValue
-         * @param {?} sanitisedValue
-         * @return {?}
-         */
-        hasChanged(initialValue, sanitisedValue) {
-            return initialValue !== sanitisedValue;
-        }
-        /**
-         * @param {?} dest
-         * @return {?}
-         */
-        injectRouteParam(dest) {
-            dest[this.parameterDef.name] = this.sanitisedValue.map((/**
-             * @param {?} v
-             * @return {?}
-             */
-            v => this.parameterDef.type.format(v)));
-        }
-    }
-    Sanitiser.Array = Array;
-})(Sanitiser || (Sanitiser = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class PlaceRouteGuard {
-    /**
-     * @param {?} router
-     * @param {?} injector
-     */
-    constructor(router, injector) {
-        this.router = router;
-        this.injector = injector;
-    }
-    /**
-     * @param {?} route
-     * @param {?} state
-     * @return {?}
-     */
-    canActivate(route, state) {
-        /** @type {?} */
-        const routeParameters = Klass.get(route.component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-        /** @type {?} */
-        const sanitiser = new RouteParameterSanitiser(routeParameters, route, this.injector);
-        return sanitiser.sanitise().then((/**
-         * @param {?} proceed
-         * @return {?}
-         */
-        proceed => {
-            if (!proceed) {
-                sanitiser.redirect(this.router);
-            }
-            return proceed;
-        }));
-    }
-}
-PlaceRouteGuard.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-PlaceRouteGuard.ctorParameters = () => [
-    { type: Router },
-    { type: Injector }
-];
-/** @nocollapse */ PlaceRouteGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(ɵɵinject(Router), ɵɵinject(INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
-    __metadata("design:returntype", Object)
-], PlaceRouteGuard.prototype, "canActivate", null);
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouteGuard.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouteGuard.prototype.injector;
-}
+    DefaultParameterSanitiser.prototype.placeService;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -3030,6 +3291,10 @@ if (false) {
     /** @type {?|undefined} */
     ParameterOptions.prototype.optional;
     /** @type {?|undefined} */
+    ParameterOptions.prototype.remember;
+    /** @type {?|undefined} */
+    ParameterOptions.prototype.defaultValue;
+    /** @type {?|undefined} */
     ParameterOptions.prototype.sanitiser;
 }
 /**
@@ -3043,7 +3308,11 @@ if (false) {
     /** @type {?|undefined} */
     ListParameterOptions.prototype.optional;
     /** @type {?|undefined} */
-    ListParameterOptions.prototype.listSanitiser;
+    ListParameterOptions.prototype.remember;
+    /** @type {?|undefined} */
+    ListParameterOptions.prototype.defaultValue;
+    /** @type {?|undefined} */
+    ListParameterOptions.prototype.sanitiser;
 }
 /**
  * @template T
@@ -3061,7 +3330,7 @@ function RouteId(type, options) {
     (prototype, propertyKey) => {
         /** @type {?} */
         const param = createDefinition(propertyKey, type, options, true);
-        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
 }
@@ -3081,7 +3350,7 @@ function RouteParameter(type, options) {
     (prototype, propertyKey) => {
         /** @type {?} */
         const param = createDefinition(propertyKey, type, options, false);
-        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
 }
@@ -3101,7 +3370,7 @@ function RouteParameterList(elementType, options) {
     (prototype, propertyKey) => {
         /** @type {?} */
         const param = createArrayDefinition(propertyKey, elementType, options);
-        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
 }
@@ -3146,7 +3415,7 @@ function createArrayDefinition(propertyName, type, options) {
         name: opts.getOptional('as', propertyNameAsString),
         propertyName: propertyNameAsString,
         type: assert.notNil(type),
-        sanitiser: opts.getOptional('listSanitiser', null),
+        sanitiser: opts.getOptional('sanitiser', null),
         isRouteId: false,
         isArray: true
     };
@@ -3159,7 +3428,7 @@ function createArrayDefinition(propertyName, type, options) {
  */
 /**
  * @record
- * @template E, S
+ * @template T, S
  */
 function ParameterDefinition() { }
 if (false) {
@@ -3189,10 +3458,25 @@ function ParameterSanitiser() { }
 if (false) {
     /**
      * @param {?} value
+     * @param {?=} visit
      * @return {?}
      */
-    ParameterSanitiser.prototype.sanitise = function (value) { };
+    ParameterSanitiser.prototype.sanitise = function (value, visit) { };
 }
+(function (ParameterSanitiser) {
+    /**
+     * @record
+     * @template T
+     */
+    function Options() { }
+    ParameterSanitiser.Options = Options;
+    if (false) {
+        /** @type {?|undefined} */
+        Options.prototype.remember;
+        /** @type {?|undefined} */
+        Options.prototype.defaultValue;
+    }
+})(ParameterSanitiser || (ParameterSanitiser = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -3230,7 +3514,7 @@ var ParameterType;
          * @return {?}
          */
         parse(value) {
-            return +value;
+            return isNil(value) || isEmpty(value) ? null : +value;
         }
     }
     class BooleanType {
@@ -3259,23 +3543,310 @@ var ParameterType;
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
- * @record
- * @template T
+ * @template T, S
  */
-function ResolvedParameter() { }
+class Sanitiser {
+    /**
+     * @param {?} parameterDef
+     * @param {?} snapshot
+     * @param {?} sanitiser
+     */
+    constructor(parameterDef, snapshot, sanitiser) {
+        this.parameterDef = parameterDef;
+        this.snapshot = snapshot;
+        this.sanitiser = sanitiser;
+    }
+    /**
+     * @return {?}
+     */
+    isRouteId() {
+        return this.parameterDef.isRouteId;
+    }
+    /**
+     * @return {?}
+     */
+    get valueChanged() {
+        return !isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+    }
+    /**
+     * @return {?}
+     */
+    get sanitisedValue() {
+        return this._sanitisedValue;
+    }
+    /**
+     * @protected
+     * @param {?} snapshot
+     * @return {?}
+     */
+    readFrom(snapshot) {
+        return lang.abstractMethod(this.constructor);
+    }
+    /**
+     * @protected
+     * @param {?} initialValue
+     * @param {?} sanitisedValue
+     * @return {?}
+     */
+    hasChanged(initialValue, sanitisedValue) {
+        return lang.abstractMethod(this.constructor);
+    }
+    /**
+     * @param {?} dest
+     * @return {?}
+     */
+    injectRouteParam(dest) {
+        lang.abstractMethod(this.constructor);
+    }
+    /**
+     * @return {?}
+     */
+    sanitize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.sanitiser) {
+                this.initialValue = this.readFrom(this.snapshot);
+                this._sanitisedValue = yield this.sanitiser.sanitise(this.initialValue);
+                if (this.initialValue !== this._sanitisedValue) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }
+}
 if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    Sanitiser.prototype.initialValue;
+    /**
+     * @type {?}
+     * @private
+     */
+    Sanitiser.prototype._sanitisedValue;
+    /** @type {?} */
+    Sanitiser.prototype.parameterDef;
     /** @type {?} */
-    ResolvedParameter.prototype.parameterDef;
+    Sanitiser.prototype.snapshot;
     /** @type {?} */
-    ResolvedParameter.prototype.resolvedValue;
+    Sanitiser.prototype.sanitiser;
 }
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class VisitSnapshot {
+class RouteParameterSanitiser {
+    /**
+     * @param {?} parameterDefs
+     * @param {?} snapshot
+     * @param {?} placeService
+     * @param {?} injector
+     */
+    constructor(parameterDefs, snapshot, placeService, injector) {
+        this.parameterDefs = parameterDefs;
+        this.snapshot = snapshot;
+        this.placeService = placeService;
+        this.injector = injector;
+        this.parameterSanitisers = [];
+        /** @type {?} */
+        const sanitisers = parameterDefs.map((/**
+         * @param {?} def
+         * @return {?}
+         */
+        def => {
+            return def.isArray ?
+                new Sanitiser.Array(def, snapshot, this.getSanitiser(def)) :
+                new Sanitiser.Value(def, snapshot, this.getSanitiser(def));
+        }));
+        this.routeIdSanitiser = sanitisers.find((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => p.isRouteId()));
+        this.parameterSanitisers = sanitisers.filter((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => !p.isRouteId()));
+    }
+    /**
+     * @return {?}
+     */
+    sanitise() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.routeIdSanitiser) {
+                yield this.routeIdSanitiser.sanitize();
+                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 false;
+                }
+            }
+            for (const sanitiser of this.parameterSanitisers) {
+                yield sanitiser.sanitize();
+            }
+            return !this.parameterSanitisers.find((/**
+             * @param {?} s
+             * @return {?}
+             */
+            s => s.valueChanged));
+        });
+    }
+    /**
+     * @private
+     * @template T, S
+     * @param {?} def
+     * @return {?}
+     */
+    getSanitiser(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 {?}
+     */
+    routeIdHasChanged() {
+        assert.isTruthy(this.parameterSanitisers.length !== 0);
+        return this.routeIdSanitiser && this.routeIdSanitiser.valueChanged;
+    }
+    /**
+     * @return {?}
+     */
+    getRedirectParams() {
+        if (this.routeIdHasChanged()) {
+            return [this.routeIdSanitiser.sanitisedValue];
+        }
+        else {
+            /** @type {?} */
+            const routeParams = {};
+            this.parameterSanitisers.forEach((/**
+             * @param {?} s
+             * @return {?}
+             */
+            s => s.injectRouteParam(routeParams)));
+            return [routeParams];
+        }
+    }
+    /**
+     * @private
+     * @template S
+     * @param {?} value
+     * @return {?}
+     */
+    isSanitiserContructor(value) {
+        return isFunction(value) && lang.constructorChain((/** @type {?} */ ((/** @type {?} */ (value))))).includes(Sanitiser);
+    }
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Object)
+], RouteParameterSanitiser.prototype, "getSanitiser", null);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Array)
+], RouteParameterSanitiser.prototype, "getRedirectParams", null);
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    RouteParameterSanitiser.prototype.routeIdSanitiser;
+    /**
+     * @type {?}
+     * @private
+     */
+    RouteParameterSanitiser.prototype.parameterSanitisers;
+    /** @type {?} */
+    RouteParameterSanitiser.prototype.parameterDefs;
+    /** @type {?} */
+    RouteParameterSanitiser.prototype.snapshot;
+    /** @type {?} */
+    RouteParameterSanitiser.prototype.placeService;
+    /** @type {?} */
+    RouteParameterSanitiser.prototype.injector;
 }
+(function (Sanitiser) {
+    /**
+     * @template T
+     */
+    class Value extends Sanitiser {
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        readFrom(snapshot) {
+            /** @type {?} */
+            const rawValue = snapshot.paramMap.get(this.parameterDef.name);
+            return this.parameterDef.type.parse(rawValue);
+        }
+        /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        hasChanged(initialValue, sanitisedValue) {
+            return initialValue !== sanitisedValue;
+        }
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        injectRouteParam(dest) {
+            dest[this.parameterDef.name] = this.parameterDef.type.format(this.sanitisedValue);
+        }
+    }
+    Sanitiser.Value = Value;
+    /**
+     * @template T
+     */
+    class Array extends Sanitiser {
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        readFrom(snapshot) {
+            /** @type {?} */
+            const rawValues = snapshot.paramMap.getAll(this.parameterDef.name);
+            return rawValues.map((/**
+             * @param {?} value
+             * @return {?}
+             */
+            value => this.parameterDef.type.parse(value)));
+        }
+        /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        hasChanged(initialValue, sanitisedValue) {
+            return initialValue !== sanitisedValue;
+        }
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        injectRouteParam(dest) {
+            dest[this.parameterDef.name] = this.sanitisedValue.map((/**
+             * @param {?} v
+             * @return {?}
+             */
+            v => this.parameterDef.type.format(v)));
+        }
+    }
+    Sanitiser.Array = Array;
+})(Sanitiser || (Sanitiser = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -3297,5 +3868,5 @@ class VisitSnapshot {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, INTERACTION_CONTEXT, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, NumberInputComponent, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceService, Point, ResizeAwareComponent, ResolvedRouteParameterSnapshot, RouteId, RouteParameter, RouteParameterBindings, RouteParameterList, RouteParameterSanitiser, Sanitiser, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, VisitSnapshot, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, LEFT_RIGHT_PLACE_ANIMATION as ɵm, PlaceService as ɵn, TabbedPlaceNavigationComponent as ɵo, InteractionModule as ɵp, ActivityContainerComponent as ɵq, ActivityOutletComponent as ɵr, ConfirmationDialogComponent as ɵs, AbstractActivity as ɵt, ACTIVITY_DATA as ɵu, AlertDialogComponent as ɵw, DialogInteractionService as ɵy, InteractionContext as ɵz };
+export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DefaultParameterSanitiser, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, INTERACTION_CONTEXT, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NumberInputComponent, ParameterSnapshot, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceService, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterList, RouteParameterSanitiser, Sanitiser, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, DialogInteractionService as ɵbb, InteractionContext as ɵbc, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, leftRightPlaceAnimation as ɵm, LEFT_RIGHT_PLACE_ANIMATION as ɵn, PlaceService as ɵo, TabbedPlaceNavigationComponent as ɵp, AbstractPlaceNavigationComponent as ɵq, ListPlaceNavComponent as ɵr, InteractionModule as ɵs, ActivityContainerComponent as ɵt, ActivityOutletComponent as ɵu, ConfirmationDialogComponent as ɵv, AbstractActivity as ɵw, ACTIVITY_DATA as ɵx, AlertDialogComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map