@coolon/angular-ui-powerups 0.0.31 → 0.0.33

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/platform-browser'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@angular/router'), require('@angular/animations'), require('lodash'), require('reflect-metadata'), require('resize-observer-polyfill'), require('@typescript-plus/fast-memoize-decorator'), require('@typescript-plus/fast-memoize-decorator/dist/src')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/platform-browser', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tabs', '@angular/material/tooltip', '@angular/router', '@angular/animations', 'lodash', 'reflect-metadata', 'resize-observer-polyfill', '@typescript-plus/fast-memoize-decorator', '@typescript-plus/fast-memoize-decorator/dist/src'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.platformBrowser, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tabs, global.ng.material.tooltip, global.ng.router, global.ng.animations, global.lodash, null, global.ResizeObserver, global.fastMemoizeDecorator, global.src));
-}(this, function (exports, common, core, forms, material, platformBrowser, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tabs, tooltip, router, animations$1, lodash, reflectMetadata, ResizeObserver, fastMemoizeDecorator, src) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/platform-browser'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@angular/router'), require('@typescript-plus/fast-memoize-decorator'), require('lodash'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), require('@typescript-plus/fast-memoize-decorator/dist/src')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/platform-browser', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tabs', '@angular/material/tooltip', '@angular/router', '@typescript-plus/fast-memoize-decorator', 'lodash', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', '@typescript-plus/fast-memoize-decorator/dist/src'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.platformBrowser, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tabs, global.ng.material.tooltip, global.ng.router, global.fastMemoizeDecorator, global.lodash, null, global.ng.animations, global.ResizeObserver, global.src));
+}(this, function (exports, common, core, forms, material, platformBrowser, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, icon, list, tabs, tooltip, router, fastMemoizeDecorator, lodash, reflectMetadata, animations$1, ResizeObserver, src) { 'use strict';
 
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
 
@@ -1904,792 +1904,917 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var PlaceService = /** @class */ (function () {
-        function PlaceService() {
-            this._activePlaces = new pectin.MutableListModel();
+    var ResolvedRouteParameterSnapshot = /** @class */ (function () {
+        function ResolvedRouteParameterSnapshot(parameters) {
+            this.parameters = parameters;
         }
-        Object.defineProperty(PlaceService.prototype, "activePlaces", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._activePlaces.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
         /**
-         * @param {?} place
+         * @template T
+         * @param {?} parameter
          * @return {?}
          */
-        PlaceService.prototype.onActivate = /**
-         * @param {?} place
+        ResolvedRouteParameterSnapshot.prototype.get = /**
+         * @template T
+         * @param {?} parameter
          * @return {?}
          */
-        function (place) {
-            this._activePlaces.push(place);
+        function (parameter) {
+            /** @type {?} */
+            var resolved = this.parameters.find((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) { return p.parameterDef === parameter; }));
+            return resolved ? resolved.resolvedValue : null;
         };
         /**
-         * @param {?} place
+         * @template T
+         * @param {?} parameter
+         * @param {?} value
          * @return {?}
          */
-        PlaceService.prototype.onDeactivate = /**
-         * @param {?} place
+        ResolvedRouteParameterSnapshot.prototype.replace = /**
+         * @template T
+         * @param {?} parameter
+         * @param {?} value
          * @return {?}
          */
-        function (place) {
-            this._activePlaces.remove(place);
+        function (parameter, value) {
+            return new ResolvedRouteParameterSnapshot(this.parameters.filter((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) { return p.parameterDef !== parameter; })).concat({
+                parameterDef: parameter,
+                resolvedValue: value
+            }));
         };
-        PlaceService.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceService.ctorParameters = function () { return []; };
-        /** @nocollapse */ PlaceService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(); }, token: PlaceService, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "onActivate", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], PlaceService.prototype, "onDeactivate", null);
-        return PlaceService;
-    }());
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        PlaceService.prototype._activePlaces;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /** @type {?} */
-    var left = [
-        animations$1.query(':enter, :leave', animations$1.style({ position: 'fixed', width: '100%' }), { optional: true }),
-        animations$1.group([
-            animations$1.query(':enter', [animations$1.style({ transform: 'translateX(-100%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(0%)' }))], {
-                optional: true,
-            }),
-            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(100%)' }))], {
-                optional: true,
-            }),
-        ]),
-    ];
-    /** @type {?} */
-    var right = [
-        animations$1.query(':enter, :leave', animations$1.style({ position: 'fixed', width: '100%' }), { optional: true }),
-        animations$1.group([
-            animations$1.query(':enter', [animations$1.style({ transform: 'translateX(100%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(0%)' }))], {
-                optional: true,
-            }),
-            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(-100%)' }))], {
-                optional: true,
-            }),
-        ]),
-    ];
-    /** @type {?} */
-    var LEFT_RIGHT_PLACE_ANIMATION = animations$1.trigger('routeAnimations', [
-        animations$1.transition(':increment', right),
-        animations$1.transition(':decrement', left),
-    ]);
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PlaceOutletComponent = /** @class */ (function () {
-        function PlaceOutletComponent(placeService) {
-            this.placeService = placeService;
-            this.animate = true;
-        }
         /**
          * @return {?}
          */
-        PlaceOutletComponent.prototype.ngOnInit = /**
+        ResolvedRouteParameterSnapshot.prototype.getFormattedRouteId = /**
          * @return {?}
          */
         function () {
+            /** @type {?} */
+            var routeIdParam = this.getRouteIdParam();
+            return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
         };
         /**
-         * @param {?} $event
+         * @private
          * @return {?}
          */
-        PlaceOutletComponent.prototype.onActivate = /**
-         * @param {?} $event
+        ResolvedRouteParameterSnapshot.prototype.getRouteIdParam = /**
+         * @private
          * @return {?}
          */
-        function ($event) {
-            this.placeService.onActivate($event);
+        function () {
+            return this.parameters.find((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) { return p.parameterDef.isRouteId; }));
         };
         /**
-         * @param {?} $event
          * @return {?}
          */
-        PlaceOutletComponent.prototype.onDeactivate = /**
-         * @param {?} $event
+        ResolvedRouteParameterSnapshot.prototype.getFormattedParameters = /**
          * @return {?}
          */
-        function ($event) {
-            this.placeService.onDeactivate($event);
+        function () {
+            /** @type {?} */
+            var params = {};
+            /** @type {?} */
+            var routeIdParam = this.parameters.filter((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) { return !p.parameterDef.isRouteId; })).forEach((/**
+             * @param {?} p
+             * @return {?}
+             */
+            function (p) {
+                params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
+            }));
+            return params;
         };
         /**
-         * @param {?} outlet
          * @return {?}
          */
-        PlaceOutletComponent.prototype.getPlaceOrder = /**
-         * @param {?} outlet
+        ResolvedRouteParameterSnapshot.prototype.hasRouteId = /**
          * @return {?}
          */
-        function (outlet) {
-            return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
-        };
-        PlaceOutletComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-place-outlet',
-                        template: "<div container [@routeAnimations]=\"getPlaceOrder(routerOutlet)\">\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onActivate($event)\"\n                 (deactivate)=\"onDeactivate($event)\">\n  </router-outlet>\n</div>\n\n",
-                        animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                        styles: [":host{display:flex;flex-direction:column;min-height:0}[container]{flex:1;display:-ms-grid;display:grid;-ms-grid-rows:0 1fr;grid-template-rows:0 1fr;min-height:0}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        PlaceOutletComponent.ctorParameters = function () { return [
-            { type: PlaceService }
-        ]; };
-        PlaceOutletComponent.propDecorators = {
-            animate: [{ type: core.Input }]
+        function () {
+            return !!this.getRouteIdParam();
         };
-        return PlaceOutletComponent;
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ResolvedRouteParameterSnapshot.prototype, "getFormattedRouteId", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ResolvedRouteParameterSnapshot.prototype, "getFormattedParameters", null);
+        return ResolvedRouteParameterSnapshot;
     }());
     if (false) {
         /** @type {?} */
-        PlaceOutletComponent.prototype.animate;
-        /**
-         * @type {?}
-         * @private
-         */
-        PlaceOutletComponent.prototype.placeService;
+        ResolvedRouteParameterSnapshot.prototype.parameters;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @param {?} options
-     * @return {?}
-     */
-    function Place(options) {
-        return (/**
-         * @param {?} target
-         * @return {?}
-         */
-        function (target) {
-            Reflect.defineMetadata('place.options', options, target);
-        });
-    }
-    (function (Place) {
-        /**
-         * @record
-         */
-        function Options() { }
-        Place.Options = Options;
-        if (false) {
-            /** @type {?} */
-            Options.prototype.path;
+    exports.RouteParameterBindings = /** @class */ (function (_super) {
+        __extends(RouteParameterBindings, _super);
+        function RouteParameterBindings(component, placeService) {
+            var _this = _super.call(this) || this;
+            _this.component = component;
+            _this._incomingRouteChange = new pectin.MutableValueModel(false);
+            _this.resolvedParameters = new pectin.MutableValueModel();
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe;
+            _this.txo = new pectin.TransactionObserver(); //.onEvent(e => console.log(e.toString()));
+            //.onEvent(e => console.log(e.toString()));
             /** @type {?} */
-            Options.prototype.order;
-            /** @type {?|undefined} */
-            Options.prototype.data;
-            /** @type {?|undefined} */
-            Options.prototype.authenticate;
-        }
-        var Descriptor = /** @class */ (function () {
-            function Descriptor(placeClass, options) {
-                pectin.assert.notNil(options);
-                this.path = options.path;
-                this.order = options.order;
-                this.data = options.data;
-                this.authenticate = lodash.isNil(options.authenticate) || options.authenticate;
-            }
-            /**
-             * @template T
-             * @param {?} key
-             * @param {?=} defaultValue
-             * @return {?}
-             */
-            Descriptor.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
+            var routeParameterDefs = typescriptUtilities.Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
+            routeParameterDefs.forEach((/**
+             * @param {?} parameter
              * @return {?}
              */
-            Descriptor.prototype.searchData = /**
-             * @template T
-             * @param {?} keys
-             * @param {?=} defaultValue
+            function (parameter) { return _this.installBinding(parameter); }));
+            /** @type {?} */
+            var incomingResolvedRouteParameters = observe.valuesFrom(component.activatedRoute.paramMap)
+                .last()
+                .map((/**
+             * @param {?} params
              * @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;
-                }
-            };
-            return Descriptor;
-        }());
-        Place.Descriptor = Descriptor;
-        if (false) {
-            /** @type {?} */
-            Descriptor.prototype.path;
-            /** @type {?} */
-            Descriptor.prototype.authenticate;
-            /** @type {?} */
-            Descriptor.prototype.order;
-            /** @type {?} */
-            Descriptor.prototype.data;
+            function (params) {
+                /** @type {?} */
+                var result = [];
+                routeParameterDefs.forEach((/**
+                 * @param {?} parameterDef
+                 * @return {?}
+                 */
+                function (parameterDef) {
+                    /** @type {?} */
+                    var resolvedValue;
+                    if (parameterDef.isArray) {
+                        resolvedValue = params.getAll(parameterDef.name).map((/**
+                         * @param {?} v
+                         * @return {?}
+                         */
+                        function (v) { return parameterDef.type.parse(v); }));
+                    }
+                    else {
+                        resolvedValue = parameterDef.type.parse(params.get(parameterDef.name));
+                    }
+                    result.push({ parameterDef: parameterDef, resolvedValue: resolvedValue });
+                }));
+                return new ResolvedRouteParameterSnapshot(result);
+            }));
+            incomingResolvedRouteParameters.subscribe((/**
+             * @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({
+                    placeComponent: component,
+                    next: params,
+                    previous: previous,
+                    updateRoute: !_this.incomingRouteChange.value // we update the route if it's a component triggered change.
+                });
+            }));
+            _this.txo.observe('incomingResolvedRouteParameters', incomingResolvedRouteParameters);
+            _this.txo.observe('this.routeIsChanging', _this.incomingRouteChange);
+            return _this;
         }
+        Object.defineProperty(RouteParameterBindings.prototype, "incomingRouteChange", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._incomingRouteChange.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
-         * @param {?} klass
+         * @protected
+         * @template T
+         * @param {?} parameter
          * @return {?}
          */
-        function getDescriptor(klass) {
+        RouteParameterBindings.prototype.installBinding = /**
+         * @protected
+         * @template T
+         * @param {?} parameter
+         * @return {?}
+         */
+        function (parameter) {
             /** @type {?} */
-            var placeOptions = Reflect.getMetadata('place.options', klass);
-            return new Descriptor(klass, placeOptions);
-        }
-        Place.getDescriptor = getDescriptor;
-    })(Place || (Place = {}));
+            var model = this.getModelFor(parameter);
+            // this.txo.observe(parameter.propertyName, model);
+            this.registerDisposable(new pectin.Binding(this.resolvedParameters, model, {
+                toRight: /**
+                 * @param {?} parameters
+                 * @return {?}
+                 */
+                function (parameters) {
+                    return parameters.get(parameter);
+                },
+                toLeft: /**
+                 * @param {?} value
+                 * @param {?=} currentParameters
+                 * @return {?}
+                 */
+                function (value, currentParameters) {
+                    return currentParameters.replace(parameter, value);
+                }
+            }));
+        };
+        /**
+         * @private
+         * @template T
+         * @param {?} parameter
+         * @return {?}
+         */
+        RouteParameterBindings.prototype.getModelFor = /**
+         * @private
+         * @template T
+         * @param {?} parameter
+         * @return {?}
+         */
+        function (parameter) {
+            return this.component[parameter.propertyName];
+        };
+        return RouteParameterBindings;
+    }(pectin.GarbageCollector));
+    if (false) {
+        /** @type {?} */
+        exports.RouteParameterBindings.prototype._incomingRouteChange;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.RouteParameterBindings.prototype.txo;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.RouteParameterBindings.prototype.resolvedParameters;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.RouteParameterBindings.prototype.component;
+    }
+    (function (RouteParameterBindings) {
+        RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+    })(exports.RouteParameterBindings || (exports.RouteParameterBindings = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
-        __extends(TabbedPlaceNavigationComponent, _super);
-        function TabbedPlaceNavigationComponent() {
+    // RAKE: making this Symbol(...) broke things.
+    /** @type {?} */
+    var DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
+    exports.PlaceComponent = /** @class */ (function (_super) {
+        __extends(PlaceComponent, _super);
+        function PlaceComponent(activatedRoute, placeService) {
             var _this = _super.call(this) || this;
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.orderedPlaces = chain(_this.placesModel).map((/**
-             * @param {?} c
-             * @return {?}
-             */
-            function (c) { return Place.getDescriptor(c); })).sortBy('order');
+            _this.activatedRoute = activatedRoute;
+            _this.routeBindingMediator = _this.registerDisposable(new exports.RouteParameterBindings(_this, placeService));
             return _this;
         }
+        Object.defineProperty(PlaceComponent.prototype, "placeConfig", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @param {?=} nextPlace
+         * @param {?=} nextState
+         * @return {?}
+         */
+        PlaceComponent.prototype.canDeactivate = /**
+         * @param {?=} nextPlace
+         * @param {?=} nextState
+         * @return {?}
+         */
+        function (nextPlace, nextState) {
+            return true;
+        };
         /**
          * @return {?}
          */
-        TabbedPlaceNavigationComponent.prototype.ngOnInit = /**
+        PlaceComponent.prototype.onPlaceReady = /**
          * @return {?}
          */
         function () {
         };
-        TabbedPlaceNavigationComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-tabbed-place-navigation',
-                        template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDescriptor of orderedPlaces.value\"\n     [routerLink]='placeDescriptor.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"placeDescriptor.searchData(['navTooltip', 'navTitle'])\">\n    <mat-icon *ngIf=\"placeDescriptor.getData('navIcon')\">{{placeDescriptor.getData('navIcon')}}</mat-icon>\n    <span>{{placeDescriptor.getData(\"navTitle\", 'missing @Place({data: {navTitle: ??}\\})')}}</span>\n  </a>\n</nav>\n",
-                        styles: [""]
-                    }] }
-        ];
-        /** @nocollapse */
-        TabbedPlaceNavigationComponent.ctorParameters = function () { return []; };
-        TabbedPlaceNavigationComponent.propDecorators = {
-            places: [{ type: core.Input }],
-            placesModel: [{ type: core.Input }]
-        };
         __decorate([
-            pectin.StoreInListModel('placesModel'),
-            __metadata("design:type", Array)
-        ], TabbedPlaceNavigationComponent.prototype, "places", void 0);
+            fastMemoizeDecorator.Memoize(),
+            __metadata("design:type", PlaceComponent.Definition),
+            __metadata("design:paramtypes", [])
+        ], PlaceComponent.prototype, "placeConfig", null);
         __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], TabbedPlaceNavigationComponent.prototype, "placesModel", void 0);
-        return TabbedPlaceNavigationComponent;
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], PlaceComponent.prototype, "onPlaceReady", null);
+        return PlaceComponent;
     }(DisposableComponent));
     if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.PlaceComponent.prototype.routeBindingMediator;
         /** @type {?} */
-        TabbedPlaceNavigationComponent.prototype.places;
-        /** @type {?} */
-        TabbedPlaceNavigationComponent.prototype.placesModel;
-        /** @type {?} */
-        TabbedPlaceNavigationComponent.prototype.orderedPlaces;
+        exports.PlaceComponent.prototype.activatedRoute;
     }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PlaceModule = /** @class */ (function () {
-        function PlaceModule() {
+    (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;
+            }
+            /**
+             * @param {?} construcable
+             * @return {?}
+             */
+            Definition.prototype.isDescriptorForType = /**
+             * @param {?} construcable
+             * @return {?}
+             */
+            function (construcable) {
+                return pectin.lang.constructorChain(construcable).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;
+                }
+            };
+            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.component;
         }
-        PlaceModule.decorators = [
-            { type: core.NgModule, args: [{
-                        imports: [
-                            common.CommonModule,
-                            animations.BrowserAnimationsModule,
-                            material.MatProgressSpinnerModule,
-                            router.RouterModule,
-                            tabs.MatTabsModule,
-                            list.MatListModule,
-                            tooltip.MatTooltipModule,
-                            icon.MatIconModule
-                        ],
-                        declarations: [
-                            EmptyStateComponent,
-                            BusyOverlayComponent,
-                            PlaceOutletComponent,
-                            TabbedPlaceNavigationComponent
-                        ],
-                        entryComponents: [BusyOverlayComponent],
-                        exports: [
-                            BusyOverlayComponent,
-                            PlaceOutletComponent,
-                            EmptyStateComponent,
-                            TabbedPlaceNavigationComponent
-                        ],
-                        providers: [
-                            PlaceService
-                        ]
-                    },] }
-        ];
-        return PlaceModule;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var AngularUiPowerupsModule = /** @class */ (function () {
-        function AngularUiPowerupsModule() {
+        /**
+         * @record
+         */
+        function Options() { }
+        PlaceComponent.Options = Options;
+        if (false) {
+            /** @type {?} */
+            Options.prototype.path;
+            /** @type {?} */
+            Options.prototype.order;
+            /** @type {?|undefined} */
+            Options.prototype.data;
+            /** @type {?|undefined} */
+            Options.prototype.authenticate;
         }
-        AngularUiPowerupsModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [
-                            CommandDirective,
-                            FocusBindingDirective,
-                            NumberInputComponent,
-                            StringInputComponent,
-                            PasswordInputComponent,
-                            SelectInputComponent,
-                        ],
-                        imports: [
-                            common.CommonModule,
-                            platformBrowser.BrowserModule,
-                            animations.BrowserAnimationsModule,
-                            forms.FormsModule,
-                            material.MatInputModule,
-                            material.MatFormFieldModule,
-                            material.MatSelectModule,
-                            PlaceModule,
-                            InteractionModule
-                        ],
-                        exports: [
-                            CommandDirective,
-                            FocusBindingDirective,
-                            NumberInputComponent,
-                            StringInputComponent,
-                            PasswordInputComponent,
-                            SelectInputComponent,
-                            InteractionModule,
-                            PlaceModule,
-                        ]
-                    },] }
-        ];
-        return AngularUiPowerupsModule;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /** @type {?} */
-    var defaultHiddenStyleDef = animations$1.style({
-        opacity: 0,
-        'height': '0',
-        paddingTop: '0',
-        paddingBottom: '0'
-    });
-    /**
-     * @param {?} triggerName
-     * @param {?=} options
-     * @return {?}
-     */
-    function slideDownAndUpAnimation(triggerName, options) {
-        // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
-        /** @type {?} */
-        var duration = pectin.OptionsHelper.get(options).getOptional('duration', '100ms');
-        /** @type {?} */
-        var hiddenStyleDef = pectin.OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
-        return animations$1.trigger(triggerName, [
-            animations$1.transition(':enter', [hiddenStyleDef, animations$1.animate('100ms')]),
-            animations$1.transition(':leave', [animations$1.animate('100ms', hiddenStyleDef)])
-        ]);
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var Dimension = /** @class */ (function () {
-        function Dimension(width, height) {
-            this.width = width;
-            this.height = height;
+        /**
+         * @param {?} klass
+         * @return {?}
+         */
+        function getDefinition(klass) {
+            /** @type {?} */
+            var placeOptions = Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+            return new Definition(klass, placeOptions);
         }
-        return Dimension;
-    }());
-    if (false) {
-        /** @type {?} */
-        Dimension.prototype.width;
-        /** @type {?} */
-        Dimension.prototype.height;
-    }
+        PlaceComponent.getDefinition = getDefinition;
+        /**
+         * @param {?} klass
+         * @param {?} options
+         * @return {?}
+         */
+        function injectDefinition(klass, options) {
+            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, options, klass);
+        }
+        PlaceComponent.injectDefinition = injectDefinition;
+    })(exports.PlaceComponent || (exports.PlaceComponent = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var Point = /** @class */ (function () {
-        function Point(x, y) {
-            this.x = x;
-            this.y = y;
+    var PlaceService = /** @class */ (function (_super) {
+        __extends(PlaceService, _super);
+        function PlaceService(router) {
+            var _this = _super.call(this) || this;
+            _this.router = router;
+            _this._activePlaces = new pectin.MutableListModel();
+            return _this;
         }
+        Object.defineProperty(PlaceService.prototype, "activePlaces", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._activePlaces.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
-         * @param {?} data
+         * @param {?} place
          * @return {?}
          */
-        Point.from = /**
-         * @param {?} data
+        PlaceService.prototype.onActivate = /**
+         * @param {?} place
          * @return {?}
          */
-        function (data) {
-            return new Point(data.x, data.y);
+        function (place) {
+            this._activePlaces.push(place);
         };
         /**
-         * @param {?} x
-         * @param {?} y
+         * @param {?} place
          * @return {?}
          */
-        Point.prototype.translate = /**
-         * @param {?} x
-         * @param {?} y
+        PlaceService.prototype.onDeactivate = /**
+         * @param {?} place
          * @return {?}
          */
-        function (x, y) {
-            return new Point(this.x + x, this.y + y);
+        function (place) {
+            this._activePlaces.remove(place);
         };
-        return Point;
-    }());
-    if (false) {
-        /** @type {?} */
-        Point.prototype.x;
-        /** @type {?} */
-        Point.prototype.y;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    exports.Bounds = /** @class */ (function (_super) {
-        __extends(Bounds, _super);
-        function Bounds(top, left, width, height) {
-            var _this = _super.call(this, width, height) || this;
-            _this.top = top;
-            _this.left = left;
-            _this.width = width;
-            _this.height = height;
-            return _this;
-        }
         /**
-         * @param {?} point
+         * @param {?} params
          * @return {?}
          */
-        Bounds.prototype.relativePositionOf = /**
-         * @param {?} point
+        PlaceService.prototype.notifyRouteParametersChanged = /**
+         * @param {?} params
          * @return {?}
          */
-        function (point) {
-            if (point instanceof MouseEvent) {
-                return new Point(point.clientX - this.left, point.clientY - this.top);
-            }
-            else {
-                return new Point(point.x - this.left, point.y - this.top);
+        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.placeComponent.activatedRoute
+                });
             }
         };
-        return Bounds;
-    }(Dimension));
+        PlaceService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceService.ctorParameters = function () { return [
+            { type: router.Router }
+        ]; };
+        /** @nocollapse */ PlaceService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(core.ɵɵinject(router.Router)); }, token: PlaceService, providedIn: "root" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [exports.PlaceComponent]),
+            __metadata("design:returntype", void 0)
+        ], PlaceService.prototype, "onActivate", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [exports.PlaceComponent]),
+            __metadata("design:returntype", void 0)
+        ], PlaceService.prototype, "onDeactivate", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Object]),
+            __metadata("design:returntype", void 0)
+        ], PlaceService.prototype, "notifyRouteParametersChanged", null);
+        return PlaceService;
+    }(pectin.GarbageCollector));
     if (false) {
-        /** @type {?} */
-        exports.Bounds.prototype.top;
-        /** @type {?} */
-        exports.Bounds.prototype.left;
-        /** @type {?} */
-        exports.Bounds.prototype.width;
-        /** @type {?} */
-        exports.Bounds.prototype.height;
-    }
-    (function (Bounds) {
         /**
-         * @param {?} element
-         * @return {?}
+         * @type {?}
+         * @private
          */
-        function ofElement(element) {
-            /** @type {?} */
-            var rect = element.getBoundingClientRect();
-            return new Bounds(rect.top, rect.left, rect.width, rect.height);
-        }
-        Bounds.ofElement = ofElement;
-    })(exports.Bounds || (exports.Bounds = {}));
+        PlaceService.prototype._activePlaces;
+        /**
+         * @type {?}
+         * @protected
+         */
+        PlaceService.prototype.router;
+    }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var ResizeAwareComponent = /** @class */ (function (_super) {
-        __extends(ResizeAwareComponent, _super);
-        function ResizeAwareComponent(elementRef, ngZone) {
-            var _this = _super.call(this) || this;
-            _this.elementRef = elementRef;
-            _this.ngZone = ngZone;
-            _this._boundsModel = new pectin.ValueHolder(new exports.Bounds(0, 0, 0, 0));
-            return _this;
+    // Freezes the state of the components at the start of the animation.
+    /** @type {?} */
+    var animationStartStyle = animations$1.style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
+    /** @type {?} */
+    var left = [
+        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
+        animations$1.group([
+            animations$1.query(':enter', [
+                animations$1.style({ transform: 'translateX(-100%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
+            ], {
+                optional: true
+            }),
+            animations$1.query(':leave', [
+                animations$1.style({ transform: 'translateX(0%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(100%)' }))
+            ], {
+                optional: true
+            })
+        ])
+    ];
+    /** @type {?} */
+    var right = [
+        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
+        animations$1.group([
+            animations$1.query(':enter', [
+                animations$1.style({ transform: 'translateX(100%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
+            ], {
+                optional: true
+            }),
+            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(-100%)' }))], {
+                optional: true
+            })
+        ])
+    ];
+    /** @type {?} */
+    var LEFT_RIGHT_PLACE_ANIMATION = animations$1.trigger('routeAnimations', [
+        animations$1.transition(':increment', right, { params: { duration: '.3s' } }),
+        animations$1.transition(':decrement', left, { params: { duration: '.3s' } })
+    ]);
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PlaceOutletComponent = /** @class */ (function () {
+        function PlaceOutletComponent(placeService) {
+            this.placeService = placeService;
+            this.animate = true;
         }
         /**
          * @return {?}
          */
-        ResizeAwareComponent.prototype.ngAfterViewInit = /**
+        PlaceOutletComponent.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
-            var _this = this;
-            this.updateBounds();
-            /** @type {?} */
-            var element = this.elementRef.nativeElement;
-            /** @type {?} */
-            var ro = new ResizeObserver((/**
-             * @param {?} entries
-             * @param {?} observer
-             * @return {?}
-             */
-            function (entries, observer) {
-                _this.ngZone.run((/**
-                 * @return {?}
-                 */
-                function () { return _this.updateBounds(); }));
-            }));
-            ro.observe(element);
-            this.onDispose((/**
-             * @return {?}
-             */
-            function () { return ro.disconnect(); }));
         };
-        Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._boundsModel.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this.elementRef.nativeElement;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        // TODO: Make this handle body scroll
-        // TODO: Make this handle body scroll
         /**
-         * @param {?} point
+         * @param {?} $event
          * @return {?}
          */
-        ResizeAwareComponent.prototype.relativePositionOf = 
-        // TODO: Make this handle body scroll
+        PlaceOutletComponent.prototype.onActivate = /**
+         * @param {?} $event
+         * @return {?}
+         */
+        function ($event) {
+            this.currentPlace = $event;
+            this.placeService.onActivate($event);
+            if (!this.animate) {
+                this.notifyPlaceReady();
+            }
+        };
         /**
-         * @param {?} point
+         * @param {?} $event
          * @return {?}
          */
-        function (point) {
-            return this.bounds.relativePositionOf(point);
+        PlaceOutletComponent.prototype.onDeactivate = /**
+         * @param {?} $event
+         * @return {?}
+         */
+        function ($event) {
+            this.currentPlace = null;
+            this.placeService.onDeactivate($event);
+        };
+        /**
+         * @param {?} outlet
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.getPlaceOrder = /**
+         * @param {?} outlet
+         * @return {?}
+         */
+        function (outlet) {
+            return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
+        };
+        /**
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.animationDone = /**
+         * @return {?}
+         */
+        function () {
+            this.notifyPlaceReady();
         };
-        Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._boundsModel.value;
-            },
-            enumerable: true,
-            configurable: true
-        });
         /**
          * @private
          * @return {?}
          */
-        ResizeAwareComponent.prototype.updateBounds = /**
+        PlaceOutletComponent.prototype.notifyPlaceReady = /**
          * @private
          * @return {?}
          */
         function () {
-            this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
+            if (this.currentPlace) {
+                this.currentPlace.onPlaceReady();
+            }
         };
-        return ResizeAwareComponent;
-    }(DisposableComponent));
+        PlaceOutletComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'angular-ui-powerups-place-outlet',
+                        template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onActivate($event)\"\n                 (deactivate)=\"onDeactivate($event)\">\n  </router-outlet>\n</div>\n\n",
+                        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 }
+        ]; };
+        PlaceOutletComponent.propDecorators = {
+            animate: [{ type: core.Input }],
+            routerOutLet: [{ type: core.ViewChild, args: ['routerOutlet', { static: false },] }]
+        };
+        return PlaceOutletComponent;
+    }());
     if (false) {
+        /** @type {?} */
+        PlaceOutletComponent.prototype.animate;
+        /** @type {?} */
+        PlaceOutletComponent.prototype.routerOutLet;
         /**
          * @type {?}
          * @private
          */
-        ResizeAwareComponent.prototype._boundsModel;
-        /**
-         * @type {?}
-         * @protected
-         */
-        ResizeAwareComponent.prototype.elementRef;
+        PlaceOutletComponent.prototype.currentPlace;
         /**
          * @type {?}
-         * @protected
+         * @private
          */
-        ResizeAwareComponent.prototype.ngZone;
+        PlaceOutletComponent.prototype.placeService;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @record
-     */
-    function Alert() { }
-    if (false) {
-        /**
-         * @return {?}
-         */
-        Alert.prototype.title = function () { };
+    var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
+        __extends(TabbedPlaceNavigationComponent, _super);
+        function TabbedPlaceNavigationComponent() {
+            var _this = _super.call(this) || this;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.orderedPlaces = chain(_this.placesModel).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            function (c) { return exports.PlaceComponent.getDefinition(c); })).sortBy('order');
+            return _this;
+        }
         /**
          * @return {?}
          */
-        Alert.prototype.content = function () { };
-        /**
+        TabbedPlaceNavigationComponent.prototype.ngOnInit = /**
          * @return {?}
          */
-        Alert.prototype.ok = function () { };
+        function () {
+        };
+        TabbedPlaceNavigationComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'angular-ui-powerups-tabbed-place-navigation',
+                        template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDescriptor of orderedPlaces.value\"\n     [routerLink]='placeDescriptor.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"placeDescriptor.searchData(['navTooltip', 'navTitle'])\">\n    <mat-icon *ngIf=\"placeDescriptor.getData('navIcon')\">{{placeDescriptor.getData('navIcon')}}</mat-icon>\n    <span>{{placeDescriptor.getData(\"navTitle\", 'missing @Place({data: {navTitle: ??}\\})')}}</span>\n  </a>\n</nav>\n",
+                        styles: [""]
+                    }] }
+        ];
+        /** @nocollapse */
+        TabbedPlaceNavigationComponent.ctorParameters = function () { return []; };
+        TabbedPlaceNavigationComponent.propDecorators = {
+            places: [{ type: core.Input }],
+            placesModel: [{ type: core.Input }]
+        };
+        __decorate([
+            pectin.StoreInListModel('placesModel'),
+            __metadata("design:type", Array)
+        ], TabbedPlaceNavigationComponent.prototype, "places", void 0);
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], TabbedPlaceNavigationComponent.prototype, "placesModel", void 0);
+        return TabbedPlaceNavigationComponent;
+    }(DisposableComponent));
+    if (false) {
+        /** @type {?} */
+        TabbedPlaceNavigationComponent.prototype.places;
+        /** @type {?} */
+        TabbedPlaceNavigationComponent.prototype.placesModel;
+        /** @type {?} */
+        TabbedPlaceNavigationComponent.prototype.orderedPlaces;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @record
-     */
-    function Confirm() { }
-    if (false) {
-        /** @type {?|undefined} */
-        Confirm.prototype.destructive;
-        /**
-         * @return {?}
-         */
-        Confirm.prototype.cancel = function () { };
-    }
+    var PlaceModule = /** @class */ (function () {
+        function PlaceModule() {
+        }
+        PlaceModule.decorators = [
+            { type: core.NgModule, args: [{
+                        imports: [
+                            common.CommonModule,
+                            animations.BrowserAnimationsModule,
+                            material.MatProgressSpinnerModule,
+                            router.RouterModule,
+                            tabs.MatTabsModule,
+                            list.MatListModule,
+                            tooltip.MatTooltipModule,
+                            icon.MatIconModule
+                        ],
+                        declarations: [
+                            EmptyStateComponent,
+                            BusyOverlayComponent,
+                            PlaceOutletComponent,
+                            TabbedPlaceNavigationComponent
+                        ],
+                        entryComponents: [BusyOverlayComponent],
+                        exports: [
+                            BusyOverlayComponent,
+                            PlaceOutletComponent,
+                            EmptyStateComponent,
+                            TabbedPlaceNavigationComponent
+                        ],
+                        providers: [
+                            PlaceService
+                        ]
+                    },] }
+        ];
+        return PlaceModule;
+    }());
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @record
-     * @template R, E
-     */
-    function Result() { }
-    (function (Result) {
-        /**
-         * @record
-         * @template R, E
-         */
-        function Callback() { }
-        Result.Callback = Callback;
-        if (false) {
-            /** @type {?} */
-            Callback.prototype.then;
-            /** @type {?} */
-            Callback.prototype.catch;
+    var AngularUiPowerupsModule = /** @class */ (function () {
+        function AngularUiPowerupsModule() {
         }
-    })(Result || (Result = {}));
+        AngularUiPowerupsModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [
+                            CommandDirective,
+                            FocusBindingDirective,
+                            NumberInputComponent,
+                            StringInputComponent,
+                            PasswordInputComponent,
+                            SelectInputComponent,
+                        ],
+                        imports: [
+                            common.CommonModule,
+                            platformBrowser.BrowserModule,
+                            animations.BrowserAnimationsModule,
+                            forms.FormsModule,
+                            material.MatInputModule,
+                            material.MatFormFieldModule,
+                            material.MatSelectModule,
+                            PlaceModule,
+                            InteractionModule
+                        ],
+                        exports: [
+                            CommandDirective,
+                            FocusBindingDirective,
+                            NumberInputComponent,
+                            StringInputComponent,
+                            PasswordInputComponent,
+                            SelectInputComponent,
+                            InteractionModule,
+                            PlaceModule,
+                        ]
+                    },] }
+        ];
+        return AngularUiPowerupsModule;
+    }());
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    /** @type {?} */
+    var defaultHiddenStyleDef = animations$1.style({
+        opacity: 0,
+        'height': '0',
+        paddingTop: '0',
+        paddingBottom: '0'
+    });
     /**
-     * @record
-     * @template D, R, E
+     * @param {?} triggerName
+     * @param {?=} options
+     * @return {?}
      */
-    function ActivityOutletContext() { }
-    if (false) {
-        /** @type {?} */
-        ActivityOutletContext.prototype.interactionContext;
-        /** @type {?} */
-        ActivityOutletContext.prototype.activityClass;
-        /** @type {?} */
-        ActivityOutletContext.prototype.activityData;
+    function slideDownAndUpAnimation(triggerName, options) {
+        // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
         /** @type {?} */
-        ActivityOutletContext.prototype.onDone;
+        var duration = pectin.OptionsHelper.get(options).getOptional('duration', '100ms');
         /** @type {?} */
-        ActivityOutletContext.prototype.onCancel;
+        var hiddenStyleDef = pectin.OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
+        return animations$1.trigger(triggerName, [
+            animations$1.transition(':enter', [hiddenStyleDef, animations$1.animate('100ms')]),
+            animations$1.transition(':leave', [animations$1.animate('100ms', hiddenStyleDef)])
+        ]);
     }
 
     /**
@@ -2701,385 +2826,351 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /**
-     * @record
-     * @template T
-     */
-    function ResolvedParameter() { }
+    var Dimension = /** @class */ (function () {
+        function Dimension(width, height) {
+            this.width = width;
+            this.height = height;
+        }
+        return Dimension;
+    }());
     if (false) {
         /** @type {?} */
-        ResolvedParameter.prototype.parameterDef;
+        Dimension.prototype.width;
         /** @type {?} */
-        ResolvedParameter.prototype.resolvedValue;
+        Dimension.prototype.height;
     }
-    var ResolvedParameters = /** @class */ (function () {
-        function ResolvedParameters(parameters) {
-            this.parameters = parameters;
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var Point = /** @class */ (function () {
+        function Point(x, y) {
+            this.x = x;
+            this.y = y;
         }
         /**
-         * @template T
-         * @param {?} parameter
-         * @return {?}
-         */
-        ResolvedParameters.prototype.get = /**
-         * @template T
-         * @param {?} parameter
-         * @return {?}
-         */
-        function (parameter) {
-            /** @type {?} */
-            var resolved = this.parameters.find((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return p.parameterDef === parameter; }));
-            return resolved ? resolved.resolvedValue : null;
-        };
-        /**
-         * @template T
-         * @param {?} parameter
-         * @param {?} value
+         * @param {?} data
          * @return {?}
          */
-        ResolvedParameters.prototype.replace = /**
-         * @template T
-         * @param {?} parameter
-         * @param {?} value
+        Point.from = /**
+         * @param {?} data
          * @return {?}
          */
-        function (parameter, value) {
-            return new ResolvedParameters(this.parameters.filter((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return p.parameterDef !== parameter; })).concat({
-                parameterDef: parameter,
-                resolvedValue: value
-            }));
+        function (data) {
+            return new Point(data.x, data.y);
         };
         /**
-         * @protected
+         * @param {?} x
+         * @param {?} y
          * @return {?}
          */
-        ResolvedParameters.prototype.getFormattedRouteId = /**
-         * @protected
+        Point.prototype.translate = /**
+         * @param {?} x
+         * @param {?} y
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var routeIdParam = this.getRouteIdParam();
-            return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
+        function (x, y) {
+            return new Point(this.x + x, this.y + y);
         };
+        return Point;
+    }());
+    if (false) {
+        /** @type {?} */
+        Point.prototype.x;
+        /** @type {?} */
+        Point.prototype.y;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    exports.Bounds = /** @class */ (function (_super) {
+        __extends(Bounds, _super);
+        function Bounds(top, left, width, height) {
+            var _this = _super.call(this, width, height) || this;
+            _this.top = top;
+            _this.left = left;
+            _this.width = width;
+            _this.height = height;
+            return _this;
+        }
         /**
-         * @private
+         * @param {?} point
          * @return {?}
          */
-        ResolvedParameters.prototype.getRouteIdParam = /**
-         * @private
+        Bounds.prototype.relativePositionOf = /**
+         * @param {?} point
          * @return {?}
          */
-        function () {
-            return this.parameters.find((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return p.parameterDef.isRouteId; }));
+        function (point) {
+            if (point instanceof MouseEvent) {
+                return new Point(point.clientX - this.left, point.clientY - this.top);
+            }
+            else {
+                return new Point(point.x - this.left, point.y - this.top);
+            }
         };
+        return Bounds;
+    }(Dimension));
+    if (false) {
+        /** @type {?} */
+        exports.Bounds.prototype.top;
+        /** @type {?} */
+        exports.Bounds.prototype.left;
+        /** @type {?} */
+        exports.Bounds.prototype.width;
+        /** @type {?} */
+        exports.Bounds.prototype.height;
+    }
+    (function (Bounds) {
         /**
-         * @protected
-         * @return {?}
-         */
-        ResolvedParameters.prototype.getFormattedParameters = /**
-         * @protected
+         * @param {?} element
          * @return {?}
          */
-        function () {
-            /** @type {?} */
-            var params = {};
+        function ofElement(element) {
             /** @type {?} */
-            var routeIdParam = this.parameters.filter((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return !p.parameterDef.isRouteId; })).forEach((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) {
-                params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
-            }));
-            return params;
-        };
+            var rect = element.getBoundingClientRect();
+            return new Bounds(rect.top, rect.left, rect.width, rect.height);
+        }
+        Bounds.ofElement = ofElement;
+    })(exports.Bounds || (exports.Bounds = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ResizeAwareComponent = /** @class */ (function (_super) {
+        __extends(ResizeAwareComponent, _super);
+        function ResizeAwareComponent(elementRef, ngZone) {
+            var _this = _super.call(this) || this;
+            _this.elementRef = elementRef;
+            _this.ngZone = ngZone;
+            _this._boundsModel = new pectin.ValueHolder(new exports.Bounds(0, 0, 0, 0));
+            return _this;
+        }
         /**
          * @return {?}
          */
-        ResolvedParameters.prototype.hasRouteId = /**
+        ResizeAwareComponent.prototype.ngAfterViewInit = /**
          * @return {?}
          */
         function () {
-            return !!this.getRouteIdParam();
-        };
-        /**
-         * @param {?} previous
-         * @param {?} router
-         * @param {?} activatedRoute
-         * @return {?}
-         */
-        ResolvedParameters.prototype.redirect = /**
-         * @param {?} previous
-         * @param {?} router
-         * @param {?} activatedRoute
-         * @return {?}
-         */
-        function (previous, router, activatedRoute) {
-            /** @type {?} */
-            var routeId = this.getFormattedRouteId();
-            /** @type {?} */
-            var relativePath = !!previous.hasRouteId() ? '..' : '.';
-            /** @type {?} */
-            var path = routeId ? [relativePath, routeId, this.getFormattedParameters()] : [relativePath, this.getFormattedParameters()];
-            router.navigate(path, {
-                relativeTo: activatedRoute
-            });
-        };
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], ResolvedParameters.prototype, "getFormattedRouteId", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], ResolvedParameters.prototype, "getFormattedParameters", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [ResolvedParameters, router.Router, router.ActivatedRoute]),
-            __metadata("design:returntype", void 0)
-        ], ResolvedParameters.prototype, "redirect", null);
-        return ResolvedParameters;
-    }());
-    if (false) {
-        /** @type {?} */
-        ResolvedParameters.prototype.parameters;
-    }
-    exports.RouteParameterBindings = /** @class */ (function (_super) {
-        __extends(RouteParameterBindings, _super);
-        function RouteParameterBindings(component, router, activatedRoute) {
-            var _this = _super.call(this) || this;
-            _this.component = component;
-            _this.router = router;
-            _this.activatedRoute = activatedRoute;
-            _this._incomingRouteChange = new pectin.MutableValueModel(false);
-            _this.resolvedParameters = new pectin.MutableValueModel();
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe;
-            _this.txo = new pectin.TransactionObserver(); //.onEvent(e => console.log(e.toString()));
-            //.onEvent(e => console.log(e.toString()));
+            var _this = this;
+            this.updateBounds();
             /** @type {?} */
-            var routeParameterDefs = typescriptUtilities.Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-            routeParameterDefs.forEach((/**
-             * @param {?} parameter
-             * @return {?}
-             */
-            function (parameter) { return _this.installBinding(parameter); }));
+            var element = this.elementRef.nativeElement;
             /** @type {?} */
-            var incomingResolvedRouteParameters = observe.valuesFrom(activatedRoute.paramMap)
-                .last()
-                .map((/**
-             * @param {?} params
+            var ro = new ResizeObserver((/**
+             * @param {?} entries
+             * @param {?} observer
              * @return {?}
              */
-            function (params) {
-                /** @type {?} */
-                var result = [];
-                routeParameterDefs.forEach((/**
-                 * @param {?} parameterDef
+            function (entries, observer) {
+                _this.ngZone.run((/**
                  * @return {?}
                  */
-                function (parameterDef) {
-                    /** @type {?} */
-                    var resolvedValue;
-                    if (parameterDef.isArray) {
-                        resolvedValue = params.getAll(parameterDef.name).map((/**
-                         * @param {?} v
-                         * @return {?}
-                         */
-                        function (v) { return parameterDef.type.parse(v); }));
-                    }
-                    else {
-                        resolvedValue = parameterDef.type.parse(params.get(parameterDef.name));
-                    }
-                    result.push({ parameterDef: parameterDef, resolvedValue: resolvedValue });
-                }));
-                return new ResolvedParameters(result);
+                function () { return _this.updateBounds(); }));
             }));
-            incomingResolvedRouteParameters.subscribe((/**
-             * @param {?} resolvedParameters
+            ro.observe(element);
+            this.onDispose((/**
              * @return {?}
              */
-            function (resolvedParameters) {
-                _this._incomingRouteChange.value = true;
-                _this.resolvedParameters.value = resolvedParameters;
-                _this._incomingRouteChange.value = false;
-            }));
-            when.valueOf(_this.resolvedParameters).changes((/**
-             * @param {?} params
-             * @param {?} previous
+            function () { return ro.disconnect(); }));
+        };
+        Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
+            get: /**
              * @return {?}
              */
-            function (params, previous) {
-                params.redirect(previous, router, activatedRoute);
-            }), { unless: _this.incomingRouteChange });
-            _this.txo.observe('incomingResolvedRouteParameters', incomingResolvedRouteParameters);
-            _this.txo.observe('this.routeIsChanging', _this.incomingRouteChange);
-            return _this;
-        }
-        Object.defineProperty(RouteParameterBindings.prototype, "incomingRouteChange", {
+            function () {
+                return this._boundsModel.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
             get: /**
              * @return {?}
              */
             function () {
-                return this._incomingRouteChange.readonly;
+                return this.elementRef.nativeElement;
             },
             enumerable: true,
             configurable: true
         });
+        // TODO: Make this handle body scroll
+        // TODO: Make this handle body scroll
         /**
-         * @protected
-         * @template T
-         * @param {?} parameter
+         * @param {?} point
          * @return {?}
          */
-        RouteParameterBindings.prototype.installBinding = /**
-         * @protected
-         * @template T
-         * @param {?} parameter
+        ResizeAwareComponent.prototype.relativePositionOf = 
+        // TODO: Make this handle body scroll
+        /**
+         * @param {?} point
          * @return {?}
          */
-        function (parameter) {
-            /** @type {?} */
-            var model = this.getModelFor(parameter);
-            // this.txo.observe(parameter.propertyName, model);
-            this.registerDisposable(new pectin.Binding(this.resolvedParameters, model, {
-                toRight: /**
-                 * @param {?} parameters
-                 * @return {?}
-                 */
-                function (parameters) {
-                    return parameters.get(parameter);
-                },
-                toLeft: /**
-                 * @param {?} value
-                 * @param {?=} currentParameters
-                 * @return {?}
-                 */
-                function (value, currentParameters) {
-                    return currentParameters.replace(parameter, value);
-                }
-            }));
+        function (point) {
+            return this.bounds.relativePositionOf(point);
         };
+        Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._boundsModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @private
-         * @template T
-         * @param {?} parameter
          * @return {?}
          */
-        RouteParameterBindings.prototype.getModelFor = /**
+        ResizeAwareComponent.prototype.updateBounds = /**
          * @private
-         * @template T
-         * @param {?} parameter
          * @return {?}
          */
-        function (parameter) {
-            return this.component[parameter.propertyName];
+        function () {
+            this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
         };
-        return RouteParameterBindings;
-    }(pectin.GarbageCollector));
+        return ResizeAwareComponent;
+    }(DisposableComponent));
     if (false) {
-        /** @type {?} */
-        exports.RouteParameterBindings.prototype._incomingRouteChange;
         /**
          * @type {?}
          * @private
          */
-        exports.RouteParameterBindings.prototype.txo;
+        ResizeAwareComponent.prototype._boundsModel;
         /**
          * @type {?}
-         * @private
+         * @protected
          */
-        exports.RouteParameterBindings.prototype.resolvedParameters;
+        ResizeAwareComponent.prototype.elementRef;
         /**
          * @type {?}
-         * @private
+         * @protected
          */
-        exports.RouteParameterBindings.prototype.component;
+        ResizeAwareComponent.prototype.ngZone;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function Alert() { }
+    if (false) {
         /**
-         * @type {?}
-         * @private
+         * @return {?}
+         */
+        Alert.prototype.title = function () { };
+        /**
+         * @return {?}
          */
-        exports.RouteParameterBindings.prototype.router;
+        Alert.prototype.content = function () { };
         /**
-         * @type {?}
-         * @private
+         * @return {?}
          */
-        exports.RouteParameterBindings.prototype.activatedRoute;
+        Alert.prototype.ok = function () { };
     }
-    (function (RouteParameterBindings) {
-        RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-    })(exports.RouteParameterBindings || (exports.RouteParameterBindings = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var AbstractPlaceComponent = /** @class */ (function (_super) {
-        __extends(AbstractPlaceComponent, _super);
-        function AbstractPlaceComponent(activatedRoute, router) {
-            var _this = _super.call(this) || this;
-            _this.activatedRoute = activatedRoute;
-            _this.routeBindingMediator = _this.registerDisposable(new exports.RouteParameterBindings(_this, router, activatedRoute));
-            return _this;
-        }
-        Object.defineProperty(AbstractPlaceComponent.prototype, "placeConfig", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return Place.getDescriptor((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
-            },
-            enumerable: true,
-            configurable: true
-        });
+    /**
+     * @record
+     */
+    function Confirm() { }
+    if (false) {
+        /** @type {?|undefined} */
+        Confirm.prototype.destructive;
         /**
          * @return {?}
          */
-        AbstractPlaceComponent.prototype.canDeactivate = /**
-         * @return {?}
-         */
-        function () {
-            return true;
-        };
-        __decorate([
-            fastMemoizeDecorator.Memoize(),
-            __metadata("design:type", Place.Descriptor),
-            __metadata("design:paramtypes", [])
-        ], AbstractPlaceComponent.prototype, "placeConfig", null);
-        return AbstractPlaceComponent;
-    }(DisposableComponent));
-    if (false) {
+        Confirm.prototype.cancel = function () { };
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     * @template R, E
+     */
+    function Result() { }
+    (function (Result) {
         /**
-         * @type {?}
-         * @private
+         * @record
+         * @template R, E
          */
-        AbstractPlaceComponent.prototype.routeBindingMediator;
+        function Callback() { }
+        Result.Callback = Callback;
+        if (false) {
+            /** @type {?} */
+            Callback.prototype.then;
+            /** @type {?} */
+            Callback.prototype.catch;
+        }
+    })(Result || (Result = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     * @template D, R, E
+     */
+    function ActivityOutletContext() { }
+    if (false) {
+        /** @type {?} */
+        ActivityOutletContext.prototype.interactionContext;
+        /** @type {?} */
+        ActivityOutletContext.prototype.activityClass;
+        /** @type {?} */
+        ActivityOutletContext.prototype.activityData;
+        /** @type {?} */
+        ActivityOutletContext.prototype.onDone;
+        /** @type {?} */
+        ActivityOutletContext.prototype.onCancel;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function IPlaceComponent() { }
+    if (false) {
+        /** @type {?} */
+        IPlaceComponent.prototype.activatedRoute;
         /**
-         * @type {?}
-         * @protected
+         * @return {?}
          */
-        AbstractPlaceComponent.prototype.activatedRoute;
+        IPlaceComponent.prototype.onPlaceReady = function () { };
     }
 
     /**
@@ -3089,12 +3180,34 @@
     /**
      * @record
      */
-    function PlaceComponent() { }
+    function IPlaceService() { }
     if (false) {
         /**
+         * @param {?} params
+         * @return {?}
+         */
+        IPlaceService.prototype.notifyRouteParametersChanged = function (params) { };
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @param {?} options
+     * @return {?}
+     */
+    function Place(options) {
+        return (/**
+         * @param {?} target
          * @return {?}
          */
-        PlaceComponent.prototype.canDeactivate = function () { };
+        function (target) {
+            if (!pectin.lang.constructorChain((/** @type {?} */ (target))).includes(exports.PlaceComponent)) {
+                pectin.lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
+            }
+            exports.PlaceComponent.injectDefinition((/** @type {?} */ (target)), options);
+        });
     }
 
     /**
@@ -3121,7 +3234,21 @@
          * @return {?}
          */
         function (component, currentRoute, currentState, nextState) {
-            return component.canDeactivate();
+            /** @type {?} */
+            var placeComponent = nextState ?
+                (/** @type {?} */ (nextState.root.firstChild.component)) :
+                null;
+            /** @type {?} */
+            var nextPlaceDefinition = pectin.lang.constructorChain(placeComponent).includes(exports.PlaceComponent) ?
+                exports.PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (placeComponent))))) :
+                null;
+            if (nextPlaceDefinition.isDescriptorFor(component)) {
+                // console.log("Same place different route.  Do we need a place component hook for this??");
+                return true;
+            }
+            else {
+                return component.canDeactivate(nextPlaceDefinition, nextState);
+            }
         };
         LeavePlaceGuard.decorators = [
             { type: core.Injectable, args: [{
@@ -3928,10 +4055,35 @@
         ParameterType.BOOLEAN = new BooleanType();
     })(exports.ParameterType || (exports.ParameterType = {}));
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     * @template T
+     */
+    function ResolvedParameter() { }
+    if (false) {
+        /** @type {?} */
+        ResolvedParameter.prototype.parameterDef;
+        /** @type {?} */
+        ResolvedParameter.prototype.resolvedValue;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var VisitSnapshot = /** @class */ (function () {
+        function VisitSnapshot() {
+        }
+        return VisitSnapshot;
+    }());
+
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
-    exports.AbstractPlaceComponent = AbstractPlaceComponent;
     exports.ActivityContainerComponent = exports.ɵq;
     exports.ActivityOutletComponent = exports.ɵx;
     exports.AlertDialogComponent = AlertDialogComponent;
@@ -3939,6 +4091,7 @@
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CommandDirective = CommandDirective;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
+    exports.DEFINITION_META_DATA_KEY = DEFINITION_META_DATA_KEY;
     exports.DialogInteractionService = DialogInteractionService;
     exports.Dimension = Dimension;
     exports.DisposableComponent = DisposableComponent;
@@ -3960,6 +4113,7 @@
     exports.QueryParameter = QueryParameter;
     exports.QueryParameterList = QueryParameterList;
     exports.ResizeAwareComponent = ResizeAwareComponent;
+    exports.ResolvedRouteParameterSnapshot = ResolvedRouteParameterSnapshot;
     exports.RouteId = RouteId;
     exports.RouteParameter = RouteParameter;
     exports.RouteParameterList = RouteParameterList;
@@ -3967,6 +4121,7 @@
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
+    exports.VisitSnapshot = VisitSnapshot;
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
     exports.ɵa = CommandDirective;
     exports.ɵb = FocusBindingDirective;