@coolon/angular-ui-powerups 0.0.32 → 0.0.34

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,247 +1904,397 @@
      * @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
-     */
-    // 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 {?}
          */
-        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 class=\"router-outlet-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}.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 }]
+        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
+            var routeParameterDefs = typescriptUtilities.Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
+            routeParameterDefs.forEach((/**
+             * @param {?} parameter
              * @return {?}
              */
-            Descriptor.prototype.getData = /**
-             * @template T
-             * @param {?} key
-             * @param {?=} defaultValue
-             * @return {?}
+            function (parameter) { return _this.installBinding(parameter); }));
+            /** @type {?} */
+            var incomingResolvedRouteParameters = observe.valuesFrom(component.activatedRoute.paramMap)
+                .last()
+                .map((/**
+             * @param {?} params
+             * @return {?}
+             */
+            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
+        });
+        /**
+         * @protected
+         * @template T
+         * @param {?} parameter
+         * @return {?}
+         */
+        RouteParameterBindings.prototype.installBinding = /**
+         * @protected
+         * @template T
+         * @param {?} parameter
+         * @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);
+                }
+            }));
+        };
+        /**
+         * @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
+     */
+    // 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;
+            _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
+        });
+        /**
+         * @return {?}
+         */
+        PlaceComponent.prototype.canDeactivate = /**
+         * @return {?}
+         */
+        function () {
+            return true;
+        };
+        /**
+         * @return {?}
+         */
+        PlaceComponent.prototype.onPlaceReady = /**
+         * @return {?}
+         */
+        function () {
+        };
+        __decorate([
+            fastMemoizeDecorator.Memoize(),
+            __metadata("design:type", PlaceComponent.Definition),
+            __metadata("design:paramtypes", [])
+        ], PlaceComponent.prototype, "placeConfig", null);
+        __decorate([
+            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 {?} */
+        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;
+            }
+            /**
+             * @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 ?
@@ -2157,7 +2307,7 @@
              * @param {?=} defaultValue
              * @return {?}
              */
-            Descriptor.prototype.searchData = /**
+            Definition.prototype.searchData = /**
              * @template T
              * @param {?} keys
              * @param {?=} defaultValue
@@ -2178,54 +2328,347 @@
                     return defaultValue;
                 }
             };
-            return Descriptor;
+            return Definition;
         }());
-        Place.Descriptor = Descriptor;
+        PlaceComponent.Definition = Definition;
         if (false) {
             /** @type {?} */
-            Descriptor.prototype.path;
+            Definition.prototype.path;
+            /** @type {?} */
+            Definition.prototype.authenticate;
             /** @type {?} */
-            Descriptor.prototype.authenticate;
+            Definition.prototype.order;
+            /** @type {?} */
+            Definition.prototype.data;
+            /** @type {?} */
+            Definition.prototype.component;
+        }
+        /**
+         * @record
+         */
+        function Options() { }
+        PlaceComponent.Options = Options;
+        if (false) {
             /** @type {?} */
-            Descriptor.prototype.order;
+            Options.prototype.path;
             /** @type {?} */
-            Descriptor.prototype.data;
+            Options.prototype.order;
+            /** @type {?|undefined} */
+            Options.prototype.data;
+            /** @type {?|undefined} */
+            Options.prototype.authenticate;
         }
         /**
          * @param {?} klass
          * @return {?}
          */
-        function getDescriptor(klass) {
+        function getDefinition(klass) {
             /** @type {?} */
-            var placeOptions = Reflect.getMetadata('place.options', klass);
-            return new Descriptor(klass, placeOptions);
+            var placeOptions = Reflect.getMetadata(DEFINITION_META_DATA_KEY, klass);
+            return new Definition(klass, placeOptions);
+        }
+        PlaceComponent.getDefinition = getDefinition;
+        /**
+         * @param {?} klass
+         * @param {?} options
+         * @return {?}
+         */
+        function injectDefinition(klass, options) {
+            Reflect.defineMetadata(DEFINITION_META_DATA_KEY, options, klass);
         }
-        Place.getDescriptor = getDescriptor;
-    })(Place || (Place = {}));
+        PlaceComponent.injectDefinition = injectDefinition;
+    })(exports.PlaceComponent || (exports.PlaceComponent = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
-        __extends(TabbedPlaceNavigationComponent, _super);
-        function TabbedPlaceNavigationComponent() {
+    var PlaceService = /** @class */ (function (_super) {
+        __extends(PlaceService, _super);
+        function PlaceService(router) {
             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.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 {?} place
          * @return {?}
          */
-        TabbedPlaceNavigationComponent.prototype.ngOnInit = /**
+        PlaceService.prototype.onActivate = /**
+         * @param {?} place
          * @return {?}
          */
-        function () {
+        function (place) {
+            this._activePlaces.push(place);
+        };
+        /**
+         * @param {?} place
+         * @return {?}
+         */
+        PlaceService.prototype.onDeactivate = /**
+         * @param {?} place
+         * @return {?}
+         */
+        function (place) {
+            this._activePlaces.remove(place);
+        };
+        /**
+         * @param {?} params
+         * @return {?}
+         */
+        PlaceService.prototype.notifyRouteParametersChanged = /**
+         * @param {?} params
+         * @return {?}
+         */
+        function (params) {
+            // We update the router state...
+            if (params.updateRoute) {
+                /** @type {?} */
+                var routeId = params.next.getFormattedRouteId();
+                /** @type {?} */
+                var relativePath = !!params.previous.hasRouteId() ? '..' : '.';
+                /** @type {?} */
+                var path = routeId ? [relativePath, routeId, params.next.getFormattedParameters()] : [relativePath, params.next.getFormattedParameters()];
+                this.router.navigate(path, {
+                    relativeTo: params.placeComponent.activatedRoute
+                });
+            }
+        };
+        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 {?}
+         * @private
+         */
+        PlaceService.prototype._activePlaces;
+        /**
+         * @type {?}
+         * @protected
+         */
+        PlaceService.prototype.router;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    // 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 {?}
+         */
+        PlaceOutletComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        /**
+         * @param {?} $event
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.onActivate = /**
+         * @param {?} $event
+         * @return {?}
+         */
+        function ($event) {
+            this.currentPlace = $event;
+            this.placeService.onActivate($event);
+            if (!this.animate) {
+                this.notifyPlaceReady();
+            }
+        };
+        /**
+         * @param {?} $event
+         * @return {?}
+         */
+        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();
+        };
+        /**
+         * @private
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.notifyPlaceReady = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            if (this.currentPlace) {
+                this.currentPlace.onPlaceReady();
+            }
+        };
+        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
+         */
+        PlaceOutletComponent.prototype.currentPlace;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype.placeService;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    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 {?}
+         */
+        TabbedPlaceNavigationComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
         };
         TabbedPlaceNavigationComponent.decorators = [
             { type: core.Component, args: [{
@@ -2555,543 +2998,175 @@
         // TODO: Make this handle body scroll
         // TODO: Make this handle body scroll
         /**
-         * @param {?} point
-         * @return {?}
-         */
-        ResizeAwareComponent.prototype.relativePositionOf = 
-        // TODO: Make this handle body scroll
-        /**
-         * @param {?} point
-         * @return {?}
-         */
-        function (point) {
-            return this.bounds.relativePositionOf(point);
-        };
-        Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._boundsModel.value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * @private
-         * @return {?}
-         */
-        ResizeAwareComponent.prototype.updateBounds = /**
-         * @private
-         * @return {?}
-         */
-        function () {
-            this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
-        };
-        return ResizeAwareComponent;
-    }(DisposableComponent));
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        ResizeAwareComponent.prototype._boundsModel;
-        /**
-         * @type {?}
-         * @protected
-         */
-        ResizeAwareComponent.prototype.elementRef;
-        /**
-         * @type {?}
-         * @protected
-         */
-        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) {
-        /**
-         * @return {?}
-         */
-        Alert.prototype.title = function () { };
-        /**
-         * @return {?}
-         */
-        Alert.prototype.content = function () { };
-        /**
-         * @return {?}
-         */
-        Alert.prototype.ok = function () { };
-    }
-
-    /**
-     * @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 () { };
-    }
-
-    /**
-     * @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;
-        }
-    })(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
-     * @template T
-     */
-    function ResolvedParameter() { }
-    if (false) {
-        /** @type {?} */
-        ResolvedParameter.prototype.parameterDef;
-        /** @type {?} */
-        ResolvedParameter.prototype.resolvedValue;
-    }
-    var ResolvedParameters = /** @class */ (function () {
-        function ResolvedParameters(parameters) {
-            this.parameters = parameters;
-        }
-        /**
-         * @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
-         * @return {?}
-         */
-        ResolvedParameters.prototype.replace = /**
-         * @template T
-         * @param {?} parameter
-         * @param {?} value
-         * @return {?}
-         */
-        function (parameter, value) {
-            return new ResolvedParameters(this.parameters.filter((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return p.parameterDef !== parameter; })).concat({
-                parameterDef: parameter,
-                resolvedValue: value
-            }));
-        };
-        /**
-         * @protected
-         * @return {?}
-         */
-        ResolvedParameters.prototype.getFormattedRouteId = /**
-         * @protected
-         * @return {?}
-         */
-        function () {
-            /** @type {?} */
-            var routeIdParam = this.getRouteIdParam();
-            return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
-        };
-        /**
-         * @private
-         * @return {?}
-         */
-        ResolvedParameters.prototype.getRouteIdParam = /**
-         * @private
-         * @return {?}
-         */
-        function () {
-            return this.parameters.find((/**
-             * @param {?} p
-             * @return {?}
-             */
-            function (p) { return p.parameterDef.isRouteId; }));
-        };
-        /**
-         * @protected
-         * @return {?}
-         */
-        ResolvedParameters.prototype.getFormattedParameters = /**
-         * @protected
-         * @return {?}
-         */
-        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;
-        };
-        /**
-         * @return {?}
-         */
-        ResolvedParameters.prototype.hasRouteId = /**
-         * @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()));
-            /** @type {?} */
-            var routeParameterDefs = typescriptUtilities.Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-            routeParameterDefs.forEach((/**
-             * @param {?} parameter
-             * @return {?}
-             */
-            function (parameter) { return _this.installBinding(parameter); }));
-            /** @type {?} */
-            var incomingResolvedRouteParameters = observe.valuesFrom(activatedRoute.paramMap)
-                .last()
-                .map((/**
-             * @param {?} params
-             * @return {?}
-             */
-            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 ResolvedParameters(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) {
-                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", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._incomingRouteChange.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        /**
-         * @protected
-         * @template T
-         * @param {?} parameter
-         * @return {?}
-         */
-        RouteParameterBindings.prototype.installBinding = /**
-         * @protected
-         * @template T
-         * @param {?} parameter
-         * @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);
-                }
-            }));
-        };
-        /**
-         * @private
-         * @template T
-         * @param {?} parameter
+         * @param {?} point
          * @return {?}
          */
-        RouteParameterBindings.prototype.getModelFor = /**
-         * @private
-         * @template T
-         * @param {?} parameter
+        ResizeAwareComponent.prototype.relativePositionOf = 
+        // TODO: Make this handle body scroll
+        /**
+         * @param {?} point
          * @return {?}
          */
-        function (parameter) {
-            return this.component[parameter.propertyName];
+        function (point) {
+            return this.bounds.relativePositionOf(point);
         };
-        return RouteParameterBindings;
-    }(pectin.GarbageCollector));
-    if (false) {
-        /** @type {?} */
-        exports.RouteParameterBindings.prototype._incomingRouteChange;
+        Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._boundsModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
-         * @type {?}
          * @private
+         * @return {?}
          */
-        exports.RouteParameterBindings.prototype.txo;
-        /**
-         * @type {?}
+        ResizeAwareComponent.prototype.updateBounds = /**
          * @private
+         * @return {?}
          */
-        exports.RouteParameterBindings.prototype.resolvedParameters;
+        function () {
+            this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
+        };
+        return ResizeAwareComponent;
+    }(DisposableComponent));
+    if (false) {
         /**
          * @type {?}
          * @private
          */
-        exports.RouteParameterBindings.prototype.component;
+        ResizeAwareComponent.prototype._boundsModel;
         /**
          * @type {?}
-         * @private
+         * @protected
          */
-        exports.RouteParameterBindings.prototype.router;
+        ResizeAwareComponent.prototype.elementRef;
         /**
          * @type {?}
-         * @private
+         * @protected
          */
-        exports.RouteParameterBindings.prototype.activatedRoute;
+        ResizeAwareComponent.prototype.ngZone;
     }
-    (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
-        });
+
+    /**
+     * @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 {?}
          */
-        AbstractPlaceComponent.prototype.canDeactivate = /**
+        Alert.prototype.title = function () { };
+        /**
          * @return {?}
          */
-        function () {
-            return true;
-        };
-        __decorate([
-            fastMemoizeDecorator.Memoize(),
-            __metadata("design:type", Place.Descriptor),
-            __metadata("design:paramtypes", [])
-        ], AbstractPlaceComponent.prototype, "placeConfig", null);
-        return AbstractPlaceComponent;
-    }(DisposableComponent));
+        Alert.prototype.content = function () { };
+        /**
+         * @return {?}
+         */
+        Alert.prototype.ok = function () { };
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function Confirm() { }
     if (false) {
+        /** @type {?|undefined} */
+        Confirm.prototype.destructive;
         /**
-         * @type {?}
-         * @private
+         * @return {?}
          */
-        AbstractPlaceComponent.prototype.routeBindingMediator;
+        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 {?}
-         * @protected
+         * @record
+         * @template R, E
+         */
+        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;
+        /**
+         * @return {?}
          */
-        AbstractPlaceComponent.prototype.activatedRoute;
+        IPlaceComponent.prototype.onPlaceReady = function () { };
     }
 
     /**
@@ -3101,12 +3176,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);
+        });
     }
 
     /**
@@ -3677,26 +3774,6 @@
             pectin.UseDelegate()(prototype, propertyKey);
         });
     }
-    /**
-     * @deprecated use RouteParameter instead.
-     * @template T
-     * @param {?} type
-     * @param {?=} options
-     * @return {?}
-     */
-    function QueryParameter(type, options) {
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
-         * @return {?}
-         */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = createDefinition(propertyKey, type, options, false);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
     /**
      * @template T
      * @param {?} type
@@ -3717,27 +3794,6 @@
             pectin.UseDelegate()(prototype, propertyKey);
         });
     }
-    /**
-     * @deprecated use RouteParameterList instead
-     * @template E
-     * @param {?} elementType
-     * @param {?=} options
-     * @return {?}
-     */
-    function QueryParameterList(elementType, options) {
-        // assert.isTruthy(type.isValid());
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
-         * @return {?}
-         */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = createArrayDefinition(propertyKey, elementType, options);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
     /**
      * @template E
      * @param {?} elementType
@@ -3940,10 +3996,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;
@@ -3951,6 +4032,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;
@@ -3969,9 +4051,8 @@
     exports.PlaceRouteGuard = PlaceRouteGuard;
     exports.PlaceService = PlaceService;
     exports.Point = Point;
-    exports.QueryParameter = QueryParameter;
-    exports.QueryParameterList = QueryParameterList;
     exports.ResizeAwareComponent = ResizeAwareComponent;
+    exports.ResolvedRouteParameterSnapshot = ResolvedRouteParameterSnapshot;
     exports.RouteId = RouteId;
     exports.RouteParameter = RouteParameter;
     exports.RouteParameterList = RouteParameterList;
@@ -3979,6 +4060,7 @@
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
+    exports.VisitSnapshot = VisitSnapshot;
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
     exports.ɵa = CommandDirective;
     exports.ɵb = FocusBindingDirective;