@coolon/angular-ui-powerups 0.0.42 → 0.0.44

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

@@ -5,7 +5,7 @@ import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgress
 import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __decorate, __metadata, __awaiter } from 'tslib';
-import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, EventListenerList, DelegatingValueModel, Trace, MutableListModel, StoreInValueModel, MutableValueModel, Binding, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, EventListenerList, DelegatingValueModel, Trace, MutableListModel, StoreInValueModel, Binding, Guard, MutableValueModel, 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';
@@ -13,11 +13,11 @@ import { MatDialog as MatDialog$1 } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-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 { Router, RouterModule } from '@angular/router';
+import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
+import ___default, { isNil } from 'lodash';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
 
@@ -529,7 +529,7 @@ class FocusBindingDirective extends DisposableComponent {
             }));
         }
         else {
-            Logger.get(this).warn("pectinFocusBinding was nil");
+            Logger.get(this).warn('pectinFocusBinding was nil');
         }
     }
     /**
@@ -713,6 +713,11 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
+ * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
+ * external service.
+ *
+ * It might be nice to have wrapper component that allows more declarative use, i.e.
+ * <activity-view [activityClass]="...", [activityData]="..." (done)=".." (cancel)="..."></activity-view>
  * @template D, R, E
  */
 class ActivityOutletComponent {
@@ -1081,7 +1086,7 @@ class ConfirmationDialogComponent extends AbstractActivity {
 ConfirmationDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-confirmation-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\" (click)=\"done(true)\">{{confirm.ok()}}</button>\n</p>\n\n",
+                template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done(true)\">{{confirm.ok()}}</button>\n</p>\n\n",
                 styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
             }] }
 ];
@@ -1101,10 +1106,10 @@ if (false) {
 class ActivityContainerComponent extends DisposableComponent {
     constructor() {
         super();
-        this.activityTabs = new MutableListModel();
+        this.activityOutletTabs = new MutableListModel();
         this.obsoleteTabs = [];
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.lastActivityTab = chain(this.activityTabs).last().otherwise(this.initialActivity);
+        this.lastActivityTab = chain(this.activityOutletTabs).last().otherwise(this.initialActivityOutlet);
     }
     /**
      * @return {?}
@@ -1127,7 +1132,7 @@ class ActivityContainerComponent extends DisposableComponent {
      * @return {?}
      */
     initialise(options) {
-        this.initialActivity = Object.assign({}, options, { interactionContext: this });
+        this.initialActivityOutlet = Object.assign({}, options, { interactionContext: this });
     }
     /**
      * @template D, R, E
@@ -1146,14 +1151,14 @@ class ActivityContainerComponent extends DisposableComponent {
             onDone: deferred.resolve,
             onCancel: deferred.reject
         };
-        this.activityTabs.push(context);
-        this.tabs.selectedIndex = this.activityTabs.length;
+        this.activityOutletTabs.push(context);
+        this.tabs.selectedIndex = this.activityOutletTabs.length;
         return deferred.promise.finally((/**
          * @return {?}
          */
         () => {
             this.obsoleteTabs.push(context);
-            this.tabs.selectedIndex = this.activityTabs.length - 1;
+            this.tabs.selectedIndex = this.activityOutletTabs.length - 1;
         }));
     }
     /**
@@ -1175,7 +1180,7 @@ class ActivityContainerComponent extends DisposableComponent {
      * @return {?}
      */
     onAnimationFinished() {
-        this.activityTabs.value = this.activityTabs.value.filter((/**
+        this.activityOutletTabs.value = this.activityOutletTabs.value.filter((/**
          * @param {?} tab
          * @return {?}
          */
@@ -1188,7 +1193,7 @@ class ActivityContainerComponent extends DisposableComponent {
 ActivityContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'angular-ui-powerups-activity-container',
-                template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab>\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\" [activityContext]=\"initialActivity\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tab of activityTabs.value\">\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\" [activityContext]=\"tab\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+                template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab>\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"initialActivityOutlet\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tab of activityOutletTabs.value\">\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"tab\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
                 styles: [":host{display:block}"]
             }] }
 ];
@@ -1196,7 +1201,7 @@ ActivityContainerComponent.decorators = [
 ActivityContainerComponent.ctorParameters = () => [];
 ActivityContainerComponent.propDecorators = {
     parentInteractionContext: [{ type: Input }],
-    initialActivity: [{ type: Input }],
+    initialActivityOutlet: [{ type: Input }],
     tabs: [{ type: ViewChild, args: ['tabs', { static: true },] }],
     outlets: [{ type: ViewChildren, args: [ActivityOutletComponent,] }]
 };
@@ -1204,13 +1209,13 @@ if (false) {
     /** @type {?} */
     ActivityContainerComponent.prototype.parentInteractionContext;
     /** @type {?} */
-    ActivityContainerComponent.prototype.initialActivity;
+    ActivityContainerComponent.prototype.initialActivityOutlet;
     /** @type {?} */
     ActivityContainerComponent.prototype.tabs;
     /** @type {?} */
     ActivityContainerComponent.prototype.outlets;
     /** @type {?} */
-    ActivityContainerComponent.prototype.activityTabs;
+    ActivityContainerComponent.prototype.activityOutletTabs;
     /**
      * @type {?}
      * @private
@@ -1369,6 +1374,7 @@ InteractionModule.decorators = [
                 ],
                 exports: [
                     ActivityContainerComponent,
+                    ActivityOutletComponent
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -1449,851 +1455,907 @@ EmptyStateComponent.decorators = [
 /** @nocollapse */
 EmptyStateComponent.ctorParameters = () => [];
 
-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 {
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class PlaceDefinition {
     /**
-     * @param {?} placeDefinition
-     * @param {?} resolved
+     * @param {?} component
+     * @param {?} path
+     * @param {?} authenticate
+     * @param {?} order
+     * @param {?} data
+     * @param {?} routeParameters
+     * @param {?} children
      */
-    constructor(placeDefinition, resolved) {
-        this.placeDefinition = placeDefinition;
-        this.resolved = resolved;
+    constructor(component, path, authenticate, order, data, routeParameters, children) {
+        this.component = component;
+        this.path = path;
+        this.authenticate = authenticate;
+        this.order = order;
+        this.data = data;
+        this.routeParameters = routeParameters;
+        this.children = children;
     }
     /**
-     * @param {?} other
      * @return {?}
      */
-    hasChanged(other) {
-        /** @type {?} */
-        const changed = this.resolved.find((/**
-         * @param {?} r
-         * @return {?}
-         */
-        (r) => {
-            return !r.isSame(other.getResolvedParameterValue(r.parameterDef));
-        }));
-        if (changed) {
-            console.log({ mine: changed, theirs: other.getResolvedParameter(changed.parameterDef) });
-        }
-        return !!changed;
+    getRouteParameters() {
+        return this.routeParameters;
     }
     /**
-     * @param {?} other
+     * @template T
+     * @param {?} key
+     * @param {?=} defaultValue
      * @return {?}
      */
-    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());
-            }
+    getData(key, defaultValue) {
+        return this.data ?
+            ___default.isNil(this.data[key]) ? defaultValue : this.data[key] :
+            defaultValue;
+    }
+    /**
+     * @template T
+     * @param {?} keys
+     * @param {?=} defaultValue
+     * @return {?}
+     */
+    searchData(keys, defaultValue) {
+        if (this.data) {
+            /** @type {?} */
+            const found = keys.find((/**
+             * @param {?} key
+             * @return {?}
+             */
+            key => !___default.isNil(this.data[key])));
+            return found ? this.data[found] : defaultValue;
         }
         else {
-            routeParts.push('.');
+            return defaultValue;
         }
-        routeParts.push(this.getFormattedParameters());
-        return routeParts;
+    }
+}
+if (false) {
+    /** @type {?} */
+    PlaceDefinition.prototype.component;
+    /** @type {?} */
+    PlaceDefinition.prototype.path;
+    /** @type {?} */
+    PlaceDefinition.prototype.authenticate;
+    /** @type {?} */
+    PlaceDefinition.prototype.order;
+    /** @type {?} */
+    PlaceDefinition.prototype.data;
+    /** @type {?} */
+    PlaceDefinition.prototype.routeParameters;
+    /** @type {?} */
+    PlaceDefinition.prototype.children;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+// 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 {
+    constructor() {
+        super();
     }
     /**
-     * @template T, S
-     * @param {?} parameterDef
+     * @param {?} resolvedParameters
      * @return {?}
      */
-    getResolvedParameter(parameterDef) {
-        return this.resolved.find((/**
-         * @param {?} r
+    initialiseBindings(resolvedParameters) {
+        assert.isNil(this.resolvedParameters);
+        this.resolvedParameters = resolvedParameters;
+        this.placeDefinition.getRouteParameters().forEach((/**
+         * @param {?} parameterDef
          * @return {?}
          */
-        r => r.parameterDef === parameterDef));
+        parameterDef => {
+            this.installBinding(parameterDef);
+        }));
     }
     /**
+     * @private
      * @template T, S
      * @param {?} parameterDef
      * @return {?}
      */
-    getResolvedParameterValue(parameterDef) {
+    installBinding(parameterDef) {
         /** @type {?} */
-        const resolvedParameter = this.getResolvedParameter(parameterDef);
-        return resolvedParameter ? resolvedParameter.value : null;
+        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.getResolvedParameterValue(parameterDef);
+            },
+            /**
+             * @param {?} value
+             * @param {?=} currentParameters
+             * @return {?}
+             */
+            toLeft(value, currentParameters) {
+                return currentParameters.replace(parameterDef, value);
+            }
+        }));
     }
     /**
      * @return {?}
      */
-    getRouteId() {
-        return this.getResolvedRouteId() ? this.getResolvedRouteId().value : null;
+    get placeDefinition() {
+        return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
     }
     /**
-     * @param {?} name
      * @return {?}
      */
-    getRouteParameter(name) {
-        /** @type {?} */
-        const resolvedParameter = this.resolved.find((/**
-         * @param {?} r
+    get childPlaces() {
+        return this.placeDefinition.children.map((/**
+         * @param {?} d
          * @return {?}
          */
-        r => r.parameterDef.name === name));
-        return resolvedParameter ? resolvedParameter.value : null;
+        d => d.component));
+    }
+    /**
+     * @return {?}
+     */
+    canDeactivate() {
+        return true;
+    }
+    /**
+     * @return {?}
+     */
+    onPlaceReady() {
     }
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", PlaceDefinition),
+    __metadata("design:paramtypes", [])
+], PlaceComponent.prototype, "placeDefinition", null);
+if (false) {
     /**
+     * @type {?}
      * @private
+     */
+    PlaceComponent.prototype.resolvedParameters;
+}
+(function (PlaceComponent) {
+    /**
+     * @param {?} target
      * @return {?}
      */
-    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))));
+    function isPlaceComponentConstructor(target) {
+        return lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent);
     }
+    PlaceComponent.isPlaceComponentConstructor = isPlaceComponentConstructor;
     /**
+     * @param {?} klass
      * @return {?}
      */
-    hasRouteId() {
-        return !!this.getResolvedRouteId();
+    function getRouteParameters(klass) {
+        return Klass.get(klass).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
     }
+    PlaceComponent.getRouteParameters = getRouteParameters;
     /**
+     * @param {?} klass
      * @return {?}
      */
-    getFormattedRouteId() {
-        /** @type {?} */
-        const routeIdParam = this.getResolvedRouteId();
-        return routeIdParam ? routeIdParam.formattedValue() : null;
+    function getDefinition(klass) {
+        return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
     }
+    PlaceComponent.getDefinition = getDefinition;
     /**
+     * @param {?} klass
+     * @param {?} definition
      * @return {?}
      */
-    getFormattedParameters() {
-        /** @type {?} */
-        const params = {};
-        /** @type {?} */
-        const routeIdParam = this.resolved.filter((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => !p.parameterDef.isRouteId)).forEach((/**
-         * @param {?} p
+    function injectDefinition(klass, definition) {
+        Reflect.defineMetadata(DEFINITION_META_DATA_KEY, definition, klass);
+    }
+    PlaceComponent.injectDefinition = injectDefinition;
+})(PlaceComponent || (PlaceComponent = {}));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+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 {?}
          */
-        p => {
-            params[p.parameterDef.name] = p.formattedValue();
-        }));
-        return params;
+        c => PlaceComponent.getDefinition(c)));
     }
     /**
-     * @template T, S
-     * @param {?} parameter
-     * @param {?} value
+     * @param {?} placeDef
      * @return {?}
      */
-    replace(parameter, value) {
-        return new ParameterSnapshot(this.placeDefinition, this.resolved.map((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => {
-            return p.parameterDef === parameter ? p.replace(value) : p;
-        })));
+    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))
+        };
     }
     /**
-     * @param {?} url
      * @return {?}
      */
-    updateUrl(url) {
-        return url;
+    ngOnInit() {
     }
 }
+AbstractPlaceNavigationComponent.propDecorators = {
+    places: [{ type: Input }],
+    placesModel: [{ type: Input }]
+};
 __decorate([
-    Memoize(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", ParameterSnapshot.ResolvedParameter)
-], ParameterSnapshot.prototype, "getResolvedParameter", null);
+    StoreInListModel('placesModel'),
+    __metadata("design:type", Array)
+], AbstractPlaceNavigationComponent.prototype, "places", void 0);
 __decorate([
-    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);
+    UseDelegate(),
+    __metadata("design:type", ListModel)
+], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
 __decorate([
-    Memoize(),
+    Memoize$1(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String]),
+    __metadata("design:paramtypes", [PlaceDefinition]),
     __metadata("design:returntype", Object)
-], ParameterSnapshot.prototype, "getRouteParameter", null);
-__decorate([
-    Memoize(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
-], ParameterSnapshot.prototype, "getResolvedRouteId", null);
+], AbstractPlaceNavigationComponent.prototype, "getNav", null);
 if (false) {
     /** @type {?} */
-    ParameterSnapshot.prototype.placeDefinition;
-    /**
-     * @type {?}
-     * @private
-     */
-    ParameterSnapshot.prototype.resolved;
+    AbstractPlaceNavigationComponent.prototype.places;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placesModel;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeDefinitions;
 }
-(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);
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
+    constructor() {
+        super();
+        this.expanded = true;
     }
-    ParameterSnapshot.create = create;
     /**
-     * @abstract
-     * @template T, S
+     * @return {?}
      */
-    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) { };
+    expandMenu() {
+        this.expanded = true;
     }
     /**
-     * @template T
+     * @return {?}
      */
-    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;
-        }
+    collapseMenu() {
+        this.expanded = false;
     }
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", Boolean)
-    ], ResolvedValueParameter.prototype, "isSame", null);
-    ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
     /**
-     * @template T
+     * @return {?}
      */
-    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))) : [];
-        }
+    toggleMenu() {
+        this.expanded = !this.expanded;
     }
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
-        __metadata("design:returntype", Boolean)
-    ], ResolvedArrayParameter.prototype, "isSame", null);
-    ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
-})(ParameterSnapshot || (ParameterSnapshot = {}));
+}
+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
  */
-// 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 {
+class PlaceHistory {
     /**
-     * @param {?} activatedRoute
-     * @param {?} placeService
+     * @param {?} router
      */
-    constructor(activatedRoute, placeService) {
-        super();
-        this.activatedRoute = activatedRoute;
-        this._incomingRouteChange = new MutableValueModel(false);
-        this.resolvedParameters = new MutableValueModel();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.placeDefinition.getRouteParameters().forEach((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => this.installBinding(p)));
-        observe.valuesFrom(activatedRoute.paramMap)
-            .last()
-            .map((/**
-         * @param {?} params
-         * @return {?}
-         */
-        params => ParameterSnapshot.create(this.placeDefinition, params)))
-            .subscribe((/**
-         * @param {?} resolvedParameters
-         * @return {?}
-         */
-        resolvedParameters => {
-            this._incomingRouteChange.value = true;
-            this.resolvedParameters.value = resolvedParameters;
-            this._incomingRouteChange.value = false;
-        }));
-        when.valueOf(this.resolvedParameters).changes((/**
-         * @param {?} params
-         * @param {?} previous
-         * @return {?}
-         */
-        (params, previous) => {
-            placeService.notifyRouteParametersChanged({
-                activatedRoute: this.activatedRoute,
-                next: params,
-                previous: previous,
-                updateRoute: !this.incomingRouteChange.value // we update the route if it's a component triggered change.
-            });
-        }));
+    constructor(router) {
+        this.router = router;
+        this._history = [];
     }
     /**
+     * @param {?} state
      * @return {?}
      */
-    get incomingRouteChange() {
-        return this._incomingRouteChange.readonly;
+    add(state) {
+        /** @type {?} */
+        const previousState = ___default.last(this._history);
+        if (!previousState || state.hasChanged(previousState)) {
+            this._history.push(state);
+            // limit our history to 100 visits
+            this._history = this._history.slice(-100);
+        }
     }
+}
+PlaceHistory.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+PlaceHistory.ctorParameters = () => [
+    { type: Router }
+];
+/** @nocollapse */ PlaceHistory.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(ɵɵinject(Router)); }, token: PlaceHistory, providedIn: "root" });
+if (false) {
     /**
+     * @type {?}
      * @private
-     * @template T, S
-     * @param {?} parameterDef
-     * @return {?}
      */
-    installBinding(parameterDef) {
-        /** @type {?} */
-        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.getResolvedParameterValue(parameterDef);
-            },
-            /**
-             * @param {?} value
-             * @param {?=} currentParameters
-             * @return {?}
-             */
-            toLeft(value, currentParameters) {
-                return currentParameters.replace(parameterDef, value);
-            }
-        }));
+    PlaceHistory.prototype._history;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceHistory.prototype.router;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class PlaceRouter {
+    /**
+     * @param {?} router
+     */
+    constructor(router) {
+        this.router = router;
     }
     /**
+     * @param {?} activatedRoute
+     * @param {?} previous
+     * @param {?} next
      * @return {?}
      */
-    get placeDefinition() {
-        return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
+    pushParameterChangesToRoute(activatedRoute, previous, next) {
+        this.router.navigate(this.redirect(activatedRoute.snapshot, previous, next), {
+            relativeTo: activatedRoute
+        });
     }
     /**
+     * @param {?} activatedRoute
+     * @param {?} sanitised
+     * @param {?} snapshot
      * @return {?}
      */
-    canDeactivate() {
-        return true;
+    createUrlTree(activatedRoute, sanitised, snapshot) {
+        return this.router.createUrlTree(this.redirect(activatedRoute, snapshot, sanitised));
     }
-    // @Trace()
     /**
+     * @protected
+     * @param {?} activatedRoute
+     * @param {?} previous
+     * @param {?} next
      * @return {?}
      */
-    onPlaceReady() {
+    redirect(activatedRoute, previous, next) {
+        /** @type {?} */
+        const childSegments = ___default.flatten(activatedRoute.children.map((/**
+         * @param {?} child
+         * @return {?}
+         */
+        child => child.url)));
+        /** @type {?} */
+        const relativePath = !!previous.hasRouteId() ? '..' : '.';
+        /** @type {?} */
+        const routeId = next.getFormattedRouteId();
+        /** @type {?} */
+        const path = routeId ?
+            [relativePath, routeId, next.getFormattedParameters()] :
+            [relativePath, next.getFormattedParameters()];
+        return path.concat(childSegments.map((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => s.path)));
     }
 }
-__decorate([
-    Memoize$1(),
-    __metadata("design:type", PlaceComponent.Definition),
-    __metadata("design:paramtypes", [])
-], PlaceComponent.prototype, "placeDefinition", null);
+PlaceRouter.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+PlaceRouter.ctorParameters = () => [
+    { type: Router }
+];
+/** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router)); }, token: PlaceRouter, providedIn: "root" });
 if (false) {
-    /** @type {?} */
-    PlaceComponent.prototype._incomingRouteChange;
     /**
      * @type {?}
      * @private
      */
-    PlaceComponent.prototype.resolvedParameters;
+    PlaceRouter.prototype.router;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ * @template T, S
+ */
+class ParameterDefinition {
+    /**
+     * @param {?} propertyName
+     * @param {?} type
+     * @param {?} options
+     */
+    constructor(propertyName, type, options) {
+        this.propertyName = propertyName;
+        this.type = type;
+        /** @type {?} */
+        const opts = Opts.get(options);
+        this.name = opts.getOptional('as', propertyName);
+        // this.sanitiser = new DefaultParameterSanitiser(
+        //   this,
+        //   opts.getOptional('remember', false),
+        //   opts.getOptional('defaultValue', null)
+        // );
+    }
+    /**
+     * @param {?} injector
+     * @return {?}
+     */
+    getSanitiser(injector) {
+        return this.sanitiser;
+    }
+}
+if (false) {
+    /** @type {?} */
+    ParameterDefinition.prototype.isRouteId;
+    /** @type {?} */
+    ParameterDefinition.prototype.isArray;
+    /** @type {?} */
+    ParameterDefinition.prototype.name;
     /** @type {?} */
-    PlaceComponent.prototype.activatedRoute;
+    ParameterDefinition.prototype.sanitiser;
+    /** @type {?} */
+    ParameterDefinition.prototype.propertyName;
+    /** @type {?} */
+    ParameterDefinition.prototype.type;
 }
-(function (PlaceComponent) {
-    class Definition {
-        /**
-         * @param {?} component
-         * @param {?} options
-         */
-        constructor(component, options) {
-            this.component = component;
-            assert.notNil(options);
-            this.path = options.path;
-            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 {?} constructable
-         * @return {?}
-         */
-        isDescriptorForType(constructable) {
-            return lang.constructorChain(constructable).includes(PlaceComponent);
-        }
-        /**
-         * @param {?} placeComponent
-         * @return {?}
-         */
-        isDescriptorFor(placeComponent) {
-            return placeComponent.constructor === this.component;
-        }
-        /**
-         * @template T
-         * @param {?} key
-         * @param {?=} defaultValue
-         * @return {?}
-         */
-        getData(key, defaultValue) {
-            return this.data ?
-                isNil(this.data[key]) ? defaultValue : this.data[key] :
-                defaultValue;
-        }
-        /**
-         * @template T
-         * @param {?} keys
-         * @param {?=} defaultValue
-         * @return {?}
-         */
-        searchData(keys, defaultValue) {
-            if (this.data) {
-                /** @type {?} */
-                const found = keys.find((/**
-                 * @param {?} key
-                 * @return {?}
-                 */
-                key => !isNil(this.data[key])));
-                return found ? this.data[found] : defaultValue;
-            }
-            else {
-                return defaultValue;
-            }
+(function (ParameterDefinition) {
+    /**
+     * @record
+     * @template T
+     */
+    function Options() { }
+    ParameterDefinition.Options = Options;
+    if (false) {
+        /** @type {?|undefined} */
+        Options.prototype.as;
+        /** @type {?|undefined} */
+        Options.prototype.optional;
+        /** @type {?|undefined} */
+        Options.prototype.remember;
+        /** @type {?|undefined} */
+        Options.prototype.defaultValue;
+    }
+    /**
+     * @template T
+     */
+    class RouteId extends ParameterDefinition {
+        constructor() {
+            super(...arguments);
+            this.isRouteId = true;
+            this.isArray = false;
         }
     }
-    __decorate([
-        Memoize$1(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", Array)
-    ], Definition.prototype, "getRouteParameters", null);
-    PlaceComponent.Definition = Definition;
+    ParameterDefinition.RouteId = RouteId;
     if (false) {
         /** @type {?} */
-        Definition.prototype.path;
-        /** @type {?} */
-        Definition.prototype.authenticate;
-        /** @type {?} */
-        Definition.prototype.order;
-        /** @type {?} */
-        Definition.prototype.data;
-        /** @type {?} */
-        Definition.prototype.children;
+        RouteId.prototype.isRouteId;
         /** @type {?} */
-        Definition.prototype.component;
+        RouteId.prototype.isArray;
     }
     /**
-     * @record
+     * @template T
      */
-    function Options() { }
-    PlaceComponent.Options = Options;
+    class ValueParameter extends ParameterDefinition {
+        constructor() {
+            super(...arguments);
+            this.isRouteId = false;
+            this.isArray = false;
+        }
+    }
+    ParameterDefinition.ValueParameter = ValueParameter;
     if (false) {
         /** @type {?} */
-        Options.prototype.path;
+        ValueParameter.prototype.isRouteId;
         /** @type {?} */
-        Options.prototype.order;
-        /** @type {?|undefined} */
-        Options.prototype.data;
-        /** @type {?|undefined} */
-        Options.prototype.authenticate;
-        /** @type {?|undefined} */
-        Options.prototype.children;
+        ValueParameter.prototype.isArray;
     }
     /**
-     * @record
+     * @template T
      */
-    function ChildOptions() { }
-    PlaceComponent.ChildOptions = ChildOptions;
+    class ArrayParameter extends ParameterDefinition {
+        constructor() {
+            super(...arguments);
+            this.isRouteId = false;
+            this.isArray = true;
+        }
+    }
+    ParameterDefinition.ArrayParameter = ArrayParameter;
     if (false) {
         /** @type {?} */
-        ChildOptions.prototype.parent;
+        ArrayParameter.prototype.isRouteId;
+        /** @type {?} */
+        ArrayParameter.prototype.isArray;
     }
+})(ParameterDefinition || (ParameterDefinition = {}));
+
+var _a;
+class ParameterSnapshot {
     /**
-     * @param {?} klass
-     * @return {?}
+     * @param {?} placeDefinition
+     * @param {?} resolved
      */
-    function getDefinition(klass) {
-        return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+    constructor(placeDefinition, resolved) {
+        this.placeDefinition = placeDefinition;
+        this.resolved = resolved;
     }
-    PlaceComponent.getDefinition = getDefinition;
     /**
-     * @param {?} klass
-     * @param {?} options
+     * @param {?} other
      * @return {?}
      */
-    function injectDefinition(klass, options) {
-        Reflect.defineMetadata(DEFINITION_META_DATA_KEY, new Definition(klass, options), klass);
+    hasChanged(other) {
+        /** @type {?} */
+        const changed = this.resolved.find((/**
+         * @param {?} r
+         * @return {?}
+         */
+        (r) => {
+            return !r.isSame(other.getResolvedParameterValue(r.parameterDef));
+        }));
+        // if (changed) {
+        //   console.log({ mine: changed, theirs: other.getResolvedParameter(changed.parameterDef) });
+        // }
+        return !!changed;
     }
-    PlaceComponent.injectDefinition = injectDefinition;
-})(PlaceComponent || (PlaceComponent = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-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
+    /**
+     * @template T, S
+     * @param {?} parameterDef
+     * @return {?}
+     */
+    getResolvedParameter(parameterDef) {
+        return this.resolved.find((/**
+         * @param {?} r
          * @return {?}
          */
-        c => PlaceComponent.getDefinition(c)));
+        r => r.parameterDef === parameterDef));
     }
     /**
-     * @param {?} placeDef
+     * @template T, S
+     * @param {?} parameterDef
      * @return {?}
      */
-    getNav(placeDef) {
+    getResolvedParameterValue(parameterDef) {
         /** @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))
-        };
+        const resolvedParameter = this.getResolvedParameter(parameterDef);
+        return resolvedParameter ? resolvedParameter.value : null;
     }
     /**
      * @return {?}
      */
-    ngOnInit() {
+    getRouteId() {
+        return this.getResolvedRouteId() ? this.getResolvedRouteId().value : null;
     }
-}
-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;
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    getRouteParameter(name) {
+        /** @type {?} */
+        const resolvedParameter = this.resolved.find((/**
+         * @param {?} r
+         * @return {?}
+         */
+        r => r.parameterDef.name === name));
+        return resolvedParameter ? resolvedParameter.value : null;
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    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))));
     }
     /**
      * @return {?}
      */
-    expandMenu() {
-        this.expanded = true;
+    hasRouteId() {
+        return !!this.getResolvedRouteId();
     }
     /**
      * @return {?}
      */
-    collapseMenu() {
-        this.expanded = false;
+    getFormattedRouteId() {
+        /** @type {?} */
+        const routeIdParam = this.getResolvedRouteId();
+        return routeIdParam ? routeIdParam.formattedValue() : null;
     }
     /**
      * @return {?}
      */
-    toggleMenu() {
-        this.expanded = !this.expanded;
+    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.formattedValue();
+        }));
+        return params;
     }
-}
-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
+     * @template T, S
+     * @param {?} parameter
+     * @param {?} value
+     * @return {?}
      */
-    constructor(router, injector) {
-        super();
-        this.router = router;
-        this.injector = injector;
-        this._activePlaces = new MutableListModel();
+    replace(parameter, value) {
+        return new ParameterSnapshot(this.placeDefinition, this.resolved.map((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => {
+            return p.parameterDef === parameter ? p.replace(value) : p;
+        })));
     }
     /**
+     * @param {?} injector
      * @return {?}
      */
-    get activePlaces() {
-        return this._activePlaces.readonly;
+    sanitise(injector) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this;
+        });
     }
-    // @Trace()
+}
+__decorate([
+    Memoize$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ParameterDefinition]),
+    __metadata("design:returntype", ParameterSnapshot.ResolvedParameter)
+], ParameterSnapshot.prototype, "getResolvedParameter", null);
+__decorate([
+    Memoize$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [ParameterDefinition]),
+    __metadata("design:returntype", typeof (_a = typeof S !== "undefined" && S) === "function" ? _a : Object)
+], ParameterSnapshot.prototype, "getResolvedParameterValue", null);
+__decorate([
+    Memoize$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", Object)
+], ParameterSnapshot.prototype, "getRouteParameter", null);
+__decorate([
+    Memoize$1(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
+], ParameterSnapshot.prototype, "getResolvedRouteId", null);
+if (false) {
+    /** @type {?} */
+    ParameterSnapshot.prototype.placeDefinition;
     /**
-     * @param {?} place
+     * @type {?}
+     * @private
+     */
+    ParameterSnapshot.prototype.resolved;
+}
+(function (ParameterSnapshot) {
+    /**
+     * @param {?} placeDef
+     * @param {?} paramMap
      * @return {?}
      */
-    onActivate(place) {
-        this._activePlaces.push(place);
+    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);
     }
-    // @Trace()
+    ParameterSnapshot.create = create;
     /**
-     * @param {?} place
-     * @return {?}
+     * @abstract
+     * @template T, S
      */
-    onDeactivate(place) {
-        this._activePlaces.remove(place);
+    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) { };
     }
-    // @Trace()
     /**
-     * @param {?} params
-     * @return {?}
+     * @template T
      */
-    notifyRouteParametersChanged(params) {
-        // We update the router state...
-        if (params.updateRoute) {
-            /** @type {?} */
-            const routeId = params.next.getFormattedRouteId();
-            /** @type {?} */
-            const relativePath = !!params.previous.hasRouteId() ? '..' : '.';
-            /** @type {?} */
-            const path = routeId ? [relativePath, routeId, params.next.getFormattedParameters()] : [relativePath, params.next.getFormattedParameters()];
-            this.router.navigate(path, {
-                relativeTo: params.activatedRoute
-            });
+    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 !___default.isNil(this.value) ? this.parameterDef.type.format(this.value) : null;
         }
     }
-    // @Trace()
+    ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
     /**
-     * @param {?} snapshot
-     * @return {?}
+     * @template T
      */
-    sanitise(snapshot) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return snapshot;
-        });
+    class ResolvedArrayParameter extends ResolvedParameter {
+        /**
+         * @param {?} otherValue
+         * @return {?}
+         */
+        isSame(otherValue) {
+            return ___default.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))) : [];
+        }
     }
-}
-PlaceService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-PlaceService.ctorParameters = () => [
-    { type: Router },
-    { type: Injector }
-];
-/** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(ɵɵinject(Router), ɵɵinject(INJECTOR)); }, token: PlaceService, providedIn: "root" });
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceService.prototype._activePlaces;
-    /**
-     * @type {?}
-     * @protected
-     */
-    PlaceService.prototype.router;
-    /**
-     * @type {?}
-     * @protected
-     */
-    PlaceService.prototype.injector;
-}
+    ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
+})(ParameterSnapshot || (ParameterSnapshot = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -2346,105 +2408,130 @@ function leftRightPlaceAnimation(duration) {
     ]);
 }
 /** @type {?} */
-const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation("0.3s");
+const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @record
+ */
+function PlaceRef() { }
+if (false) {
+    /** @type {?} */
+    PlaceRef.prototype.placeDefinition;
+    /**
+     * @param {?} param
+     * @return {?}
+     */
+    PlaceRef.prototype.initialiseBindings = function (param) { };
+    /**
+     * @return {?}
+     */
+    PlaceRef.prototype.onPlaceReady = function () { };
+}
 class PlaceOutletComponent extends DisposableComponent {
     /**
-     * @param {?} placeService
-     * @param {?} activatedRoute
+     * @param {?} router
+     * @param {?} placeHistory
      */
-    constructor(placeService, activatedRoute) {
+    constructor(router, placeHistory) {
         super();
-        this.placeService = placeService;
-        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.placeHistory = placeHistory;
         this.animate = true;
-        this.outletUrlSegment = new MutableListModel();
+        this._incomingRouteChange = new Guard();
+        this._inOutletUpdate = new Guard();
+        this._activatedRouteModel = new MutableValueModel();
+        this._placeDefinition = new MutableValueModel();
+        this._resolvedParameters = new MutableValueModel();
         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
+        this._paramMap = chain(this._activatedRouteModel).pullObservableValue((/**
+         * @param {?} ar
          * @return {?}
          */
-        s => s.toString())).reduce((/**
-         * @param {?} bits
-         * @return {?}
-         */
-        bits => bits.join(",")));
-        this.state = chain(this.myPath).map((/**
-         * @param {?} path
+        ar => ar.paramMap));
+        this.placeConfigured = valueOf.all(chain(this._inOutletUpdate).isFalsey(), this._placeDefinition, this._paramMap).areTruthy();
+        when.valueOf(this._paramMap).changes((/**
+         * @param {?} params
          * @return {?}
          */
-        path => {
-            return `outlet@(${path}), child path->${this.outletChildPath.value}`;
-        }), { dependsOn: this.outletChildPath });
-        when.valueOf(this.state).changes((/**
-         * @param {?} debug
+        (params) => {
+            /** @type {?} */
+            const snapshot = ParameterSnapshot.create(this._placeDefinition.value, params);
+            this._incomingRouteChange.whileTrue((/**
+             * @return {?}
+             */
+            () => {
+                this._resolvedParameters.value = snapshot;
+                this.placeHistory.add(snapshot);
+            }));
+        }), {
+            postponeUntil: this.placeConfigured
+        });
+        when.valueOf(this._resolvedParameters).changes((/**
+         * @param {?} next
+         * @param {?} previous
          * @return {?}
          */
-        debug => {
-            console.log(`Outlet Changed -> ${debug}`);
-        }));
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
+        (next, previous) => {
+            this.pushChangesToRoute(next, previous);
+            this.placeHistory.add(next); // the above route change doesn't seem to propagate back in, so I'm add the state to the history manually for now.
+        }), {
+            unless: this.incomingRouteChange
+        });
     }
     /**
      * @return {?}
      */
-    ngAfterViewInit() {
-        // this.routerOutLetQuery.changes.subscribe(() => {
-        //   this.updateRouterOutlet(this.routerOutLetQuery.first);
-        // });
+    get incomingRouteChange() {
+        return this._incomingRouteChange;
     }
     /**
      * @return {?}
      */
-    ngAfterViewChecked() {
-        // console.log(`@AfterViewChecked: ${this.state.value}`);
-        this.updateRouterOutlet(this.routerOutLetQuery.first);
+    ngOnInit() {
     }
-    // @Trace()
-    // ngOnDestroy(): void {
-    //   console.log('outletSegments', this.outletUrlSegment.value);
-    //   console.log('mySegments', this.myPath.value);
-    //   super.ngOnDestroy();
-    // }
-    // @Trace()
     /**
-     * @param {?} $event
+     * @param {?} routerOutlet
+     * @param {?} place
      * @return {?}
      */
-    onOutletActivated($event) {
-        // console.log(this.routerOutLet.activatedRoute.snapshot.url);
-        this.currentPlace = $event;
-        this.placeService.onActivate($event);
+    onOutletActivated(routerOutlet, place) {
+        this._inOutletUpdate.whileTrue((/**
+         * @return {?}
+         */
+        () => {
+            try {
+                this._currentPlace = place;
+                this._activatedRouteModel.value = routerOutlet.activatedRoute;
+                this._placeDefinition.value = place.placeDefinition;
+                place.initialiseBindings(this._resolvedParameters);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }));
         if (!this.animate) {
             // we're not animating so trigger any post animation callbacks now.
             this.animationDone();
         }
     }
     /**
+     * @param {?} routerOutlet
      * @param {?} $event
      * @return {?}
      */
-    onOutletDeactivated($event) {
-        this.currentPlace = null;
-        this.placeService.onDeactivate($event);
+    onOutletDeactivated(routerOutlet, $event) {
+        this._inOutletUpdate.whileTrue((/**
+         * @return {?}
+         */
+        () => {
+            this._currentPlace = null;
+            this._activatedRouteModel.value = null;
+            this._placeDefinition.value = null;
+        }));
     }
     /**
      * @param {?} outlet
@@ -2457,79 +2544,98 @@ class PlaceOutletComponent extends DisposableComponent {
      * @return {?}
      */
     animationDone() {
-        if (this.currentPlace) {
-            this.currentPlace.onPlaceReady();
+        if (this._currentPlace) {
+            this._currentPlace.onPlaceReady();
         }
     }
-    // @Trace()
     /**
-     * @private
-     * @param {?} first
+     * @param {?} next
+     * @param {?} previous
      * @return {?}
      */
-    updateRouterOutlet(first) {
-        if (first.isActivated) {
-            this.outletUrlSegment.value = first.activatedRoute.snapshot.url;
-        }
+    pushChangesToRoute(next, previous) {
+        /** @type {?} */
+        const activatedRoute = this._activatedRouteModel.value;
+        this.router.pushParameterChangesToRoute(activatedRoute, previous, next);
+    }
+    /**
+     * @param {?} snapshot
+     * @param {?} callback
+     * @return {?}
+     */
+    sanitise(snapshot, callback) {
+        return snapshot;
     }
 }
 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)=\"onOutletActivated($event)\"\n                 (deactivate)=\"onOutletDeactivated($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(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated(routerOutlet, $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: ActivatedRoute }
+    { type: PlaceRouter },
+    { type: PlaceHistory }
 ];
 PlaceOutletComponent.propDecorators = {
     animate: [{ type: Input }],
-    routerOutLetQuery: [{ type: ViewChildren, args: [RouterOutlet,] }]
+    routerOut: [{ type: ViewChild, args: ['routeOutlet', { static: true },] }]
 };
 if (false) {
     /** @type {?} */
     PlaceOutletComponent.prototype.animate;
     /** @type {?} */
-    PlaceOutletComponent.prototype.routerOutLetQuery;
+    PlaceOutletComponent.prototype.routerOut;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._currentPlace;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._incomingRouteChange;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.currentPlace;
+    PlaceOutletComponent.prototype._inOutletUpdate;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.myPath;
+    PlaceOutletComponent.prototype._activatedRouteModel;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.outletUrlSegment;
+    PlaceOutletComponent.prototype._placeDefinition;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.outletChildPath;
+    PlaceOutletComponent.prototype._paramMap;
+    /** @type {?} */
+    PlaceOutletComponent.prototype._resolvedParameters;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.state;
+    PlaceOutletComponent.prototype.placeConfigured;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.placeService;
+    PlaceOutletComponent.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.activatedRoute;
+    PlaceOutletComponent.prototype.placeHistory;
 }
 
 /**
@@ -2584,9 +2690,7 @@ PlaceModule.decorators = [
                     TabbedPlaceNavigationComponent,
                     ListPlaceNavComponent
                 ],
-                providers: [
-                    PlaceService
-                ]
+                providers: []
             },] }
 ];
 
@@ -2990,39 +3094,6 @@ if (false) {
     NavItem.prototype.tooltip = function () { };
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function PlaceComponentLike() { }
-if (false) {
-    /** @type {?} */
-    PlaceComponentLike.prototype.activatedRoute;
-    /**
-     * @return {?}
-     */
-    PlaceComponentLike.prototype.onPlaceReady = function () { };
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function PlaceUpdatesService() { }
-if (false) {
-    /**
-     * @param {?} params
-     * @return {?}
-     */
-    PlaceUpdatesService.prototype.notifyRouteParametersChanged = function (params) { };
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -3037,12 +3108,37 @@ function Place(options) {
      * @return {?}
      */
     (target) => {
-        if (!lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent)) {
+        if (PlaceComponent.isPlaceComponentConstructor(target)) {
+            PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, isNil(options.authenticate) ? false : options.authenticate, options.order, options.data, PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            c => PlaceComponent.getDefinition(c)))));
+        }
+        else {
             lang.illegalState(`${target} must extend PlaceComponent to use the @Place decorator`);
         }
-        PlaceComponent.injectDefinition((/** @type {?} */ (target)), options);
     });
 }
+(function (Place) {
+    /**
+     * @record
+     */
+    function Options() { }
+    Place.Options = Options;
+    if (false) {
+        /** @type {?} */
+        Options.prototype.path;
+        /** @type {?} */
+        Options.prototype.order;
+        /** @type {?|undefined} */
+        Options.prototype.data;
+        /** @type {?|undefined} */
+        Options.prototype.authenticate;
+        /** @type {?|undefined} */
+        Options.prototype.children;
+    }
+})(Place || (Place = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -3090,14 +3186,16 @@ class LeavePlaceGuard {
         // 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
-        });
+        // let thisTree = this.router.parseUrl(currentState.url);
+        // let nextTree = this.router.parseUrl(nextState.url);
+        // console.log({
+        //   placePath: path,
+        //   currentRoute: currentRoute.toString(),
+        //   currentStateUrl: currentState.url,
+        //   nextStateUrl: nextState.url,
+        //   currentStateUrlTree: thisTree.root.children[PRIMARY_OUTLET].segments,
+        //   nextStateUrlTree: nextTree.root.children[PRIMARY_OUTLET].segments
+        // });
         // nextState is the full path...
         if (!nextState.url.startsWith(path)) {
             return component.canDeactivate();
@@ -3137,34 +3235,40 @@ if (false) {
  */
 class PlaceRouteGuard {
     /**
-     * @param {?} placeService
-     * @param {?} router
+     * @param {?} placeRouter
+     * @param {?} injector
      */
-    constructor(placeService, router) {
-        this.placeService = placeService;
-        this.router = router;
+    constructor(placeRouter, injector) {
+        this.placeRouter = placeRouter;
+        this.injector = injector;
     }
     /**
-     * @param {?} route
+     * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
      */
-    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;
+    canActivate(activatedRoute, state) {
+        if (PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
+            /** @type {?} */
+            const placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
+            /** @type {?} */
+            const snapshot = ParameterSnapshot.create(placeDefinition, activatedRoute.paramMap);
+            return snapshot.sanitise(this.injector).then((/**
+             * @param {?} sanitised
+             * @return {?}
+             */
+            sanitised => {
+                if (sanitised.hasChanged(snapshot)) {
+                    return this.placeRouter.createUrlTree(activatedRoute, snapshot, sanitised);
+                }
+                else {
+                    return true;
+                }
+            }));
+        }
+        else {
+            return lang.illegalState(`expected component to be an instance of PlaceComponent, got ${activatedRoute.component}`);
+        }
     }
 }
 PlaceRouteGuard.decorators = [
@@ -3174,21 +3278,21 @@ PlaceRouteGuard.decorators = [
 ];
 /** @nocollapse */
 PlaceRouteGuard.ctorParameters = () => [
-    { type: PlaceService },
-    { type: Router }
+    { type: PlaceRouter },
+    { type: Injector }
 ];
-/** @nocollapse */ PlaceRouteGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(ɵɵinject(PlaceService), ɵɵinject(Router)); }, token: PlaceRouteGuard, providedIn: "root" });
+/** @nocollapse */ PlaceRouteGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(ɵɵinject(PlaceRouter), ɵɵinject(INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.placeService;
+    PlaceRouteGuard.prototype.placeRouter;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.router;
+    PlaceRouteGuard.prototype.injector;
 }
 
 /**
@@ -3201,14 +3305,13 @@ if (false) {
 class DefaultParameterSanitiser {
     /**
      * @param {?} def
-     * @param {?} placeService
-     * @param {?} options
+     * @param {?} remember
+     * @param {?} defaultValue
      */
-    constructor(def, placeService, options) {
+    constructor(def, remember, defaultValue) {
         this.def = def;
-        this.placeService = placeService;
-        this.remember = isNil(options.remember) ? false : options.remember;
-        this.defaultValue = isNil(options.defaultValue) ? null : options.defaultValue;
+        this.remember = remember;
+        this.defaultValue = defaultValue;
     }
     /**
      * @param {?} value
@@ -3220,7 +3323,7 @@ class DefaultParameterSanitiser {
             if (this.remember) {
                 // value = null;
             }
-            return this.isBlank(value) && !isNil(this.defaultValue) ? this.defaultValue : value;
+            return this.isBlank(value) && !___default.isNil(this.defaultValue) ? this.defaultValue : value;
         }
         else {
             return value;
@@ -3233,8 +3336,8 @@ class DefaultParameterSanitiser {
      */
     isBlank(value) {
         /** @type {?} */
-        const isNil$1 = isNil(value);
-        return this.def.isArray ? !isNil$1 || value['length'] < 1 : isNil$1;
+        const isNil = ___default.isNil(value);
+        return this.def.isArray ? !isNil || value['length'] < 1 : isNil;
     }
 }
 __decorate([
@@ -3248,22 +3351,11 @@ if (false) {
      * @type {?}
      * @private
      */
+    DefaultParameterSanitiser.prototype.def;
+    /** @type {?} */
     DefaultParameterSanitiser.prototype.remember;
-    /**
-     * @type {?}
-     * @private
-     */
+    /** @type {?} */
     DefaultParameterSanitiser.prototype.defaultValue;
-    /**
-     * @type {?}
-     * @private
-     */
-    DefaultParameterSanitiser.prototype.def;
-    /**
-     * @type {?}
-     * @private
-     */
-    DefaultParameterSanitiser.prototype.placeService;
 }
 
 /**
@@ -3297,8 +3389,6 @@ if (false) {
     ParameterOptions.prototype.remember;
     /** @type {?|undefined} */
     ParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    ParameterOptions.prototype.sanitiser;
 }
 /**
  * @record
@@ -3314,8 +3404,6 @@ if (false) {
     ListParameterOptions.prototype.remember;
     /** @type {?|undefined} */
     ListParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    ListParameterOptions.prototype.sanitiser;
 }
 /**
  * @template T
@@ -3324,7 +3412,6 @@ if (false) {
  * @return {?}
  */
 function RouteId(type, options) {
-    // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
      * @param {?} propertyKey
@@ -3332,7 +3419,7 @@ function RouteId(type, options) {
      */
     (prototype, propertyKey) => {
         /** @type {?} */
-        const param = createDefinition(propertyKey, type, options, true);
+        const param = new ParameterDefinition.RouteId(propertyKey.toString(), type, options);
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
@@ -3344,7 +3431,6 @@ function RouteId(type, options) {
  * @return {?}
  */
 function RouteParameter(type, options) {
-    // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
      * @param {?} propertyKey
@@ -3352,7 +3438,7 @@ function RouteParameter(type, options) {
      */
     (prototype, propertyKey) => {
         /** @type {?} */
-        const param = createDefinition(propertyKey, type, options, false);
+        const param = new ParameterDefinition.ValueParameter(propertyKey.toString(), type, options);
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
@@ -3364,7 +3450,6 @@ function RouteParameter(type, options) {
  * @return {?}
  */
 function RouteParameterList(elementType, options) {
-    // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
      * @param {?} propertyKey
@@ -3372,82 +3457,11 @@ function RouteParameterList(elementType, options) {
      */
     (prototype, propertyKey) => {
         /** @type {?} */
-        const param = createArrayDefinition(propertyKey, elementType, options);
+        const param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), elementType, options);
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
 }
-/**
- * @template T
- * @param {?} propertyName
- * @param {?} type
- * @param {?} options
- * @param {?} routeId
- * @return {?}
- */
-function createDefinition(propertyName, type, options, routeId) {
-    /** @type {?} */
-    const opts = Opts.get(options);
-    /** @type {?} */
-    const propertyNameAsString = assert.notNil(propertyName).toString();
-    /** @type {?} */
-    const def = {
-        name: opts.getOptional('as', propertyNameAsString),
-        propertyName: propertyNameAsString,
-        type: assert.notNil(type),
-        sanitiser: opts.getOptional('sanitiser', null),
-        isRouteId: routeId,
-        isArray: false
-    };
-    return def;
-}
-/**
- * @template T
- * @param {?} propertyName
- * @param {?} type
- * @param {?} options
- * @return {?}
- */
-function createArrayDefinition(propertyName, type, options) {
-    /** @type {?} */
-    const opts = Opts.get(options);
-    /** @type {?} */
-    const propertyNameAsString = assert.notNil(propertyName).toString();
-    /** @type {?} */
-    const def = {
-        name: opts.getOptional('as', propertyNameAsString),
-        propertyName: propertyNameAsString,
-        type: assert.notNil(type),
-        sanitiser: opts.getOptional('sanitiser', null),
-        isRouteId: false,
-        isArray: true
-    };
-    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 {?} */
-    ParameterDefinition.prototype.name;
-    /** @type {?} */
-    ParameterDefinition.prototype.propertyName;
-    /** @type {?} */
-    ParameterDefinition.prototype.type;
-    /** @type {?} */
-    ParameterDefinition.prototype.sanitiser;
-    /** @type {?} */
-    ParameterDefinition.prototype.isRouteId;
-    /** @type {?} */
-    ParameterDefinition.prototype.isArray;
-}
 
 /**
  * @fileoverview added by tsickle
@@ -3466,20 +3480,6 @@ if (false) {
      */
     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
@@ -3517,7 +3517,7 @@ var ParameterType;
          * @return {?}
          */
         parse(value) {
-            return isNil(value) || isEmpty(value) ? null : +value;
+            return ___default.isNil(value) || ___default.isEmpty(value) ? null : +value;
         }
     }
     class BooleanType {
@@ -3569,7 +3569,7 @@ class Sanitiser {
      * @return {?}
      */
     get valueChanged() {
-        return !isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+        return !___default.isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
     }
     /**
      * @return {?}
@@ -3639,13 +3639,11 @@ class RouteParameterSanitiser {
     /**
      * @param {?} parameterDefs
      * @param {?} snapshot
-     * @param {?} placeService
      * @param {?} injector
      */
-    constructor(parameterDefs, snapshot, placeService, injector) {
+    constructor(parameterDefs, snapshot, injector) {
         this.parameterDefs = parameterDefs;
         this.snapshot = snapshot;
-        this.placeService = placeService;
         this.injector = injector;
         this.parameterSanitisers = [];
         /** @type {?} */
@@ -3699,17 +3697,7 @@ class RouteParameterSanitiser {
      * @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 def.getSanitiser(this.injector);
     }
     /**
      * @return {?}
@@ -3743,13 +3731,13 @@ class RouteParameterSanitiser {
      * @return {?}
      */
     isSanitiserContructor(value) {
-        return isFunction(value) && lang.constructorChain((/** @type {?} */ ((/** @type {?} */ (value))))).includes(Sanitiser);
+        return ___default.isFunction(value) && lang.constructorChain((/** @type {?} */ ((/** @type {?} */ (value))))).includes(Sanitiser);
     }
 }
 __decorate([
-    Memoize(),
+    Memoize$1(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
+    __metadata("design:paramtypes", [ParameterDefinition]),
     __metadata("design:returntype", Object)
 ], RouteParameterSanitiser.prototype, "getSanitiser", null);
 __decorate([
@@ -3774,8 +3762,6 @@ if (false) {
     /** @type {?} */
     RouteParameterSanitiser.prototype.snapshot;
     /** @type {?} */
-    RouteParameterSanitiser.prototype.placeService;
-    /** @type {?} */
     RouteParameterSanitiser.prototype.injector;
 }
 (function (Sanitiser) {
@@ -3871,5 +3857,5 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-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 };
+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, ParameterDefinition, ParameterSnapshot, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterList, RouteParameterSanitiser, Sanitiser, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, AlertDialogComponent as ɵba, DialogInteractionService as ɵbc, InteractionContext as ɵbd, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, leftRightPlaceAnimation as ɵm, LEFT_RIGHT_PLACE_ANIMATION as ɵn, PlaceRouter as ɵo, PlaceHistory as ɵp, TabbedPlaceNavigationComponent as ɵq, AbstractPlaceNavigationComponent as ɵr, ListPlaceNavComponent as ɵs, InteractionModule as ɵt, ActivityContainerComponent as ɵu, ActivityOutletComponent as ɵv, ConfirmationDialogComponent as ɵw, AbstractActivity as ɵx, ACTIVITY_DATA as ɵy };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map