@coolon/angular-ui-powerups 0.0.42 → 0.0.44

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

@@ -1,9 +1,10 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('lodash'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'lodash', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.ng.router, global.src, global.fastMemoizeDecorator, global.lodash, null, global.ng.animations, global.ResizeObserver));
-}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tooltip, router, src, fastMemoizeDecorator, lodash, reflectMetadata, animations$1, ResizeObserver) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('lodash'), require('@angular/animations'), require('resize-observer-polyfill')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', 'lodash', '@angular/animations', 'resize-observer-polyfill'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.ng.router, global.src, global.fastMemoizeDecorator, null, global.___default, global.ng.animations, global.ResizeObserver));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tooltip, router, src, fastMemoizeDecorator, reflectMetadata, ___default, animations$1, ResizeObserver) { 'use strict';
 
+    var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
 
     /*! *****************************************************************************
@@ -816,7 +817,7 @@
                 }));
             }
             else {
-                pectin.Logger.get(this).warn("pectinFocusBinding was nil");
+                pectin.Logger.get(this).warn('pectinFocusBinding was nil');
             }
         };
         /**
@@ -1046,9 +1047,14 @@
      * @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
      */
-    exports.ɵu = /** @class */ (function () {
+    exports.ɵv = /** @class */ (function () {
         function ActivityOutletComponent(componentFactoryResolver, viewContainerRef, injector) {
             this.componentFactoryResolver = componentFactoryResolver;
             this.viewContainerRef = viewContainerRef;
@@ -1170,27 +1176,27 @@
     }());
     if (false) {
         /** @type {?} */
-        exports.ɵu.prototype.interactionContext;
+        exports.ɵv.prototype.interactionContext;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵu.prototype.activityComponentRef;
+        exports.ɵv.prototype.activityComponentRef;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵu.prototype.componentFactoryResolver;
+        exports.ɵv.prototype.componentFactoryResolver;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵu.prototype.viewContainerRef;
+        exports.ɵv.prototype.viewContainerRef;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵu.prototype.injector;
+        exports.ɵv.prototype.injector;
         /* Skipping unhandled member: ;*/
     }
     (function (ActivityOutletComponent) {
@@ -1251,7 +1257,7 @@
              */
             OutletInteractionContext.prototype.context;
         }
-    })(exports.ɵu || (exports.ɵu = {}));
+    })(exports.ɵv || (exports.ɵv = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1499,7 +1505,7 @@
         ConfirmationDialogComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'angular-ui-powerups-confirmation-dialog',
-                        template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\" (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}"]
                     }] }
         ];
@@ -1518,14 +1524,14 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.ɵt = /** @class */ (function (_super) {
+    exports.ɵu = /** @class */ (function (_super) {
         __extends(ActivityContainerComponent, _super);
         function ActivityContainerComponent() {
             var _this = _super.call(this) || this;
-            _this.activityTabs = new pectin.MutableListModel();
+            _this.activityOutletTabs = new pectin.MutableListModel();
             _this.obsoleteTabs = [];
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.lastActivityTab = chain(_this.activityTabs).last().otherwise(_this.initialActivity);
+            _this.lastActivityTab = chain(_this.activityOutletTabs).last().otherwise(_this.initialActivityOutlet);
             return _this;
         }
         /**
@@ -1561,7 +1567,7 @@
          * @return {?}
          */
         function (options) {
-            this.initialActivity = __assign({}, options, { interactionContext: this });
+            this.initialActivityOutlet = __assign({}, options, { interactionContext: this });
         };
         /**
          * @template D, R, E
@@ -1587,14 +1593,14 @@
                 onDone: deferred.resolve,
                 onCancel: deferred.reject
             };
-            this.activityTabs.push(context);
-            this.tabs.selectedIndex = this.activityTabs.length;
+            this.activityOutletTabs.push(context);
+            this.tabs.selectedIndex = this.activityOutletTabs.length;
             return deferred.promise.finally((/**
              * @return {?}
              */
             function () {
                 _this.obsoleteTabs.push(context);
-                _this.tabs.selectedIndex = _this.activityTabs.length - 1;
+                _this.tabs.selectedIndex = _this.activityOutletTabs.length - 1;
             }));
         };
         /**
@@ -1629,7 +1635,7 @@
          */
         function () {
             var _this = this;
-            this.activityTabs.value = this.activityTabs.value.filter((/**
+            this.activityOutletTabs.value = this.activityOutletTabs.value.filter((/**
              * @param {?} tab
              * @return {?}
              */
@@ -1641,7 +1647,7 @@
         ActivityContainerComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'angular-ui-powerups-activity-container',
-                        template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab>\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\" [activityContext]=\"initialActivity\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tab of activityTabs.value\">\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\" [activityContext]=\"tab\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+                        template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab>\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"initialActivityOutlet\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n  <mat-tab *ngFor=\"let tab of activityOutletTabs.value\">\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"tab\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
                         styles: [":host{display:block}"]
                     }] }
         ];
@@ -1649,33 +1655,33 @@
         ActivityContainerComponent.ctorParameters = function () { return []; };
         ActivityContainerComponent.propDecorators = {
             parentInteractionContext: [{ type: core.Input }],
-            initialActivity: [{ type: core.Input }],
+            initialActivityOutlet: [{ type: core.Input }],
             tabs: [{ type: core.ViewChild, args: ['tabs', { static: true },] }],
-            outlets: [{ type: core.ViewChildren, args: [exports.ɵu,] }]
+            outlets: [{ type: core.ViewChildren, args: [exports.ɵv,] }]
         };
         return ActivityContainerComponent;
     }(DisposableComponent));
     if (false) {
         /** @type {?} */
-        exports.ɵt.prototype.parentInteractionContext;
+        exports.ɵu.prototype.parentInteractionContext;
         /** @type {?} */
-        exports.ɵt.prototype.initialActivity;
+        exports.ɵu.prototype.initialActivityOutlet;
         /** @type {?} */
-        exports.ɵt.prototype.tabs;
+        exports.ɵu.prototype.tabs;
         /** @type {?} */
-        exports.ɵt.prototype.outlets;
+        exports.ɵu.prototype.outlets;
         /** @type {?} */
-        exports.ɵt.prototype.activityTabs;
+        exports.ɵu.prototype.activityOutletTabs;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.obsoleteTabs;
+        exports.ɵu.prototype.obsoleteTabs;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵt.prototype.lastActivityTab;
+        exports.ɵu.prototype.lastActivityTab;
     }
     (function (ActivityContainerComponent) {
         /**
@@ -1694,7 +1700,7 @@
             /** @type {?} */
             ActivityContext.prototype.onCancel;
         }
-    })(exports.ɵt || (exports.ɵt = {}));
+    })(exports.ɵu || (exports.ɵu = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1750,7 +1756,7 @@
                 autoFocus: false
             };
             /** @type {?} */
-            var matDialogRef = (/** @type {?} */ (this.dialogService.open(exports.ɵt, config)));
+            var matDialogRef = (/** @type {?} */ (this.dialogService.open(exports.ɵu, config)));
             return new Promise((/**
              * @param {?} resolve
              * @param {?} reject
@@ -1842,16 +1848,17 @@
                             portal.PortalModule
                         ],
                         declarations: [
-                            exports.ɵt,
+                            exports.ɵu,
                             ConfirmationDialogComponent,
                             AlertDialogComponent,
-                            exports.ɵu
+                            exports.ɵv
                         ],
                         exports: [
-                            exports.ɵt,
+                            exports.ɵu,
+                            exports.ɵv
                         ],
                         entryComponents: [
-                            exports.ɵt,
+                            exports.ɵu,
                             ConfirmationDialogComponent,
                             AlertDialogComponent
                         ],
@@ -1939,1040 +1946,1100 @@
      * @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}]
-    exports.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) {
-            pectin.assert.isTruthy(this.hasChanged(other));
-            /** @type {?} */
-            var routeParts = [];
-            /** @type {?} */
-            var gainedId = this.getFormattedRouteId() && !other.getFormattedRouteId();
-            /** @type {?} */
-            var sameId = this.getFormattedRouteId() === other.getFormattedRouteId();
-            /** @type {?} */
-            var lostId = (!this.getFormattedRouteId() && other.getFormattedRouteId());
-            /** @type {?} */
-            var changedId = (this.getFormattedRouteId() !== other.getFormattedRouteId());
-            if (lostId || changedId) {
-                routeParts.push('..');
-                if (changedId) {
-                    routeParts.push(this.getFormattedRouteId());
-                }
+        function (key, defaultValue) {
+            return this.data ?
+                ___default__default.isNil(this.data[key]) ? defaultValue : this.data[key] :
+                defaultValue;
+        };
+        /**
+         * @template T
+         * @param {?} keys
+         * @param {?=} defaultValue
+         * @return {?}
+         */
+        PlaceDefinition.prototype.searchData = /**
+         * @template T
+         * @param {?} keys
+         * @param {?=} defaultValue
+         * @return {?}
+         */
+        function (keys, defaultValue) {
+            var _this = this;
+            if (this.data) {
+                /** @type {?} */
+                var found = keys.find((/**
+                 * @param {?} key
+                 * @return {?}
+                 */
+                function (key) { return !___default__default.isNil(_this.data[key]); }));
+                return found ? this.data[found] : defaultValue;
             }
             else {
-                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');
+    exports.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;
+            pectin.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 pectin.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);
+                }
+            }));
         };
+        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([
+            fastMemoizeDecorator.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; }))));
-        };
+        exports.PlaceComponent.prototype.resolvedParameters;
+    }
+    (function (PlaceComponent) {
         /**
+         * @param {?} target
          * @return {?}
          */
-        ParameterSnapshot.prototype.hasRouteId = /**
+        function isPlaceComponentConstructor(target) {
+            return pectin.lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent);
+        }
+        PlaceComponent.isPlaceComponentConstructor = isPlaceComponentConstructor;
+        /**
+         * @param {?} klass
          * @return {?}
          */
-        function () {
-            return !!this.getResolvedRouteId();
-        };
+        function getRouteParameters(klass) {
+            return typescriptUtilities.Klass.get(klass).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
+        }
+        PlaceComponent.getRouteParameters = getRouteParameters;
         /**
+         * @param {?} klass
          * @return {?}
          */
-        ParameterSnapshot.prototype.getFormattedRouteId = /**
+        function getDefinition(klass) {
+            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+        }
+        PlaceComponent.getDefinition = getDefinition;
+        /**
+         * @param {?} klass
+         * @param {?} definition
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var routeIdParam = this.getResolvedRouteId();
-            return routeIdParam ? routeIdParam.formattedValue() : null;
-        };
+        function injectDefinition(klass, definition) {
+            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, definition, klass);
+        }
+        PlaceComponent.injectDefinition = injectDefinition;
+    })(exports.PlaceComponent || (exports.PlaceComponent = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
+        __extends(AbstractPlaceNavigationComponent, _super);
+        function AbstractPlaceNavigationComponent() {
+            var _this = _super.call(this) || this;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.placeDefinitions = chain(_this.placesModel).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            function (c) { return exports.PlaceComponent.getDefinition(c); }));
+            return _this;
+        }
         /**
+         * @param {?} placeDef
          * @return {?}
          */
-        ParameterSnapshot.prototype.getFormattedParameters = /**
+        AbstractPlaceNavigationComponent.prototype.getNav = /**
+         * @param {?} placeDef
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var params = {};
+        function (placeDef) {
             /** @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;
+            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); })
+            };
         };
         /**
-         * @template T, S
-         * @param {?} parameter
-         * @param {?} value
          * @return {?}
          */
-        ParameterSnapshot.prototype.replace = /**
-         * @template T, S
-         * @param {?} parameter
-         * @param {?} value
+        AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
          * @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 () {
         };
-        /**
-         * @param {?} url
-         * @return {?}
-         */
-        ParameterSnapshot.prototype.updateUrl = /**
-         * @param {?} url
-         * @return {?}
-         */
-        function (url) {
-            return url;
+        AbstractPlaceNavigationComponent.propDecorators = {
+            places: [{ type: core.Input }],
+            placesModel: [{ type: core.Input }]
         };
-        var _a;
         __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", ParameterSnapshot.ResolvedParameter)
-        ], ParameterSnapshot.prototype, "getResolvedParameter", null);
+            pectin.StoreInListModel('placesModel'),
+            __metadata("design:type", Array)
+        ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
         __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", typeof (_a = typeof S !== "undefined" && S) === "function" ? _a : Object)
-        ], ParameterSnapshot.prototype, "getResolvedParameterValue", null);
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
         __decorate([
             src.Memoize(),
             __metadata("design:type", Function),
-            __metadata("design:paramtypes", [String]),
+            __metadata("design:paramtypes", [PlaceDefinition]),
             __metadata("design:returntype", Object)
-        ], ParameterSnapshot.prototype, "getRouteParameter", null);
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
-        ], ParameterSnapshot.prototype, "getResolvedRouteId", null);
-        return ParameterSnapshot;
-    }());
+        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+        return AbstractPlaceNavigationComponent;
+    }(DisposableComponent));
     if (false) {
         /** @type {?} */
-        exports.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 {?}
          */
-        exports.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: core.Component, args: [{
+                        selector: 'angular-ui-powerups-list-place-nav',
+                        template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                        styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:inherit}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        ListPlaceNavComponent.ctorParameters = function () { return []; };
+        ListPlaceNavComponent.propDecorators = {
+            expanded: [{ type: core.HostBinding, args: ['class.expanded',] }]
+        };
+        return ListPlaceNavComponent;
+    }(AbstractPlaceNavigationComponent));
+    if (false) {
+        /** @type {?} */
+        ListPlaceNavComponent.prototype.expanded;
     }
-    (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 = [];
+        }
         /**
-         * @param {?} placeDef
-         * @param {?} paramMap
+         * @param {?} state
          * @return {?}
          */
-        function create(placeDef, paramMap) {
+        PlaceHistory.prototype.add = /**
+         * @param {?} state
+         * @return {?}
+         */
+        function (state) {
             /** @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 previousState = ___default__default.last(this._history);
+            if (!previousState || state.hasChanged(previousState)) {
+                this._history.push(state);
+                // limit our history to 100 visits
+                this._history = this._history.slice(-100);
+            }
+        };
+        PlaceHistory.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceHistory.ctorParameters = function () { return [
+            { type: router.Router }
+        ]; };
+        /** @nocollapse */ PlaceHistory.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(core.ɵɵinject(router.Router)); }, token: PlaceHistory, providedIn: "root" });
+        return PlaceHistory;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceHistory.prototype._history;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceHistory.prototype.router;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PlaceRouter = /** @class */ (function () {
+        function PlaceRouter(router) {
+            this.router = router;
         }
-        ParameterSnapshot.create = create;
         /**
-         * @abstract
-         * @template T, S
+         * @param {?} activatedRoute
+         * @param {?} previous
+         * @param {?} next
+         * @return {?}
          */
-        var /**
-         * @abstract
-         * @template T, S
+        PlaceRouter.prototype.pushParameterChangesToRoute = /**
+         * @param {?} activatedRoute
+         * @param {?} previous
+         * @param {?} next
+         * @return {?}
          */
-        ResolvedParameter = /** @class */ (function () {
-            function ResolvedParameter(parameterDef, value) {
-                this.parameterDef = parameterDef;
-                this.value = value;
-            }
-            /**
-             * @return {?}
-             */
-            ResolvedParameter.prototype.isRouteId = /**
+        function (activatedRoute, previous, next) {
+            this.router.navigate(this.redirect(activatedRoute.snapshot, previous, next), {
+                relativeTo: activatedRoute
+            });
+        };
+        /**
+         * @param {?} activatedRoute
+         * @param {?} sanitised
+         * @param {?} snapshot
+         * @return {?}
+         */
+        PlaceRouter.prototype.createUrlTree = /**
+         * @param {?} activatedRoute
+         * @param {?} sanitised
+         * @param {?} snapshot
+         * @return {?}
+         */
+        function (activatedRoute, sanitised, snapshot) {
+            return this.router.createUrlTree(this.redirect(activatedRoute, snapshot, sanitised));
+        };
+        /**
+         * @protected
+         * @param {?} activatedRoute
+         * @param {?} previous
+         * @param {?} next
+         * @return {?}
+         */
+        PlaceRouter.prototype.redirect = /**
+         * @protected
+         * @param {?} activatedRoute
+         * @param {?} previous
+         * @param {?} next
+         * @return {?}
+         */
+        function (activatedRoute, previous, next) {
+            /** @type {?} */
+            var childSegments = ___default__default.flatten(activatedRoute.children.map((/**
+             * @param {?} child
              * @return {?}
              */
-            function () {
-                return this.parameterDef.isRouteId;
-            };
-            return ResolvedParameter;
-        }());
-        ParameterSnapshot.ResolvedParameter = ResolvedParameter;
-        if (false) {
+            function (child) { return child.url; })));
             /** @type {?} */
-            ResolvedParameter.prototype.parameterDef;
+            var relativePath = !!previous.hasRouteId() ? '..' : '.';
             /** @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
+            var routeId = next.getFormattedRouteId();
+            /** @type {?} */
+            var path = routeId ?
+                [relativePath, routeId, next.getFormattedParameters()] :
+                [relativePath, next.getFormattedParameters()];
+            return path.concat(childSegments.map((/**
+             * @param {?} s
              * @return {?}
              */
-            ResolvedParameter.prototype.replace = function (value) { };
-        }
+            function (s) { return s.path; })));
+        };
+        PlaceRouter.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceRouter.ctorParameters = function () { return [
+            { type: router.Router }
+        ]; };
+        /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router)); }, token: PlaceRouter, providedIn: "root" });
+        return PlaceRouter;
+    }());
+    if (false) {
         /**
-         * @template T
+         * @type {?}
+         * @private
          */
-        var ResolvedValueParameter = /** @class */ (function (_super) {
-            __extends(ResolvedValueParameter, _super);
-            function ResolvedValueParameter() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            ResolvedValueParameter.prototype.isSame = /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            function (otherValue) {
-                return this.value === otherValue;
-            };
-            /**
-             * @param {?} dest
-             * @return {?}
-             */
-            ResolvedValueParameter.prototype.injectRouteParam = /**
-             * @param {?} dest
-             * @return {?}
-             */
-            function (dest) {
-                dest[this.parameterDef.name] = this.parameterDef.type.format(this.value);
-            };
-            /**
-             * @param {?} value
-             * @return {?}
-             */
-            ResolvedValueParameter.prototype.replace = /**
-             * @param {?} value
-             * @return {?}
-             */
-            function (value) {
-                return new ResolvedValueParameter(this.parameterDef, value);
-            };
-            /**
-             * @return {?}
-             */
-            ResolvedValueParameter.prototype.formattedValue = /**
-             * @return {?}
-             */
-            function () {
-                return !lodash.isNil(this.value) ? this.parameterDef.type.format(this.value) : null;
-            };
-            __decorate([
-                pectin.Trace(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", [Object]),
-                __metadata("design:returntype", Boolean)
-            ], ResolvedValueParameter.prototype, "isSame", null);
-            return ResolvedValueParameter;
-        }(ResolvedParameter));
-        ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
-        /**
-         * @template T
-         */
-        var ResolvedArrayParameter = /** @class */ (function (_super) {
-            __extends(ResolvedArrayParameter, _super);
-            function ResolvedArrayParameter() {
-                return _super !== null && _super.apply(this, arguments) || this;
-            }
-            /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            ResolvedArrayParameter.prototype.isSame = /**
-             * @param {?} otherValue
-             * @return {?}
-             */
-            function (otherValue) {
-                return lodash.isEqual(this.value, otherValue);
-            };
-            /**
-             * @param {?} dest
-             * @return {?}
-             */
-            ResolvedArrayParameter.prototype.injectRouteParam = /**
-             * @param {?} dest
-             * @return {?}
-             */
-            function (dest) {
-                var _this = this;
-                dest[this.parameterDef.name] = this.value.map((/**
-                 * @param {?} v
-                 * @return {?}
-                 */
-                function (v) { return _this.parameterDef.type.format(v); }));
-            };
-            /**
-             * @param {?} value
-             * @return {?}
-             */
-            ResolvedArrayParameter.prototype.replace = /**
-             * @param {?} value
-             * @return {?}
-             */
-            function (value) {
-                return new ResolvedArrayParameter(this.parameterDef, value);
-            };
-            /**
-             * @return {?}
-             */
-            ResolvedArrayParameter.prototype.formattedValue = /**
-             * @return {?}
-             */
-            function () {
-                var _this = this;
-                return this.value ? this.value.map((/**
-                 * @param {?} v
-                 * @return {?}
-                 */
-                function (v) { return _this.parameterDef.type.format(v); })) : [];
-            };
-            __decorate([
-                pectin.Trace(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", [Array]),
-                __metadata("design:returntype", Boolean)
-            ], ResolvedArrayParameter.prototype, "isSame", null);
-            return ResolvedArrayParameter;
-        }(ResolvedParameter));
-        ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
-    })(exports.ParameterSnapshot || (exports.ParameterSnapshot = {}));
+        PlaceRouter.prototype.router;
+    }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    // RAKE: making this Symbol(...) broke things.
-    /** @type {?} */
-    var DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
-    // this one seems ok.
-    /** @type {?} */
-    var ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-    exports.PlaceComponent = /** @class */ (function (_super) {
-        __extends(PlaceComponent, _super);
-        function PlaceComponent(activatedRoute, placeService) {
-            var _this = _super.call(this) || this;
-            _this.activatedRoute = activatedRoute;
-            _this._incomingRouteChange = new pectin.MutableValueModel(false);
-            _this.resolvedParameters = new pectin.MutableValueModel();
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, 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 exports.ParameterSnapshot.create(_this.placeDefinition, params); }))
-                .subscribe((/**
-             * @param {?} resolvedParameters
-             * @return {?}
-             */
-            function (resolvedParameters) {
-                _this._incomingRouteChange.value = true;
-                _this.resolvedParameters.value = resolvedParameters;
-                _this._incomingRouteChange.value = false;
-            }));
-            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.
-                });
-            }));
-            return _this;
-        }
-        Object.defineProperty(PlaceComponent.prototype, "incomingRouteChange", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._incomingRouteChange.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * @private
-         * @template T, S
-         * @param {?} parameterDef
-         * @return {?}
-         */
-        PlaceComponent.prototype.installBinding = /**
-         * @private
-         * @template T, S
-         * @param {?} parameterDef
-         * @return {?}
-         */
-        function (parameterDef) {
+    /**
+     * @abstract
+     * @template T, S
+     */
+      /**
+     * @abstract
+     * @template T, S
+     */
+    exports.ParameterDefinition = /** @class */ (function () {
+        function ParameterDefinition(propertyName, type, options) {
+            this.propertyName = propertyName;
+            this.type = type;
             /** @type {?} */
-            var model = (/** @type {?} */ (this[parameterDef.propertyName]));
-            // this.txo.observe(parameterDef.propertyName, model);
-            this.registerDisposable(new pectin.Binding(this.resolvedParameters, model, {
-                toRight: /**
-                 * @param {?} parameters
-                 * @return {?}
-                 */
-                function (parameters) {
-                    return parameters.getResolvedParameterValue(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
-        });
-        /**
-         * @return {?}
-         */
-        PlaceComponent.prototype.canDeactivate = /**
-         * @return {?}
-         */
-        function () {
-            return true;
-        };
-        // @Trace()
-        // @Trace()
+            var opts = typescriptUtilities.Opts.get(options);
+            this.name = opts.getOptional('as', propertyName);
+            // this.sanitiser = new DefaultParameterSanitiser(
+            //   this,
+            //   opts.getOptional('remember', false),
+            //   opts.getOptional('defaultValue', null)
+            // );
+        }
         /**
+         * @param {?} injector
          * @return {?}
          */
-        PlaceComponent.prototype.onPlaceReady = 
-        // @Trace()
-        /**
+        ParameterDefinition.prototype.getSanitiser = /**
+         * @param {?} injector
          * @return {?}
          */
-        function () {
+        function (injector) {
+            return this.sanitiser;
         };
-        __decorate([
-            fastMemoizeDecorator.Memoize(),
-            __metadata("design:type", PlaceComponent.Definition),
-            __metadata("design:paramtypes", [])
-        ], PlaceComponent.prototype, "placeDefinition", null);
-        return PlaceComponent;
-    }(DisposableComponent));
+        return ParameterDefinition;
+    }());
     if (false) {
-        /** @type {?} */
-        exports.PlaceComponent.prototype._incomingRouteChange;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.PlaceComponent.prototype.resolvedParameters;
-        /** @type {?} */
-        exports.PlaceComponent.prototype.activatedRoute;
-    }
-    (function (PlaceComponent) {
-        var Definition = /** @class */ (function () {
-            function Definition(component, options) {
-                this.component = component;
-                pectin.assert.notNil(options);
-                this.path = options.path;
-                this.order = options.order;
-                this.data = options.data;
-                this.authenticate = lodash.isNil(options.authenticate) || options.authenticate;
-                this.children = (options.children || []).map((/**
-                 * @param {?} c
-                 * @return {?}
-                 */
-                function (c) { return PlaceComponent.getDefinition(c).component; }));
-            }
-            /**
-             * @return {?}
-             */
-            Definition.prototype.getRouteParameters = /**
-             * @return {?}
-             */
-            function () {
-                return typescriptUtilities.Klass.get(this.component).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
-            };
-            /**
-             * @param {?} constructable
-             * @return {?}
-             */
-            Definition.prototype.isDescriptorForType = /**
-             * @param {?} constructable
-             * @return {?}
-             */
-            function (constructable) {
-                return pectin.lang.constructorChain(constructable).includes(PlaceComponent);
-            };
-            /**
-             * @param {?} placeComponent
-             * @return {?}
-             */
-            Definition.prototype.isDescriptorFor = /**
-             * @param {?} placeComponent
-             * @return {?}
-             */
-            function (placeComponent) {
-                return placeComponent.constructor === this.component;
-            };
-            /**
-             * @template T
-             * @param {?} key
-             * @param {?=} defaultValue
-             * @return {?}
-             */
-            Definition.prototype.getData = /**
-             * @template T
-             * @param {?} key
-             * @param {?=} defaultValue
-             * @return {?}
-             */
-            function (key, defaultValue) {
-                return this.data ?
-                    lodash.isNil(this.data[key]) ? defaultValue : this.data[key] :
-                    defaultValue;
-            };
-            /**
-             * @template T
-             * @param {?} keys
-             * @param {?=} defaultValue
-             * @return {?}
-             */
-            Definition.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 !lodash.isNil(_this.data[key]); }));
-                    return found ? this.data[found] : defaultValue;
-                }
-                else {
-                    return defaultValue;
-                }
-            };
-            __decorate([
-                fastMemoizeDecorator.Memoize(),
-                __metadata("design:type", Function),
-                __metadata("design:paramtypes", []),
-                __metadata("design:returntype", Array)
-            ], Definition.prototype, "getRouteParameters", null);
-            return Definition;
-        }());
-        PlaceComponent.Definition = Definition;
-        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 {?} */
+        exports.ParameterDefinition.prototype.isRouteId;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.isArray;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.name;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.sanitiser;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.propertyName;
+        /** @type {?} */
+        exports.ParameterDefinition.prototype.type;
+    }
+    (function (ParameterDefinition) {
         /**
          * @record
+         * @template T
          */
         function Options() { }
-        PlaceComponent.Options = Options;
+        ParameterDefinition.Options = Options;
         if (false) {
-            /** @type {?} */
-            Options.prototype.path;
-            /** @type {?} */
-            Options.prototype.order;
             /** @type {?|undefined} */
-            Options.prototype.data;
+            Options.prototype.as;
             /** @type {?|undefined} */
-            Options.prototype.authenticate;
+            Options.prototype.optional;
             /** @type {?|undefined} */
-            Options.prototype.children;
+            Options.prototype.remember;
+            /** @type {?|undefined} */
+            Options.prototype.defaultValue;
         }
         /**
-         * @record
+         * @template T
          */
-        function ChildOptions() { }
-        PlaceComponent.ChildOptions = ChildOptions;
+        var /**
+         * @template T
+         */
+        RouteId = /** @class */ (function (_super) {
+            __extends(RouteId, _super);
+            function RouteId() {
+                var _this = _super !== null && _super.apply(this, arguments) || this;
+                _this.isRouteId = true;
+                _this.isArray = false;
+                return _this;
+            }
+            return RouteId;
+        }(ParameterDefinition));
+        ParameterDefinition.RouteId = RouteId;
         if (false) {
             /** @type {?} */
-            ChildOptions.prototype.parent;
+            RouteId.prototype.isRouteId;
+            /** @type {?} */
+            RouteId.prototype.isArray;
         }
         /**
-         * @param {?} klass
-         * @return {?}
+         * @template T
          */
-        function getDefinition(klass) {
-            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+        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;
+            }
+            return ValueParameter;
+        }(ParameterDefinition));
+        ParameterDefinition.ValueParameter = ValueParameter;
+        if (false) {
+            /** @type {?} */
+            ValueParameter.prototype.isRouteId;
+            /** @type {?} */
+            ValueParameter.prototype.isArray;
         }
-        PlaceComponent.getDefinition = getDefinition;
         /**
-         * @param {?} klass
-         * @param {?} options
-         * @return {?}
+         * @template T
+         */
+        var /**
+         * @template T
          */
-        function injectDefinition(klass, options) {
-            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, new Definition(klass, options), klass);
+        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;
         }
-        PlaceComponent.injectDefinition = injectDefinition;
-    })(exports.PlaceComponent || (exports.PlaceComponent = {}));
+    })(exports.ParameterDefinition || (exports.ParameterDefinition = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
-        __extends(AbstractPlaceNavigationComponent, _super);
-        function AbstractPlaceNavigationComponent() {
-            var _this = _super.call(this) || this;
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.placeDefinitions = chain(_this.placesModel).map((/**
-             * @param {?} c
-             * @return {?}
-             */
-            function (c) { return exports.PlaceComponent.getDefinition(c); }));
-            return _this;
+    exports.ParameterSnapshot = /** @class */ (function () {
+        function ParameterSnapshot(placeDefinition, resolved) {
+            this.placeDefinition = placeDefinition;
+            this.resolved = resolved;
         }
         /**
-         * @param {?} placeDef
+         * @param {?} other
          * @return {?}
          */
-        AbstractPlaceNavigationComponent.prototype.getNav = /**
-         * @param {?} placeDef
+        ParameterSnapshot.prototype.hasChanged = /**
+         * @param {?} other
          * @return {?}
          */
-        function (placeDef) {
+        function (other) {
             /** @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); })
-            };
+            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;
         };
         /**
+         * @template T, S
+         * @param {?} parameterDef
          * @return {?}
          */
-        AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
+        ParameterSnapshot.prototype.getResolvedParameter = /**
+         * @template T, S
+         * @param {?} parameterDef
          * @return {?}
          */
-        function () {
+        function (parameterDef) {
+            return this.resolved.find((/**
+             * @param {?} r
+             * @return {?}
+             */
+            function (r) { return r.parameterDef === parameterDef; }));
         };
-        AbstractPlaceNavigationComponent.propDecorators = {
-            places: [{ type: core.Input }],
-            placesModel: [{ type: core.Input }]
+        /**
+         * @template T, S
+         * @param {?} parameterDef
+         * @return {?}
+         */
+        ParameterSnapshot.prototype.getResolvedParameterValue = /**
+         * @template T, S
+         * @param {?} parameterDef
+         * @return {?}
+         */
+        function (parameterDef) {
+            /** @type {?} */
+            var resolvedParameter = this.getResolvedParameter(parameterDef);
+            return resolvedParameter ? resolvedParameter.value : null;
         };
-        __decorate([
-            pectin.StoreInListModel('placesModel'),
-            __metadata("design:type", Array)
-        ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.PlaceComponent.Definition]),
-            __metadata("design:returntype", Object)
-        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
-        return AbstractPlaceNavigationComponent;
-    }(DisposableComponent));
-    if (false) {
-        /** @type {?} */
-        AbstractPlaceNavigationComponent.prototype.places;
-        /** @type {?} */
-        AbstractPlaceNavigationComponent.prototype.placesModel;
-        /** @type {?} */
-        AbstractPlaceNavigationComponent.prototype.placeDefinitions;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var ListPlaceNavComponent = /** @class */ (function (_super) {
-        __extends(ListPlaceNavComponent, _super);
-        function ListPlaceNavComponent() {
-            var _this = _super.call(this) || this;
-            _this.expanded = true;
-            return _this;
-        }
         /**
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.expandMenu = /**
+        ParameterSnapshot.prototype.getRouteId = /**
          * @return {?}
          */
         function () {
-            this.expanded = true;
+            return this.getResolvedRouteId() ? this.getResolvedRouteId().value : null;
         };
         /**
+         * @param {?} name
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.collapseMenu = /**
+        ParameterSnapshot.prototype.getRouteParameter = /**
+         * @param {?} name
          * @return {?}
          */
-        function () {
-            this.expanded = false;
+        function (name) {
+            /** @type {?} */
+            var resolvedParameter = this.resolved.find((/**
+             * @param {?} r
+             * @return {?}
+             */
+            function (r) { return r.parameterDef.name === name; }));
+            return resolvedParameter ? resolvedParameter.value : null;
         };
         /**
+         * @private
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.toggleMenu = /**
+        ParameterSnapshot.prototype.getResolvedRouteId = /**
+         * @private
          * @return {?}
          */
         function () {
-            this.expanded = !this.expanded;
-        };
-        ListPlaceNavComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-list-place-nav',
-                        template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
-                        styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:inherit}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        ListPlaceNavComponent.ctorParameters = function () { return []; };
-        ListPlaceNavComponent.propDecorators = {
-            expanded: [{ type: core.HostBinding, args: ['class.expanded',] }]
-        };
-        return ListPlaceNavComponent;
-    }(AbstractPlaceNavigationComponent));
-    if (false) {
-        /** @type {?} */
-        ListPlaceNavComponent.prototype.expanded;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PlaceService = /** @class */ (function (_super) {
-        __extends(PlaceService, _super);
-        function PlaceService(router, injector) {
-            var _this = _super.call(this) || this;
-            _this.router = router;
-            _this.injector = injector;
-            _this._activePlaces = new pectin.MutableListModel();
-            return _this;
-        }
-        Object.defineProperty(PlaceService.prototype, "activePlaces", {
-            get: /**
+            // 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 () {
-                return this._activePlaces.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        // @Trace()
-        // @Trace()
+            function (p) { return p.parameterDef.isRouteId; }))));
+        };
         /**
-         * @param {?} place
          * @return {?}
          */
-        PlaceService.prototype.onActivate = 
-        // @Trace()
-        /**
-         * @param {?} place
+        ParameterSnapshot.prototype.hasRouteId = /**
          * @return {?}
          */
-        function (place) {
-            this._activePlaces.push(place);
+        function () {
+            return !!this.getResolvedRouteId();
         };
-        // @Trace()
-        // @Trace()
         /**
-         * @param {?} place
          * @return {?}
          */
-        PlaceService.prototype.onDeactivate = 
-        // @Trace()
+        ParameterSnapshot.prototype.getFormattedRouteId = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var routeIdParam = this.getResolvedRouteId();
+            return routeIdParam ? routeIdParam.formattedValue() : null;
+        };
         /**
-         * @param {?} place
          * @return {?}
          */
-        function (place) {
-            this._activePlaces.remove(place);
+        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;
         };
-        // @Trace()
-        // @Trace()
         /**
-         * @param {?} params
+         * @template T, S
+         * @param {?} parameter
+         * @param {?} value
          * @return {?}
          */
-        PlaceService.prototype.notifyRouteParametersChanged = 
-        // @Trace()
-        /**
-         * @param {?} params
+        ParameterSnapshot.prototype.replace = /**
+         * @template T, S
+         * @param {?} parameter
+         * @param {?} value
          * @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 (parameter, value) {
+            return new ParameterSnapshot(this.placeDefinition, this.resolved.map((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) {
+                return p.parameterDef === parameter ? p.replace(value) : p;
+            })));
         };
-        // @Trace()
-        // @Trace()
         /**
-         * @param {?} snapshot
+         * @param {?} injector
          * @return {?}
          */
-        PlaceService.prototype.sanitise = 
-        // @Trace()
-        /**
-         * @param {?} snapshot
+        ParameterSnapshot.prototype.sanitise = /**
+         * @param {?} injector
          * @return {?}
          */
-        function (snapshot) {
+        function (injector) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
-                    return [2 /*return*/, snapshot];
+                    return [2 /*return*/, this];
                 });
             });
         };
-        PlaceService.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceService.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: core.Injector }
-        ]; };
-        /** @nocollapse */ PlaceService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR)); }, token: PlaceService, providedIn: "root" });
-        return PlaceService;
-    }(pectin.GarbageCollector));
+        var _a;
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [exports.ParameterDefinition]),
+            __metadata("design:returntype", ParameterSnapshot.ResolvedParameter)
+        ], ParameterSnapshot.prototype, "getResolvedParameter", null);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [exports.ParameterDefinition]),
+            __metadata("design:returntype", typeof (_a = typeof S !== "undefined" && S) === "function" ? _a : Object)
+        ], ParameterSnapshot.prototype, "getResolvedParameterValue", null);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [String]),
+            __metadata("design:returntype", Object)
+        ], ParameterSnapshot.prototype, "getRouteParameter", null);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", ParameterSnapshot.ResolvedValueParameter)
+        ], ParameterSnapshot.prototype, "getResolvedRouteId", null);
+        return ParameterSnapshot;
+    }());
     if (false) {
+        /** @type {?} */
+        exports.ParameterSnapshot.prototype.placeDefinition;
         /**
          * @type {?}
          * @private
          */
-        PlaceService.prototype._activePlaces;
+        exports.ParameterSnapshot.prototype.resolved;
+    }
+    (function (ParameterSnapshot) {
         /**
-         * @type {?}
-         * @protected
+         * @param {?} placeDef
+         * @param {?} paramMap
+         * @return {?}
          */
-        PlaceService.prototype.router;
+        function create(placeDef, paramMap) {
+            /** @type {?} */
+            var resolvedParameters = placeDef.getRouteParameters()
+                .map((/**
+             * @param {?} def
+             * @return {?}
+             */
+            function (def) {
+                if (def.isArray) {
+                    /** @type {?} */
+                    var value = paramMap.has(def.name) ? paramMap.getAll(def.name).map((/**
+                     * @param {?} raw
+                     * @return {?}
+                     */
+                    function (raw) { return def.type.parse(raw); })) : null;
+                    return new ResolvedArrayParameter(def, value);
+                }
+                else {
+                    /** @type {?} */
+                    var value = paramMap.has(def.name) ? def.type.parse(paramMap.get(def.name)) : null;
+                    return new ResolvedValueParameter(def, value);
+                }
+            }));
+            return new ParameterSnapshot(placeDef, resolvedParameters);
+        }
+        ParameterSnapshot.create = create;
         /**
-         * @type {?}
-         * @protected
+         * @abstract
+         * @template T, S
          */
-        PlaceService.prototype.injector;
-    }
+        var /**
+         * @abstract
+         * @template T, S
+         */
+        ResolvedParameter = /** @class */ (function () {
+            function ResolvedParameter(parameterDef, value) {
+                this.parameterDef = parameterDef;
+                this.value = value;
+            }
+            /**
+             * @return {?}
+             */
+            ResolvedParameter.prototype.isRouteId = /**
+             * @return {?}
+             */
+            function () {
+                return this.parameterDef.isRouteId;
+            };
+            return ResolvedParameter;
+        }());
+        ParameterSnapshot.ResolvedParameter = ResolvedParameter;
+        if (false) {
+            /** @type {?} */
+            ResolvedParameter.prototype.parameterDef;
+            /** @type {?} */
+            ResolvedParameter.prototype.value;
+            /**
+             * @abstract
+             * @param {?} dest
+             * @return {?}
+             */
+            ResolvedParameter.prototype.injectRouteParam = function (dest) { };
+            /**
+             * @abstract
+             * @param {?} otherValue
+             * @return {?}
+             */
+            ResolvedParameter.prototype.isSame = function (otherValue) { };
+            /**
+             * @abstract
+             * @return {?}
+             */
+            ResolvedParameter.prototype.formattedValue = function () { };
+            /**
+             * @abstract
+             * @param {?} value
+             * @return {?}
+             */
+            ResolvedParameter.prototype.replace = function (value) { };
+        }
+        /**
+         * @template T
+         */
+        var /**
+         * @template T
+         */
+        ResolvedValueParameter = /** @class */ (function (_super) {
+            __extends(ResolvedValueParameter, _super);
+            function ResolvedValueParameter() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            /**
+             * @param {?} otherValue
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.isSame = /**
+             * @param {?} otherValue
+             * @return {?}
+             */
+            function (otherValue) {
+                return this.value === otherValue;
+            };
+            /**
+             * @param {?} dest
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.injectRouteParam = /**
+             * @param {?} dest
+             * @return {?}
+             */
+            function (dest) {
+                dest[this.parameterDef.name] = this.parameterDef.type.format(this.value);
+            };
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.replace = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return new ResolvedValueParameter(this.parameterDef, value);
+            };
+            /**
+             * @return {?}
+             */
+            ResolvedValueParameter.prototype.formattedValue = /**
+             * @return {?}
+             */
+            function () {
+                return !___default__default.isNil(this.value) ? this.parameterDef.type.format(this.value) : null;
+            };
+            return ResolvedValueParameter;
+        }(ResolvedParameter));
+        ParameterSnapshot.ResolvedValueParameter = ResolvedValueParameter;
+        /**
+         * @template T
+         */
+        var /**
+         * @template T
+         */
+        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__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 (v) { return _this.parameterDef.type.format(v); }));
+            };
+            /**
+             * @param {?} value
+             * @return {?}
+             */
+            ResolvedArrayParameter.prototype.replace = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return new ResolvedArrayParameter(this.parameterDef, value);
+            };
+            /**
+             * @return {?}
+             */
+            ResolvedArrayParameter.prototype.formattedValue = /**
+             * @return {?}
+             */
+            function () {
+                var _this = this;
+                return this.value ? this.value.map((/**
+                 * @param {?} v
+                 * @return {?}
+                 */
+                function (v) { return _this.parameterDef.type.format(v); })) : [];
+            };
+            return ResolvedArrayParameter;
+        }(ResolvedParameter));
+        ParameterSnapshot.ResolvedArrayParameter = ResolvedArrayParameter;
+    })(exports.ParameterSnapshot || (exports.ParameterSnapshot = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -3025,56 +3092,88 @@
         ]);
     }
     /** @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 pectin.MutableListModel();
+            _this._incomingRouteChange = new pectin.Guard();
+            _this._inOutletUpdate = new pectin.Guard();
+            _this._activatedRouteModel = new pectin.MutableValueModel();
+            _this._placeDefinition = new pectin.MutableValueModel();
+            _this._resolvedParameters = new pectin.MutableValueModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.myPath = observe.listsFrom(activatedRoute.url).last().map((/**
-             * @param {?} s
-             * @return {?}
-             */
-            function (s) { return s.toString(); })).reduce((/**
-             * @param {?} bits
-             * @return {?}
-             */
-            function (bits) { return bits.join(','); }));
-            console.log("new outlet@(" + _this.myPath.value + ")");
-            _this.outletChildPath = chain(_this.outletUrlSegment).map((/**
-             * @param {?} s
+            _this._paramMap = chain(_this._activatedRouteModel).pullObservableValue((/**
+             * @param {?} ar
              * @return {?}
              */
-            function (s) { return s.toString(); })).reduce((/**
-             * @param {?} bits
-             * @return {?}
-             */
-            function (bits) { return bits.join(","); }));
-            _this.state = chain(_this.myPath).map((/**
-             * @param {?} path
+            function (ar) { return ar.paramMap; }));
+            _this.placeConfigured = valueOf.all(chain(_this._inOutletUpdate).isFalsey(), _this._placeDefinition, _this._paramMap).areTruthy();
+            when.valueOf(_this._paramMap).changes((/**
+             * @param {?} params
              * @return {?}
              */
-            function (path) {
-                return "outlet@(" + path + "), child path->" + _this.outletChildPath.value;
-            }), { dependsOn: _this.outletChildPath });
-            when.valueOf(_this.state).changes((/**
-             * @param {?} debug
+            function (params) {
+                /** @type {?} */
+                var snapshot = exports.ParameterSnapshot.create(_this._placeDefinition.value, params);
+                _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;
         }
+        Object.defineProperty(PlaceOutletComponent.prototype, "incomingRouteChange", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._incomingRouteChange;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -3084,76 +3183,56 @@
         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
@@ -3173,45 +3252,54 @@
          * @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: core.Component, args: [{
                         selector: 'angular-ui-powerups-place-outlet',
-                        template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"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: router.ActivatedRoute }
+            { type: PlaceRouter },
+            { type: PlaceHistory }
         ]; };
         PlaceOutletComponent.propDecorators = {
             animate: [{ type: core.Input }],
-            routerOutLetQuery: [{ type: core.ViewChildren, args: [router.RouterOutlet,] }]
+            routerOut: [{ type: core.ViewChild, args: ['routeOutlet', { static: true },] }]
         };
         return PlaceOutletComponent;
     }(DisposableComponent));
@@ -3219,42 +3307,54 @@
         /** @type {?} */
         PlaceOutletComponent.prototype.animate;
         /** @type {?} */
-        PlaceOutletComponent.prototype.routerOutLetQuery;
+        PlaceOutletComponent.prototype.routerOut;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype._currentPlace;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype._incomingRouteChange;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.currentPlace;
+        PlaceOutletComponent.prototype._inOutletUpdate;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.myPath;
+        PlaceOutletComponent.prototype._activatedRouteModel;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.outletUrlSegment;
+        PlaceOutletComponent.prototype._placeDefinition;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.outletChildPath;
+        PlaceOutletComponent.prototype._paramMap;
+        /** @type {?} */
+        PlaceOutletComponent.prototype._resolvedParameters;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.state;
+        PlaceOutletComponent.prototype.placeConfigured;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.placeService;
+        PlaceOutletComponent.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.activatedRoute;
+        PlaceOutletComponent.prototype.placeHistory;
     }
 
     /**
@@ -3312,9 +3412,7 @@
                             TabbedPlaceNavigationComponent,
                             ListPlaceNavComponent
                         ],
-                        providers: [
-                            PlaceService
-                        ]
+                        providers: []
                     },] }
         ];
         return PlaceModule;
@@ -3753,39 +3851,6 @@
         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
@@ -3800,12 +3865,37 @@
          * @return {?}
          */
         function (target) {
-            if (!pectin.lang.constructorChain((/** @type {?} */ (target))).includes(exports.PlaceComponent)) {
+            if (exports.PlaceComponent.isPlaceComponentConstructor(target)) {
+                exports.PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, ___default.isNil(options.authenticate) ? false : options.authenticate, options.order, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+                 * @param {?} c
+                 * @return {?}
+                 */
+                function (c) { return exports.PlaceComponent.getDefinition(c); }))));
+            }
+            else {
                 pectin.lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
             }
-            exports.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
@@ -3856,14 +3946,16 @@
             // HACK: this will break with child routes...
             /** @type {?} */
             var path = "/" + component.placeDefinition.path;
-            console.log({
-                placePath: path,
-                currentRoute: currentRoute.toString(),
-                currentStateUrl: currentState.url,
-                nextStateUrl: nextState.url,
-                currentStateUrlTree: this.router.parseUrl(currentState.url).root.children[router.PRIMARY_OUTLET].segments,
-                nextStateUrlTree: this.router.parseUrl(nextState.url).root.children[router.PRIMARY_OUTLET].segments
-            });
+            // 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();
@@ -3903,36 +3995,43 @@
      * @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 (exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) {
+                /** @type {?} */
+                var placeDefinition = exports.PlaceComponent.getDefinition(activatedRoute.component);
+                /** @type {?} */
+                var snapshot_1 = exports.ParameterSnapshot.create(placeDefinition, activatedRoute.paramMap);
+                return snapshot_1.sanitise(this.injector).then((/**
+                 * @param {?} sanitised
+                 * @return {?}
+                 */
+                function (sanitised) {
+                    if (sanitised.hasChanged(snapshot_1)) {
+                        return _this.placeRouter.createUrlTree(activatedRoute, snapshot_1, sanitised);
+                    }
+                    else {
+                        return true;
+                    }
+                }));
+            }
+            else {
+                return pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component);
+            }
         };
         PlaceRouteGuard.decorators = [
             { type: core.Injectable, args: [{
@@ -3941,10 +4040,10 @@
         ];
         /** @nocollapse */
         PlaceRouteGuard.ctorParameters = function () { return [
-            { type: PlaceService },
-            { type: router.Router }
+            { type: PlaceRouter },
+            { type: core.Injector }
         ]; };
-        /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(core.ɵɵinject(PlaceService), core.ɵɵinject(router.Router)); }, token: PlaceRouteGuard, providedIn: "root" });
+        /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(core.ɵɵinject(PlaceRouter), core.ɵɵinject(core.INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
         return PlaceRouteGuard;
     }());
     if (false) {
@@ -3952,12 +4051,12 @@
          * @type {?}
          * @private
          */
-        PlaceRouteGuard.prototype.placeService;
+        PlaceRouteGuard.prototype.placeRouter;
         /**
          * @type {?}
          * @private
          */
-        PlaceRouteGuard.prototype.router;
+        PlaceRouteGuard.prototype.injector;
     }
 
     /**
@@ -3968,11 +4067,10 @@
      * @template T, S
      */
     var DefaultParameterSanitiser = /** @class */ (function () {
-        function DefaultParameterSanitiser(def, placeService, options) {
+        function DefaultParameterSanitiser(def, remember, defaultValue) {
             this.def = def;
-            this.placeService = placeService;
-            this.remember = lodash.isNil(options.remember) ? false : options.remember;
-            this.defaultValue = lodash.isNil(options.defaultValue) ? null : options.defaultValue;
+            this.remember = remember;
+            this.defaultValue = defaultValue;
         }
         /**
          * @param {?} value
@@ -3989,7 +4087,7 @@
                 if (this.remember) {
                     // value = null;
                 }
-                return this.isBlank(value) && !lodash.isNil(this.defaultValue) ? this.defaultValue : value;
+                return this.isBlank(value) && !___default__default.isNil(this.defaultValue) ? this.defaultValue : value;
             }
             else {
                 return value;
@@ -4007,8 +4105,8 @@
          */
         function (value) {
             /** @type {?} */
-            var isNil$1 = lodash.isNil(value);
-            return this.def.isArray ? !isNil$1 || value['length'] < 1 : isNil$1;
+            var isNil = ___default__default.isNil(value);
+            return this.def.isArray ? !isNil || value['length'] < 1 : isNil;
         };
         __decorate([
             pectin.Trace(),
@@ -4023,22 +4121,11 @@
          * @type {?}
          * @private
          */
+        DefaultParameterSanitiser.prototype.def;
+        /** @type {?} */
         DefaultParameterSanitiser.prototype.remember;
-        /**
-         * @type {?}
-         * @private
-         */
+        /** @type {?} */
         DefaultParameterSanitiser.prototype.defaultValue;
-        /**
-         * @type {?}
-         * @private
-         */
-        DefaultParameterSanitiser.prototype.def;
-        /**
-         * @type {?}
-         * @private
-         */
-        DefaultParameterSanitiser.prototype.placeService;
     }
 
     /**
@@ -4072,8 +4159,6 @@
         ParameterOptions.prototype.remember;
         /** @type {?|undefined} */
         ParameterOptions.prototype.defaultValue;
-        /** @type {?|undefined} */
-        ParameterOptions.prototype.sanitiser;
     }
     /**
      * @record
@@ -4089,8 +4174,6 @@
         ListParameterOptions.prototype.remember;
         /** @type {?|undefined} */
         ListParameterOptions.prototype.defaultValue;
-        /** @type {?|undefined} */
-        ListParameterOptions.prototype.sanitiser;
     }
     /**
      * @template T
@@ -4099,7 +4182,6 @@
      * @return {?}
      */
     function RouteId(type, options) {
-        // assert.isTruthy(type.isValid());
         return (/**
          * @param {?} prototype
          * @param {?} propertyKey
@@ -4107,7 +4189,7 @@
          */
         function (prototype, propertyKey) {
             /** @type {?} */
-            var param = createDefinition(propertyKey, type, options, true);
+            var param = new exports.ParameterDefinition.RouteId(propertyKey.toString(), type, options);
             typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
             pectin.UseDelegate()(prototype, propertyKey);
         });
@@ -4119,7 +4201,6 @@
      * @return {?}
      */
     function RouteParameter(type, options) {
-        // assert.isTruthy(type.isValid());
         return (/**
          * @param {?} prototype
          * @param {?} propertyKey
@@ -4127,7 +4208,7 @@
          */
         function (prototype, propertyKey) {
             /** @type {?} */
-            var param = createDefinition(propertyKey, type, options, false);
+            var param = new exports.ParameterDefinition.ValueParameter(propertyKey.toString(), type, options);
             typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
             pectin.UseDelegate()(prototype, propertyKey);
         });
@@ -4139,7 +4220,6 @@
      * @return {?}
      */
     function RouteParameterList(elementType, options) {
-        // assert.isTruthy(type.isValid());
         return (/**
          * @param {?} prototype
          * @param {?} propertyKey
@@ -4147,82 +4227,11 @@
          */
         function (prototype, propertyKey) {
             /** @type {?} */
-            var param = createArrayDefinition(propertyKey, elementType, options);
+            var param = new exports.ParameterDefinition.ArrayParameter(propertyKey.toString(), elementType, options);
             typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
             pectin.UseDelegate()(prototype, propertyKey);
         });
     }
-    /**
-     * @template T
-     * @param {?} propertyName
-     * @param {?} type
-     * @param {?} options
-     * @param {?} routeId
-     * @return {?}
-     */
-    function createDefinition(propertyName, type, options, routeId) {
-        /** @type {?} */
-        var opts = typescriptUtilities.Opts.get(options);
-        /** @type {?} */
-        var propertyNameAsString = pectin.assert.notNil(propertyName).toString();
-        /** @type {?} */
-        var def = {
-            name: opts.getOptional('as', propertyNameAsString),
-            propertyName: propertyNameAsString,
-            type: pectin.assert.notNil(type),
-            sanitiser: opts.getOptional('sanitiser', null),
-            isRouteId: routeId,
-            isArray: false
-        };
-        return def;
-    }
-    /**
-     * @template T
-     * @param {?} propertyName
-     * @param {?} type
-     * @param {?} options
-     * @return {?}
-     */
-    function createArrayDefinition(propertyName, type, options) {
-        /** @type {?} */
-        var opts = typescriptUtilities.Opts.get(options);
-        /** @type {?} */
-        var propertyNameAsString = pectin.assert.notNil(propertyName).toString();
-        /** @type {?} */
-        var def = {
-            name: opts.getOptional('as', propertyNameAsString),
-            propertyName: propertyNameAsString,
-            type: pectin.assert.notNil(type),
-            sanitiser: opts.getOptional('sanitiser', null),
-            isRouteId: false,
-            isArray: true
-        };
-        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
@@ -4241,20 +4250,6 @@
          */
         ParameterSanitiser.prototype.sanitise = function (value, visit) { };
     }
-    (function (ParameterSanitiser) {
-        /**
-         * @record
-         * @template T
-         */
-        function Options() { }
-        ParameterSanitiser.Options = Options;
-        if (false) {
-            /** @type {?|undefined} */
-            Options.prototype.remember;
-            /** @type {?|undefined} */
-            Options.prototype.defaultValue;
-        }
-    })(ParameterSanitiser || (ParameterSanitiser = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -4313,7 +4308,7 @@
              * @return {?}
              */
             function (value) {
-                return lodash.isNil(value) || lodash.isEmpty(value) ? null : +value;
+                return ___default__default.isNil(value) || ___default__default.isEmpty(value) ? null : +value;
             };
             return NumberType;
         }());
@@ -4379,7 +4374,7 @@
              * @return {?}
              */
             function () {
-                return !lodash.isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+                return !___default__default.isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
             },
             enumerable: true,
             configurable: true
@@ -4481,11 +4476,10 @@
         exports.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 {?} */
@@ -4578,17 +4572,7 @@
          * @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 {?}
@@ -4634,12 +4618,12 @@
          * @return {?}
          */
         function (value) {
-            return lodash.isFunction(value) && pectin.lang.constructorChain((/** @type {?} */ ((/** @type {?} */ (value))))).includes(exports.Sanitiser);
+            return ___default__default.isFunction(value) && pectin.lang.constructorChain((/** @type {?} */ ((/** @type {?} */ (value))))).includes(exports.Sanitiser);
         };
         __decorate([
             src.Memoize(),
             __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
+            __metadata("design:paramtypes", [exports.ParameterDefinition]),
             __metadata("design:returntype", Object)
         ], RouteParameterSanitiser.prototype, "getSanitiser", null);
         __decorate([
@@ -4666,8 +4650,6 @@
         /** @type {?} */
         RouteParameterSanitiser.prototype.snapshot;
         /** @type {?} */
-        RouteParameterSanitiser.prototype.placeService;
-        /** @type {?} */
         RouteParameterSanitiser.prototype.injector;
     }
     (function (Sanitiser) {
@@ -4793,8 +4775,8 @@
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
-    exports.ActivityContainerComponent = exports.ɵt;
-    exports.ActivityOutletComponent = exports.ɵu;
+    exports.ActivityContainerComponent = exports.ɵu;
+    exports.ActivityOutletComponent = exports.ɵv;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
@@ -4816,10 +4798,12 @@
     exports.NumberInputComponent = NumberInputComponent;
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
+    exports.PlaceDefinition = PlaceDefinition;
+    exports.PlaceHistory = PlaceHistory;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouteGuard = PlaceRouteGuard;
-    exports.PlaceService = PlaceService;
+    exports.PlaceRouter = PlaceRouter;
     exports.Point = Point;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.ResizeAwareComponent = ResizeAwareComponent;
@@ -4834,8 +4818,9 @@
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
     exports.ɵa = CommandDirective;
     exports.ɵb = FocusBindingDirective;
-    exports.ɵbb = DialogInteractionService;
-    exports.ɵbc = InteractionContext;
+    exports.ɵba = AlertDialogComponent;
+    exports.ɵbc = DialogInteractionService;
+    exports.ɵbd = InteractionContext;
     exports.ɵc = DisposableComponent;
     exports.ɵd = NumberInputComponent;
     exports.ɵe = AbstractInputComponent;
@@ -4848,15 +4833,15 @@
     exports.ɵl = PlaceOutletComponent;
     exports.ɵm = leftRightPlaceAnimation;
     exports.ɵn = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵo = PlaceService;
-    exports.ɵp = TabbedPlaceNavigationComponent;
-    exports.ɵq = AbstractPlaceNavigationComponent;
-    exports.ɵr = ListPlaceNavComponent;
-    exports.ɵs = InteractionModule;
-    exports.ɵv = ConfirmationDialogComponent;
-    exports.ɵw = AbstractActivity;
-    exports.ɵx = ACTIVITY_DATA;
-    exports.ɵz = AlertDialogComponent;
+    exports.ɵo = PlaceRouter;
+    exports.ɵp = PlaceHistory;
+    exports.ɵq = TabbedPlaceNavigationComponent;
+    exports.ɵr = AbstractPlaceNavigationComponent;
+    exports.ɵs = ListPlaceNavComponent;
+    exports.ɵt = InteractionModule;
+    exports.ɵw = ConfirmationDialogComponent;
+    exports.ɵx = AbstractActivity;
+    exports.ɵy = ACTIVITY_DATA;
 
     Object.defineProperty(exports, '__esModule', { value: true });