@coolon/angular-ui-powerups 0.0.31 → 0.0.33

package/fesm2015/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 { __decorate, __metadata, __awaiter } 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 { query, style, 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';
 
 /**
@@ -1422,202 +1422,338 @@ EmptyStateComponent.ctorParameters = () => [];
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class PlaceService {
-    constructor() {
-        this._activePlaces = new MutableListModel();
+class ResolvedRouteParameterSnapshot {
+    /**
+     * @param {?} parameters
+     */
+    constructor(parameters) {
+        this.parameters = parameters;
     }
     /**
+     * @template T
+     * @param {?} parameter
      * @return {?}
      */
-    get activePlaces() {
-        return this._activePlaces.readonly;
+    get(parameter) {
+        /** @type {?} */
+        const resolved = this.parameters.find((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => p.parameterDef === parameter));
+        return resolved ? resolved.resolvedValue : null;
     }
     /**
-     * @param {?} place
+     * @template T
+     * @param {?} parameter
+     * @param {?} value
      * @return {?}
      */
-    onActivate(place) {
-        this._activePlaces.push(place);
+    replace(parameter, value) {
+        return new ResolvedRouteParameterSnapshot(this.parameters.filter((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => p.parameterDef !== parameter)).concat({
+            parameterDef: parameter,
+            resolvedValue: value
+        }));
     }
     /**
-     * @param {?} place
      * @return {?}
      */
-    onDeactivate(place) {
-        this._activePlaces.remove(place);
+    getFormattedRouteId() {
+        /** @type {?} */
+        const routeIdParam = this.getRouteIdParam();
+        return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    getRouteIdParam() {
+        return this.parameters.find((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => p.parameterDef.isRouteId));
+    }
+    /**
+     * @return {?}
+     */
+    getFormattedParameters() {
+        /** @type {?} */
+        const params = {};
+        /** @type {?} */
+        const routeIdParam = this.parameters.filter((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => !p.parameterDef.isRouteId)).forEach((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => {
+            params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
+        }));
+        return params;
+    }
+    /**
+     * @return {?}
+     */
+    hasRouteId() {
+        return !!this.getRouteIdParam();
     }
 }
-PlaceService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-PlaceService.ctorParameters = () => [];
-/** @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:paramtypes", []),
     __metadata("design:returntype", void 0)
-], PlaceService.prototype, "onActivate", null);
+], ResolvedRouteParameterSnapshot.prototype, "getFormattedRouteId", null);
 __decorate([
     Trace(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
+    __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], PlaceService.prototype, "onDeactivate", null);
+], ResolvedRouteParameterSnapshot.prototype, "getFormattedParameters", null);
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceService.prototype._activePlaces;
+    /** @type {?} */
+    ResolvedRouteParameterSnapshot.prototype.parameters;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-const left = [
-    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
-    group([
-        query(':enter', [style({ transform: 'translateX(-100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
-            optional: true,
-        }),
-        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(100%)' }))], {
-            optional: true,
-        }),
-    ]),
-];
-/** @type {?} */
-const right = [
-    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
-    group([
-        query(':enter', [style({ transform: 'translateX(100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
-            optional: true,
-        }),
-        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(-100%)' }))], {
-            optional: true,
-        }),
-    ]),
-];
-/** @type {?} */
-const LEFT_RIGHT_PLACE_ANIMATION = trigger('routeAnimations', [
-    transition(':increment', right),
-    transition(':decrement', left),
-]);
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class PlaceOutletComponent {
+class RouteParameterBindings extends GarbageCollector {
     /**
+     * @param {?} component
      * @param {?} placeService
      */
-    constructor(placeService) {
-        this.placeService = placeService;
-        this.animate = true;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
+    constructor(component, placeService) {
+        super();
+        this.component = component;
+        this._incomingRouteChange = new MutableValueModel(false);
+        this.resolvedParameters = new MutableValueModel();
+        const { chain, valueOf, before, when, after, observe } = Dsl.disposeWith(this);
+        this.txo = new TransactionObserver(); //.onEvent(e => console.log(e.toString()));
+        //.onEvent(e => console.log(e.toString()));
+        /** @type {?} */
+        const routeParameterDefs = Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
+        routeParameterDefs.forEach((/**
+         * @param {?} parameter
+         * @return {?}
+         */
+        parameter => this.installBinding(parameter)));
+        /** @type {?} */
+        const incomingResolvedRouteParameters = observe.valuesFrom(component.activatedRoute.paramMap)
+            .last()
+            .map((/**
+         * @param {?} params
+         * @return {?}
+         */
+        params => {
+            /** @type {?} */
+            const result = [];
+            routeParameterDefs.forEach((/**
+             * @param {?} parameterDef
+             * @return {?}
+             */
+            parameterDef => {
+                /** @type {?} */
+                let resolvedValue;
+                if (parameterDef.isArray) {
+                    resolvedValue = params.getAll(parameterDef.name).map((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    v => 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 {?}
+         */
+        resolvedParameters => {
+            this._incomingRouteChange.value = true;
+            this.resolvedParameters.value = resolvedParameters;
+            this._incomingRouteChange.value = false;
+        }));
+        when.valueOf(this.resolvedParameters).changes((/**
+         * @param {?} params
+         * @param {?} previous
+         * @return {?}
+         */
+        (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);
     }
     /**
-     * @param {?} $event
      * @return {?}
      */
-    onActivate($event) {
-        this.placeService.onActivate($event);
+    get incomingRouteChange() {
+        return this._incomingRouteChange.readonly;
     }
     /**
-     * @param {?} $event
+     * @protected
+     * @template T
+     * @param {?} parameter
      * @return {?}
      */
-    onDeactivate($event) {
-        this.placeService.onDeactivate($event);
+    installBinding(parameter) {
+        /** @type {?} */
+        const model = this.getModelFor(parameter);
+        // this.txo.observe(parameter.propertyName, model);
+        this.registerDisposable(new Binding(this.resolvedParameters, model, {
+            /**
+             * @param {?} parameters
+             * @return {?}
+             */
+            toRight(parameters) {
+                return parameters.get(parameter);
+            },
+            /**
+             * @param {?} value
+             * @param {?=} currentParameters
+             * @return {?}
+             */
+            toLeft(value, currentParameters) {
+                return currentParameters.replace(parameter, value);
+            }
+        }));
     }
     /**
-     * @param {?} outlet
+     * @private
+     * @template T
+     * @param {?} parameter
      * @return {?}
      */
-    getPlaceOrder(outlet) {
-        return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
+    getModelFor(parameter) {
+        return this.component[parameter.propertyName];
     }
 }
-PlaceOutletComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'angular-ui-powerups-place-outlet',
-                template: "<div container [@routeAnimations]=\"getPlaceOrder(routerOutlet)\">\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onActivate($event)\"\n                 (deactivate)=\"onDeactivate($event)\">\n  </router-outlet>\n</div>\n\n",
-                animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                styles: [":host{display:flex;flex-direction:column;min-height:0}[container]{flex:1;display:-ms-grid;display:grid;-ms-grid-rows:0 1fr;grid-template-rows:0 1fr;min-height:0}"]
-            }] }
-];
-/** @nocollapse */
-PlaceOutletComponent.ctorParameters = () => [
-    { type: PlaceService }
-];
-PlaceOutletComponent.propDecorators = {
-    animate: [{ type: Input }]
-};
 if (false) {
     /** @type {?} */
-    PlaceOutletComponent.prototype.animate;
+    RouteParameterBindings.prototype._incomingRouteChange;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.placeService;
+    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
  */
-/**
- * @param {?} options
- * @return {?}
- */
-function Place(options) {
-    return (/**
-     * @param {?} target
+// RAKE: making this Symbol(...) broke things.
+/** @type {?} */
+const DEFINITION_META_DATA_KEY = 'PLACE_DEFINITION_OPTIONS';
+class PlaceComponent extends DisposableComponent {
+    /**
+     * @param {?} activatedRoute
+     * @param {?} placeService
+     */
+    constructor(activatedRoute, placeService) {
+        super();
+        this.activatedRoute = activatedRoute;
+        this.routeBindingMediator = this.registerDisposable(new RouteParameterBindings(this, placeService));
+    }
+    /**
      * @return {?}
      */
-    (target) => {
-        Reflect.defineMetadata('place.options', options, target);
-    });
-}
-(function (Place) {
+    get placeConfig() {
+        return PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
+    }
     /**
-     * @record
+     * @param {?=} nextPlace
+     * @param {?=} nextState
+     * @return {?}
      */
-    function Options() { }
-    Place.Options = Options;
-    if (false) {
-        /** @type {?} */
-        Options.prototype.path;
-        /** @type {?} */
-        Options.prototype.order;
-        /** @type {?|undefined} */
-        Options.prototype.data;
-        /** @type {?|undefined} */
-        Options.prototype.authenticate;
+    canDeactivate(nextPlace, nextState) {
+        return true;
+    }
+    /**
+     * @return {?}
+     */
+    onPlaceReady() {
     }
-    class Descriptor {
+}
+__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);
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceComponent.prototype.routeBindingMediator;
+    /** @type {?} */
+    PlaceComponent.prototype.activatedRoute;
+}
+(function (PlaceComponent) {
+    class Definition {
         /**
-         * @param {?} placeClass
+         * @param {?} component
          * @param {?} options
          */
-        constructor(placeClass, options) {
+        constructor(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 {?}
+         */
+        isDescriptorForType(construcable) {
+            return lang.constructorChain(construcable).includes(PlaceComponent);
+        }
+        /**
+         * @param {?} placeComponent
+         * @return {?}
+         */
+        isDescriptorFor(placeComponent) {
+            return placeComponent.constructor === this.component;
+        }
         /**
          * @template T
          * @param {?} key
@@ -1650,157 +1786,414 @@ function Place(options) {
             }
         }
     }
-    Place.Descriptor = Descriptor;
+    PlaceComponent.Definition = Definition;
     if (false) {
         /** @type {?} */
-        Descriptor.prototype.path;
+        Definition.prototype.path;
+        /** @type {?} */
+        Definition.prototype.authenticate;
+        /** @type {?} */
+        Definition.prototype.order;
         /** @type {?} */
-        Descriptor.prototype.authenticate;
+        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 {?} */
-        const placeOptions = Reflect.getMetadata('place.options', klass);
-        return new Descriptor(klass, placeOptions);
+        const 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
  */
-class TabbedPlaceNavigationComponent extends DisposableComponent {
-    constructor() {
+class PlaceService extends GarbageCollector {
+    /**
+     * @param {?} router
+     */
+    constructor(router) {
         super();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.orderedPlaces = chain(this.placesModel).map((/**
-         * @param {?} c
-         * @return {?}
-         */
-        c => Place.getDescriptor(c))).sortBy('order');
+        this.router = router;
+        this._activePlaces = new MutableListModel();
     }
     /**
      * @return {?}
      */
-    ngOnInit() {
+    get activePlaces() {
+        return this._activePlaces.readonly;
+    }
+    /**
+     * @param {?} place
+     * @return {?}
+     */
+    onActivate(place) {
+        this._activePlaces.push(place);
+    }
+    /**
+     * @param {?} place
+     * @return {?}
+     */
+    onDeactivate(place) {
+        this._activePlaces.remove(place);
+    }
+    /**
+     * @param {?} params
+     * @return {?}
+     */
+    notifyRouteParametersChanged(params) {
+        // We update the router state...
+        if (params.updateRoute) {
+            /** @type {?} */
+            const routeId = params.next.getFormattedRouteId();
+            /** @type {?} */
+            const relativePath = !!params.previous.hasRouteId() ? '..' : '.';
+            /** @type {?} */
+            const path = routeId ? [relativePath, routeId, params.next.getFormattedParameters()] : [relativePath, params.next.getFormattedParameters()];
+            this.router.navigate(path, {
+                relativeTo: params.placeComponent.activatedRoute
+            });
+        }
     }
 }
-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: [""]
-            }] }
+PlaceService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
 ];
 /** @nocollapse */
-TabbedPlaceNavigationComponent.ctorParameters = () => [];
-TabbedPlaceNavigationComponent.propDecorators = {
-    places: [{ type: Input }],
-    placesModel: [{ type: Input }]
-};
+PlaceService.ctorParameters = () => [
+    { type: Router }
+];
+/** @nocollapse */ PlaceService.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceService_Factory() { return new PlaceService(ɵɵinject(Router)); }, token: PlaceService, providedIn: "root" });
 __decorate([
-    StoreInListModel('placesModel'),
-    __metadata("design:type", Array)
-], TabbedPlaceNavigationComponent.prototype, "places", void 0);
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [PlaceComponent]),
+    __metadata("design:returntype", void 0)
+], PlaceService.prototype, "onActivate", null);
 __decorate([
-    UseDelegate(),
-    __metadata("design:type", ListModel)
-], TabbedPlaceNavigationComponent.prototype, "placesModel", void 0);
+    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);
 if (false) {
-    /** @type {?} */
-    TabbedPlaceNavigationComponent.prototype.places;
-    /** @type {?} */
-    TabbedPlaceNavigationComponent.prototype.placesModel;
-    /** @type {?} */
-    TabbedPlaceNavigationComponent.prototype.orderedPlaces;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceService.prototype._activePlaces;
+    /**
+     * @type {?}
+     * @protected
+     */
+    PlaceService.prototype.router;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class PlaceModule {
-}
-PlaceModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    BrowserAnimationsModule,
-                    MatProgressSpinnerModule,
-                    RouterModule,
-                    MatTabsModule$1,
-                    MatListModule,
-                    MatTooltipModule,
-                    MatIconModule
-                ],
-                declarations: [
-                    EmptyStateComponent,
-                    BusyOverlayComponent,
-                    PlaceOutletComponent,
-                    TabbedPlaceNavigationComponent
-                ],
-                entryComponents: [BusyOverlayComponent],
-                exports: [
-                    BusyOverlayComponent,
-                    PlaceOutletComponent,
-                    EmptyStateComponent,
-                    TabbedPlaceNavigationComponent
-                ],
-                providers: [
-                    PlaceService
-                ]
-            },] }
+// Freezes the state of the components at the start of the animation.
+/** @type {?} */
+const animationStartStyle = style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
+/** @type {?} */
+const 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 {?} */
+const 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 {?} */
+const 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
  */
-class AngularUiPowerupsModule {
-}
-AngularUiPowerupsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    CommandDirective,
-                    FocusBindingDirective,
-                    NumberInputComponent,
-                    StringInputComponent,
-                    PasswordInputComponent,
-                    SelectInputComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    BrowserModule,
-                    BrowserAnimationsModule,
-                    FormsModule,
-                    MatInputModule,
-                    MatFormFieldModule,
-                    MatSelectModule,
-                    PlaceModule,
-                    InteractionModule
-                ],
-                exports: [
-                    CommandDirective,
-                    FocusBindingDirective,
-                    NumberInputComponent,
-                    StringInputComponent,
-                    PasswordInputComponent,
-                    SelectInputComponent,
-                    InteractionModule,
-                    PlaceModule,
-                ]
-            },] }
-];
-
-/**
+class PlaceOutletComponent {
+    /**
+     * @param {?} placeService
+     */
+    constructor(placeService) {
+        this.placeService = placeService;
+        this.animate = true;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+    /**
+     * @param {?} $event
+     * @return {?}
+     */
+    onActivate($event) {
+        this.currentPlace = $event;
+        this.placeService.onActivate($event);
+        if (!this.animate) {
+            this.notifyPlaceReady();
+        }
+    }
+    /**
+     * @param {?} $event
+     * @return {?}
+     */
+    onDeactivate($event) {
+        this.currentPlace = null;
+        this.placeService.onDeactivate($event);
+    }
+    /**
+     * @param {?} outlet
+     * @return {?}
+     */
+    getPlaceOrder(outlet) {
+        return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
+    }
+    /**
+     * @return {?}
+     */
+    animationDone() {
+        this.notifyPlaceReady();
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    notifyPlaceReady() {
+        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 = () => [
+    { type: PlaceService }
+];
+PlaceOutletComponent.propDecorators = {
+    animate: [{ type: Input }],
+    routerOutLet: [{ type: ViewChild, args: ['routerOutlet', { static: false },] }]
+};
+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
+ */
+class TabbedPlaceNavigationComponent extends DisposableComponent {
+    constructor() {
+        super();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.orderedPlaces = chain(this.placesModel).map((/**
+         * @param {?} c
+         * @return {?}
+         */
+        c => PlaceComponent.getDefinition(c))).sortBy('order');
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+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: [""]
+            }] }
+];
+/** @nocollapse */
+TabbedPlaceNavigationComponent.ctorParameters = () => [];
+TabbedPlaceNavigationComponent.propDecorators = {
+    places: [{ type: Input }],
+    placesModel: [{ type: Input }]
+};
+__decorate([
+    StoreInListModel('placesModel'),
+    __metadata("design:type", Array)
+], TabbedPlaceNavigationComponent.prototype, "places", void 0);
+__decorate([
+    UseDelegate(),
+    __metadata("design:type", ListModel)
+], TabbedPlaceNavigationComponent.prototype, "placesModel", void 0);
+if (false) {
+    /** @type {?} */
+    TabbedPlaceNavigationComponent.prototype.places;
+    /** @type {?} */
+    TabbedPlaceNavigationComponent.prototype.placesModel;
+    /** @type {?} */
+    TabbedPlaceNavigationComponent.prototype.orderedPlaces;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class PlaceModule {
+}
+PlaceModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    BrowserAnimationsModule,
+                    MatProgressSpinnerModule,
+                    RouterModule,
+                    MatTabsModule$1,
+                    MatListModule,
+                    MatTooltipModule,
+                    MatIconModule
+                ],
+                declarations: [
+                    EmptyStateComponent,
+                    BusyOverlayComponent,
+                    PlaceOutletComponent,
+                    TabbedPlaceNavigationComponent
+                ],
+                entryComponents: [BusyOverlayComponent],
+                exports: [
+                    BusyOverlayComponent,
+                    PlaceOutletComponent,
+                    EmptyStateComponent,
+                    TabbedPlaceNavigationComponent
+                ],
+                providers: [
+                    PlaceService
+                ]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class AngularUiPowerupsModule {
+}
+AngularUiPowerupsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    CommandDirective,
+                    FocusBindingDirective,
+                    NumberInputComponent,
+                    StringInputComponent,
+                    PasswordInputComponent,
+                    SelectInputComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    BrowserModule,
+                    BrowserAnimationsModule,
+                    FormsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    MatSelectModule,
+                    PlaceModule,
+                    InteractionModule
+                ],
+                exports: [
+                    CommandDirective,
+                    FocusBindingDirective,
+                    NumberInputComponent,
+                    StringInputComponent,
+                    PasswordInputComponent,
+                    SelectInputComponent,
+                    InteractionModule,
+                    PlaceModule,
+                ]
+            },] }
+];
+
+/**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
@@ -1958,518 +2351,200 @@ class ResizeAwareComponent extends DisposableComponent {
         this.elementRef = elementRef;
         this.ngZone = ngZone;
         this._boundsModel = new ValueHolder(new Bounds(0, 0, 0, 0));
-    }
-    /**
-     * @return {?}
-     */
-    ngAfterViewInit() {
-        this.updateBounds();
-        /** @type {?} */
-        const element = this.elementRef.nativeElement;
-        /** @type {?} */
-        const ro = new ResizeObserver((/**
-         * @param {?} entries
-         * @param {?} observer
-         * @return {?}
-         */
-        (entries, observer) => {
-            this.ngZone.run((/**
-             * @return {?}
-             */
-            () => this.updateBounds()));
-        }));
-        ro.observe(element);
-        this.onDispose((/**
-         * @return {?}
-         */
-        () => ro.disconnect()));
-    }
-    /**
-     * @return {?}
-     */
-    get boundsModel() {
-        return this._boundsModel.readonly;
-    }
-    /**
-     * @return {?}
-     */
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    // TODO: Make this handle body scroll
-    /**
-     * @param {?} point
-     * @return {?}
-     */
-    relativePositionOf(point) {
-        return this.bounds.relativePositionOf(point);
-    }
-    /**
-     * @return {?}
-     */
-    get bounds() {
-        return this._boundsModel.value;
-    }
-    /**
-     * @private
-     * @return {?}
-     */
-    updateBounds() {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
-    }
-}
-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;
-}
-class ResolvedParameters {
-    /**
-     * @param {?} parameters
-     */
-    constructor(parameters) {
-        this.parameters = parameters;
-    }
-    /**
-     * @template T
-     * @param {?} parameter
-     * @return {?}
-     */
-    get(parameter) {
-        /** @type {?} */
-        const resolved = this.parameters.find((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => p.parameterDef === parameter));
-        return resolved ? resolved.resolvedValue : null;
-    }
-    /**
-     * @template T
-     * @param {?} parameter
-     * @param {?} value
-     * @return {?}
-     */
-    replace(parameter, value) {
-        return new ResolvedParameters(this.parameters.filter((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => p.parameterDef !== parameter)).concat({
-            parameterDef: parameter,
-            resolvedValue: value
-        }));
-    }
-    /**
-     * @protected
-     * @return {?}
-     */
-    getFormattedRouteId() {
-        /** @type {?} */
-        const routeIdParam = this.getRouteIdParam();
-        return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
-    }
-    /**
-     * @private
-     * @return {?}
-     */
-    getRouteIdParam() {
-        return this.parameters.find((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => p.parameterDef.isRouteId));
-    }
-    /**
-     * @protected
-     * @return {?}
-     */
-    getFormattedParameters() {
-        /** @type {?} */
-        const params = {};
-        /** @type {?} */
-        const routeIdParam = this.parameters.filter((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => !p.parameterDef.isRouteId)).forEach((/**
-         * @param {?} p
-         * @return {?}
-         */
-        p => {
-            params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
-        }));
-        return params;
-    }
-    /**
-     * @return {?}
-     */
-    hasRouteId() {
-        return !!this.getRouteIdParam();
-    }
-    /**
-     * @param {?} previous
-     * @param {?} router
-     * @param {?} activatedRoute
-     * @return {?}
-     */
-    redirect(previous, router, activatedRoute) {
-        /** @type {?} */
-        const routeId = this.getFormattedRouteId();
-        /** @type {?} */
-        const relativePath = !!previous.hasRouteId() ? '..' : '.';
-        /** @type {?} */
-        const 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);
-if (false) {
-    /** @type {?} */
-    ResolvedParameters.prototype.parameters;
-}
-class RouteParameterBindings extends GarbageCollector {
-    /**
-     * @param {?} component
-     * @param {?} router
-     * @param {?} activatedRoute
-     */
-    constructor(component, router, activatedRoute) {
-        super();
-        this.component = component;
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-        this._incomingRouteChange = new MutableValueModel(false);
-        this.resolvedParameters = new MutableValueModel();
-        const { chain, valueOf, before, when, after, observe } = Dsl.disposeWith(this);
-        this.txo = new TransactionObserver(); //.onEvent(e => console.log(e.toString()));
-        //.onEvent(e => console.log(e.toString()));
-        /** @type {?} */
-        const routeParameterDefs = Klass.get(component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
-        routeParameterDefs.forEach((/**
-         * @param {?} parameter
-         * @return {?}
-         */
-        parameter => this.installBinding(parameter)));
-        /** @type {?} */
-        const incomingResolvedRouteParameters = observe.valuesFrom(activatedRoute.paramMap)
-            .last()
-            .map((/**
-         * @param {?} params
-         * @return {?}
-         */
-        params => {
-            /** @type {?} */
-            const result = [];
-            routeParameterDefs.forEach((/**
-             * @param {?} parameterDef
-             * @return {?}
-             */
-            parameterDef => {
-                /** @type {?} */
-                let resolvedValue;
-                if (parameterDef.isArray) {
-                    resolvedValue = params.getAll(parameterDef.name).map((/**
-                     * @param {?} v
-                     * @return {?}
-                     */
-                    v => 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 {?}
+     */
+    ngAfterViewInit() {
+        this.updateBounds();
+        /** @type {?} */
+        const element = this.elementRef.nativeElement;
+        /** @type {?} */
+        const ro = new ResizeObserver((/**
+         * @param {?} entries
+         * @param {?} observer
          * @return {?}
          */
-        resolvedParameters => {
-            this._incomingRouteChange.value = true;
-            this.resolvedParameters.value = resolvedParameters;
-            this._incomingRouteChange.value = false;
+        (entries, observer) => {
+            this.ngZone.run((/**
+             * @return {?}
+             */
+            () => this.updateBounds()));
         }));
-        when.valueOf(this.resolvedParameters).changes((/**
-         * @param {?} params
-         * @param {?} previous
+        ro.observe(element);
+        this.onDispose((/**
          * @return {?}
          */
-        (params, previous) => {
-            params.redirect(previous, router, activatedRoute);
-        }), { unless: this.incomingRouteChange });
-        this.txo.observe('incomingResolvedRouteParameters', incomingResolvedRouteParameters);
-        this.txo.observe('this.routeIsChanging', this.incomingRouteChange);
+        () => ro.disconnect()));
     }
     /**
      * @return {?}
      */
-    get incomingRouteChange() {
-        return this._incomingRouteChange.readonly;
+    get boundsModel() {
+        return this._boundsModel.readonly;
     }
     /**
-     * @protected
-     * @template T
-     * @param {?} parameter
      * @return {?}
      */
-    installBinding(parameter) {
-        /** @type {?} */
-        const model = this.getModelFor(parameter);
-        // this.txo.observe(parameter.propertyName, model);
-        this.registerDisposable(new Binding(this.resolvedParameters, model, {
-            /**
-             * @param {?} parameters
-             * @return {?}
-             */
-            toRight(parameters) {
-                return parameters.get(parameter);
-            },
-            /**
-             * @param {?} value
-             * @param {?=} currentParameters
-             * @return {?}
-             */
-            toLeft(value, currentParameters) {
-                return currentParameters.replace(parameter, value);
-            }
-        }));
+    get nativeElement() {
+        return this.elementRef.nativeElement;
     }
+    // TODO: Make this handle body scroll
     /**
-     * @private
-     * @template T
-     * @param {?} parameter
+     * @param {?} point
      * @return {?}
      */
-    getModelFor(parameter) {
-        return this.component[parameter.propertyName];
+    relativePositionOf(point) {
+        return this.bounds.relativePositionOf(point);
     }
-}
-if (false) {
-    /** @type {?} */
-    RouteParameterBindings.prototype._incomingRouteChange;
     /**
-     * @type {?}
-     * @private
+     * @return {?}
      */
-    RouteParameterBindings.prototype.txo;
+    get bounds() {
+        return this._boundsModel.value;
+    }
     /**
-     * @type {?}
      * @private
+     * @return {?}
      */
-    RouteParameterBindings.prototype.resolvedParameters;
+    updateBounds() {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    }
+}
+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
  */
-class AbstractPlaceComponent extends DisposableComponent {
+
+/**
+ * @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) {
     /**
-     * @param {?} activatedRoute
-     * @param {?} router
+     * @return {?}
      */
-    constructor(activatedRoute, router) {
-        super();
-        this.activatedRoute = activatedRoute;
-        this.routeBindingMediator = this.registerDisposable(new RouteParameterBindings(this, router, activatedRoute));
-    }
+    Alert.prototype.title = function () { };
     /**
      * @return {?}
      */
-    get placeConfig() {
-        return Place.getDescriptor((/** @type {?} */ ((/** @type {?} */ (this.constructor)))));
-    }
+    Alert.prototype.content = function () { };
     /**
      * @return {?}
      */
-    canDeactivate() {
-        return true;
-    }
+    Alert.prototype.ok = function () { };
 }
-__decorate([
-    Memoize(),
-    __metadata("design:type", Place.Descriptor),
-    __metadata("design:paramtypes", [])
-], AbstractPlaceComponent.prototype, "placeConfig", null);
+
+/**
+ * @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 () { };
 }
 
 /**
@@ -2479,12 +2554,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 () { };
+    (target) => {
+        if (!lang.constructorChain((/** @type {?} */ (target))).includes(PlaceComponent)) {
+            lang.illegalState(`${target} must extend PlaceComponent to use the @Place decorator`);
+        }
+        PlaceComponent.injectDefinition((/** @type {?} */ (target)), options);
+    });
 }
 
 /**
@@ -2508,7 +2605,21 @@ class LeavePlaceGuard {
      * @return {?}
      */
     canDeactivate(component, currentRoute, currentState, nextState) {
-        return component.canDeactivate();
+        /** @type {?} */
+        const placeComponent = nextState ?
+            (/** @type {?} */ (nextState.root.firstChild.component)) :
+            null;
+        /** @type {?} */
+        const nextPlaceDefinition = lang.constructorChain(placeComponent).includes(PlaceComponent) ?
+            PlaceComponent.getDefinition((/** @type {?} */ ((/** @type {?} */ (placeComponent))))) :
+            null;
+        if (nextPlaceDefinition.isDescriptorFor(component)) {
+            // console.log("Same place different route.  Do we need a place component hook for this??");
+            return true;
+        }
+        else {
+            return component.canDeactivate(nextPlaceDefinition, nextState);
+        }
     }
 }
 LeavePlaceGuard.decorators = [
@@ -3169,6 +3280,29 @@ 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
+ */
+class VisitSnapshot {
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -3189,5 +3323,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, QueryParameter, QueryParameterList, 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