@coolon/angular-ui-powerups 0.0.43 → 0.0.46

package/fesm5/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 { __extends, __decorate, __metadata, __assign, __awaiter, __generator, __values } 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, ActivatedRouteSnapshot, UrlTree, 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';
 
@@ -634,7 +634,7 @@ var FocusBindingDirective = /** @class */ (function (_super) {
             }));
         }
         else {
-            Logger.get(this).warn("pectinFocusBinding was nil");
+            Logger.get(this).warn('pectinFocusBinding was nil');
         }
     };
     /**
@@ -864,6 +864,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
  */
 var ActivityOutletComponent = /** @class */ (function () {
@@ -1317,7 +1322,7 @@ var ConfirmationDialogComponent = /** @class */ (function (_super) {
     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}"]
                 }] }
     ];
@@ -1459,7 +1464,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     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]=\"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\" [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}"]
                 }] }
     ];
@@ -1758,1039 +1763,1490 @@ var EmptyStateComponent = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// 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}]
-var ParameterSnapshot = /** @class */ (function () {
-    function ParameterSnapshot(placeDefinition, resolved) {
-        this.placeDefinition = placeDefinition;
-        this.resolved = resolved;
+var PlaceDefinition = /** @class */ (function () {
+    function PlaceDefinition(component, path, authenticate, order, data, routeParameters, children) {
+        this.component = component;
+        this.path = path;
+        this.authenticate = authenticate;
+        this.order = order;
+        this.data = data;
+        this.routeParameters = routeParameters;
+        this.children = children;
     }
     /**
-     * @param {?} other
      * @return {?}
      */
-    ParameterSnapshot.prototype.hasChanged = /**
-     * @param {?} other
+    PlaceDefinition.prototype.getRouteParameters = /**
      * @return {?}
      */
-    function (other) {
-        /** @type {?} */
-        var changed = this.resolved.find((/**
-         * @param {?} r
-         * @return {?}
-         */
-        function (r) {
-            return !r.isSame(other.getResolvedParameterValue(r.parameterDef));
-        }));
-        if (changed) {
-            console.log({ mine: changed, theirs: other.getResolvedParameter(changed.parameterDef) });
-        }
-        return !!changed;
+    function () {
+        return this.routeParameters;
     };
     /**
-     * @param {?} other
+     * @template T
+     * @param {?} key
+     * @param {?=} defaultValue
      * @return {?}
      */
-    ParameterSnapshot.prototype.asUrlSegment = /**
-     * @param {?} other
+    PlaceDefinition.prototype.getData = /**
+     * @template T
+     * @param {?} key
+     * @param {?=} defaultValue
      * @return {?}
      */
-    function (other) {
-        assert.isTruthy(this.hasChanged(other));
-        /** @type {?} */
-        var routeParts = [];
-        /** @type {?} */
-        var gainedId = this.getFormattedRouteId() && !other.getFormattedRouteId();
-        /** @type {?} */
-        var sameId = this.getFormattedRouteId() === other.getFormattedRouteId();
-        /** @type {?} */
-        var lostId = (!this.getFormattedRouteId() && other.getFormattedRouteId());
-        /** @type {?} */
-        var changedId = (this.getFormattedRouteId() !== other.getFormattedRouteId());
-        if (lostId || changedId) {
-            routeParts.push('..');
-            if (changedId) {
-                routeParts.push(this.getFormattedRouteId());
-            }
+    function (key, defaultValue) {
+        return this.data ?
+            ___default.isNil(this.data[key]) ? defaultValue : this.data[key] :
+            defaultValue;
+    };
+    /**
+     * @template T
+     * @param {?} keys
+     * @param {?=} defaultValue
+     * @return {?}
+     */
+    PlaceDefinition.prototype.searchData = /**
+     * @template T
+     * @param {?} keys
+     * @param {?=} defaultValue
+     * @return {?}
+     */
+    function (keys, defaultValue) {
+        var _this = this;
+        if (this.data) {
+            /** @type {?} */
+            var found = keys.find((/**
+             * @param {?} key
+             * @return {?}
+             */
+            function (key) { return !___default.isNil(_this.data[key]); }));
+            return found ? this.data[found] : defaultValue;
         }
         else {
-            routeParts.push('.');
+            return defaultValue;
         }
-        routeParts.push(this.getFormattedParameters());
-        return routeParts;
     };
+    return PlaceDefinition;
+}());
+if (false) {
+    /** @type {?} */
+    PlaceDefinition.prototype.component;
+    /** @type {?} */
+    PlaceDefinition.prototype.path;
+    /** @type {?} */
+    PlaceDefinition.prototype.authenticate;
+    /** @type {?} */
+    PlaceDefinition.prototype.order;
+    /** @type {?} */
+    PlaceDefinition.prototype.data;
+    /** @type {?} */
+    PlaceDefinition.prototype.routeParameters;
+    /** @type {?} */
+    PlaceDefinition.prototype.children;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+// RAKE: making this Symbol(...) broke things.
+/** @type {?} */
+var DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
+// this one seems ok.
+/** @type {?} */
+var ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+var PlaceComponent = /** @class */ (function (_super) {
+    __extends(PlaceComponent, _super);
+    function PlaceComponent() {
+        return _super.call(this) || this;
+    }
     /**
-     * @template T, S
-     * @param {?} parameterDef
+     * @param {?} resolvedParameters
      * @return {?}
      */
-    ParameterSnapshot.prototype.getResolvedParameter = /**
-     * @template T, S
-     * @param {?} parameterDef
+    PlaceComponent.prototype.initialiseBindings = /**
+     * @param {?} resolvedParameters
      * @return {?}
      */
-    function (parameterDef) {
-        return this.resolved.find((/**
-         * @param {?} r
+    function (resolvedParameters) {
+        var _this = this;
+        assert.isNil(this.resolvedParameters);
+        this.resolvedParameters = resolvedParameters;
+        this.placeDefinition.getRouteParameters().forEach((/**
+         * @param {?} parameterDef
          * @return {?}
          */
-        function (r) { return r.parameterDef === parameterDef; }));
+        function (parameterDef) {
+            _this.installBinding(parameterDef);
+        }));
     };
     /**
+     * @private
      * @template T, S
      * @param {?} parameterDef
      * @return {?}
      */
-    ParameterSnapshot.prototype.getResolvedParameterValue = /**
+    PlaceComponent.prototype.installBinding = /**
+     * @private
      * @template T, S
      * @param {?} parameterDef
      * @return {?}
      */
     function (parameterDef) {
         /** @type {?} */
-        var resolvedParameter = this.getResolvedParameter(parameterDef);
-        return resolvedParameter ? resolvedParameter.value : null;
+        var model = (/** @type {?} */ (this[parameterDef.propertyName]));
+        // this.txo.observe(parameterDef.propertyName, model);
+        this.registerDisposable(new Binding(this.resolvedParameters, model, {
+            toRight: /**
+             * @param {?} parameters
+             * @return {?}
+             */
+            function (parameters) {
+                return parameters.getValueOf(parameterDef);
+            },
+            toLeft: /**
+             * @param {?} value
+             * @param {?=} currentParameters
+             * @return {?}
+             */
+            function (value, currentParameters) {
+                return currentParameters.replace(parameterDef, value);
+            }
+        }));
     };
+    Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PlaceComponent.prototype, "childPlaces", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.placeDefinition.children.map((/**
+             * @param {?} d
+             * @return {?}
+             */
+            function (d) { return d.component; }));
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
-    ParameterSnapshot.prototype.getRouteId = /**
+    PlaceComponent.prototype.canDeactivate = /**
      * @return {?}
      */
     function () {
-        return this.getResolvedRouteId() ? this.getResolvedRouteId().value : null;
+        return true;
     };
     /**
-     * @param {?} name
      * @return {?}
      */
-    ParameterSnapshot.prototype.getRouteParameter = /**
-     * @param {?} name
+    PlaceComponent.prototype.onPlaceReady = /**
      * @return {?}
      */
-    function (name) {
-        /** @type {?} */
-        var resolvedParameter = this.resolved.find((/**
-         * @param {?} r
-         * @return {?}
-         */
-        function (r) { return r.parameterDef.name === name; }));
-        return resolvedParameter ? resolvedParameter.value : null;
+    function () {
     };
+    __decorate([
+        Memoize(),
+        __metadata("design:type", PlaceDefinition),
+        __metadata("design:paramtypes", [])
+    ], PlaceComponent.prototype, "placeDefinition", null);
+    return PlaceComponent;
+}(DisposableComponent));
+if (false) {
     /**
+     * @type {?}
      * @private
-     * @return {?}
-     */
-    ParameterSnapshot.prototype.getResolvedRouteId = /**
-     * @private
-     * @return {?}
      */
-    function () {
-        // RouteId's are never arrays: see parameter-decorators.ts createDefinition methods. It would be nice to
-        // capture this in the type system though
-        return (/** @type {?} */ (this.resolved.find((/**
-         * @param {?} p
-         * @return {?}
-         */
-        function (p) { return p.parameterDef.isRouteId; }))));
-    };
+    PlaceComponent.prototype.resolvedParameters;
+}
+(function (PlaceComponent) {
     /**
+     * @param {?} target
      * @return {?}
      */
-    ParameterSnapshot.prototype.hasRouteId = /**
-     * @return {?}
-     */
-    function () {
-        return !!this.getResolvedRouteId();
-    };
+    function isPlaceComponentConstructor(target) {
+        return lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent);
+    }
+    PlaceComponent.isPlaceComponentConstructor = isPlaceComponentConstructor;
     /**
+     * @param {?} klass
      * @return {?}
      */
-    ParameterSnapshot.prototype.getFormattedRouteId = /**
-     * @return {?}
-     */
-    function () {
-        /** @type {?} */
-        var routeIdParam = this.getResolvedRouteId();
-        return routeIdParam ? routeIdParam.formattedValue() : null;
-    };
+    function getRouteParameters(klass) {
+        return Klass.get(klass).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
+    }
+    PlaceComponent.getRouteParameters = getRouteParameters;
     /**
+     * @param {?} klass
      * @return {?}
      */
-    ParameterSnapshot.prototype.getFormattedParameters = /**
+    function getDefinition(klass) {
+        return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+    }
+    PlaceComponent.getDefinition = getDefinition;
+    /**
+     * @param {?} klass
+     * @param {?} definition
      * @return {?}
      */
-    function () {
-        /** @type {?} */
-        var params = {};
-        /** @type {?} */
-        var routeIdParam = this.resolved.filter((/**
-         * @param {?} p
-         * @return {?}
-         */
-        function (p) { return !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
+ */
+var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
+    __extends(AbstractPlaceNavigationComponent, _super);
+    function AbstractPlaceNavigationComponent() {
+        var _this = _super.call(this) || this;
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        _this.placeDefinitions = chain(_this.placesModel).map((/**
+         * @param {?} c
          * @return {?}
          */
-        function (p) {
-            params[p.parameterDef.name] = p.formattedValue();
-        }));
-        return params;
-    };
+        function (c) { return PlaceComponent.getDefinition(c); }));
+        return _this;
+    }
     /**
-     * @template T, S
-     * @param {?} parameter
-     * @param {?} value
+     * @param {?} placeDef
      * @return {?}
      */
-    ParameterSnapshot.prototype.replace = /**
-     * @template T, S
-     * @param {?} parameter
-     * @param {?} value
+    AbstractPlaceNavigationComponent.prototype.getNav = /**
+     * @param {?} placeDef
      * @return {?}
      */
-    function (parameter, value) {
-        return new ParameterSnapshot(this.placeDefinition, this.resolved.map((/**
-         * @param {?} p
-         * @return {?}
-         */
-        function (p) {
-            return p.parameterDef === parameter ? p.replace(value) : p;
-        })));
+    function (placeDef) {
+        /** @type {?} */
+        var navItem = (/** @type {?} */ (placeDef.getData('nav')));
+        return {
+            title: (/**
+             * @return {?}
+             */
+            function () { return navItem ? navItem.title() : placeDef.searchData(['navTitle', 'title']); }),
+            tooltip: (/**
+             * @return {?}
+             */
+            function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getData('navTooltip', null); }),
+            icon: (/**
+             * @return {?}
+             */
+            function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getData('navIcon', null); })
+        };
     };
     /**
-     * @param {?} url
      * @return {?}
      */
-    ParameterSnapshot.prototype.updateUrl = /**
-     * @param {?} url
+    AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
      * @return {?}
      */
-    function (url) {
-        return url;
+    function () {
+    };
+    AbstractPlaceNavigationComponent.propDecorators = {
+        places: [{ type: Input }],
+        placesModel: [{ type: Input }]
     };
-    var _a;
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", ParameterSnapshot.ResolvedParameter)
-    ], ParameterSnapshot.prototype, "getResolvedParameter", null);
     __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);
+        StoreInListModel('placesModel'),
+        __metadata("design:type", Array)
+    ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
     __decorate([
-        Memoize(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [String]),
-        __metadata("design:returntype", Object)
-    ], ParameterSnapshot.prototype, "getRouteParameter", null);
+        UseDelegate(),
+        __metadata("design:type", ListModel)
+    ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
     __decorate([
-        Memoize(),
+        Memoize$1(),
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
-    ], ParameterSnapshot.prototype, "getResolvedRouteId", null);
-    return ParameterSnapshot;
-}());
+        __metadata("design:paramtypes", [PlaceDefinition]),
+        __metadata("design:returntype", Object)
+    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+    return AbstractPlaceNavigationComponent;
+}(DisposableComponent));
 if (false) {
     /** @type {?} */
-    ParameterSnapshot.prototype.placeDefinition;
+    AbstractPlaceNavigationComponent.prototype.places;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placesModel;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeDefinitions;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var ListPlaceNavComponent = /** @class */ (function (_super) {
+    __extends(ListPlaceNavComponent, _super);
+    function ListPlaceNavComponent() {
+        var _this = _super.call(this) || this;
+        _this.expanded = true;
+        return _this;
+    }
     /**
-     * @type {?}
-     * @private
+     * @return {?}
      */
-    ParameterSnapshot.prototype.resolved;
+    ListPlaceNavComponent.prototype.expandMenu = /**
+     * @return {?}
+     */
+    function () {
+        this.expanded = true;
+    };
+    /**
+     * @return {?}
+     */
+    ListPlaceNavComponent.prototype.collapseMenu = /**
+     * @return {?}
+     */
+    function () {
+        this.expanded = false;
+    };
+    /**
+     * @return {?}
+     */
+    ListPlaceNavComponent.prototype.toggleMenu = /**
+     * @return {?}
+     */
+    function () {
+        this.expanded = !this.expanded;
+    };
+    ListPlaceNavComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'angular-ui-powerups-list-place-nav',
+                    template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                    styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:inherit}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
+                }] }
+    ];
+    /** @nocollapse */
+    ListPlaceNavComponent.ctorParameters = function () { return []; };
+    ListPlaceNavComponent.propDecorators = {
+        expanded: [{ type: HostBinding, args: ['class.expanded',] }]
+    };
+    return ListPlaceNavComponent;
+}(AbstractPlaceNavigationComponent));
+if (false) {
+    /** @type {?} */
+    ListPlaceNavComponent.prototype.expanded;
 }
-(function (ParameterSnapshot) {
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var PlaceHistory = /** @class */ (function () {
+    function PlaceHistory(router) {
+        this.router = router;
+        this._history = new Map();
+    }
+    /**
+     * @param {?} state
+     * @return {?}
+     */
+    PlaceHistory.prototype.add = /**
+     * @param {?} state
+     * @return {?}
+     */
+    function (state) {
+        /** @type {?} */
+        var history = this.getHistory(state.placeDefinition);
+        /** @type {?} */
+        var previousState = ___default.last(history);
+        if (!previousState || state.hasChanged(previousState)) {
+            history.unshift(state); // LIFO
+            this.setHistory(state.placeDefinition, history.slice(-3)); // limit our history to 3 visits
+        }
+    };
     /**
      * @param {?} placeDef
-     * @param {?} paramMap
      * @return {?}
      */
-    function create(placeDef, paramMap) {
+    PlaceHistory.prototype.getHistory = /**
+     * @param {?} placeDef
+     * @return {?}
+     */
+    function (placeDef) {
         /** @type {?} */
-        var resolvedParameters = placeDef.getRouteParameters()
-            .map((/**
-         * @param {?} def
-         * @return {?}
-         */
-        function (def) {
-            if (def.isArray) {
-                /** @type {?} */
-                var value = paramMap.has(def.name) ? paramMap.getAll(def.name).map((/**
-                 * @param {?} raw
-                 * @return {?}
-                 */
-                function (raw) { return def.type.parse(raw); })) : null;
-                return new ResolvedArrayParameter(def, value);
-            }
-            else {
-                /** @type {?} */
-                var value = paramMap.has(def.name) ? def.type.parse(paramMap.get(def.name)) : null;
-                return new ResolvedValueParameter(def, value);
-            }
-        }));
-        return new ParameterSnapshot(placeDef, resolvedParameters);
+        var history = this._history.get(placeDef);
+        if (!history) {
+            history = [];
+            this.setHistory(placeDef, history);
+        }
+        return history;
+    };
+    /**
+     * @private
+     * @param {?} placeDef
+     * @param {?} history
+     * @return {?}
+     */
+    PlaceHistory.prototype.setHistory = /**
+     * @private
+     * @param {?} placeDef
+     * @param {?} history
+     * @return {?}
+     */
+    function (placeDef, history) {
+        this._history.set(placeDef, history);
+    };
+    PlaceHistory.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    PlaceHistory.ctorParameters = function () { return [
+        { type: Router }
+    ]; };
+    /** @nocollapse */ PlaceHistory.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(ɵɵinject(Router)); }, token: PlaceHistory, providedIn: "root" });
+    return PlaceHistory;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceHistory.prototype._history;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceHistory.prototype.router;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ * @template T, S
+ */
+var  /**
+ * @abstract
+ * @template T, S
+ */
+ParameterDefinition = /** @class */ (function () {
+    function ParameterDefinition(propertyName, type, options) {
+        this.propertyName = propertyName;
+        this.type = type;
+        /** @type {?} */
+        var opts = Opts.get(options);
+        this.name = opts.getOptional('as', propertyName);
+        this.remember = opts.getOptional('remember', false);
+        this.defaultValue = opts.getOptional('defaultValue', null);
     }
-    ParameterSnapshot.create = create;
     /**
-     * @abstract
-     * @template T, S
+     * @param {?} injector
+     * @return {?}
+     */
+    ParameterDefinition.prototype.getSanitiser = /**
+     * @param {?} injector
+     * @return {?}
+     */
+    function (injector) {
+        if (this.remember || !___default.isNil(this.defaultValue)) {
+            return new ParameterDefinition.DefaultParameterSanitiser(this.remember, this.defaultValue, injector.get(PlaceHistory));
+        }
+        else {
+            return null;
+        }
+    };
+    return ParameterDefinition;
+}());
+if (false) {
+    /** @type {?} */
+    ParameterDefinition.prototype.isRouteId;
+    /** @type {?} */
+    ParameterDefinition.prototype.isArray;
+    /** @type {?} */
+    ParameterDefinition.prototype.name;
+    /**
+     * @type {?}
+     * @private
+     */
+    ParameterDefinition.prototype.remember;
+    /**
+     * @type {?}
+     * @private
+     */
+    ParameterDefinition.prototype.defaultValue;
+    /** @type {?} */
+    ParameterDefinition.prototype.propertyName;
+    /** @type {?} */
+    ParameterDefinition.prototype.type;
+}
+(function (ParameterDefinition) {
+    /**
+     * @record
+     * @template T
+     */
+    function Options() { }
+    ParameterDefinition.Options = Options;
+    if (false) {
+        /** @type {?|undefined} */
+        Options.prototype.as;
+        /** @type {?|undefined} */
+        Options.prototype.optional;
+        /** @type {?|undefined} */
+        Options.prototype.remember;
+        /** @type {?|undefined} */
+        Options.prototype.defaultValue;
+    }
+    /**
+     * @template T
      */
     var /**
-     * @abstract
-     * @template T, S
+     * @template T
      */
-    ResolvedParameter = /** @class */ (function () {
-        function ResolvedParameter(parameterDef, value) {
-            this.parameterDef = parameterDef;
-            this.value = value;
+    RouteId = /** @class */ (function (_super) {
+        __extends(RouteId, _super);
+        function RouteId() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.isRouteId = true;
+            _this.isArray = false;
+            return _this;
         }
-        /**
-         * @return {?}
-         */
-        ResolvedParameter.prototype.isRouteId = /**
-         * @return {?}
-         */
-        function () {
-            return this.parameterDef.isRouteId;
-        };
-        return ResolvedParameter;
-    }());
-    ParameterSnapshot.ResolvedParameter = ResolvedParameter;
+        return RouteId;
+    }(ParameterDefinition));
+    ParameterDefinition.RouteId = RouteId;
     if (false) {
         /** @type {?} */
-        ResolvedParameter.prototype.parameterDef;
+        RouteId.prototype.isRouteId;
         /** @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) { };
+        RouteId.prototype.isArray;
     }
     /**
      * @template T
      */
-    var ResolvedValueParameter = /** @class */ (function (_super) {
-        __extends(ResolvedValueParameter, _super);
-        function ResolvedValueParameter() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    var /**
+     * @template T
+     */
+    ValueParameter = /** @class */ (function (_super) {
+        __extends(ValueParameter, _super);
+        function ValueParameter() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.isRouteId = false;
+            _this.isArray = false;
+            return _this;
         }
-        /**
-         * @param {?} otherValue
-         * @return {?}
-         */
-        ResolvedValueParameter.prototype.isSame = /**
-         * @param {?} otherValue
-         * @return {?}
-         */
-        function (otherValue) {
-            return this.value === otherValue;
-        };
-        /**
-         * @param {?} dest
-         * @return {?}
-         */
-        ResolvedValueParameter.prototype.injectRouteParam = /**
-         * @param {?} dest
-         * @return {?}
-         */
-        function (dest) {
-            dest[this.parameterDef.name] = this.parameterDef.type.format(this.value);
-        };
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        ResolvedValueParameter.prototype.replace = /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            return new ResolvedValueParameter(this.parameterDef, value);
-        };
-        /**
-         * @return {?}
-         */
-        ResolvedValueParameter.prototype.formattedValue = /**
-         * @return {?}
-         */
-        function () {
-            return !isNil(this.value) ? this.parameterDef.type.format(this.value) : null;
-        };
-        __decorate([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", Boolean)
-        ], ResolvedValueParameter.prototype, "isSame", null);
-        return ResolvedValueParameter;
-    }(ResolvedParameter));
-    ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
+        return ValueParameter;
+    }(ParameterDefinition));
+    ParameterDefinition.ValueParameter = ValueParameter;
+    if (false) {
+        /** @type {?} */
+        ValueParameter.prototype.isRouteId;
+        /** @type {?} */
+        ValueParameter.prototype.isArray;
+    }
     /**
      * @template T
      */
-    var ResolvedArrayParameter = /** @class */ (function (_super) {
-        __extends(ResolvedArrayParameter, _super);
-        function ResolvedArrayParameter() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    var /**
+     * @template T
+     */
+    ArrayParameter = /** @class */ (function (_super) {
+        __extends(ArrayParameter, _super);
+        function ArrayParameter() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.isRouteId = false;
+            _this.isArray = true;
+            return _this;
+        }
+        return ArrayParameter;
+    }(ParameterDefinition));
+    ParameterDefinition.ArrayParameter = ArrayParameter;
+    if (false) {
+        /** @type {?} */
+        ArrayParameter.prototype.isRouteId;
+        /** @type {?} */
+        ArrayParameter.prototype.isArray;
+    }
+    /**
+     * @template T, S
+     */
+    var /**
+     * @template T, S
+     */
+    DefaultParameterSanitiser = /** @class */ (function () {
+        function DefaultParameterSanitiser(remember, defaultValue, placeHistory) {
+            this.remember = remember;
+            this.defaultValue = defaultValue;
+            this.placeHistory = placeHistory;
         }
         /**
-         * @param {?} otherValue
-         * @return {?}
-         */
-        ResolvedArrayParameter.prototype.isSame = /**
-         * @param {?} otherValue
-         * @return {?}
-         */
-        function (otherValue) {
-            return isEqual(this.value, otherValue);
-        };
-        /**
-         * @param {?} dest
-         * @return {?}
-         */
-        ResolvedArrayParameter.prototype.injectRouteParam = /**
-         * @param {?} dest
-         * @return {?}
-         */
-        function (dest) {
-            var _this = this;
-            dest[this.parameterDef.name] = this.value.map((/**
-             * @param {?} v
-             * @return {?}
-             */
-            function (v) { return _this.parameterDef.type.format(v); }));
-        };
-        /**
+         * @param {?} parameterDef
          * @param {?} value
+         * @param {?=} visit
          * @return {?}
          */
-        ResolvedArrayParameter.prototype.replace = /**
+        DefaultParameterSanitiser.prototype.sanitise = /**
+         * @param {?} parameterDef
          * @param {?} value
+         * @param {?=} visit
          * @return {?}
          */
-        function (value) {
-            return new ResolvedArrayParameter(this.parameterDef, value);
+        function (parameterDef, value, visit) {
+            var _this = this;
+            if (this.isBlank(parameterDef, value)) {
+                if (this.remember) {
+                    /** @type {?} */
+                    var visits = this.placeHistory.getHistory(visit.placeDefinition);
+                    value = visits.map((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    function (v) { return v.getValueOf(parameterDef); }))
+                        .filter((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    function (v) { return !___default.isNil(v); }))
+                        .find((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    function (v) { return !_this.isBlank(parameterDef, v); }));
+                }
+                value = this.isBlank(parameterDef, value) ? this.defaultValue : value;
+                console.log(parameterDef.name + " is blank, returning: " + value);
+                return value;
+            }
+            else {
+                console.log(parameterDef.name + " is not blank");
+                return value;
+            }
         };
         /**
+         * @private
+         * @param {?} def
+         * @param {?} value
          * @return {?}
          */
-        ResolvedArrayParameter.prototype.formattedValue = /**
+        DefaultParameterSanitiser.prototype.isBlank = /**
+         * @private
+         * @param {?} def
+         * @param {?} value
          * @return {?}
          */
-        function () {
-            var _this = this;
-            return this.value ? this.value.map((/**
-             * @param {?} v
-             * @return {?}
-             */
-            function (v) { return _this.parameterDef.type.format(v); })) : [];
+        function (def, value) {
+            /** @type {?} */
+            var isNil = ___default.isNil(value);
+            return isNil ? true : def.isArray ? value['length'] < 1 : false;
         };
-        __decorate([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Array]),
-            __metadata("design:returntype", Boolean)
-        ], ResolvedArrayParameter.prototype, "isSame", null);
-        return ResolvedArrayParameter;
-    }(ResolvedParameter));
-    ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
-})(ParameterSnapshot || (ParameterSnapshot = {}));
+        return DefaultParameterSanitiser;
+    }());
+    ParameterDefinition.DefaultParameterSanitiser = DefaultParameterSanitiser;
+    if (false) {
+        /** @type {?} */
+        DefaultParameterSanitiser.prototype.remember;
+        /** @type {?} */
+        DefaultParameterSanitiser.prototype.defaultValue;
+        /** @type {?} */
+        DefaultParameterSanitiser.prototype.placeHistory;
+    }
+})(ParameterDefinition || (ParameterDefinition = {}));
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// RAKE: making this Symbol(...) broke things.
-/** @type {?} */
-var DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
-// this one seems ok.
-/** @type {?} */
-var ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-var PlaceComponent = /** @class */ (function (_super) {
-    __extends(PlaceComponent, _super);
-    function PlaceComponent(activatedRoute, placeService) {
-        var _this = _super.call(this) || this;
-        _this.activatedRoute = activatedRoute;
-        _this._incomingRouteChange = new MutableValueModel(false);
-        _this.resolvedParameters = new MutableValueModel();
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.placeDefinition.getRouteParameters().forEach((/**
-         * @param {?} p
-         * @return {?}
-         */
-        function (p) { return _this.installBinding(p); }));
-        observe.valuesFrom(activatedRoute.paramMap)
-            .last()
-            .map((/**
-         * @param {?} params
-         * @return {?}
-         */
-        function (params) { return ParameterSnapshot.create(_this.placeDefinition, params); }))
-            .subscribe((/**
-         * @param {?} resolvedParameters
+var ParameterSnapshot = /** @class */ (function () {
+    function ParameterSnapshot(placeDefinition, resolved) {
+        this.placeDefinition = placeDefinition;
+        this.resolved = resolved;
+    }
+    /**
+     * @param {?} other
+     * @param {?=} debug
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.hasChanged = /**
+     * @param {?} other
+     * @param {?=} debug
+     * @return {?}
+     */
+    function (other, debug) {
+        if (debug === void 0) { debug = false; }
+        /** @type {?} */
+        var changed = this.resolved.find((/**
+         * @param {?} r
          * @return {?}
          */
-        function (resolvedParameters) {
-            _this._incomingRouteChange.value = true;
-            _this.resolvedParameters.value = resolvedParameters;
-            _this._incomingRouteChange.value = false;
+        function (r) {
+            return !r.isSame(other.getValueOf(r.parameterDef));
         }));
-        when.valueOf(_this.resolvedParameters).changes((/**
-         * @param {?} params
-         * @param {?} previous
-         * @return {?}
-         */
-        function (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.
+        if (changed && debug) {
+            console.log({
+                name: changed.parameterDef.name,
+                mine: changed.value,
+                theirs: other.getValueOf(changed.parameterDef)
             });
-        }));
-        return _this;
-    }
-    Object.defineProperty(PlaceComponent.prototype, "incomingRouteChange", {
-        get: /**
+        }
+        return !!changed;
+    };
+    /**
+     * @template T, S
+     * @param {?} parameterDef
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.getParameter = /**
+     * @template T, S
+     * @param {?} parameterDef
+     * @return {?}
+     */
+    function (parameterDef) {
+        return this.resolved.find((/**
+         * @param {?} r
          * @return {?}
          */
-        function () {
-            return this._incomingRouteChange.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
+        function (r) { return r.parameterDef === parameterDef; }));
+    };
     /**
-     * @private
      * @template T, S
      * @param {?} parameterDef
      * @return {?}
      */
-    PlaceComponent.prototype.installBinding = /**
-     * @private
+    ParameterSnapshot.prototype.getValueOf = /**
      * @template T, S
      * @param {?} parameterDef
      * @return {?}
      */
     function (parameterDef) {
         /** @type {?} */
-        var model = (/** @type {?} */ (this[parameterDef.propertyName]));
-        // this.txo.observe(parameterDef.propertyName, model);
-        this.registerDisposable(new Binding(this.resolvedParameters, model, {
-            toRight: /**
-             * @param {?} parameters
-             * @return {?}
-             */
-            function (parameters) {
-                return parameters.getResolvedParameterValue(parameterDef);
-            },
-            toLeft: /**
-             * @param {?} value
-             * @param {?=} currentParameters
-             * @return {?}
-             */
-            function (value, currentParameters) {
-                return currentParameters.replace(parameterDef, value);
-            }
-        }));
+        var resolvedParameter = this.getParameter(parameterDef);
+        return resolvedParameter ? resolvedParameter.value : null;
     };
-    Object.defineProperty(PlaceComponent.prototype, "placeDefinition", {
-        get: /**
+    /**
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.getRouteIdValue = /**
+     * @return {?}
+     */
+    function () {
+        return this.getRouteIdParameter() ? this.getRouteIdParameter().value : null;
+    };
+    /**
+     * @param {?} name
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.getParameterValue = /**
+     * @param {?} name
+     * @return {?}
+     */
+    function (name) {
+        /** @type {?} */
+        var resolvedParameter = this.resolved.find((/**
+         * @param {?} r
          * @return {?}
          */
-        function () {
-            return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
-        },
-        enumerable: true,
-        configurable: true
-    });
+        function (r) { return r.parameterDef.name === name; }));
+        return resolvedParameter ? resolvedParameter.value : null;
+    };
     /**
+     * @private
      * @return {?}
      */
-    PlaceComponent.prototype.canDeactivate = /**
+    ParameterSnapshot.prototype.getRouteIdParameter = /**
+     * @private
      * @return {?}
      */
     function () {
-        return true;
+        // RouteId's are never arrays: see parameter-decorators.ts createDefinition methods. It would be nice to
+        // capture this in the type system though
+        return (/** @type {?} */ (this.resolved.find((/**
+         * @param {?} p
+         * @return {?}
+         */
+        function (p) { return p.parameterDef.isRouteId; }))));
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.getRouteParameters = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        return this.resolved.filter((/**
+         * @param {?} r
+         * @return {?}
+         */
+        function (r) { return !r.parameterDef.isRouteId; }));
+    };
+    /**
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.hasRouteId = /**
+     * @return {?}
+     */
+    function () {
+        return !!this.getRouteIdParameter();
+    };
+    /**
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.getFormattedRouteId = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var routeIdParam = this.getRouteIdParameter();
+        return routeIdParam ? routeIdParam.formattedValue() : null;
     };
-    // @Trace()
-    // @Trace()
     /**
      * @return {?}
      */
-    PlaceComponent.prototype.onPlaceReady = 
-    // @Trace()
+    ParameterSnapshot.prototype.getFormattedParameters = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var params = {};
+        /** @type {?} */
+        var routeIdParam = this.resolved.filter((/**
+         * @param {?} p
+         * @return {?}
+         */
+        function (p) { return !p.parameterDef.isRouteId; })).forEach((/**
+         * @param {?} p
+         * @return {?}
+         */
+        function (p) {
+            params[p.parameterDef.name] = p.formattedValue();
+        }));
+        return params;
+    };
     /**
      * @return {?}
      */
+    ParameterSnapshot.prototype.getAllFormattedParameters = /**
+     * @return {?}
+     */
     function () {
+        /** @type {?} */
+        var params = {};
+        /** @type {?} */
+        var routeIdParam = this.resolved.forEach((/**
+         * @param {?} p
+         * @return {?}
+         */
+        function (p) {
+            params[p.parameterDef.name] = p.formattedValue();
+        }));
+        return params;
+    };
+    /**
+     * @template T, S
+     * @param {?} parameter
+     * @param {?} value
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.replace = /**
+     * @template T, S
+     * @param {?} parameter
+     * @param {?} value
+     * @return {?}
+     */
+    function (parameter, value) {
+        return new ParameterSnapshot(this.placeDefinition, this.resolved.map((/**
+         * @param {?} p
+         * @return {?}
+         */
+        function (p) {
+            return p.parameterDef === parameter ? p.replace(value) : p;
+        })));
+    };
+    /**
+     * @param {?} injector
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.sanitise = /**
+     * @param {?} injector
+     * @return {?}
+     */
+    function (injector) {
+        return __awaiter(this, void 0, void 0, function () {
+            var routeId, sanitisedValue, result, routeParameters, i, sanitisedValue;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.hasRouteId()) return [3 /*break*/, 2];
+                        routeId = this.getRouteIdParameter();
+                        return [4 /*yield*/, routeId.sanitise(this, injector)];
+                    case 1:
+                        sanitisedValue = _a.sent();
+                        if (!routeId.isSame(sanitisedValue)) {
+                            // if the route id has changed we redirect immediately as other
+                            // parameter sanitisers might use it.
+                            return [2 /*return*/, this.replace(routeId.parameterDef, sanitisedValue)];
+                        }
+                        _a.label = 2;
+                    case 2:
+                        result = this;
+                        routeParameters = this.getRouteParameters();
+                        i = 0;
+                        _a.label = 3;
+                    case 3:
+                        if (!(i < routeParameters.length)) return [3 /*break*/, 6];
+                        return [4 /*yield*/, routeParameters[i].sanitise(this, injector)];
+                    case 4:
+                        sanitisedValue = _a.sent();
+                        if (!routeParameters[i].isSame(sanitisedValue)) {
+                            result = this.replace(routeParameters[i].parameterDef, sanitisedValue);
+                        }
+                        _a.label = 5;
+                    case 5:
+                        i++;
+                        return [3 /*break*/, 3];
+                    case 6: return [2 /*return*/, result];
+                }
+            });
+        });
     };
+    var _a;
+    __decorate([
+        Memoize$1(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [ParameterDefinition]),
+        __metadata("design:returntype", ParameterSnapshot.ResolvedParameter)
+    ], ParameterSnapshot.prototype, "getParameter", null);
+    __decorate([
+        Memoize$1(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [ParameterDefinition]),
+        __metadata("design:returntype", typeof (_a = typeof S !== "undefined" && S) === "function" ? _a : Object)
+    ], ParameterSnapshot.prototype, "getValueOf", null);
+    __decorate([
+        Memoize$1(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", Object)
+    ], ParameterSnapshot.prototype, "getParameterValue", null);
     __decorate([
         Memoize$1(),
-        __metadata("design:type", PlaceComponent.Definition),
-        __metadata("design:paramtypes", [])
-    ], PlaceComponent.prototype, "placeDefinition", null);
-    return PlaceComponent;
-}(DisposableComponent));
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
+    ], ParameterSnapshot.prototype, "getRouteIdParameter", null);
+    __decorate([
+        Memoize$1(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Array)
+    ], ParameterSnapshot.prototype, "getRouteParameters", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Injector]),
+        __metadata("design:returntype", Promise)
+    ], ParameterSnapshot.prototype, "sanitise", null);
+    return ParameterSnapshot;
+}());
 if (false) {
     /** @type {?} */
-    PlaceComponent.prototype._incomingRouteChange;
+    ParameterSnapshot.prototype.placeDefinition;
     /**
      * @type {?}
      * @private
      */
-    PlaceComponent.prototype.resolvedParameters;
-    /** @type {?} */
-    PlaceComponent.prototype.activatedRoute;
+    ParameterSnapshot.prototype.resolved;
 }
-(function (PlaceComponent) {
-    var Definition = /** @class */ (function () {
-        function Definition(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
+(function (ParameterSnapshot) {
+    /**
+     * @param {?} placeDef
+     * @param {?} params
+     * @param {?} urlSegments
+     * @return {?}
+     */
+    function create(placeDef, params, urlSegments) {
+        /** @type {?} */
+        var paramMap = new ConsolidatedParameterMap(params, urlSegments);
+        /** @type {?} */
+        var resolvedParameters = placeDef.getRouteParameters()
+            .map((/**
+         * @param {?} def
+         * @return {?}
+         */
+        function (def) {
+            if (def.isArray) {
+                /** @type {?} */
+                var value = paramMap.has(def.name) ? paramMap.getAll(def.name).filter((/**
+                 * @param {?} s
+                 * @return {?}
+                 */
+                function (s) { return !___default.isEmpty(s); })).map((/**
+                 * @param {?} raw
+                 * @return {?}
+                 */
+                function (raw) { return def.type.parse(raw); })) : null;
+                return new ResolvedArrayParameter(def, value);
+            }
+            else {
+                /** @type {?} */
+                var value = paramMap.has(def.name) ? def.type.parse(paramMap.get(def.name)) : null;
+                return new ResolvedValueParameter(def, value);
+            }
+        }));
+        return new ParameterSnapshot(placeDef, resolvedParameters);
+    }
+    ParameterSnapshot.create = create;
+    /**
+     * This a work around for the fact that an activated route with multiple segments doesn't
+     * include the segment params in the paramMap as well as each segment returns an empty
+     * param map even when `parameter`s has content.
+     */
+    var /**
+     * This a work around for the fact that an activated route with multiple segments doesn't
+     * include the segment params in the paramMap as well as each segment returns an empty
+     * param map even when `parameter`s has content.
+     */
+    ConsolidatedParameterMap = /** @class */ (function () {
+        function ConsolidatedParameterMap(paramMap, urlSegments) {
+            this.paramMaps = [paramMap].concat((urlSegments || []).map((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) { return new ParamMapAdapter(s.parameters); }))).filter((/**
+             * @param {?} m
              * @return {?}
              */
-            function (c) { return PlaceComponent.getDefinition(c).component; }));
+            function (m) { return !!m; })); // the activated route param map can be null
         }
         /**
+         * @param {?} name
          * @return {?}
          */
-        Definition.prototype.getRouteParameters = /**
+        ConsolidatedParameterMap.prototype.get = /**
+         * @param {?} name
          * @return {?}
          */
-        function () {
-            return Klass.get(this.component).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
+        function (name) {
+            return this.paramMaps.find((/**
+             * @param {?} m
+             * @return {?}
+             */
+            function (m) { return m.has(name); })).get(name);
+        };
+        /**
+         * @param {?} name
+         * @return {?}
+         */
+        ConsolidatedParameterMap.prototype.getAll = /**
+         * @param {?} name
+         * @return {?}
+         */
+        function (name) {
+            return this.paramMaps.find((/**
+             * @param {?} m
+             * @return {?}
+             */
+            function (m) { return m.has(name); })).getAll(name);
         };
         /**
-         * @param {?} constructable
+         * @param {?} name
          * @return {?}
          */
-        Definition.prototype.isDescriptorForType = /**
-         * @param {?} constructable
+        ConsolidatedParameterMap.prototype.has = /**
+         * @param {?} name
          * @return {?}
          */
-        function (constructable) {
-            return lang.constructorChain(constructable).includes(PlaceComponent);
+        function (name) {
+            return !!this.paramMaps.find((/**
+             * @param {?} m
+             * @return {?}
+             */
+            function (m) { return m.has(name); }));
         };
+        return ConsolidatedParameterMap;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        ConsolidatedParameterMap.prototype.paramMaps;
+    }
+    var ParamMapAdapter = /** @class */ (function () {
+        function ParamMapAdapter(params) {
+            this.params = params;
+        }
         /**
-         * @param {?} placeComponent
+         * @param {?} name
          * @return {?}
          */
-        Definition.prototype.isDescriptorFor = /**
-         * @param {?} placeComponent
+        ParamMapAdapter.prototype.get = /**
+         * @param {?} name
          * @return {?}
          */
-        function (placeComponent) {
-            return placeComponent.constructor === this.component;
+        function (name) {
+            return this.params[name];
         };
         /**
-         * @template T
-         * @param {?} key
-         * @param {?=} defaultValue
+         * @param {?} name
          * @return {?}
          */
-        Definition.prototype.getData = /**
-         * @template T
-         * @param {?} key
-         * @param {?=} defaultValue
+        ParamMapAdapter.prototype.getAll = /**
+         * @param {?} name
          * @return {?}
          */
-        function (key, defaultValue) {
-            return this.data ?
-                isNil(this.data[key]) ? defaultValue : this.data[key] :
-                defaultValue;
+        function (name) {
+            /** @type {?} */
+            var value = this.get(name);
+            return Array.isArray(value) ? value : [value];
         };
         /**
-         * @template T
-         * @param {?} keys
-         * @param {?=} defaultValue
+         * @param {?} name
          * @return {?}
          */
-        Definition.prototype.searchData = /**
-         * @template T
-         * @param {?} keys
-         * @param {?=} defaultValue
+        ParamMapAdapter.prototype.has = /**
+         * @param {?} name
          * @return {?}
          */
-        function (keys, defaultValue) {
-            var _this = this;
-            if (this.data) {
-                /** @type {?} */
-                var found = keys.find((/**
-                 * @param {?} key
-                 * @return {?}
-                 */
-                function (key) { return !isNil(_this.data[key]); }));
-                return found ? this.data[found] : defaultValue;
-            }
-            else {
-                return defaultValue;
-            }
+        function (name) {
+            return this.keys.includes(name);
         };
-        __decorate([
-            Memoize$1(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", Array)
-        ], Definition.prototype, "getRouteParameters", null);
-        return Definition;
+        Object.defineProperty(ParamMapAdapter.prototype, "keys", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return Object.keys(this.params);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return ParamMapAdapter;
     }());
-    PlaceComponent.Definition = Definition;
     if (false) {
-        /** @type {?} */
-        Definition.prototype.path;
-        /** @type {?} */
-        Definition.prototype.authenticate;
-        /** @type {?} */
-        Definition.prototype.order;
-        /** @type {?} */
-        Definition.prototype.data;
-        /** @type {?} */
-        Definition.prototype.children;
-        /** @type {?} */
-        Definition.prototype.component;
+        /**
+         * @type {?}
+         * @private
+         */
+        ParamMapAdapter.prototype.params;
     }
     /**
-     * @record
+     * @abstract
+     * @template T, S
      */
-    function Options() { }
-    PlaceComponent.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;
-    }
-    /**
-     * @record
+    var /**
+     * @abstract
+     * @template T, S
      */
-    function ChildOptions() { }
-    PlaceComponent.ChildOptions = ChildOptions;
+    ResolvedParameter = /** @class */ (function () {
+        function ResolvedParameter(parameterDef, value) {
+            this.parameterDef = parameterDef;
+            this.value = value;
+        }
+        /**
+         * @return {?}
+         */
+        ResolvedParameter.prototype.isRouteId = /**
+         * @return {?}
+         */
+        function () {
+            return this.parameterDef.isRouteId;
+        };
+        /**
+         * @param {?} visit
+         * @param {?} injector
+         * @return {?}
+         */
+        ResolvedParameter.prototype.sanitise = /**
+         * @param {?} visit
+         * @param {?} injector
+         * @return {?}
+         */
+        function (visit, injector) {
+            return __awaiter(this, void 0, void 0, function () {
+                var sanitiser;
+                return __generator(this, function (_a) {
+                    sanitiser = this.parameterDef.getSanitiser(injector);
+                    if (sanitiser) {
+                        return [2 /*return*/, sanitiser.sanitise(this.parameterDef, this.value, visit)];
+                    }
+                    else {
+                        return [2 /*return*/, this.value];
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return ResolvedParameter;
+    }());
+    ParameterSnapshot.ResolvedParameter = ResolvedParameter;
     if (false) {
         /** @type {?} */
-        ChildOptions.prototype.parent;
+        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) { };
     }
     /**
-     * @param {?} klass
-     * @return {?}
+     * @template T
      */
-    function getDefinition(klass) {
-        return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
-    }
-    PlaceComponent.getDefinition = getDefinition;
-    /**
-     * @param {?} klass
-     * @param {?} options
-     * @return {?}
+    var /**
+     * @template T
      */
-    function injectDefinition(klass, options) {
-        Reflect.defineMetadata(DEFINITION_META_DATA_KEY, new Definition(klass, options), klass);
-    }
-    PlaceComponent.injectDefinition = injectDefinition;
-})(PlaceComponent || (PlaceComponent = {}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
-    __extends(AbstractPlaceNavigationComponent, _super);
-    function AbstractPlaceNavigationComponent() {
-        var _this = _super.call(this) || this;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.placeDefinitions = chain(_this.placesModel).map((/**
-         * @param {?} c
+    ResolvedValueParameter = /** @class */ (function (_super) {
+        __extends(ResolvedValueParameter, _super);
+        function ResolvedValueParameter() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        /**
+         * @param {?} otherValue
          * @return {?}
          */
-        function (c) { return PlaceComponent.getDefinition(c); }));
-        return _this;
-    }
+        ResolvedValueParameter.prototype.isSame = /**
+         * @param {?} otherValue
+         * @return {?}
+         */
+        function (otherValue) {
+            return this.value === otherValue;
+        };
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        ResolvedValueParameter.prototype.injectRouteParam = /**
+         * @param {?} dest
+         * @return {?}
+         */
+        function (dest) {
+            dest[this.parameterDef.name] = this.parameterDef.type.format(this.value);
+        };
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        ResolvedValueParameter.prototype.replace = /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            return new ResolvedValueParameter(this.parameterDef, value);
+        };
+        /**
+         * @return {?}
+         */
+        ResolvedValueParameter.prototype.formattedValue = /**
+         * @return {?}
+         */
+        function () {
+            return !___default.isNil(this.value) ? this.parameterDef.type.format(this.value) : null;
+        };
+        return ResolvedValueParameter;
+    }(ResolvedParameter));
+    ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
     /**
-     * @param {?} placeDef
-     * @return {?}
+     * @template T
      */
-    AbstractPlaceNavigationComponent.prototype.getNav = /**
-     * @param {?} placeDef
-     * @return {?}
+    var /**
+     * @template T
      */
-    function (placeDef) {
-        /** @type {?} */
-        var navItem = (/** @type {?} */ (placeDef.getData('nav')));
-        return {
-            title: (/**
-             * @return {?}
-             */
-            function () { return navItem ? navItem.title() : placeDef.searchData(['navTitle', 'title']); }),
-            tooltip: (/**
+    ResolvedArrayParameter = /** @class */ (function (_super) {
+        __extends(ResolvedArrayParameter, _super);
+        function ResolvedArrayParameter() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        /**
+         * @param {?} otherValue
+         * @return {?}
+         */
+        ResolvedArrayParameter.prototype.isSame = /**
+         * @param {?} otherValue
+         * @return {?}
+         */
+        function (otherValue) {
+            return ___default.isEqual(this.value, otherValue);
+        };
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        ResolvedArrayParameter.prototype.injectRouteParam = /**
+         * @param {?} dest
+         * @return {?}
+         */
+        function (dest) {
+            var _this = this;
+            dest[this.parameterDef.name] = this.value.map((/**
+             * @param {?} v
              * @return {?}
              */
-            function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getData('navTooltip', null); }),
-            icon: (/**
+            function (v) { return _this.parameterDef.type.format(v); }));
+        };
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        ResolvedArrayParameter.prototype.replace = /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            return new ResolvedArrayParameter(this.parameterDef, value);
+        };
+        /**
+         * @return {?}
+         */
+        ResolvedArrayParameter.prototype.formattedValue = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            return this.value ? this.value.map((/**
+             * @param {?} v
              * @return {?}
              */
-            function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getData('navIcon', null); })
+            function (v) { return _this.parameterDef.type.format(v); })) : [];
         };
-    };
-    /**
-     * @return {?}
-     */
-    AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-    };
-    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);
-    return AbstractPlaceNavigationComponent;
-}(DisposableComponent));
-if (false) {
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.places;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.placesModel;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.placeDefinitions;
-}
+        return ResolvedArrayParameter;
+    }(ResolvedParameter));
+    ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
+})(ParameterSnapshot || (ParameterSnapshot = {}));
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var ListPlaceNavComponent = /** @class */ (function (_super) {
-    __extends(ListPlaceNavComponent, _super);
-    function ListPlaceNavComponent() {
-        var _this = _super.call(this) || this;
-        _this.expanded = true;
-        return _this;
+var PlaceRouter = /** @class */ (function () {
+    function PlaceRouter(router) {
+        this.router = router;
     }
     /**
+     * @param {?} activatedRoute
+     * @param {?} previous
+     * @param {?} next
      * @return {?}
      */
-    ListPlaceNavComponent.prototype.expandMenu = /**
+    PlaceRouter.prototype.pushParameterChangesToRoute = /**
+     * @param {?} activatedRoute
+     * @param {?} previous
+     * @param {?} next
      * @return {?}
      */
-    function () {
-        this.expanded = true;
+    function (activatedRoute, previous, next) {
+        /** @type {?} */
+        var relativePath = !!previous.hasRouteId() ? '..' : '.';
+        this.router.navigate([relativePath].concat(this.createRouteParameters(next), this.getChildPath(activatedRoute.snapshot)), {
+            relativeTo: activatedRoute
+        });
     };
     /**
+     * @param {?} activatedRoute
+     * @param {?} sanitised
      * @return {?}
      */
-    ListPlaceNavComponent.prototype.collapseMenu = /**
+    PlaceRouter.prototype.getRedirectUrlTree = /**
+     * @param {?} activatedRoute
+     * @param {?} sanitised
      * @return {?}
      */
-    function () {
-        this.expanded = false;
+    function (activatedRoute, sanitised) {
+        /** @type {?} */
+        var urlSegments = activatedRoute.url;
+        /** @type {?} */
+        var weHaveARouteId = sanitised.hasRouteId() && sanitised.getFormattedRouteId();
+        /** @type {?} */
+        var commands = (weHaveARouteId) ?
+            [urlSegments[0].path, sanitised.getFormattedRouteId(), sanitised.getFormattedParameters()] :
+            [urlSegments[0].path, sanitised.getFormattedParameters()];
+        console.log("redirect path", commands);
+        return this.router.createUrlTree(commands);
     };
     /**
+     * @protected
+     * @param {?} activatedRoute
      * @return {?}
      */
-    ListPlaceNavComponent.prototype.toggleMenu = /**
+    PlaceRouter.prototype.getChildPath = /**
+     * @protected
+     * @param {?} activatedRoute
      * @return {?}
      */
-    function () {
-        this.expanded = !this.expanded;
-    };
-    ListPlaceNavComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'angular-ui-powerups-list-place-nav',
-                    template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
-                    styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:inherit}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
-                }] }
-    ];
-    /** @nocollapse */
-    ListPlaceNavComponent.ctorParameters = function () { return []; };
-    ListPlaceNavComponent.propDecorators = {
-        expanded: [{ type: HostBinding, args: ['class.expanded',] }]
-    };
-    return ListPlaceNavComponent;
-}(AbstractPlaceNavigationComponent));
-if (false) {
-    /** @type {?} */
-    ListPlaceNavComponent.prototype.expanded;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var PlaceService = /** @class */ (function (_super) {
-    __extends(PlaceService, _super);
-    function PlaceService(router, injector) {
-        var _this = _super.call(this) || this;
-        _this.router = router;
-        _this.injector = injector;
-        _this._activePlaces = new MutableListModel();
-        return _this;
-    }
-    Object.defineProperty(PlaceService.prototype, "activePlaces", {
-        get: /**
+    function (activatedRoute) {
+        return ___default.flatten(activatedRoute.children.map((/**
+         * @param {?} child
          * @return {?}
          */
-        function () {
-            return this._activePlaces.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    // @Trace()
-    // @Trace()
-    /**
-     * @param {?} place
-     * @return {?}
-     */
-    PlaceService.prototype.onActivate = 
-    // @Trace()
-    /**
-     * @param {?} place
-     * @return {?}
-     */
-    function (place) {
-        this._activePlaces.push(place);
-    };
-    // @Trace()
-    // @Trace()
-    /**
-     * @param {?} place
-     * @return {?}
-     */
-    PlaceService.prototype.onDeactivate = 
-    // @Trace()
-    /**
-     * @param {?} place
-     * @return {?}
-     */
-    function (place) {
-        this._activePlaces.remove(place);
-    };
-    // @Trace()
-    // @Trace()
-    /**
-     * @param {?} params
-     * @return {?}
-     */
-    PlaceService.prototype.notifyRouteParametersChanged = 
-    // @Trace()
-    /**
-     * @param {?} params
-     * @return {?}
-     */
-    function (params) {
-        // We update the router state...
-        if (params.updateRoute) {
-            /** @type {?} */
-            var routeId = params.next.getFormattedRouteId();
-            /** @type {?} */
-            var relativePath = !!params.previous.hasRouteId() ? '..' : '.';
-            /** @type {?} */
-            var path = routeId ? [relativePath, routeId, params.next.getFormattedParameters()] : [relativePath, params.next.getFormattedParameters()];
-            this.router.navigate(path, {
-                relativeTo: params.activatedRoute
-            });
-        }
+        function (child) { return child.url; })));
     };
-    // @Trace()
-    // @Trace()
     /**
-     * @param {?} snapshot
+     * @protected
+     * @param {?} parameters
      * @return {?}
      */
-    PlaceService.prototype.sanitise = 
-    // @Trace()
-    /**
-     * @param {?} snapshot
+    PlaceRouter.prototype.createRouteParameters = /**
+     * @protected
+     * @param {?} parameters
      * @return {?}
      */
-    function (snapshot) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, snapshot];
-            });
-        });
+    function (parameters) {
+        /** @type {?} */
+        var routeId = parameters.getFormattedRouteId();
+        return routeId ?
+            [routeId, parameters.getFormattedParameters()] :
+            [parameters.getFormattedParameters()];
     };
-    PlaceService.decorators = [
+    PlaceRouter.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
                 },] }
     ];
     /** @nocollapse */
-    PlaceService.ctorParameters = function () { return [
-        { type: Router },
-        { type: Injector }
+    PlaceRouter.ctorParameters = function () { return [
+        { type: Router }
     ]; };
-    /** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(ɵɵinject(Router), ɵɵinject(INJECTOR)); }, token: PlaceService, providedIn: "root" });
-    return PlaceService;
-}(GarbageCollector));
+    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router)); }, token: PlaceRouter, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [ActivatedRouteSnapshot, ParameterSnapshot]),
+        __metadata("design:returntype", UrlTree)
+    ], PlaceRouter.prototype, "getRedirectUrlTree", null);
+    return PlaceRouter;
+}());
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    PlaceService.prototype._activePlaces;
-    /**
-     * @type {?}
-     * @protected
-     */
-    PlaceService.prototype.router;
-    /**
-     * @type {?}
-     * @protected
-     */
-    PlaceService.prototype.injector;
+    PlaceRouter.prototype.router;
 }
 
 /**
@@ -2844,56 +3300,98 @@ function leftRightPlaceAnimation(duration) {
     ]);
 }
 /** @type {?} */
-var LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation("0.3s");
+var 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 () { };
+}
 var PlaceOutletComponent = /** @class */ (function (_super) {
     __extends(PlaceOutletComponent, _super);
-    function PlaceOutletComponent(placeService, activatedRoute) {
+    function PlaceOutletComponent(router, placeHistory) {
         var _this = _super.call(this) || this;
-        _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();
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.myPath = observe.listsFrom(activatedRoute.url).last().map((/**
-         * @param {?} s
-         * @return {?}
-         */
-        function (s) { return s.toString(); })).reduce((/**
-         * @param {?} bits
-         * @return {?}
-         */
-        function (bits) { return bits.join(','); }));
-        console.log("new outlet@(" + _this.myPath.value + ")");
-        _this.outletChildPath = chain(_this.outletUrlSegment).map((/**
-         * @param {?} s
+        /** @type {?} */
+        var paramMap = chain(_this._activatedRouteModel).pullObservableValue((/**
+         * @param {?} ar
          * @return {?}
          */
-        function (s) { return s.toString(); })).reduce((/**
-         * @param {?} bits
+        function (ar) { return ar.paramMap; }));
+        /** @type {?} */
+        var urls = chain(_this._activatedRouteModel).pullObservableValue((/**
+         * @param {?} ar
          * @return {?}
          */
-        function (bits) { return bits.join(","); }));
-        _this.state = chain(_this.myPath).map((/**
-         * @param {?} path
+        function (ar) { return ar.url; }));
+        _this.placeConfigured = valueOf.all(chain(_this._inOutletUpdate).isFalsey(), _this._placeDefinition, paramMap, urls).areTruthy();
+        when.anyOf(paramMap, urls).changes((/**
          * @return {?}
          */
-        function (path) {
-            return "outlet@(" + path + "), child path->" + _this.outletChildPath.value;
-        }), { dependsOn: _this.outletChildPath });
-        when.valueOf(_this.state).changes((/**
-         * @param {?} debug
+        function () {
+            /** @type {?} */
+            var snapshot = ParameterSnapshot.create(_this._placeDefinition.value, paramMap.value, urls.value);
+            _this._incomingRouteChange.whileTrue((/**
+             * @return {?}
+             */
+            function () {
+                _this._resolvedParameters.value = snapshot;
+                _this.placeHistory.add(snapshot);
+            }));
+        }), {
+            postponeUntil: _this.placeConfigured
+        });
+        when.valueOf(_this._resolvedParameters).changes((/**
+         * @param {?} next
+         * @param {?} previous
          * @return {?}
          */
-        function (debug) {
-            console.log("Outlet Changed -> " + debug);
-        }));
+        function (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 _this;
+        // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
+        // txo.observe('paramMap', paramMap);
+        // txo.observe('urls', urls);
+        // txo.observe('this._resolvedParameters', this._resolvedParameters);
     }
+    Object.defineProperty(PlaceOutletComponent.prototype, "incomingRouteChange", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._incomingRouteChange;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -2903,76 +3401,56 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     function () {
     };
     /**
+     * @param {?} routerOutlet
+     * @param {?} place
      * @return {?}
      */
-    PlaceOutletComponent.prototype.ngAfterViewInit = /**
-     * @return {?}
-     */
-    function () {
-        // this.routerOutLetQuery.changes.subscribe(() => {
-        //   this.updateRouterOutlet(this.routerOutLetQuery.first);
-        // });
-    };
-    /**
-     * @return {?}
-     */
-    PlaceOutletComponent.prototype.ngAfterViewChecked = /**
-     * @return {?}
-     */
-    function () {
-        // console.log(`@AfterViewChecked: ${this.state.value}`);
-        this.updateRouterOutlet(this.routerOutLetQuery.first);
-    };
-    // @Trace()
-    // ngOnDestroy(): void {
-    //   console.log('outletSegments', this.outletUrlSegment.value);
-    //   console.log('mySegments', this.myPath.value);
-    //   super.ngOnDestroy();
-    // }
-    // @Trace()
-    // @Trace()
-    // ngOnDestroy(): void {
-    //   console.log('outletSegments', this.outletUrlSegment.value);
-    //   console.log('mySegments', this.myPath.value);
-    //   super.ngOnDestroy();
-    // }
-    // @Trace()
-    /**
-     * @param {?} $event
-     * @return {?}
-     */
-    PlaceOutletComponent.prototype.onOutletActivated = 
-    // @Trace()
-    // ngOnDestroy(): void {
-    //   console.log('outletSegments', this.outletUrlSegment.value);
-    //   console.log('mySegments', this.myPath.value);
-    //   super.ngOnDestroy();
-    // }
-    // @Trace()
-    /**
-     * @param {?} $event
+    PlaceOutletComponent.prototype.onOutletActivated = /**
+     * @param {?} routerOutlet
+     * @param {?} place
      * @return {?}
      */
-    function ($event) {
-        // console.log(this.routerOutLet.activatedRoute.snapshot.url);
-        this.currentPlace = $event;
-        this.placeService.onActivate($event);
+    function (routerOutlet, place) {
+        var _this = this;
+        this._inOutletUpdate.whileTrue((/**
+         * @return {?}
+         */
+        function () {
+            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 {?}
      */
     PlaceOutletComponent.prototype.onOutletDeactivated = /**
+     * @param {?} routerOutlet
      * @param {?} $event
      * @return {?}
      */
-    function ($event) {
-        this.currentPlace = null;
-        this.placeService.onDeactivate($event);
+    function (routerOutlet, $event) {
+        var _this = this;
+        this._inOutletUpdate.whileTrue((/**
+         * @return {?}
+         */
+        function () {
+            _this._currentPlace = null;
+            _this._activatedRouteModel.value = null;
+            _this._placeDefinition.value = null;
+        }));
     };
     /**
      * @param {?} outlet
@@ -2992,45 +3470,54 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        if (this.currentPlace) {
-            this.currentPlace.onPlaceReady();
+        if (this._currentPlace) {
+            this._currentPlace.onPlaceReady();
         }
     };
-    // @Trace()
-    // @Trace()
     /**
-     * @private
-     * @param {?} first
+     * @param {?} next
+     * @param {?} previous
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.pushChangesToRoute = /**
+     * @param {?} next
+     * @param {?} previous
      * @return {?}
      */
-    PlaceOutletComponent.prototype.updateRouterOutlet = 
-    // @Trace()
+    function (next, previous) {
+        /** @type {?} */
+        var activatedRoute = this._activatedRouteModel.value;
+        this.router.pushParameterChangesToRoute(activatedRoute, previous, next);
+    };
     /**
-     * @private
-     * @param {?} first
+     * @param {?} snapshot
+     * @param {?} callback
      * @return {?}
      */
-    function (first) {
-        if (first.isActivated) {
-            this.outletUrlSegment.value = first.activatedRoute.snapshot.url;
-        }
+    PlaceOutletComponent.prototype.sanitise = /**
+     * @param {?} snapshot
+     * @param {?} callback
+     * @return {?}
+     */
+    function (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 = function () { return [
-        { 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 },] }]
     };
     return PlaceOutletComponent;
 }(DisposableComponent));
@@ -3038,42 +3525,49 @@ if (false) {
     /** @type {?} */
     PlaceOutletComponent.prototype.animate;
     /** @type {?} */
-    PlaceOutletComponent.prototype.routerOutLetQuery;
+    PlaceOutletComponent.prototype.routerOut;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._currentPlace;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.currentPlace;
+    PlaceOutletComponent.prototype._incomingRouteChange;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.myPath;
+    PlaceOutletComponent.prototype._inOutletUpdate;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.outletUrlSegment;
+    PlaceOutletComponent.prototype._activatedRouteModel;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.outletChildPath;
+    PlaceOutletComponent.prototype._placeDefinition;
+    /** @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;
 }
 
 /**
@@ -3131,9 +3625,7 @@ var PlaceModule = /** @class */ (function () {
                         TabbedPlaceNavigationComponent,
                         ListPlaceNavComponent
                     ],
-                    providers: [
-                        PlaceService
-                    ]
+                    providers: []
                 },] }
     ];
     return PlaceModule;
@@ -3572,39 +4064,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
@@ -3619,12 +4078,37 @@ function Place(options) {
      * @return {?}
      */
     function (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 {?}
+             */
+            function (c) { return 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
@@ -3640,12 +4124,12 @@ if (false) {
     /**
      * @return {?}
      */
-    Visit.prototype.getRouteId = function () { };
+    Visit.prototype.getRouteIdValue = function () { };
     /**
      * @param {?} name
      * @return {?}
      */
-    Visit.prototype.getRouteParameter = function (name) { };
+    Visit.prototype.getParameterValue = function (name) { };
 }
 
 /**
@@ -3675,14 +4159,16 @@ var LeavePlaceGuard = /** @class */ (function () {
         // HACK: this will break with child routes...
         /** @type {?} */
         var path = "/" + component.placeDefinition.path;
-        console.log({
-            placePath: path,
-            currentRoute: currentRoute.toString(),
-            currentStateUrl: currentState.url,
-            nextStateUrl: nextState.url,
-            currentStateUrlTree: this.router.parseUrl(currentState.url).root.children[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();
@@ -3722,36 +4208,43 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var PlaceRouteGuard = /** @class */ (function () {
-    function PlaceRouteGuard(placeService, router) {
-        this.placeService = placeService;
-        this.router = router;
+    function PlaceRouteGuard(placeRouter, injector) {
+        this.placeRouter = placeRouter;
+        this.injector = injector;
     }
     /**
-     * @param {?} route
+     * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
      */
     PlaceRouteGuard.prototype.canActivate = /**
-     * @param {?} route
+     * @param {?} activatedRoute
      * @param {?} state
      * @return {?}
      */
-    function (route, state) {
-        // Implement this when adding child routes.
-        // TODO: there are really two types of snapshot, ones with id's and ones without.
-        // Id snapshot are repesented by 2 url segments
-        // ID => [{'/basePath', params}, {'id', params}]
-        // NO ID => [{'/basePath', params}]
-        // console.log({urlSegments: route.url});
-        // const snapshot = ParameterSnapshot.create(PlaceComponent.getDefinition(route.component as Constructable<PlaceComponent>), route.paramMap);
-        // return this.placeService.sanitise(snapshot).then(sanitised => {
-        //   if (sanitised.hasChanged(snapshot)) {
-        //     return this.router.createUrlTree(snapshot.updateUrl(route.url))
-        //   } else {
-        //     return true;
-        //   }
-        // });
-        return true;
+    function (activatedRoute, state) {
+        var _this = this;
+        if (PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
+            /** @type {?} */
+            var placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
+            /** @type {?} */
+            var snapshot_1 = ParameterSnapshot.create(placeDefinition, activatedRoute.paramMap, activatedRoute.url);
+            return snapshot_1.sanitise(this.injector).then((/**
+             * @param {?} sanitised
+             * @return {?}
+             */
+            function (sanitised) {
+                if (sanitised.hasChanged(snapshot_1, true)) {
+                    return _this.placeRouter.getRedirectUrlTree(activatedRoute, sanitised);
+                }
+                else {
+                    return true;
+                }
+            }));
+        }
+        else {
+            return lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component);
+        }
     };
     PlaceRouteGuard.decorators = [
         { type: Injectable, args: [{
@@ -3760,10 +4253,10 @@ var PlaceRouteGuard = /** @class */ (function () {
     ];
     /** @nocollapse */
     PlaceRouteGuard.ctorParameters = function () { return [
-        { 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" });
     return PlaceRouteGuard;
 }());
 if (false) {
@@ -3771,93 +4264,12 @@ if (false) {
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.placeService;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouteGuard.prototype.router;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @template T, S
- */
-var DefaultParameterSanitiser = /** @class */ (function () {
-    function DefaultParameterSanitiser(def, placeService, options) {
-        this.def = def;
-        this.placeService = placeService;
-        this.remember = isNil(options.remember) ? false : options.remember;
-        this.defaultValue = isNil(options.defaultValue) ? null : options.defaultValue;
-    }
-    /**
-     * @param {?} value
-     * @param {?} visit
-     * @return {?}
-     */
-    DefaultParameterSanitiser.prototype.sanitise = /**
-     * @param {?} value
-     * @param {?} visit
-     * @return {?}
-     */
-    function (value, visit) {
-        if (this.isBlank(value)) {
-            if (this.remember) {
-                // value = null;
-            }
-            return this.isBlank(value) && !isNil(this.defaultValue) ? this.defaultValue : value;
-        }
-        else {
-            return value;
-        }
-    };
-    /**
-     * @private
-     * @param {?} value
-     * @return {?}
-     */
-    DefaultParameterSanitiser.prototype.isBlank = /**
-     * @private
-     * @param {?} value
-     * @return {?}
-     */
-    function (value) {
-        /** @type {?} */
-        var isNil$1 = isNil(value);
-        return this.def.isArray ? !isNil$1 || value['length'] < 1 : isNil$1;
-    };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object, Object]),
-        __metadata("design:returntype", Object)
-    ], DefaultParameterSanitiser.prototype, "sanitise", null);
-    return DefaultParameterSanitiser;
-}());
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    DefaultParameterSanitiser.prototype.remember;
-    /**
-     * @type {?}
-     * @private
-     */
-    DefaultParameterSanitiser.prototype.defaultValue;
-    /**
-     * @type {?}
-     * @private
-     */
-    DefaultParameterSanitiser.prototype.def;
+    PlaceRouteGuard.prototype.placeRouter;
     /**
      * @type {?}
      * @private
      */
-    DefaultParameterSanitiser.prototype.placeService;
+    PlaceRouteGuard.prototype.injector;
 }
 
 /**
@@ -3891,8 +4303,6 @@ if (false) {
     ParameterOptions.prototype.remember;
     /** @type {?|undefined} */
     ParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    ParameterOptions.prototype.sanitiser;
 }
 /**
  * @record
@@ -3908,8 +4318,6 @@ if (false) {
     ListParameterOptions.prototype.remember;
     /** @type {?|undefined} */
     ListParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    ListParameterOptions.prototype.sanitiser;
 }
 /**
  * @template T
@@ -3918,7 +4326,6 @@ if (false) {
  * @return {?}
  */
 function RouteId(type, options) {
-    // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
      * @param {?} propertyKey
@@ -3926,7 +4333,7 @@ function RouteId(type, options) {
      */
     function (prototype, propertyKey) {
         /** @type {?} */
-        var param = createDefinition(propertyKey, type, options, true);
+        var param = new ParameterDefinition.RouteId(propertyKey.toString(), type, options);
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
@@ -3938,7 +4345,6 @@ function RouteId(type, options) {
  * @return {?}
  */
 function RouteParameter(type, options) {
-    // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
      * @param {?} propertyKey
@@ -3946,7 +4352,7 @@ function RouteParameter(type, options) {
      */
     function (prototype, propertyKey) {
         /** @type {?} */
-        var param = createDefinition(propertyKey, type, options, false);
+        var param = new ParameterDefinition.ValueParameter(propertyKey.toString(), type, options);
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
         UseDelegate()(prototype, propertyKey);
     });
@@ -3958,7 +4364,6 @@ function RouteParameter(type, options) {
  * @return {?}
  */
 function RouteParameterList(elementType, options) {
-    // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
      * @param {?} propertyKey
@@ -3966,82 +4371,11 @@ function RouteParameterList(elementType, options) {
      */
     function (prototype, propertyKey) {
         /** @type {?} */
-        var param = createArrayDefinition(propertyKey, elementType, options);
+        var 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 {?} */
-    var opts = Opts.get(options);
-    /** @type {?} */
-    var propertyNameAsString = assert.notNil(propertyName).toString();
-    /** @type {?} */
-    var 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 {?} */
-    var opts = Opts.get(options);
-    /** @type {?} */
-    var propertyNameAsString = assert.notNil(propertyName).toString();
-    /** @type {?} */
-    var 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
@@ -4049,31 +4383,18 @@ if (false) {
  */
 /**
  * @record
- * @template T
+ * @template S
  */
 function ParameterSanitiser() { }
 if (false) {
     /**
+     * @param {?} parameterDef
      * @param {?} value
      * @param {?=} visit
      * @return {?}
      */
-    ParameterSanitiser.prototype.sanitise = function (value, visit) { };
+    ParameterSanitiser.prototype.sanitise = function (parameterDef, 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
@@ -4132,7 +4453,7 @@ var ParameterType;
          * @return {?}
          */
         function (value) {
-            return isNil(value) || isEmpty(value) ? null : +value;
+            return ___default.isNil(value) || ___default.isEmpty(value) ? null : +value;
         };
         return NumberType;
     }());
@@ -4198,7 +4519,7 @@ Sanitiser = /** @class */ (function () {
          * @return {?}
          */
         function () {
-            return !isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+            return !___default.isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
         },
         enumerable: true,
         configurable: true
@@ -4267,7 +4588,7 @@ Sanitiser = /** @class */ (function () {
                         if (!this.sanitiser) return [3 /*break*/, 2];
                         this.initialValue = this.readFrom(this.snapshot);
                         _a = this;
-                        return [4 /*yield*/, this.sanitiser.sanitise(this.initialValue)];
+                        return [4 /*yield*/, this.sanitiser.sanitise(null, this.initialValue)];
                     case 1:
                         _a._sanitisedValue = _b.sent();
                         if (this.initialValue !== this._sanitisedValue) {
@@ -4300,11 +4621,10 @@ if (false) {
     Sanitiser.prototype.sanitiser;
 }
 var RouteParameterSanitiser = /** @class */ (function () {
-    function RouteParameterSanitiser(parameterDefs, snapshot, placeService, injector) {
+    function RouteParameterSanitiser(parameterDefs, snapshot, injector) {
         var _this = this;
         this.parameterDefs = parameterDefs;
         this.snapshot = snapshot;
-        this.placeService = placeService;
         this.injector = injector;
         this.parameterSanitisers = [];
         /** @type {?} */
@@ -4397,17 +4717,7 @@ var RouteParameterSanitiser = /** @class */ (function () {
      * @return {?}
      */
     function (def) {
-        if (def.sanitiser) {
-            if (this.isSanitiserContructor(def.sanitiser)) {
-                return this.injector.get(def.sanitiser, new def.sanitiser());
-            }
-            else {
-                return new DefaultParameterSanitiser(def, this.placeService, def.sanitiser);
-            }
-        }
-        else {
-            return null;
-        }
+        return def.getSanitiser(this.injector);
     };
     /**
      * @return {?}
@@ -4453,12 +4763,12 @@ var RouteParameterSanitiser = /** @class */ (function () {
      * @return {?}
      */
     function (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([
@@ -4485,8 +4795,6 @@ if (false) {
     /** @type {?} */
     RouteParameterSanitiser.prototype.snapshot;
     /** @type {?} */
-    RouteParameterSanitiser.prototype.placeService;
-    /** @type {?} */
     RouteParameterSanitiser.prototype.injector;
 }
 (function (Sanitiser) {
@@ -4628,5 +4936,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, 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