@coolon/angular-ui-powerups 0.0.32 → 0.0.34

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

@@ -5,7 +5,7 @@ import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgress
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __assign, __awaiter, __generator, __values } from 'tslib';
-import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, assert, UnaryCommand, lang, Dsl, Logger, ListModel, StoreInListModel, EventListenerList, DelegatingValueModel, MutableListModel, StoreInValueModel, Trace, OptionsHelper, ValueHolder, MutableValueModel, TransactionObserver, Binding } from '@coolon/pectin';
+import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, assert, UnaryCommand, lang, Dsl, Logger, ListModel, StoreInListModel, EventListenerList, DelegatingValueModel, MutableListModel, StoreInValueModel, Trace, MutableValueModel, TransactionObserver, Binding, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { Deferred } from '@coolon/pectin/lib/promise/deferred.class';
 import { assert as assert$1, Klass, Opts } from '@coolon/typescript-utilities';
@@ -14,12 +14,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterModule, Router, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { style, query, group, animate, trigger, transition } from '@angular/animations';
+import { Router, RouterModule, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { isNil } from 'lodash';
 import 'reflect-metadata';
+import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator/dist/src';
 
 /**
@@ -1723,243 +1723,393 @@ var EmptyStateComponent = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var PlaceService = /** @class */ (function () {
-    function PlaceService() {
-        this._activePlaces = new 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: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    PlaceService.ctorParameters = function () { return []; };
-    /** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(); }, token: PlaceService, providedIn: "root" });
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], PlaceService.prototype, "onActivate", null);
-    __decorate([
-        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 = style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
-/** @type {?} */
-var left = [
-    query(':enter, :leave', animationStartStyle, { optional: true }),
-    group([
-        query(':enter', [
-            style({ transform: 'translateX(-100%)' }),
-            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
-        ], {
-            optional: true
-        }),
-        query(':leave', [
-            style({ transform: 'translateX(0%)' }),
-            animate('{{duration}} ease-out', style({ transform: 'translateX(100%)' }))
-        ], {
-            optional: true
-        })
-    ])
-];
-/** @type {?} */
-var right = [
-    query(':enter, :leave', animationStartStyle, { optional: true }),
-    group([
-        query(':enter', [
-            style({ transform: 'translateX(100%)' }),
-            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
-        ], {
-            optional: true
-        }),
-        query(':leave', [style({ transform: 'translateX(0%)' }), animate('{{duration}} ease-out', style({ transform: 'translateX(-100%)' }))], {
-            optional: true
-        })
-    ])
-];
-/** @type {?} */
-var LEFT_RIGHT_PLACE_ANIMATION = trigger('routeAnimations', [
-    transition(':increment', right, { params: { duration: '.3s' } }),
-    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: 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: Input }]
+    function () {
+        return !!this.getRouteIdParam();
     };
-    return PlaceOutletComponent;
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ResolvedRouteParameterSnapshot.prototype, "getFormattedRouteId", null);
+    __decorate([
+        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;
+var RouteParameterBindings = /** @class */ (function (_super) {
+    __extends(RouteParameterBindings, _super);
+    function RouteParameterBindings(component, placeService) {
+        var _this = _super.call(this) || this;
+        _this.component = component;
+        _this._incomingRouteChange = new MutableValueModel(false);
+        _this.resolvedParameters = new MutableValueModel();
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe;
+        _this.txo = new 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) {
-            assert.notNil(options);
-            this.path = options.path;
-            this.order = options.order;
-            this.data = options.data;
-            this.authenticate = isNil(options.authenticate) || options.authenticate;
-        }
-        /**
-         * @template T
-         * @param {?} key
-         * @param {?=} defaultValue
+        var routeParameterDefs = Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
+        routeParameterDefs.forEach((/**
+         * @param {?} parameter
          * @return {?}
          */
-        Descriptor.prototype.getData = /**
+        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 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;
+}(GarbageCollector));
+if (false) {
+    /** @type {?} */
+    RouteParameterBindings.prototype._incomingRouteChange;
+    /**
+     * @type {?}
+     * @private
+     */
+    RouteParameterBindings.prototype.txo;
+    /**
+     * @type {?}
+     * @private
+     */
+    RouteParameterBindings.prototype.resolvedParameters;
+    /**
+     * @type {?}
+     * @private
+     */
+    RouteParameterBindings.prototype.component;
+}
+(function (RouteParameterBindings) {
+    RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
+})(RouteParameterBindings || (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';
+var 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 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([
+        Memoize(),
+        __metadata("design:type", PlaceComponent.Definition),
+        __metadata("design:paramtypes", [])
+    ], PlaceComponent.prototype, "placeConfig", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PlaceComponent.prototype, "onPlaceReady", null);
+    return PlaceComponent;
+}(DisposableComponent));
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceComponent.prototype.routeBindingMediator;
+    /** @type {?} */
+    PlaceComponent.prototype.activatedRoute;
+}
+(function (PlaceComponent) {
+    var Definition = /** @class */ (function () {
+        function Definition(component, options) {
+            this.component = component;
+            assert.notNil(options);
+            this.path = options.path;
+            this.order = options.order;
+            this.data = options.data;
+            this.authenticate = isNil(options.authenticate) || options.authenticate;
+        }
+        /**
+         * @param {?} construcable
+         * @return {?}
+         */
+        Definition.prototype.isDescriptorForType = /**
+         * @param {?} construcable
+         * @return {?}
+         */
+        function (construcable) {
+            return 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
@@ -1976,7 +2126,7 @@ function Place(options) {
          * @param {?=} defaultValue
          * @return {?}
          */
-        Descriptor.prototype.searchData = /**
+        Definition.prototype.searchData = /**
          * @template T
          * @param {?} keys
          * @param {?=} defaultValue
@@ -1997,57 +2147,350 @@ function Place(options) {
                 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 {?} */
-        Descriptor.prototype.order;
+        Definition.prototype.data;
         /** @type {?} */
-        Descriptor.prototype.data;
+        Definition.prototype.component;
+    }
+    /**
+     * @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;
     }
     /**
      * @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;
+})(PlaceComponent || (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 = 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 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);
     };
-    TabbedPlaceNavigationComponent.decorators = [
-        { type: Component, args: [{
+    /**
+     * @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: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    PlaceService.ctorParameters = function () { return [
+        { type: Router }
+    ]; };
+    /** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(ɵɵinject(Router)); }, token: PlaceService, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [PlaceComponent]),
+        __metadata("design:returntype", void 0)
+    ], PlaceService.prototype, "onActivate", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [PlaceComponent]),
+        __metadata("design:returntype", void 0)
+    ], PlaceService.prototype, "onDeactivate", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], PlaceService.prototype, "notifyRouteParametersChanged", null);
+    return PlaceService;
+}(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 = style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
+/** @type {?} */
+var left = [
+    query(':enter, :leave', animationStartStyle, { optional: true }),
+    group([
+        query(':enter', [
+            style({ transform: 'translateX(-100%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
+        ], {
+            optional: true
+        }),
+        query(':leave', [
+            style({ transform: 'translateX(0%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(100%)' }))
+        ], {
+            optional: true
+        })
+    ])
+];
+/** @type {?} */
+var right = [
+    query(':enter, :leave', animationStartStyle, { optional: true }),
+    group([
+        query(':enter', [
+            style({ transform: 'translateX(100%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
+        ], {
+            optional: true
+        }),
+        query(':leave', [style({ transform: 'translateX(0%)' }), animate('{{duration}} ease-out', style({ transform: 'translateX(-100%)' }))], {
+            optional: true
+        })
+    ])
+];
+/** @type {?} */
+var LEFT_RIGHT_PLACE_ANIMATION = trigger('routeAnimations', [
+    transition(':increment', right, { params: { duration: '.3s' } }),
+    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: 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: Input }],
+        routerOutLet: [{ type: 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 = 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 PlaceComponent.getDefinition(c); })).sortBy('order');
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    TabbedPlaceNavigationComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    TabbedPlaceNavigationComponent.decorators = [
+        { type: 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: [""]
@@ -2374,543 +2817,175 @@ var ResizeAwareComponent = /** @class */ (function (_super) {
     // 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 = 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([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], ResolvedParameters.prototype, "getFormattedRouteId", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], ResolvedParameters.prototype, "getFormattedParameters", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [ResolvedParameters, Router, ActivatedRoute]),
-        __metadata("design:returntype", void 0)
-    ], ResolvedParameters.prototype, "redirect", null);
-    return ResolvedParameters;
-}());
-if (false) {
-    /** @type {?} */
-    ResolvedParameters.prototype.parameters;
-}
-var 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 MutableValueModel(false);
-        _this.resolvedParameters = new MutableValueModel();
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe;
-        _this.txo = new TransactionObserver(); //.onEvent(e => console.log(e.toString()));
-        //.onEvent(e => console.log(e.toString()));
-        /** @type {?} */
-        var routeParameterDefs = 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 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;
-}(GarbageCollector));
-if (false) {
-    /** @type {?} */
-    RouteParameterBindings.prototype._incomingRouteChange;
+    Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._boundsModel.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
-     * @type {?}
      * @private
+     * @return {?}
      */
-    RouteParameterBindings.prototype.txo;
-    /**
-     * @type {?}
+    ResizeAwareComponent.prototype.updateBounds = /**
      * @private
+     * @return {?}
      */
-    RouteParameterBindings.prototype.resolvedParameters;
+    function () {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    };
+    return ResizeAwareComponent;
+}(DisposableComponent));
+if (false) {
     /**
      * @type {?}
      * @private
      */
-    RouteParameterBindings.prototype.component;
+    ResizeAwareComponent.prototype._boundsModel;
     /**
      * @type {?}
-     * @private
+     * @protected
      */
-    RouteParameterBindings.prototype.router;
+    ResizeAwareComponent.prototype.elementRef;
     /**
      * @type {?}
-     * @private
+     * @protected
      */
-    RouteParameterBindings.prototype.activatedRoute;
+    ResizeAwareComponent.prototype.ngZone;
 }
-(function (RouteParameterBindings) {
-    RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-})(RouteParameterBindings || (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 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([
-        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 () { };
 }
 
 /**
@@ -2920,12 +2995,34 @@ if (false) {
 /**
  * @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 (!lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent)) {
+            lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
+        }
+        PlaceComponent.injectDefinition((/** @type {?} */ (target)), options);
+    });
 }
 
 /**
@@ -3496,26 +3593,6 @@ function RouteId(type, options) {
         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);
-        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
 /**
  * @template T
  * @param {?} type
@@ -3536,27 +3613,6 @@ function RouteParameter(type, options) {
         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);
-        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
 /**
  * @template E
  * @param {?} elementType
@@ -3759,6 +3815,32 @@ var ParameterType;
     ParameterType.BOOLEAN = new BooleanType();
 })(ParameterType || (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;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -3779,5 +3861,5 @@ var ParameterType;
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmationDialogComponent, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, INTERACTION_CONTEXT, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, NumberInputComponent, ParameterType, PasswordInputComponent, Place, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceService, Point, QueryParameter, QueryParameterList, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterBindings, RouteParameterList, RouteParameterSanitiser, Sanitiser, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, LEFT_RIGHT_PLACE_ANIMATION as ɵm, PlaceService as ɵn, TabbedPlaceNavigationComponent as ɵo, InteractionModule as ɵp, ActivityContainerComponent as ɵq, ConfirmationDialogComponent as ɵr, AbstractActivity as ɵs, ACTIVITY_DATA as ɵt, AlertDialogComponent as ɵv, ActivityOutletComponent as ɵx, DialogInteractionService as ɵy, InteractionContext as ɵz };
+export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, INTERACTION_CONTEXT, InteractionContext, InteractionModule, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, NumberInputComponent, ParameterType, PasswordInputComponent, Place, PlaceComponent, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceService, Point, ResizeAwareComponent, ResolvedRouteParameterSnapshot, RouteId, RouteParameter, RouteParameterBindings, RouteParameterList, RouteParameterSanitiser, Sanitiser, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, VisitSnapshot, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, LEFT_RIGHT_PLACE_ANIMATION as ɵm, PlaceService as ɵn, TabbedPlaceNavigationComponent as ɵo, InteractionModule as ɵp, ActivityContainerComponent as ɵq, ConfirmationDialogComponent as ɵr, AbstractActivity as ɵs, ACTIVITY_DATA as ɵt, AlertDialogComponent as ɵv, ActivityOutletComponent as ɵx, DialogInteractionService as ɵy, InteractionContext as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map