@coolon/angular-ui-powerups 0.0.91 → 0.0.93

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

@@ -5,7 +5,7 @@ import { MatInputModule, MatFormFieldModule, MatSelectModule, MatDialog, MatButt
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __awaiter, __generator, __assign, __spread } from 'tslib';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingListModel, Deferred, MutableStream, MutableListModel, MutableValueModel, Binding, Trace, Guard as Guard$1, Command, StoreInValueModel, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingListModel, Deferred, MutableStream, MutableListModel, MutableValueModel, Binding, Trace, Guard as Guard$1, StoreInValueModel, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { Router, RouterModule, NavigationStart, NavigationEnd, NavigationError, UrlSerializer, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import ___default, { last, isNil, isEqual } from 'lodash';
@@ -19,6 +19,7 @@ import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
+import { Observable } from 'rxjs';
 
 /**
  * @fileoverview added by tsickle
@@ -2344,7 +2345,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
          * @return {?}
          */
         function () {
-            console.log('######  STARTING');
+            // console.log('######  STARTING');
             _this._inActivityPromise.value = true;
             // this.currentActivityId = uuid.v1();
             // this.location.go(this.router.routerState.snapshot.url, "aup");
@@ -2405,7 +2406,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
              */
             function () {
                 _this._inActivityPromise.value = false;
-                console.log('######  FINISHED');
+                // console.log('######  FINISHED');
                 // this.currentActivityId = null;
                 self.safelyUpdateActivityListDelegate(null);
             }));
@@ -3695,8 +3696,8 @@ if (false) {
         Internal.prototype.isExternal;
     }
     var Factory = /** @class */ (function () {
-        function Factory(appModelInteractionContext) {
-            this.appModelInteractionContext = appModelInteractionContext;
+        function Factory(interactionContext) {
+            this.interactionContext = interactionContext;
         }
         /**
          * @param {?} visit
@@ -3707,7 +3708,7 @@ if (false) {
          * @return {?}
          */
         function (visit) {
-            return new Internal(visit, this.appModelInteractionContext);
+            return new Internal(visit, this.interactionContext);
         };
         /**
          * @param {?} firstTimeRoute
@@ -3718,23 +3719,14 @@ if (false) {
          * @return {?}
          */
         function (firstTimeRoute) {
-            return new External(firstTimeRoute, this.appModelInteractionContext);
+            return new External(firstTimeRoute, this.interactionContext);
         };
-        Factory.decorators = [
-            { type: Injectable, args: [{
-                        providedIn: 'root'
-                    },] },
-        ];
-        /** @nocollapse */
-        Factory.ctorParameters = function () { return [
-            { type: InteractionContext }
-        ]; };
         return Factory;
     }());
     NavigationSession.Factory = Factory;
     if (false) {
         /** @type {?} */
-        Factory.prototype.appModelInteractionContext;
+        Factory.prototype.interactionContext;
     }
     var ComponentDeactivationHandler = /** @class */ (function () {
         function ComponentDeactivationHandler(component, appModelInteractionContext, primary) {
@@ -3966,1987 +3958,2070 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var PlaceRouter = /** @class */ (function (_super) {
-    __extends(PlaceRouter, _super);
-    function PlaceRouter(router, urlSerializer, navigationSessionFactory, angularLocation, placeHistory) {
-        var _this = _super.call(this) || this;
-        _this.router = router;
-        _this.urlSerializer = urlSerializer;
-        _this.navigationSessionFactory = navigationSessionFactory;
-        _this.angularLocation = angularLocation;
-        _this.placeHistory = placeHistory;
-        _this.firstRoute = true;
-        _this._navigationSessionModel = new MutableValueModel();
-        _this._activeVisits = new MutableListModel();
-        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.activeVisitIndex = chain(_this._activeVisits).indexBy('placeDefinition');
-        angularLocation.onUrlChange((/**
-         * @param {?} url
+/**
+ * @param {?} options
+ * @return {?}
+ */
+function Place(options) {
+    return (/**
+     * @param {?} target
+     * @return {?}
+     */
+    function (target) {
+        if (PlaceComponent.isPlaceComponentConstructor(target)) {
+            PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, isNil(options.authenticate) ? false : options.authenticate, options.data, PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            function (c) { return PlaceComponent.getDefinition(c); }))));
+        }
+        else {
+            lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
+        }
+    });
+}
+(function (Place) {
+    /**
+     * @record
+     */
+    function Options() { }
+    Place.Options = Options;
+    if (false) {
+        /** @type {?} */
+        Options.prototype.path;
+        /** @type {?|undefined} */
+        Options.prototype.data;
+        /** @type {?|undefined} */
+        Options.prototype.authenticate;
+        /** @type {?|undefined} */
+        Options.prototype.children;
+        /** @type {?|undefined} */
+        Options.prototype.defaultChild;
+    }
+})(Place || (Place = {}));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+// WARNING: interface has both a type and a value, skipping emit
+var Formatter;
+(function (Formatter) {
+    var StringType = /** @class */ (function () {
+        function StringType() {
+        }
+        /**
+         * @param {?} value
          * @return {?}
          */
-        function (url) {
-            console.log("location.onUrlChange -> " + url);
-        }));
-        // TODO: make setup the callbacks in during module initiation to make this testable.
-        _this.router.events.subscribe((/**
-         * @param {?} event
+        StringType.prototype.format = /**
+         * @param {?} value
          * @return {?}
          */
-        function (event) {
-            // Routing event sequence
-            // ======================
-            // NavigationStart -> .... -> NavigationCancel --> redirect, go around again in the same session
-            // NavigationStart -> .... -> NavigationEnd --> navigation complete, end session.
-            // NavigationStart -> .... -> NavigationError --> navigation canceled, end session.
-            // =======================
-            if (event instanceof NavigationStart) {
-                _this.onAngularRouterStarted(event);
-            }
-            if (event instanceof NavigationEnd) {
-                _this.onAngularRouterFinished(false);
-            }
-            if (event instanceof NavigationError) {
-                _this.onAngularRouterFinished(true);
-            }
-        }));
-        _this.navigationSessionActive = chain(_this.navigationSessionModel).isNotNil();
-        _this.navigationSessionActive.subscribe((/**
-         * @param {?} active
+        function (value) {
+            return value;
+        };
+        /**
+         * @param {?} value
          * @return {?}
          */
-        function (active) {
-            console.log('navigationSessionActive', active);
-        }));
-        return _this;
-        // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
-        // txo.observe('this.navigationSessionModel', this.navigationSessionModel);
-    }
-    Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
-        get: /**
+        StringType.prototype.parse = /**
+         * @param {?} value
          * @return {?}
          */
-        function () {
-            return this._navigationSessionModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PlaceRouter.prototype, "navigationSessionModel", {
-        get: /**
+        function (value) {
+            return value;
+        };
+        return StringType;
+    }());
+    var NumberType = /** @class */ (function () {
+        function NumberType() {
+        }
+        /**
+         * @param {?} value
          * @return {?}
          */
-        function () {
-            return this._navigationSessionModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PlaceRouter.prototype, "activeVisits", {
-        get: /**
+        NumberType.prototype.format = /**
+         * @param {?} value
          * @return {?}
          */
-        function () {
-            return this._activeVisits.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
-     * @param visit
-     */
-    /**
-     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
-     * @param {?} visit
-     * @param {?=} options
-     * @return {?}
-     */
-    PlaceRouter.prototype.navigate = /**
-     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
-     * @param {?} visit
-     * @param {?=} options
-     * @return {?}
-     */
-    function (visit, options) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                this.doNavigation(visit, (/**
-                 * @param {?} router
-                 * @return {?}
-                 */
-                function (router) { return __awaiter(_this, void 0, void 0, function () {
-                    var commands;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                commands = __spread([
-                                    visit.placeDefinition.path
-                                ], this.createRouteParameters(visit));
-                                return [4 /*yield*/, this.router.navigate(commands, {
-                                        relativeTo: options ? options.relativeTo : null
-                                    })];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); }));
-                return [2 /*return*/];
-            });
-        });
-    };
-    // @Trace()
-    // @Trace()
-    /**
-     * @param {?} activatedRoute
-     * @param {?} previous
-     * @param {?} next
-     * @return {?}
-     */
-    PlaceRouter.prototype.pushVisitChangesToRoute = 
-    // @Trace()
-    /**
-     * @param {?} activatedRoute
-     * @param {?} previous
-     * @param {?} next
-     * @return {?}
-     */
-    function (activatedRoute, previous, next) {
-        return __awaiter(this, void 0, void 0, function () {
-            var _this = this;
-            return __generator(this, function (_a) {
-                // we have to push to history so our remember sanitisers don't pick up the previous value
-                // when it's been cleared by the user.
-                this.placeHistory.add(next);
-                // FIXME: no route id -> route id duplicates route parameters
-                if (next.hasRoutingChangedFrom(previous)) {
-                    return [2 /*return*/, this.doNavigation(next, (/**
-                         * @param {?} router
-                         * @return {?}
-                         */
-                        function (router) {
-                            /** @type {?} */
-                            var commands = _this.parseUrl(_this.router.routerState.snapshot).createRedirectCommandsFor(next);
-                            // // we have to to use the definition for route id as our redirection always includes
-                            // // the id in the url segements (but leaves it blank when there's no id). I.e. in the
-                            // // no id case we're doing the following redirect [<placePath>, ""] -> ["..", <id>]
-                            // const relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
-                            // const commands = [
-                            //   relativePath,
-                            //   ...this.createRouteParameters(next),
-                            //   ...this.extractChildPath(activatedRoute.snapshot)
-                            // ];
-                            console.log('### Push Changes to route Redirect', { commands: commands });
-                            return router.navigate(commands);
-                        }))];
-                }
-                return [2 /*return*/];
-            });
-        });
-    };
-    /**
-     * @param {?} visit
-     * @param {?} customNavigation
-     * @return {?}
-     */
-    PlaceRouter.prototype.doNavigation = /**
-     * @param {?} visit
-     * @param {?} customNavigation
-     * @return {?}
-     */
-    function (visit, customNavigation) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        this._navigationSessionModel.value = this.navigationSessionFactory.createInternal(visit);
-                        _a.label = 1;
-                    case 1:
-                        _a.trys.push([1, , 3, 4]);
-                        return [4 /*yield*/, customNavigation(this.router)];
-                    case 2:
-                        _a.sent();
-                        return [3 /*break*/, 4];
-                    case 3:
-                        // Router has finished (since there was no router change required) so we
-                        // need to end the navigation session.
-                        if (this.navigationSession && !this.router.getCurrentNavigation()) {
-                            this.onAngularRouterFinished(false);
-                        }
-                        return [7 /*endfinally*/];
-                    case 4: return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * @private
-     * @param {?} visit
-     * @return {?}
-     */
-    PlaceRouter.prototype.createRouteParameters = /**
-     * @private
-     * @param {?} visit
-     * @return {?}
-     */
-    function (visit) {
-        /** @type {?} */
-        var def = visit.placeDefinition;
-        return visit.hasRouteId() ?
-            [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
-            [def.getFormattedRouteParameters(visit)];
-    };
-    // @Trace()
-    // @Trace()
-    /**
-     * @private
-     * @param {?} event
-     * @return {?}
-     */
-    PlaceRouter.prototype.onAngularRouterStarted = 
-    // @Trace()
-    /**
-     * @private
-     * @param {?} event
-     * @return {?}
-     */
-    function (event) {
-        if (!this.navigationSession) { // We been activated by an external route rather than placeRouter.go(visit)
-            console.log('navigation started', { firstTime: this.firstRoute });
-            /** @type {?} */
-            var session = this.navigationSessionFactory.createExternal(this.firstRoute);
-            if (event.navigationTrigger === 'popstate') {
-                session.setPopstateReturnUrl(this.router.routerState.snapshot.url);
-            }
-            this._navigationSessionModel.value = session;
-        }
-        this.firstRoute = false;
-    };
-    // @Trace()
-    // @Trace()
-    /**
-     * @private
-     * @param {?} cancelled
-     * @return {?}
-     */
-    PlaceRouter.prototype.onAngularRouterFinished = 
-    // @Trace()
-    /**
-     * @private
-     * @param {?} cancelled
-     * @return {?}
-     */
-    function (cancelled) {
-        var _this = this;
-        /** @type {?} */
-        var session = this._navigationSessionModel.value;
-        if (!cancelled) {
-            // Update visits before we end the navigation session.  This allows the placeOutets to
-            // ignore visit changes that occur while the navigation is in progress
-            /** @type {?} */
-            var visits = session.getVisits();
-            visits.forEach((/**
-             * @param {?} v
-             * @return {?}
-             */
-            function (v) { return _this.placeHistory.add(v); }));
-            this._activeVisits.value = visits;
-        }
-        else {
-            // Angular doesn't preserve the url when a guard cancels the back button.
-            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
-            if (session.isPopState) {
-                console.log('cancelled during popstate');
-                this.angularLocation.go(session.popStateReturnUrl);
-            }
-        }
-        this._navigationSessionModel.value = null;
-    };
-    /**
-     * @param {?} activatedRoute
-     * @return {?}
-     */
-    PlaceRouter.prototype.extractChildPath = /**
-     * @param {?} activatedRoute
-     * @return {?}
-     */
-    function (activatedRoute) {
-        return ___default.flatten(activatedRoute.children.map((/**
-         * @param {?} child
-         * @return {?}
-         */
-        function (child) { return child.url; })));
-    };
-    /**
-     * @param {?} snapshot
-     * @return {?}
-     */
-    PlaceRouter.prototype.parseUrl = /**
-     * @param {?} snapshot
-     * @return {?}
-     */
-    function (snapshot) {
-        return new PlaceRouter.UrlHelper(this.urlSerializer.parse(snapshot.url));
-    };
-    PlaceRouter.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    PlaceRouter.ctorParameters = function () { return [
-        { type: Router },
-        { type: UrlSerializer },
-        { type: NavigationSession.Factory },
-        { type: Location },
-        { type: PlaceHistory }
-    ]; };
-    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(NavigationSession.Factory), ɵɵinject(Location), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Visit, Object]),
-        __metadata("design:returntype", Promise)
-    ], PlaceRouter.prototype, "navigate", null);
-    return PlaceRouter;
-}(GarbageCollector));
-if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouter.prototype.firstRoute;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouter.prototype._navigationSessionModel;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouter.prototype._activeVisits;
-    /** @type {?} */
-    PlaceRouter.prototype.navigationSessionActive;
-    /** @type {?} */
-    PlaceRouter.prototype.activeVisitIndex;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouter.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouter.prototype.urlSerializer;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceRouter.prototype.navigationSessionFactory;
-    /** @type {?} */
-    PlaceRouter.prototype.angularLocation;
-    /** @type {?} */
-    PlaceRouter.prototype.placeHistory;
-}
-(function (PlaceRouter) {
-    var UrlHelper = /** @class */ (function () {
-        function UrlHelper(urlTree) {
-            this.urlTree = urlTree;
-            console.log({ segments: this.urlTree.root.children.primary.segments });
-        }
-        /**
-         * @return {?}
-         */
-        UrlHelper.prototype.cloneUrlSegmentList = /**
-         * @return {?}
-         */
-        function () {
-            return __spread(this.urlTree.root.children.primary.segments);
+        function (value) {
+            return ___default.isNumber(value) && !___default.isNaN(value) ? "" + value : null;
         };
         /**
-         * @param {?} visit
+         * @param {?} value
          * @return {?}
          */
-        UrlHelper.prototype.updateVisitSegments = /**
-         * @param {?} visit
+        NumberType.prototype.parse = /**
+         * @param {?} value
          * @return {?}
          */
-        function (visit) {
-            // Ugly, but it works for now.
-            /** @type {?} */
-            var segments = this.cloneUrlSegmentList();
-            /** @type {?} */
-            var visitSegments = this.convertToUrlSegments(visit);
+        function (value) {
             /** @type {?} */
-            var replaceAt = segments.findIndex((/**
-             * @param {?} segment
-             * @return {?}
-             */
-            function (segment) { return segment.path === visitSegments[0].path; }));
-            // do not use the return value, it's the items that were removed!
-            segments.splice.apply(segments, __spread([replaceAt, visitSegments.length], visitSegments));
-            return segments;
-        };
-        /**
-         * Converts the visit into segments.  Please not that these segments are not e
-         * @param visit
-         */
-        /**
-         * Converts the visit into segments.  Please not that these segments are not e
-         * @param {?} visit
-         * @return {?}
-         */
-        UrlHelper.prototype.convertToUrlSegments = /**
-         * Converts the visit into segments.  Please not that these segments are not e
-         * @param {?} visit
-         * @return {?}
-         */
-        function (visit) {
-            return visit.placeDefinition.hasRouteId() ?
-                [
-                    // NOTE:
-                    // It's important to attach the params to the root path and not the id.  If we attach them
-                    // to an empty id then the angular router won't match the pattern.
-                    new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
-                    new UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
-                ]
-                :
-                    [
-                        new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
-                    ];
+            var parsed = Number.parseFloat(value);
+            return ___default.isNaN(parsed) ? null : parsed;
         };
+        return NumberType;
+    }());
+    var BooleanType = /** @class */ (function () {
+        function BooleanType() {
+        }
         /**
-         * @param {?} visit
+         * @param {?} value
          * @return {?}
          */
-        UrlHelper.prototype.createRedirectCommandsFor = /**
-         * @param {?} visit
+        BooleanType.prototype.format = /**
+         * @param {?} value
          * @return {?}
          */
-        function (visit) {
-            /** @type {?} */
-            var segments = this.updateVisitSegments(visit);
-            /** @type {?} */
-            var commands = [];
-            segments.forEach((/**
-             * @param {?} s
-             * @return {?}
-             */
-            function (s) {
-                commands.push(s.path);
-                if (s.parameterMap.keys.length > 0) {
-                    commands.push(s.parameters);
-                }
-            }));
-            return commands;
+        function (value) {
+            return value ? 'true' : 'false';
         };
         /**
-         * @param {?} placeDef
+         * @param {?} value
          * @return {?}
          */
-        UrlHelper.prototype.includesPathOf = /**
-         * @param {?} placeDef
+        BooleanType.prototype.parse = /**
+         * @param {?} value
          * @return {?}
          */
-        function (placeDef) {
-            return this.cloneUrlSegmentList().find((/**
-             * @param {?} s
-             * @return {?}
-             */
-            function (s) { return s.path === placeDef.path; }));
+        function (value) {
+            return value === 'true';
         };
-        __decorate([
-            Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Visit]),
-            __metadata("design:returntype", Array)
-        ], UrlHelper.prototype, "createRedirectCommandsFor", null);
-        return UrlHelper;
+        return BooleanType;
     }());
-    PlaceRouter.UrlHelper = UrlHelper;
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        UrlHelper.prototype.urlTree;
-    }
-})(PlaceRouter || (PlaceRouter = {}));
+    Formatter.STRING = new StringType();
+    Formatter.NUMBER = new NumberType();
+    Formatter.BOOLEAN = new BooleanType();
+})(Formatter || (Formatter = {}));
 
 /**
  * @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%)', minHeight: '1px' }),
-            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
-        ], {
-            optional: true
-        }),
-        query(':leave', [style({ transform: 'translateX(0%)' }), animate('{{duration}} ease-out', style({
-                transform: 'translateX(-100%)',
-                minHeight: '1px'
-            }))], {
-            optional: true
-        })
-    ])
-];
 /**
- * @param {?} duration
- * @return {?}
+ * @record
+ * @template T
  */
-function leftRightPlaceAnimation(duration) {
-    return trigger('routeAnimations', [
-        transition(':increment', right, { params: { duration: duration } }),
-        transition(':decrement', left, { params: { duration: duration } })
-    ]);
+function RouteIdOptions() { }
+if (false) {
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.as;
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.optional;
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.remember;
+    /** @type {?|undefined} */
+    RouteIdOptions.prototype.defaultValue;
 }
-/** @type {?} */
-var LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
-
 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @record
+ * @template T
  */
+function RouteParameterOptions() { }
+if (false) {
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.as;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.optional;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.remember;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.defaultValue;
+    /** @type {?|undefined} */
+    RouteParameterOptions.prototype.storeInUrl;
+}
 /**
  * @record
+ * @template T
  */
-function PlaceRef() { }
+function RouteListParameterOptions() { }
 if (false) {
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.as;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.optional;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.remember;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.defaultValue;
+    /** @type {?|undefined} */
+    RouteListParameterOptions.prototype.storeInUrl;
+}
+/**
+ * @template T
+ * @param {?} type
+ * @param {?=} options
+ * @return {?}
+ */
+function RouteId(type, options) {
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    function (prototype, propertyKey) {
+        /** @type {?} */
+        var param = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+/**
+ * @template T
+ * @param {?=} options
+ * @return {?}
+ */
+function VisitParameter(options) {
     /** @type {?} */
-    PlaceRef.prototype.placeDefinition;
-    /**
-     * @param {?} param
+    var opts = Opts.get(options);
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
      * @return {?}
      */
-    PlaceRef.prototype.initialiseBindings = function (param) { };
+    function (prototype, propertyKey) {
+        /** @type {?} */
+        var param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+/**
+ * @template E
+ * @param {?=} options
+ * @return {?}
+ */
+function VisitParameterList(options) {
+    /** @type {?} */
+    var opts = Opts.get(options);
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    function (prototype, propertyKey) {
+        /** @type {?} */
+        var param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NoopGatewayPlace = /** @class */ (function (_super) {
+    __extends(NoopGatewayPlace, _super);
+    function NoopGatewayPlace(router) {
+        var _this = _super.call(this) || this;
+        _this.router = router;
+        return _this;
+    }
     /**
      * @return {?}
      */
-    PlaceRef.prototype.onPlaceReady = function () { };
+    NoopGatewayPlace.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        this.router.navigateByUrl(this.returnUrl.value);
+    };
+    NoopGatewayPlace.ctorParameters = function () { return [
+        { type: Router }
+    ]; };
+    NoopGatewayPlace.decorators = [
+        { type: Component, args: [{
+                    template: ''
+                }] }
+    ];
+    /** @nocollapse */
+    NoopGatewayPlace.ctorParameters = function () { return [
+        { type: Router }
+    ]; };
+    __decorate([
+        VisitParameter({ storeInUrl: Formatter.STRING }),
+        __metadata("design:type", MutableValueModel)
+    ], NoopGatewayPlace.prototype, "returnUrl", void 0);
+    NoopGatewayPlace = __decorate([
+        Place({
+            path: 'aup-gateway-route',
+            authenticate: false
+        }),
+        __metadata("design:paramtypes", [Router])
+    ], NoopGatewayPlace);
+    return NoopGatewayPlace;
+}(PlaceComponent));
+if (false) {
+    /** @type {?} */
+    NoopGatewayPlace.prototype.returnUrl;
+    /** @type {?} */
+    NoopGatewayPlace.prototype.router;
 }
-var PlaceOutletComponent = /** @class */ (function (_super) {
-    __extends(PlaceOutletComponent, _super);
-    function PlaceOutletComponent(router, placeRouter, placeConfig, parentOutlet) {
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var noopPlaceDef = PlaceComponent.getDefinition(NoopGatewayPlace);
+var PlaceRouter = /** @class */ (function (_super) {
+    __extends(PlaceRouter, _super);
+    function PlaceRouter(router, urlSerializer, interactionContext, angularLocation, placeHistory) {
         var _this = _super.call(this) || this;
         _this.router = router;
-        _this.placeRouter = placeRouter;
-        _this.placeConfig = placeConfig;
-        _this.animate = true;
-        _this.placeChanged = new EventEmitter();
-        _this._activePlace = new MutableValueModel();
-        _this._activePlaceVisitModel = new DelegatingValueModel();
-        _this._inOutletActivation = new Guard$1();
-        _this._inOutletDeactivation = new Guard$1();
-        _this._inRouteVisitUpdate = new Guard$1();
-        _this._activatedRouteModel = new MutableValueModel();
-        _this._placeDefinition = new MutableValueModel();
-        _this.initialPlaceIndex = null;
+        _this.urlSerializer = urlSerializer;
+        _this.interactionContext = interactionContext;
+        _this.angularLocation = angularLocation;
+        _this.placeHistory = placeHistory;
+        _this.firstRoute = true;
+        _this._navigationSessionModel = new MutableValueModel();
+        _this._activeVisits = new MutableListModel();
+        _this.initialRedirectStarted = false;
+        _this.initialRedirectFinished = false;
         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.parentOutletModel = new MutableValueModel(parentOutlet);
-        _this._activePlaceVisitModel.setDelegate(new MutableValueModel());
-        _this._inOutletUpdate = valueOf.any(_this._inOutletDeactivation, _this._inOutletActivation).areTruthy();
-        /** @type {?} */
-        var defaultPlaceAnimationOrder = chain(_this.parentOutletModel)
-            .pullValueModel((/**
-         * @param {?} o
-         * @return {?}
-         */
-        function (o) { return o.activePlaceModel; }))
-            .pluck('placeDefinition')
-            .pluckList('children')
-            .pluck('component');
-        /** @type {?} */
-        var activatePlaceType = chain(_this.activePlaceModel).map((/**
-         * @param {?} p
+        _this.activeVisitIndex = chain(_this._activeVisits).indexBy('placeDefinition');
+        _this.navigationSessionFactory = new NavigationSession.Factory(interactionContext);
+        angularLocation.onUrlChange((/**
+         * @param {?} url
          * @return {?}
          */
-        function (p) { return (/** @type {?} */ (p.constructor)); }));
-        _this.placeAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
-            .otherwise(defaultPlaceAnimationOrder)
-            .reduce((/**
-         * @param {?} placesInOrder
+        function (url) {
+            console.log("location.onUrlChange -> " + url);
+        }));
+        // TODO: make setup the callbacks in during module initiation to make this testable.
+        _this.router.events.subscribe((/**
+         * @param {?} event
          * @return {?}
          */
-        function (placesInOrder) {
-            /** @type {?} */
-            var placeIndex = 0;
-            if (activatePlaceType.value) {
-                placeIndex = placesInOrder.indexOf(activatePlaceType.value);
-                if (isNil(_this.initialPlaceIndex)) {
-                    _this.initialPlaceIndex = placeIndex;
-                }
+        function (event) {
+            // Routing event sequence
+            // ======================
+            // NavigationStart -> .... -> NavigationCancel --> redirect, go around again in the same session
+            // NavigationStart -> .... -> NavigationEnd --> navigation complete, end session.
+            // NavigationStart -> .... -> NavigationError --> navigation canceled, end session.
+            // =======================
+            if (event instanceof NavigationStart) {
+                _this.onAngularRouterStarted(event);
             }
-            return isNil(_this.initialPlaceIndex) ? 0 : placeIndex - _this.initialPlaceIndex;
-        }), { dependsOn: activatePlaceType });
-        // Push incoming changes into the component
-        _this.routerVisit = chain(_this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
-        // Our router visit will change when our active is nullified during deactivation, which will push a null visit
-        // the the deactivated component, which will nuke it's view before the animations have finished.
-        // The visit will alway updated after the router session is finsised (when the new visits are registered) so
-        // we can safely ignore it during outlet changes as these always happen before the router session ends.
-        when.valueOf(_this.routerVisit).changes((/**
+            if (event instanceof NavigationEnd) {
+                _this.onAngularRouterFinished(false);
+            }
+            if (event instanceof NavigationError) {
+                _this.onAngularRouterFinished(true);
+            }
+        }));
+        _this.navigationSessionActive = chain(_this.navigationSessionModel).isNotNil();
+        _this.navigationSessionActive.subscribe((/**
+         * @param {?} active
          * @return {?}
          */
-        function () { return _this.pushRouteChangesToVisit(); }), { unless: _this._inOutletUpdate });
-        // Handle component based changes
-        when.valueOf(_this._activePlaceVisitModel).changes((/**
-         * @param {?} next
-         * @param {?} previous
+        function (active) {
+            console.log('navigationSessionActive', active);
+        }));
+        return _this;
+        // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
+        // txo.observe('this.navigationSessionModel', this.navigationSessionModel);
+    }
+    Object.defineProperty(PlaceRouter.prototype, "navigationSession", {
+        get: /**
          * @return {?}
          */
-        function (next, previous) {
-            _this.pushVisitChangesToRoute(next, previous);
-        }), {
-            unless: _this.placeRouter.navigationSessionActive
-        });
-        chain(_this._activePlace)
-            .postponeWhile(placeRouter.navigationSessionActive)
-            .subscribe((/**
-         * @param {?} place
+        function () {
+            return this._navigationSessionModel.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PlaceRouter.prototype, "navigationSessionModel", {
+        get: /**
          * @return {?}
          */
-        function (place) { return _this.placeChanged.emit(place); }));
-        return _this;
-        // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
-        // txo.observe('inRouteVisitUpdate', inRouteVisitUpdate);
-    }
-    /**
-     * @return {?}
-     */
-    PlaceOutletComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-    };
-    // @Trace()
-    // @Trace()
-    /**
-     * @return {?}
-     */
-    PlaceOutletComponent.prototype.getAnimationOrder = 
-    // @Trace()
-    /**
-     * @return {?}
-     */
-    function () {
-        return this.placeAnimationOrder.value;
-    };
-    Object.defineProperty(PlaceOutletComponent.prototype, "animationDuration", {
+        function () {
+            return this._navigationSessionModel.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PlaceRouter.prototype, "activeVisits", {
         get: /**
          * @return {?}
          */
         function () {
-            return this.placeConfig && this.placeConfig.animationDuration ? this.placeConfig.animationDuration : '500ms';
+            return this._activeVisits.readonly;
         },
         enumerable: true,
         configurable: true
     });
-    // @Trace()
-    // @Trace()
     /**
+     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
+     * @param visit
+     */
+    /**
+     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
      * @param {?} visit
+     * @param {?=} options
      * @return {?}
      */
-    PlaceOutletComponent.prototype.navigate = 
-    // @Trace()
-    /**
+    PlaceRouter.prototype.navigate = /**
+     *  placeRouter.navigate(placeDestinations.somePlace.createVisit(routeId, ...visitParams));
      * @param {?} visit
+     * @param {?=} options
      * @return {?}
      */
-    function (visit) {
-        // console.log({ activatedRoute: this._activatedRouteModel.value });
-        this.placeRouter.navigate(visit, {
-            relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
+    function (visit, options) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                this.doNavigation(visit, (/**
+                 * @param {?} router
+                 * @return {?}
+                 */
+                function (router) { return __awaiter(_this, void 0, void 0, function () {
+                    var commands;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                commands = __spread([
+                                    visit.placeDefinition.path
+                                ], this.createRouteParameters(visit));
+                                return [4 /*yield*/, this.router.navigate(commands, {
+                                        relativeTo: options ? options.relativeTo : null
+                                    })];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }));
+                return [2 /*return*/];
+            });
         });
     };
-    Object.defineProperty(PlaceOutletComponent.prototype, "parentOutlet", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this.parentOutletModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     // @Trace()
     // @Trace()
     /**
+     * @param {?} activatedRoute
+     * @param {?} previous
+     * @param {?} next
+     * @return {?}
+     */
+    PlaceRouter.prototype.pushVisitChangesToRoute = 
+    // @Trace()
+    /**
+     * @param {?} activatedRoute
+     * @param {?} previous
+     * @param {?} next
+     * @return {?}
+     */
+    function (activatedRoute, previous, next) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                // we have to push to history so our remember sanitisers don't pick up the previous value
+                // when it's been cleared by the user.
+                this.placeHistory.add(next);
+                // FIXME: no route id -> route id duplicates route parameters
+                if (next.hasRoutingChangedFrom(previous)) {
+                    return [2 /*return*/, this.doNavigation(next, (/**
+                         * @param {?} router
+                         * @return {?}
+                         */
+                        function (router) {
+                            /** @type {?} */
+                            var commands = _this.parseUrl(_this.router.routerState.snapshot).createRedirectCommandsFor(next);
+                            // // we have to to use the definition for route id as our redirection always includes
+                            // // the id in the url segements (but leaves it blank when there's no id). I.e. in the
+                            // // no id case we're doing the following redirect [<placePath>, ""] -> ["..", <id>]
+                            // const relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
+                            // const commands = [
+                            //   relativePath,
+                            //   ...this.createRouteParameters(next),
+                            //   ...this.extractChildPath(activatedRoute.snapshot)
+                            // ];
+                            console.log('### Push Changes to route Redirect', { commands: commands });
+                            return router.navigate(commands);
+                        }))];
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * @param {?} visit
+     * @param {?} customNavigation
      * @return {?}
      */
-    PlaceOutletComponent.prototype.pushRouteChangesToVisit = 
-    // @Trace()
-    /**
+    PlaceRouter.prototype.doNavigation = /**
+     * @param {?} visit
+     * @param {?} customNavigation
      * @return {?}
      */
-    function () {
-        var _this = this;
-        /** @type {?} */
-        var visit = this.routerVisit.value;
-        // console.log({
-        //   visit,
-        //   place: visit ? visit.placeDefinition.component : null,
-        //   inOutletActivation: this._inOutletActivation.value,
-        //   inRoutingSession: this.placeRouter.navigationSessionActive.value
-        // });
-        if (visit) { // can be null while the place and index sync up
-            this._inRouteVisitUpdate.whileTrue((/**
-             * @return {?}
-             */
-            function () {
-                _this._activePlaceVisitModel.value = visit;
-            }));
-        }
+    function (visit, customNavigation) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this._navigationSessionModel.value = this.navigationSessionFactory.createInternal(visit);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, , 3, 4]);
+                        return [4 /*yield*/, customNavigation(this.router)];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        // Router has finished (since there was no router change required) so we
+                        // need to end the navigation session.
+                        if (this.navigationSession && !this.router.getCurrentNavigation()) {
+                            this.onAngularRouterFinished(false);
+                        }
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
     };
     /**
-     * @param {?} next
-     * @param {?} previous
+     * @private
+     * @param {?} visit
      * @return {?}
      */
-    PlaceOutletComponent.prototype.pushVisitChangesToRoute = /**
-     * @param {?} next
-     * @param {?} previous
+    PlaceRouter.prototype.createRouteParameters = /**
+     * @private
+     * @param {?} visit
      * @return {?}
      */
-    function (next, previous) {
+    function (visit) {
         /** @type {?} */
-        var activatedRoute = this._activatedRouteModel.value;
-        this.placeRouter.pushVisitChangesToRoute(activatedRoute, previous, next);
+        var def = visit.placeDefinition;
+        return visit.hasRouteId() ?
+            [def.getFormattedRouteId(visit), def.getFormattedRouteParameters(visit)] :
+            [def.getFormattedRouteParameters(visit)];
     };
-    Object.defineProperty(PlaceOutletComponent.prototype, "activePlaceModel", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._activePlace.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(PlaceOutletComponent.prototype, "activatedRouteModel", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._activatedRouteModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
     // @Trace()
     // @Trace()
     /**
-     * @param {?} routerOutlet
-     * @param {?} place
+     * @private
+     * @param {?} event
      * @return {?}
      */
-    PlaceOutletComponent.prototype.onOutletActivated = 
+    PlaceRouter.prototype.onAngularRouterStarted = 
     // @Trace()
     /**
-     * @param {?} routerOutlet
-     * @param {?} place
+     * @private
+     * @param {?} event
      * @return {?}
      */
-    function (routerOutlet, place) {
-        var _this = this;
-        this._inOutletActivation.whileTrue((/**
-         * @return {?}
-         */
-        function () {
-            try {
-                _this._activePlace.value = place;
-                _this._activatedRouteModel.value = routerOutlet.activatedRoute;
-                _this._placeDefinition.value = place.placeDefinition;
-                /** @type {?} */
-                var visitModel = new MutableValueModel();
-                _this._activePlaceVisitModel.setDelegate(visitModel);
-                place.initialiseBindings(visitModel);
-            }
-            catch (error) {
-                console.error(error);
+    function (event) {
+        if (!this.navigationSession) { // We been activated by an external route rather than placeRouter.go(visit)
+            console.log('navigation started', { firstTime: this.firstRoute });
+            /** @type {?} */
+            var session = this.navigationSessionFactory.createExternal(this.firstRoute);
+            if (event.navigationTrigger === 'popstate') {
+                session.setPopstateReturnUrl(this.router.routerState.snapshot.url);
             }
-        }));
-        if (!this.animate) {
-            // we're not animating so trigger any post animation callbacks now.
-            this.animationDone();
+            this._navigationSessionModel.value = session;
         }
+        this.firstRoute = false;
     };
     // @Trace()
     // @Trace()
     /**
+     * @private
+     * @param {?} cancelled
      * @return {?}
      */
-    PlaceOutletComponent.prototype.onOutletDeactivated = 
+    PlaceRouter.prototype.onAngularRouterFinished = 
     // @Trace()
     /**
+     * @private
+     * @param {?} cancelled
      * @return {?}
      */
-    function () {
+    function (cancelled) {
         var _this = this;
-        this._inOutletDeactivation.whileTrue((/**
-         * @return {?}
-         */
-        function () {
-            _this._activePlace.value = null;
-            _this._activatedRouteModel.value = null;
-            _this._placeDefinition.value = null;
-            _this._activePlaceVisitModel.setDelegate(null);
-        }));
+        /** @type {?} */
+        var session = this._navigationSessionModel.value;
+        if (!cancelled) {
+            // Update visits before we end the navigation session.  This allows the placeOutets to
+            // ignore visit changes that occur while the navigation is in progress
+            /** @type {?} */
+            var visits = session.getVisits();
+            visits.forEach((/**
+             * @param {?} v
+             * @return {?}
+             */
+            function (v) { return _this.placeHistory.add(v); }));
+            this._activeVisits.value = visits;
+        }
+        else {
+            // Angular doesn't preserve the url when a guard cancels the back button.
+            // See https://github.com/angular/angular/issues/13586#issuecomment-432795720
+            if (session.isPopState) {
+                console.log('cancelled during popstate');
+                this.angularLocation.go(session.popStateReturnUrl);
+            }
+        }
+        this._navigationSessionModel.value = null;
     };
-    // @Trace()
-    // @Trace()
     /**
+     * @param {?} activatedRoute
      * @return {?}
      */
-    PlaceOutletComponent.prototype.animationStarted = 
-    // @Trace()
-    /**
+    PlaceRouter.prototype.extractChildPath = /**
+     * @param {?} activatedRoute
      * @return {?}
      */
-    function () {
-        // console.log({ activePlace: this._activePlace.value });
+    function (activatedRoute) {
+        return ___default.flatten(activatedRoute.children.map((/**
+         * @param {?} child
+         * @return {?}
+         */
+        function (child) { return child.url; })));
     };
-    // @Trace()
-    // @Trace()
     /**
+     * @param {?} snapshot
      * @return {?}
      */
-    PlaceOutletComponent.prototype.animationDone = 
-    // @Trace()
-    /**
+    PlaceRouter.prototype.parseUrl = /**
+     * @param {?} snapshot
      * @return {?}
      */
-    function () {
-        if (this._activePlace.value) {
-            this._activePlace.value.onPlaceReady();
-        }
-    };
-    PlaceOutletComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-place-outlet',
-                    template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n     (@routeAnimations.start)=\"animationStarted()\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated()\">\n  </router-outlet>\n</div>\n\n",
-                    animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                    styles: [":host{display:flex;flex-direction:column;min-height:0;overflow-x:hidden}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
-                }] }
-    ];
-    /** @nocollapse */
-    PlaceOutletComponent.ctorParameters = function () { return [
-        { type: Router },
-        { type: PlaceRouter },
-        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [AUP_PLACE_CONFIG,] }] },
-        { type: PlaceOutletComponent, decorators: [{ type: SkipSelf }, { type: Optional }] }
-    ]; };
-    PlaceOutletComponent.propDecorators = {
-        animate: [{ type: Input }],
-        customPlaceAnimationOrderModel: [{ type: Input, args: ['placeAnimationOrderModel',] }],
-        customPlaceAnimationOrder: [{ type: Input, args: ['placeAnimationOrder',] }],
-        placeChanged: [{ type: Output }],
-        routerOut: [{ type: ViewChild, args: ['routeOutlet', { static: true },] }]
+    function (snapshot) {
+        return new PlaceRouter.UrlHelper(this.urlSerializer.parse(snapshot.url));
     };
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ListModel)
-    ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
-    __decorate([
-        StoreInListModel('customPlaceAnimationOrderModel'),
-        __metadata("design:type", Array)
-    ], PlaceOutletComponent.prototype, "customPlaceAnimationOrder", void 0);
-    return PlaceOutletComponent;
-}(DisposableComponent));
-if (false) {
-    /** @type {?} */
-    PlaceOutletComponent.prototype.animate;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.customPlaceAnimationOrderModel;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.customPlaceAnimationOrder;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.placeChanged;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.routerOut;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype._activePlace;
+    // TODO: this all only sort of works.  Opening dialogs and clicking back multiple times breaks things.
+    // TODO: next stage is to investigate tracking dialog state in a different placeoutlet and keeping those
+    // TODO: urls out of the history.
+    // TODO: this all only sort of works.  Opening dialogs and clicking back multiple times breaks things.
+    // TODO: next stage is to investigate tracking dialog state in a different placeoutlet and keeping those
+    // TODO: urls out of the history.
     /**
-     * @type {?}
-     * @private
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
      */
-    PlaceOutletComponent.prototype._activePlaceVisitModel;
+    PlaceRouter.prototype.performInitialNavigationIntercept = 
+    // TODO: this all only sort of works.  Opening dialogs and clicking back multiple times breaks things.
+    // TODO: next stage is to investigate tracking dialog state in a different placeoutlet and keeping those
+    // TODO: urls out of the history.
     /**
-     * @type {?}
-     * @private
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
      */
-    PlaceOutletComponent.prototype._inOutletActivation;
+    function (activatedRoute, state) {
+        assert.isTruthy(this.isInitialNavigation());
+        Logger.get(this).info("Redirecting to: " + noopPlaceDef.path, { returnUrl: state.url });
+        if (!this.initialRedirectFinished) {
+            this.initialRedirectFinished = true;
+            return this.router.createUrlTree([noopPlaceDef.path, {
+                    returnUrl: state.url
+                }], {
+                replaceUrl: true,
+                // make sure we update our history
+                skipLocationChange: false
+            });
+        }
+    };
     /**
-     * @type {?}
-     * @private
+     * @return {?}
      */
-    PlaceOutletComponent.prototype._inOutletDeactivation;
+    PlaceRouter.prototype.isInitialNavigation = /**
+     * @return {?}
+     */
+    function () {
+        return this.navigationSession.firstNavigation && !this.initialRedirectFinished;
+    };
+    PlaceRouter.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    PlaceRouter.ctorParameters = function () { return [
+        { type: Router },
+        { type: UrlSerializer },
+        { type: InteractionContext },
+        { type: Location },
+        { type: PlaceHistory }
+    ]; };
+    /** @nocollapse */ PlaceRouter.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(InteractionContext), ɵɵinject(Location), ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Visit, Object]),
+        __metadata("design:returntype", Promise)
+    ], PlaceRouter.prototype, "navigate", null);
+    return PlaceRouter;
+}(GarbageCollector));
+if (false) {
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype._inOutletUpdate;
+    PlaceRouter.prototype.firstRoute;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype._inRouteVisitUpdate;
+    PlaceRouter.prototype._navigationSessionModel;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype._activatedRouteModel;
+    PlaceRouter.prototype._activeVisits;
+    /** @type {?} */
+    PlaceRouter.prototype.navigationSessionActive;
+    /** @type {?} */
+    PlaceRouter.prototype.activeVisitIndex;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype._placeDefinition;
+    PlaceRouter.prototype.navigationSessionFactory;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.parentOutletModel;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.placeAnimationOrder;
+    PlaceRouter.prototype.initialRedirectStarted;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.initialPlaceIndex;
+    PlaceRouter.prototype.initialRedirectFinished;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.routerVisit;
+    PlaceRouter.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.router;
+    PlaceRouter.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    PlaceOutletComponent.prototype.placeRouter;
+    PlaceRouter.prototype.interactionContext;
     /** @type {?} */
-    PlaceOutletComponent.prototype.placeConfig;
+    PlaceRouter.prototype.angularLocation;
+    /** @type {?} */
+    PlaceRouter.prototype.placeHistory;
 }
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
-    __extends(AbstractPlaceNavigationComponent, _super);
-    function AbstractPlaceNavigationComponent() {
-        var _this = _super.call(this) || this;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.placeDefinitions = chain(_this.placesModel).map((/**
-         * @param {?} c
+(function (PlaceRouter) {
+    var UrlHelper = /** @class */ (function () {
+        function UrlHelper(urlTree) {
+            this.urlTree = urlTree;
+            console.log({ segments: this.urlTree.root.children.primary.segments });
+        }
+        /**
          * @return {?}
          */
-        function (c) { return PlaceComponent.getDefinition(c); }));
-        _this.commandFactory = Command.createFactory((/**
-         * @param {?} placeDefinition
+        UrlHelper.prototype.cloneUrlSegmentList = /**
          * @return {?}
          */
-        function (placeDefinition) {
-            _this.placeOutlet.navigate(new Visit(placeDefinition));
-        }));
-        _this.activePlaceDefinition = chain(_this.placeOutletModel).pullValueModel((/**
-         * @param {?} o
+        function () {
+            return __spread(this.urlTree.root.children.primary.segments);
+        };
+        /**
+         * @param {?} visit
          * @return {?}
          */
-        function (o) { return o.activePlaceModel; })).pluck("placeDefinition");
-        return _this;
-    }
-    /**
-     * @param {?} placeDef
-     * @return {?}
-     */
-    AbstractPlaceNavigationComponent.prototype.getNav = /**
-     * @param {?} placeDef
-     * @return {?}
-     */
-    function (placeDef) {
-        /** @type {?} */
-        var navItem = (/** @type {?} */ (placeDef.getPlaceData('nav')));
-        return {
-            title: (/**
-             * @return {?}
-             */
-            function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); }),
-            tooltip: (/**
-             * @return {?}
-             */
-            function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null); }),
-            icon: (/**
+        UrlHelper.prototype.updateVisitSegments = /**
+         * @param {?} visit
+         * @return {?}
+         */
+        function (visit) {
+            // Ugly, but it works for now.
+            /** @type {?} */
+            var segments = this.cloneUrlSegmentList();
+            /** @type {?} */
+            var visitSegments = this.convertToUrlSegments(visit);
+            /** @type {?} */
+            var replaceAt = segments.findIndex((/**
+             * @param {?} segment
              * @return {?}
              */
-            function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); })
+            function (segment) { return segment.path === visitSegments[0].path; }));
+            // do not use the return value, it's the items that were removed!
+            segments.splice.apply(segments, __spread([replaceAt, visitSegments.length], visitSegments));
+            return segments;
         };
-    };
-    /**
-     * @param {?} place
-     * @return {?}
-     */
-    AbstractPlaceNavigationComponent.prototype.isActive = /**
-     * @param {?} place
-     * @return {?}
-     */
-    function (place) {
-        return this.activePlaceDefinition.query().equals(place);
-    };
-    /**
-     * @return {?}
-     */
-    AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-    };
-    AbstractPlaceNavigationComponent.decorators = [
-        { type: Component, args: [{
-                    template: ''
-                }] }
-    ];
-    /** @nocollapse */
-    AbstractPlaceNavigationComponent.ctorParameters = function () { return []; };
-    AbstractPlaceNavigationComponent.propDecorators = {
-        places: [{ type: Input }],
-        placesModel: [{ type: Input }],
-        placeOutlet: [{ type: Input }],
-        placeOutletModel: [{ type: Input }]
-    };
-    __decorate([
-        StoreInListModel('placesModel'),
-        __metadata("design:type", Array)
-    ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ListModel)
-    ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
-    __decorate([
-        StoreInValueModel('placeOutletModel'),
-        __metadata("design:type", PlaceOutletComponent)
-    ], AbstractPlaceNavigationComponent.prototype, "placeOutlet", void 0);
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ValueModel)
-    ], AbstractPlaceNavigationComponent.prototype, "placeOutletModel", void 0);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [PlaceDefinition]),
-        __metadata("design:returntype", Object)
-    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
-    return AbstractPlaceNavigationComponent;
-}(DisposableComponent));
-if (false) {
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.places;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.placesModel;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.placeOutlet;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.placeOutletModel;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.placeDefinitions;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.commandFactory;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.activePlaceDefinition;
-}
+        /**
+         * Converts the visit into segments.  Please not that these segments are not e
+         * @param visit
+         */
+        /**
+         * Converts the visit into segments.  Please not that these segments are not e
+         * @param {?} visit
+         * @return {?}
+         */
+        UrlHelper.prototype.convertToUrlSegments = /**
+         * Converts the visit into segments.  Please not that these segments are not e
+         * @param {?} visit
+         * @return {?}
+         */
+        function (visit) {
+            return visit.placeDefinition.hasRouteId() ?
+                [
+                    // NOTE:
+                    // It's important to attach the params to the root path and not the id.  If we attach them
+                    // to an empty id then the angular router won't match the pattern.
+                    new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
+                    new UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
+                ]
+                :
+                    [
+                        new UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
+                    ];
+        };
+        /**
+         * @param {?} visit
+         * @return {?}
+         */
+        UrlHelper.prototype.createRedirectCommandsFor = /**
+         * @param {?} visit
+         * @return {?}
+         */
+        function (visit) {
+            /** @type {?} */
+            var segments = this.updateVisitSegments(visit);
+            /** @type {?} */
+            var commands = [];
+            segments.forEach((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) {
+                commands.push(s.path);
+                if (s.parameterMap.keys.length > 0) {
+                    commands.push(s.parameters);
+                }
+            }));
+            return commands;
+        };
+        /**
+         * @param {?} placeDef
+         * @return {?}
+         */
+        UrlHelper.prototype.includesPathOf = /**
+         * @param {?} placeDef
+         * @return {?}
+         */
+        function (placeDef) {
+            return this.cloneUrlSegmentList().find((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) { return s.path === placeDef.path; }));
+        };
+        __decorate([
+            Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Visit]),
+            __metadata("design:returntype", Array)
+        ], UrlHelper.prototype, "createRedirectCommandsFor", null);
+        return UrlHelper;
+    }());
+    PlaceRouter.UrlHelper = UrlHelper;
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        UrlHelper.prototype.urlTree;
+    }
+})(PlaceRouter || (PlaceRouter = {}));
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var BusyOverlayComponent = /** @class */ (function () {
-    function BusyOverlayComponent() {
-    }
-    /**
-     * @return {?}
-     */
-    BusyOverlayComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-    };
-    BusyOverlayComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-busy-overlay',
-                    template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
-                    styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:-ms-grid;display:grid;-ms-grid-columns:auto;grid-template-columns:auto;-ms-grid-rows:auto;grid-template-rows:auto;place-content:center}"]
-                }] }
-    ];
-    /** @nocollapse */
-    BusyOverlayComponent.ctorParameters = function () { return []; };
-    BusyOverlayComponent.propDecorators = {
-        busyModel: [{ type: Input }],
-        busy: [{ type: Input }]
-    };
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ValueModel)
-    ], BusyOverlayComponent.prototype, "busyModel", void 0);
-    __decorate([
-        StoreInValueModel('busyModel'),
-        __metadata("design:type", Boolean)
-    ], BusyOverlayComponent.prototype, "busy", void 0);
-    return BusyOverlayComponent;
-}());
-if (false) {
-    /** @type {?} */
-    BusyOverlayComponent.prototype.busyModel;
-    /** @type {?} */
-    BusyOverlayComponent.prototype.busy;
+// 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%)', minHeight: '1px' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
+        ], {
+            optional: true
+        }),
+        query(':leave', [style({ transform: 'translateX(0%)' }), animate('{{duration}} ease-out', style({
+                transform: 'translateX(-100%)',
+                minHeight: '1px'
+            }))], {
+            optional: true
+        })
+    ])
+];
+/**
+ * @param {?} duration
+ * @return {?}
+ */
+function leftRightPlaceAnimation(duration) {
+    return trigger('routeAnimations', [
+        transition(':increment', right, { params: { duration: duration } }),
+        transition(':decrement', left, { params: { duration: duration } })
+    ]);
 }
+/** @type {?} */
+var LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var EmptyStateComponent = /** @class */ (function () {
-    function EmptyStateComponent() {
-    }
+/**
+ * @record
+ */
+function PlaceRef() { }
+if (false) {
+    /** @type {?} */
+    PlaceRef.prototype.placeDefinition;
     /**
+     * @param {?} param
      * @return {?}
      */
-    EmptyStateComponent.prototype.ngOnInit = /**
+    PlaceRef.prototype.initialiseBindings = function (param) { };
+    /**
      * @return {?}
      */
-    function () {
-    };
-    EmptyStateComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-empty-state',
-                    template: "\n      <div class=\"container\">\n          <ng-content></ng-content>\n      </div>\n  ",
-                    styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
-                }] }
-    ];
-    /** @nocollapse */
-    EmptyStateComponent.ctorParameters = function () { return []; };
-    return EmptyStateComponent;
-}());
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var ListPlaceNavComponent = /** @class */ (function (_super) {
-    __extends(ListPlaceNavComponent, _super);
-    function ListPlaceNavComponent() {
+    PlaceRef.prototype.onPlaceReady = function () { };
+}
+var PlaceOutletComponent = /** @class */ (function (_super) {
+    __extends(PlaceOutletComponent, _super);
+    function PlaceOutletComponent(router, placeRouter, placeConfig, parentOutlet) {
         var _this = _super.call(this) || this;
-        _this.expanded = true;
+        _this.router = router;
+        _this.placeRouter = placeRouter;
+        _this.placeConfig = placeConfig;
+        _this.placeChanged = new EventEmitter();
+        _this._activePlace = new MutableValueModel();
+        _this._previousPlace = new MutableValueModel();
+        _this._activePlaceVisitModel = new DelegatingValueModel();
+        _this._inOutletActivation = new Guard$1();
+        _this._inOutletDeactivation = new Guard$1();
+        _this._inRouteVisitUpdate = new Guard$1();
+        _this._activatedRouteModel = new MutableValueModel();
+        _this._placeDefinition = new MutableValueModel();
+        _this.initialPlaceIndex = null;
+        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.parentOutletModel = new MutableValueModel(parentOutlet);
+        _this._activePlaceVisitModel.setDelegate(new MutableValueModel());
+        _this._inOutletUpdate = valueOf.any(_this._inOutletDeactivation, _this._inOutletActivation).areTruthy();
+        /** @type {?} */
+        var defaultPlaceAnimationOrder = chain(_this.parentOutletModel)
+            .pullValueModel((/**
+         * @param {?} o
+         * @return {?}
+         */
+        function (o) { return o.activePlaceModel; }))
+            .pluck('placeDefinition')
+            .pluckList('children')
+            .pluck('component');
+        // TODO: This is a hack to prevent animation during the NoopGatewayPlace
+        /** @type {?} */
+        var activePlaceType = chain(_this._activePlace).map((/**
+         * @param {?} p
+         * @return {?}
+         */
+        function (p) {
+            return (/** @type {?} */ (p.constructor));
+        }), {
+            postponeWhile: chain(_this.activePlaceModel).isNil()
+        });
+        /** @type {?} */
+        var previousPlaceType = chain(_this._previousPlace).map((/**
+         * @param {?} p
+         * @return {?}
+         */
+        function (p) { return (/** @type {?} */ (p.constructor)); }));
+        _this.ready = chain.reduce(activePlaceType, previousPlaceType, (/**
+         * @param {?} current
+         * @param {?} previous
+         * @return {?}
+         */
+        function (current, previous) {
+            return !!current && current !== NoopGatewayPlace && previous !== NoopGatewayPlace;
+        }));
+        _this.enableAnimation = valueOf.all(_this.ready, _this.animateModel).areTruthy();
+        _this.placeAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
+            .otherwise(defaultPlaceAnimationOrder)
+            .reduce((/**
+         * @param {?} placesInOrder
+         * @return {?}
+         */
+        function (placesInOrder) {
+            /** @type {?} */
+            var placeIndex = 0;
+            if (activePlaceType.value) {
+                placeIndex = placesInOrder.indexOf(activePlaceType.value);
+                if (isNil(_this.initialPlaceIndex && placeIndex >= 0)) {
+                    _this.initialPlaceIndex = placeIndex;
+                }
+            }
+            return isNil(_this.initialPlaceIndex) ? 0 : placeIndex - _this.initialPlaceIndex;
+        }), { dependsOn: activePlaceType });
+        // Push incoming changes into the component
+        _this.routerVisit = chain(_this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
+        // Our router visit will change when our active is nullified during deactivation, which will push a null visit
+        // the the deactivated component, which will nuke it's view before the animations have finished.
+        // The visit will alway updated after the router session is finsised (when the new visits are registered) so
+        // we can safely ignore it during outlet changes as these always happen before the router session ends.
+        when.valueOf(_this.routerVisit).changes((/**
+         * @return {?}
+         */
+        function () { return _this.pushRouteChangesToVisit(); }), { unless: _this._inOutletUpdate });
+        // Handle component based changes
+        when.valueOf(_this._activePlaceVisitModel).changes((/**
+         * @param {?} next
+         * @param {?} previous
+         * @return {?}
+         */
+        function (next, previous) {
+            _this.pushVisitChangesToRoute(next, previous);
+        }), {
+            unless: _this.placeRouter.navigationSessionActive
+        });
+        chain(_this._activePlace)
+            .postponeWhile(placeRouter.navigationSessionActive)
+            .subscribe((/**
+         * @param {?} place
+         * @return {?}
+         */
+        function (place) { return _this.placeChanged.emit(place); }));
         return _this;
+        // const txo = new TransactionObserver().onEvent(e => console.log(e.toString()));
+        // txo.observe('inRouteVisitUpdate', inRouteVisitUpdate);
     }
     /**
      * @return {?}
      */
-    ListPlaceNavComponent.prototype.expandMenu = /**
+    PlaceOutletComponent.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
-        this.expanded = true;
     };
+    // @Trace()
+    // @Trace()
     /**
      * @return {?}
      */
-    ListPlaceNavComponent.prototype.collapseMenu = /**
+    PlaceOutletComponent.prototype.getAnimationOrder = 
+    // @Trace()
+    /**
      * @return {?}
      */
     function () {
-        this.expanded = false;
+        return this.placeAnimationOrder.value;
     };
+    Object.defineProperty(PlaceOutletComponent.prototype, "animationDuration", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.placeConfig && this.placeConfig.animationDuration ? this.placeConfig.animationDuration : '500ms';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // @Trace()
+    // @Trace()
     /**
+     * @param {?} visit
      * @return {?}
      */
-    ListPlaceNavComponent.prototype.toggleMenu = /**
+    PlaceOutletComponent.prototype.navigate = 
+    // @Trace()
+    /**
+     * @param {?} visit
      * @return {?}
      */
-    function () {
-        this.expanded = !this.expanded;
+    function (visit) {
+        // console.log({ activatedRoute: this._activatedRouteModel.value });
+        this.placeRouter.navigate(visit, {
+            relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
+        });
     };
-    ListPlaceNavComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-list-place-nav',
-                    template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <mat-icon *ngIf=\"getNav(placeDefinition).icon()\">{{getNav(placeDefinition).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
-                    styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:rgba(0,0,0,.6)}.mat-list-item.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.9)}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
-                }] }
-    ];
-    /** @nocollapse */
-    ListPlaceNavComponent.ctorParameters = function () { return []; };
-    ListPlaceNavComponent.propDecorators = {
-        expanded: [{ type: HostBinding, args: ['class.expanded',] }]
+    Object.defineProperty(PlaceOutletComponent.prototype, "parentOutlet", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.parentOutletModel.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // @Trace()
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.pushRouteChangesToVisit = 
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        /** @type {?} */
+        var visit = this.routerVisit.value;
+        // console.log({
+        //   visit,
+        //   place: visit ? visit.placeDefinition.component : null,
+        //   inOutletActivation: this._inOutletActivation.value,
+        //   inRoutingSession: this.placeRouter.navigationSessionActive.value
+        // });
+        if (visit) { // can be null while the place and index sync up
+            this._inRouteVisitUpdate.whileTrue((/**
+             * @return {?}
+             */
+            function () {
+                _this._activePlaceVisitModel.value = visit;
+            }));
+        }
     };
-    return ListPlaceNavComponent;
-}(AbstractPlaceNavigationComponent));
-if (false) {
-    /** @type {?} */
-    ListPlaceNavComponent.prototype.expanded;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
-    __extends(TabbedPlaceNavigationComponent, _super);
-    function TabbedPlaceNavigationComponent() {
-        return _super.call(this) || this;
-    }
-    TabbedPlaceNavigationComponent.decorators = [
-        { type: Component, args: [{
-                    selector: 'aup-tabbed-place-navigation',
-                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <mat-icon *ngIf=\"getNav(placeDefinition).icon()\">{{getNav(placeDefinition).icon()}}</mat-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</nav>\n",
-                    styles: [""]
-                }] }
-    ];
-    /** @nocollapse */
-    TabbedPlaceNavigationComponent.ctorParameters = function () { return []; };
-    return TabbedPlaceNavigationComponent;
-}(AbstractPlaceNavigationComponent));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var PlaceModule = /** @class */ (function () {
-    function PlaceModule() {
-    }
-    PlaceModule.decorators = [
-        { type: NgModule, args: [{
-                    imports: [
-                        CommonModule,
-                        BrowserAnimationsModule,
-                        MatProgressSpinnerModule,
-                        RouterModule,
-                        MatTabsModule,
-                        MatListModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                        DirectivesModule
-                    ],
-                    declarations: [
-                        EmptyStateComponent,
-                        BusyOverlayComponent,
-                        PlaceOutletComponent,
-                        TabbedPlaceNavigationComponent,
-                        ListPlaceNavComponent,
-                        AbstractPlaceNavigationComponent
-                    ],
-                    entryComponents: [BusyOverlayComponent],
-                    exports: [
-                        BusyOverlayComponent,
-                        PlaceOutletComponent,
-                        EmptyStateComponent,
-                        TabbedPlaceNavigationComponent,
-                        ListPlaceNavComponent,
-                        AbstractPlaceNavigationComponent
-                    ],
-                    providers: [
-                    // {provide: AUP_PLACE_CONFIG, useValue: {animationDuration: "2000ms"}}
-                    ]
-                },] }
-    ];
-    return PlaceModule;
-}());
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var AngularUiPowerupsModule = /** @class */ (function () {
-    function AngularUiPowerupsModule() {
-    }
-    AngularUiPowerupsModule.decorators = [
-        { type: NgModule, args: [{
-                    declarations: [],
-                    imports: [
-                        CommonModule,
-                        BrowserAnimationsModule,
-                        FormsModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        MatTabsModule,
-                        DirectivesModule,
-                        ComponentsModule,
-                        PlaceModule,
-                        InteractionModule
-                    ],
-                    exports: [
-                        InteractionModule,
-                        PlaceModule,
-                        DirectivesModule,
-                        ComponentsModule,
-                        NoopComponent
-                    ]
-                },] }
-    ];
-    return AngularUiPowerupsModule;
-}());
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-var defaultHiddenStyleDef = style({
-    opacity: 0,
-    'height': '0',
-    paddingTop: '0',
-    paddingBottom: '0'
-});
-/**
- * @param {?} triggerName
- * @param {?=} options
- * @return {?}
- */
-function slideDownAndUpAnimation(triggerName, options) {
-    // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
-    /** @type {?} */
-    var duration = OptionsHelper.get(options).getOptional('duration', '100ms');
-    /** @type {?} */
-    var hiddenStyleDef = OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
-    return trigger(triggerName, [
-        transition(':enter', [hiddenStyleDef, animate('100ms')]),
-        transition(':leave', [animate('100ms', hiddenStyleDef)])
-    ]);
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var Dimension = /** @class */ (function () {
-    function Dimension(width, height) {
-        this.width = width;
-        this.height = height;
-    }
-    return Dimension;
-}());
-if (false) {
-    /** @type {?} */
-    Dimension.prototype.width;
-    /** @type {?} */
-    Dimension.prototype.height;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var Point = /** @class */ (function () {
-    function Point(x, y) {
-        this.x = x;
-        this.y = y;
-    }
     /**
-     * @param {?} data
+     * @param {?} next
+     * @param {?} previous
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.pushVisitChangesToRoute = /**
+     * @param {?} next
+     * @param {?} previous
+     * @return {?}
+     */
+    function (next, previous) {
+        /** @type {?} */
+        var activatedRoute = this._activatedRouteModel.value;
+        this.placeRouter.pushVisitChangesToRoute(activatedRoute, previous, next);
+    };
+    Object.defineProperty(PlaceOutletComponent.prototype, "activePlaceModel", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._activePlace.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PlaceOutletComponent.prototype, "activatedRouteModel", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._activatedRouteModel.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} routerOutlet
+     * @param {?} place
      * @return {?}
      */
-    Point.from = /**
-     * @param {?} data
+    PlaceOutletComponent.prototype.onOutletActivated = 
+    // @Trace()
+    /**
+     * @param {?} routerOutlet
+     * @param {?} place
      * @return {?}
      */
-    function (data) {
-        return new Point(data.x, data.y);
+    function (routerOutlet, place) {
+        var _this = this;
+        this._inOutletActivation.whileTrue((/**
+         * @return {?}
+         */
+        function () {
+            try {
+                _this._activePlace.value = place;
+                _this._activatedRouteModel.value = routerOutlet.activatedRoute;
+                _this._placeDefinition.value = place.placeDefinition;
+                /** @type {?} */
+                var visitModel = new MutableValueModel();
+                _this._activePlaceVisitModel.setDelegate(visitModel);
+                place.initialiseBindings(visitModel);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }));
+        if (!this.enableAnimation.value) {
+            // we're not animating so trigger any post animation callbacks now.
+            this.animationDone();
+        }
     };
+    // @Trace()
+    // @Trace()
     /**
-     * @param {?} x
-     * @param {?} y
      * @return {?}
      */
-    Point.prototype.translate = /**
-     * @param {?} x
-     * @param {?} y
+    PlaceOutletComponent.prototype.onOutletDeactivated = 
+    // @Trace()
+    /**
      * @return {?}
      */
-    function (x, y) {
-        return new Point(this.x + x, this.y + y);
+    function () {
+        var _this = this;
+        this._inOutletDeactivation.whileTrue((/**
+         * @return {?}
+         */
+        function () {
+            _this._previousPlace.value = _this._activePlace.value;
+            _this._activePlace.value = null;
+            _this._activatedRouteModel.value = null;
+            _this._placeDefinition.value = null;
+            _this._activePlaceVisitModel.setDelegate(null);
+        }));
     };
-    return Point;
-}());
-if (false) {
-    /** @type {?} */
-    Point.prototype.x;
-    /** @type {?} */
-    Point.prototype.y;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var Bounds = /** @class */ (function (_super) {
-    __extends(Bounds, _super);
-    function Bounds(top, left, width, height) {
-        var _this = _super.call(this, width, height) || this;
-        _this.top = top;
-        _this.left = left;
-        _this.width = width;
-        _this.height = height;
-        return _this;
-    }
+    // @Trace()
+    // @Trace()
     /**
-     * @param {?} point
      * @return {?}
      */
-    Bounds.prototype.relativePositionOf = /**
-     * @param {?} point
+    PlaceOutletComponent.prototype.animationStarted = 
+    // @Trace()
+    /**
      * @return {?}
      */
-    function (point) {
-        if (point instanceof MouseEvent) {
-            return new Point(point.clientX - this.left, point.clientY - this.top);
-        }
-        else {
-            return new Point(point.x - this.left, point.y - this.top);
+    function () {
+        // console.log({ activePlace: this._activePlace.value });
+    };
+    // @Trace()
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.animationDone = 
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    function () {
+        if (this._activePlace.value) {
+            this._activePlace.value.onPlaceReady();
         }
     };
-    return Bounds;
-}(Dimension));
+    PlaceOutletComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-place-outlet',
+                    template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n     [@.disabled]=\"!enableAnimation.value\"\n     (@routeAnimations.start)=\"animationStarted()\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated()\">\n  </router-outlet>\n</div>\n\n",
+                    animations: [LEFT_RIGHT_PLACE_ANIMATION],
+                    styles: [":host{display:flex;flex-direction:column;min-height:0;overflow-x:hidden}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
+                }] }
+    ];
+    /** @nocollapse */
+    PlaceOutletComponent.ctorParameters = function () { return [
+        { type: Router },
+        { type: PlaceRouter },
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [AUP_PLACE_CONFIG,] }] },
+        { type: PlaceOutletComponent, decorators: [{ type: SkipSelf }, { type: Optional }] }
+    ]; };
+    PlaceOutletComponent.propDecorators = {
+        animate: [{ type: Input }],
+        animateModel: [{ type: Input, args: ['animateModel',] }],
+        customPlaceAnimationOrderModel: [{ type: Input, args: ['placeAnimationOrderModel',] }],
+        customPlaceAnimationOrder: [{ type: Input, args: ['placeAnimationOrder',] }],
+        placeChanged: [{ type: Output }],
+        routerOut: [{ type: ViewChild, args: ['routeOutlet', { static: true },] }]
+    };
+    __decorate([
+        StoreInValueModel('animateModel'),
+        __metadata("design:type", Boolean)
+    ], PlaceOutletComponent.prototype, "animate", void 0);
+    __decorate([
+        UseDelegate({ defaultValue: true }),
+        __metadata("design:type", ValueModel)
+    ], PlaceOutletComponent.prototype, "animateModel", void 0);
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ListModel)
+    ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
+    __decorate([
+        StoreInListModel('customPlaceAnimationOrderModel'),
+        __metadata("design:type", Array)
+    ], PlaceOutletComponent.prototype, "customPlaceAnimationOrder", void 0);
+    return PlaceOutletComponent;
+}(DisposableComponent));
 if (false) {
     /** @type {?} */
-    Bounds.prototype.top;
+    PlaceOutletComponent.prototype.animate;
     /** @type {?} */
-    Bounds.prototype.left;
+    PlaceOutletComponent.prototype.animateModel;
     /** @type {?} */
-    Bounds.prototype.width;
+    PlaceOutletComponent.prototype.customPlaceAnimationOrderModel;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.customPlaceAnimationOrder;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.placeChanged;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.routerOut;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._activePlace;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._previousPlace;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._activePlaceVisitModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._inOutletActivation;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._inOutletDeactivation;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._inOutletUpdate;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._inRouteVisitUpdate;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._activatedRouteModel;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._placeDefinition;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.parentOutletModel;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.placeAnimationOrder;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.initialPlaceIndex;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.routerVisit;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.ready;
     /** @type {?} */
-    Bounds.prototype.height;
-}
-(function (Bounds) {
+    PlaceOutletComponent.prototype.enableAnimation;
     /**
-     * @param {?} element
-     * @return {?}
+     * @type {?}
+     * @private
      */
-    function ofElement(element) {
-        /** @type {?} */
-        var rect = element.getBoundingClientRect();
-        return new Bounds(rect.top, rect.left, rect.width, rect.height);
-    }
-    Bounds.ofElement = ofElement;
-})(Bounds || (Bounds = {}));
+    PlaceOutletComponent.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype.placeRouter;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.placeConfig;
+}
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var ResizeAwareComponent = /** @class */ (function (_super) {
-    __extends(ResizeAwareComponent, _super);
-    function ResizeAwareComponent(elementRef, ngZone) {
+var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
+    __extends(AbstractPlaceNavigationComponent, _super);
+    function AbstractPlaceNavigationComponent() {
         var _this = _super.call(this) || this;
-        _this.elementRef = elementRef;
-        _this.ngZone = ngZone;
-        _this._boundsModel = new ValueHolder(new Bounds(0, 0, 0, 0));
+        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.placeDefinitions = chain(_this.placesModel).map((/**
+         * @param {?} c
+         * @return {?}
+         */
+        function (c) { return PlaceComponent.getDefinition(c); }));
+        _this.commandFactory = Command.createFactory((/**
+         * @param {?} placeDefinition
+         * @return {?}
+         */
+        function (placeDefinition) {
+            _this.placeOutlet.navigate(new Visit(placeDefinition));
+        }));
+        _this.activePlaceDefinition = chain(_this.placeOutletModel).pullValueModel((/**
+         * @param {?} o
+         * @return {?}
+         */
+        function (o) { return o.activePlaceModel; })).pluck("placeDefinition");
         return _this;
     }
     /**
+     * @param {?} placeDef
      * @return {?}
      */
-    ResizeAwareComponent.prototype.ngAfterViewInit = /**
+    AbstractPlaceNavigationComponent.prototype.getNav = /**
+     * @param {?} placeDef
      * @return {?}
      */
-    function () {
-        var _this = this;
-        this.updateBounds();
-        /** @type {?} */
-        var element = this.elementRef.nativeElement;
+    function (placeDef) {
         /** @type {?} */
-        var ro = new ResizeObserver((/**
-         * @param {?} entries
-         * @param {?} observer
-         * @return {?}
-         */
-        function (entries, observer) {
-            _this.ngZone.run((/**
+        var navItem = (/** @type {?} */ (placeDef.getPlaceData('nav')));
+        return {
+            title: (/**
              * @return {?}
              */
-            function () { return _this.updateBounds(); }));
-        }));
-        ro.observe(element);
-        this.onDispose((/**
-         * @return {?}
-         */
-        function () { return ro.disconnect(); }));
+            function () { return navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title']); }),
+            tooltip: (/**
+             * @return {?}
+             */
+            function () { return navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null); }),
+            icon: (/**
+             * @return {?}
+             */
+            function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); })
+        };
     };
-    Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._boundsModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this.elementRef.nativeElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    // TODO: Make this handle body scroll
-    // TODO: Make this handle body scroll
     /**
-     * @param {?} point
+     * @param {?} place
      * @return {?}
      */
-    ResizeAwareComponent.prototype.relativePositionOf = 
-    // TODO: Make this handle body scroll
-    /**
-     * @param {?} point
+    AbstractPlaceNavigationComponent.prototype.isActive = /**
+     * @param {?} place
      * @return {?}
      */
-    function (point) {
-        return this.bounds.relativePositionOf(point);
+    function (place) {
+        return this.activePlaceDefinition.query().equals(place);
     };
-    Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._boundsModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
-     * @private
      * @return {?}
      */
-    ResizeAwareComponent.prototype.updateBounds = /**
-     * @private
+    AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
     };
-    return ResizeAwareComponent;
+    AbstractPlaceNavigationComponent.decorators = [
+        { type: Component, args: [{
+                    template: ''
+                }] }
+    ];
+    /** @nocollapse */
+    AbstractPlaceNavigationComponent.ctorParameters = function () { return []; };
+    AbstractPlaceNavigationComponent.propDecorators = {
+        places: [{ type: Input }],
+        placesModel: [{ type: Input }],
+        placeOutlet: [{ type: Input }],
+        placeOutletModel: [{ type: Input }]
+    };
+    __decorate([
+        StoreInListModel('placesModel'),
+        __metadata("design:type", Array)
+    ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ListModel)
+    ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
+    __decorate([
+        StoreInValueModel('placeOutletModel'),
+        __metadata("design:type", PlaceOutletComponent)
+    ], AbstractPlaceNavigationComponent.prototype, "placeOutlet", void 0);
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ValueModel)
+    ], AbstractPlaceNavigationComponent.prototype, "placeOutletModel", void 0);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [PlaceDefinition]),
+        __metadata("design:returntype", Object)
+    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+    return AbstractPlaceNavigationComponent;
 }(DisposableComponent));
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    ResizeAwareComponent.prototype._boundsModel;
-    /**
-     * @type {?}
-     * @protected
-     */
-    ResizeAwareComponent.prototype.elementRef;
-    /**
-     * @type {?}
-     * @protected
-     */
-    ResizeAwareComponent.prototype.ngZone;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.places;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placesModel;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeOutlet;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeOutletModel;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeDefinitions;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.commandFactory;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.activePlaceDefinition;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function Alert() { }
-if (false) {
-    /**
-     * @return {?}
-     */
-    Alert.prototype.title = function () { };
+var BusyOverlayComponent = /** @class */ (function () {
+    function BusyOverlayComponent() {
+    }
     /**
      * @return {?}
      */
-    Alert.prototype.content = function () { };
-    /**
+    BusyOverlayComponent.prototype.ngOnInit = /**
      * @return {?}
      */
-    Alert.prototype.ok = function () { };
+    function () {
+    };
+    BusyOverlayComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-busy-overlay',
+                    template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
+                    styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:-ms-grid;display:grid;-ms-grid-columns:auto;grid-template-columns:auto;-ms-grid-rows:auto;grid-template-rows:auto;place-content:center}"]
+                }] }
+    ];
+    /** @nocollapse */
+    BusyOverlayComponent.ctorParameters = function () { return []; };
+    BusyOverlayComponent.propDecorators = {
+        busyModel: [{ type: Input }],
+        busy: [{ type: Input }]
+    };
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ValueModel)
+    ], BusyOverlayComponent.prototype, "busyModel", void 0);
+    __decorate([
+        StoreInValueModel('busyModel'),
+        __metadata("design:type", Boolean)
+    ], BusyOverlayComponent.prototype, "busy", void 0);
+    return BusyOverlayComponent;
+}());
+if (false) {
+    /** @type {?} */
+    BusyOverlayComponent.prototype.busyModel;
+    /** @type {?} */
+    BusyOverlayComponent.prototype.busy;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @record
- */
-function Confirm() { }
-if (false) {
-    /** @type {?|undefined} */
-    Confirm.prototype.destructive;
+var EmptyStateComponent = /** @class */ (function () {
+    function EmptyStateComponent() {
+    }
     /**
      * @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
+    EmptyStateComponent.prototype.ngOnInit = /**
+     * @return {?}
      */
-    function Callback() { }
-    Result.Callback = Callback;
-    if (false) {
-        /** @type {?} */
-        Callback.prototype.then;
-        /** @type {?} */
-        Callback.prototype.catch;
-    }
-})(Result || (Result = {}));
+    function () {
+    };
+    EmptyStateComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-empty-state',
+                    template: "\n      <div class=\"container\">\n          <ng-content></ng-content>\n      </div>\n  ",
+                    styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
+                }] }
+    ];
+    /** @nocollapse */
+    EmptyStateComponent.ctorParameters = function () { return []; };
+    return EmptyStateComponent;
+}());
 
 /**
  * @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.activityClass;
-    /** @type {?} */
-    ActivityOutletContext.prototype.activityData;
+var ListPlaceNavComponent = /** @class */ (function (_super) {
+    __extends(ListPlaceNavComponent, _super);
+    function ListPlaceNavComponent() {
+        var _this = _super.call(this) || this;
+        _this.expanded = true;
+        return _this;
+    }
     /**
-     * @param {?} component
      * @return {?}
      */
-    ActivityOutletContext.prototype.componentReady = function (component) { };
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var InteractionGuard = /** @class */ (function () {
-    function InteractionGuard(router, injector, interactionContext) {
-        this.router = router;
-        this.injector = injector;
-        this.interactionContext = interactionContext;
-    }
+    ListPlaceNavComponent.prototype.expandMenu = /**
+     * @return {?}
+     */
+    function () {
+        this.expanded = true;
+    };
     /**
-     * @param {?} route
-     * @param {?} state
      * @return {?}
      */
-    InteractionGuard.prototype.canActivate = /**
-     * @param {?} route
-     * @param {?} state
+    ListPlaceNavComponent.prototype.collapseMenu = /**
      * @return {?}
      */
-    function (route, state) {
-        return true;
+    function () {
+        this.expanded = false;
     };
     /**
-     * @param {?} component
-     * @param {?} currentRoute
-     * @param {?} currentState
-     * @param {?=} nextState
      * @return {?}
      */
-    InteractionGuard.prototype.canDeactivate = /**
-     * @param {?} component
-     * @param {?} currentRoute
-     * @param {?} currentState
-     * @param {?=} nextState
+    ListPlaceNavComponent.prototype.toggleMenu = /**
      * @return {?}
      */
-    function (component, currentRoute, currentState, nextState) {
-        return !this.interactionContext.isActive();
+    function () {
+        this.expanded = !this.expanded;
     };
-    InteractionGuard.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
+    ListPlaceNavComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-list-place-nav',
+                    template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <mat-icon *ngIf=\"getNav(placeDefinition).icon()\">{{getNav(placeDefinition).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(placeDefinition).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                    styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:rgba(0,0,0,.6)}.mat-list-item.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.9)}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
+                }] }
     ];
     /** @nocollapse */
-    InteractionGuard.ctorParameters = function () { return [
-        { type: Router },
-        { type: Injector },
-        { type: InteractionContext }
-    ]; };
-    /** @nocollapse */ InteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(InteractionContext)); }, token: InteractionGuard, providedIn: "root" });
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
-        __metadata("design:returntype", Object)
-    ], InteractionGuard.prototype, "canActivate", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [NoopComponent, ActivatedRouteSnapshot, RouterStateSnapshot, RouterStateSnapshot]),
-        __metadata("design:returntype", Object)
-    ], InteractionGuard.prototype, "canDeactivate", null);
-    return InteractionGuard;
-}());
+    ListPlaceNavComponent.ctorParameters = function () { return []; };
+    ListPlaceNavComponent.propDecorators = {
+        expanded: [{ type: HostBinding, args: ['class.expanded',] }]
+    };
+    return ListPlaceNavComponent;
+}(AbstractPlaceNavigationComponent));
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionGuard.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionGuard.prototype.injector;
-    /**
-     * @type {?}
-     * @private
-     */
-    InteractionGuard.prototype.interactionContext;
+    /** @type {?} */
+    ListPlaceNavComponent.prototype.expanded;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
+    __extends(TabbedPlaceNavigationComponent, _super);
+    function TabbedPlaceNavigationComponent() {
+        return _super.call(this) || this;
+    }
+    TabbedPlaceNavigationComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-tabbed-place-navigation',
+                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNav(placeDefinition).tooltip()\">\n    <mat-icon *ngIf=\"getNav(placeDefinition).icon()\">{{getNav(placeDefinition).icon()}}</mat-icon>\n    <span>{{getNav(placeDefinition).title()}}</span>\n  </a>\n</nav>\n",
+                    styles: [""]
+                }] }
+    ];
+    /** @nocollapse */
+    TabbedPlaceNavigationComponent.ctorParameters = function () { return []; };
+    return TabbedPlaceNavigationComponent;
+}(AbstractPlaceNavigationComponent));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var PlaceModule = /** @class */ (function () {
+    function PlaceModule() {
+    }
+    PlaceModule.decorators = [
+        { type: NgModule, args: [{
+                    imports: [
+                        CommonModule,
+                        BrowserAnimationsModule,
+                        MatProgressSpinnerModule,
+                        RouterModule,
+                        MatTabsModule,
+                        MatListModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        DirectivesModule
+                    ],
+                    declarations: [
+                        EmptyStateComponent,
+                        BusyOverlayComponent,
+                        PlaceOutletComponent,
+                        TabbedPlaceNavigationComponent,
+                        ListPlaceNavComponent,
+                        AbstractPlaceNavigationComponent,
+                        NoopGatewayPlace
+                    ],
+                    entryComponents: [BusyOverlayComponent],
+                    exports: [
+                        BusyOverlayComponent,
+                        PlaceOutletComponent,
+                        EmptyStateComponent,
+                        TabbedPlaceNavigationComponent,
+                        ListPlaceNavComponent,
+                        AbstractPlaceNavigationComponent
+                    ],
+                    providers: [
+                    // {provide: AUP_PLACE_CONFIG, useValue: {animationDuration: "2000ms"}}
+                    ]
+                },] }
+    ];
+    return PlaceModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var AngularUiPowerupsModule = /** @class */ (function () {
+    function AngularUiPowerupsModule() {
+    }
+    AngularUiPowerupsModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        BrowserAnimationsModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatTabsModule,
+                        DirectivesModule,
+                        ComponentsModule,
+                        PlaceModule,
+                        InteractionModule
+                    ],
+                    exports: [
+                        InteractionModule,
+                        PlaceModule,
+                        DirectivesModule,
+                        ComponentsModule,
+                        NoopComponent
+                    ]
+                },] }
+    ];
+    return AngularUiPowerupsModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var defaultHiddenStyleDef = style({
+    opacity: 0,
+    'height': '0',
+    paddingTop: '0',
+    paddingBottom: '0'
+});
+/**
+ * @param {?} triggerName
+ * @param {?=} options
+ * @return {?}
+ */
+function slideDownAndUpAnimation(triggerName, options) {
+    // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
+    /** @type {?} */
+    var duration = OptionsHelper.get(options).getOptional('duration', '100ms');
+    /** @type {?} */
+    var hiddenStyleDef = OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
+    return trigger(triggerName, [
+        transition(':enter', [hiddenStyleDef, animate('100ms')]),
+        transition(':leave', [animate('100ms', hiddenStyleDef)])
+    ]);
+}
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+
 /**
- * @record
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-function NavItem() { }
+var Dimension = /** @class */ (function () {
+    function Dimension(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+    return Dimension;
+}());
 if (false) {
+    /** @type {?} */
+    Dimension.prototype.width;
+    /** @type {?} */
+    Dimension.prototype.height;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var Point = /** @class */ (function () {
+    function Point(x, y) {
+        this.x = x;
+        this.y = y;
+    }
     /**
+     * @param {?} data
      * @return {?}
      */
-    NavItem.prototype.title = function () { };
-    /**
+    Point.from = /**
+     * @param {?} data
      * @return {?}
      */
-    NavItem.prototype.icon = function () { };
+    function (data) {
+        return new Point(data.x, data.y);
+    };
     /**
+     * @param {?} x
+     * @param {?} y
      * @return {?}
      */
-    NavItem.prototype.tooltip = function () { };
+    Point.prototype.translate = /**
+     * @param {?} x
+     * @param {?} y
+     * @return {?}
+     */
+    function (x, y) {
+        return new Point(this.x + x, this.y + y);
+    };
+    return Point;
+}());
+if (false) {
+    /** @type {?} */
+    Point.prototype.x;
+    /** @type {?} */
+    Point.prototype.y;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @param {?} options
- * @return {?}
- */
-function Place(options) {
-    return (/**
-     * @param {?} target
+var Bounds = /** @class */ (function (_super) {
+    __extends(Bounds, _super);
+    function Bounds(top, left, width, height) {
+        var _this = _super.call(this, width, height) || this;
+        _this.top = top;
+        _this.left = left;
+        _this.width = width;
+        _this.height = height;
+        return _this;
+    }
+    /**
+     * @param {?} point
      * @return {?}
      */
-    function (target) {
-        if (PlaceComponent.isPlaceComponentConstructor(target)) {
-            PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, isNil(options.authenticate) ? false : options.authenticate, options.data, PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
-             * @param {?} c
-             * @return {?}
-             */
-            function (c) { return PlaceComponent.getDefinition(c); }))));
+    Bounds.prototype.relativePositionOf = /**
+     * @param {?} point
+     * @return {?}
+     */
+    function (point) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
         }
         else {
-            lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
+            return new Point(point.x - this.left, point.y - this.top);
         }
-    });
+    };
+    return Bounds;
+}(Dimension));
+if (false) {
+    /** @type {?} */
+    Bounds.prototype.top;
+    /** @type {?} */
+    Bounds.prototype.left;
+    /** @type {?} */
+    Bounds.prototype.width;
+    /** @type {?} */
+    Bounds.prototype.height;
 }
-(function (Place) {
+(function (Bounds) {
     /**
-     * @record
+     * @param {?} element
+     * @return {?}
      */
-    function Options() { }
-    Place.Options = Options;
-    if (false) {
+    function ofElement(element) {
         /** @type {?} */
-        Options.prototype.path;
-        /** @type {?|undefined} */
-        Options.prototype.data;
-        /** @type {?|undefined} */
-        Options.prototype.authenticate;
-        /** @type {?|undefined} */
-        Options.prototype.children;
-        /** @type {?|undefined} */
-        Options.prototype.defaultChild;
+        var rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
     }
-})(Place || (Place = {}));
+    Bounds.ofElement = ofElement;
+})(Bounds || (Bounds = {}));
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// WARNING: interface has both a type and a value, skipping emit
-var Formatter;
-(function (Formatter) {
-    var StringType = /** @class */ (function () {
-        function StringType() {
-        }
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        StringType.prototype.format = /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            return value;
-        };
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        StringType.prototype.parse = /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            return value;
-        };
-        return StringType;
-    }());
-    var NumberType = /** @class */ (function () {
-        function NumberType() {
-        }
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        NumberType.prototype.format = /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            return ___default.isNumber(value) && !___default.isNaN(value) ? "" + value : null;
-        };
-        /**
-         * @param {?} value
-         * @return {?}
-         */
-        NumberType.prototype.parse = /**
-         * @param {?} value
+var ResizeAwareComponent = /** @class */ (function (_super) {
+    __extends(ResizeAwareComponent, _super);
+    function ResizeAwareComponent(elementRef, ngZone) {
+        var _this = _super.call(this) || this;
+        _this.elementRef = elementRef;
+        _this.ngZone = ngZone;
+        _this._boundsModel = new ValueHolder(new Bounds(0, 0, 0, 0));
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    ResizeAwareComponent.prototype.ngAfterViewInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.updateBounds();
+        /** @type {?} */
+        var element = this.elementRef.nativeElement;
+        /** @type {?} */
+        var ro = new ResizeObserver((/**
+         * @param {?} entries
+         * @param {?} observer
          * @return {?}
          */
-        function (value) {
-            /** @type {?} */
-            var parsed = Number.parseFloat(value);
-            return ___default.isNaN(parsed) ? null : parsed;
-        };
-        return NumberType;
-    }());
-    var BooleanType = /** @class */ (function () {
-        function BooleanType() {
-        }
-        /**
-         * @param {?} value
+        function (entries, observer) {
+            _this.ngZone.run((/**
+             * @return {?}
+             */
+            function () { return _this.updateBounds(); }));
+        }));
+        ro.observe(element);
+        this.onDispose((/**
          * @return {?}
          */
-        BooleanType.prototype.format = /**
-         * @param {?} value
+        function () { return ro.disconnect(); }));
+    };
+    Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
+        get: /**
          * @return {?}
          */
-        function (value) {
-            return value ? 'true' : 'false';
-        };
-        /**
-         * @param {?} value
+        function () {
+            return this._boundsModel.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
+        get: /**
          * @return {?}
          */
-        BooleanType.prototype.parse = /**
-         * @param {?} value
+        function () {
+            return this.elementRef.nativeElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // 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 (value) {
-            return value === 'true';
-        };
-        return BooleanType;
-    }());
-    Formatter.STRING = new StringType();
-    Formatter.NUMBER = new NumberType();
-    Formatter.BOOLEAN = new BooleanType();
-})(Formatter || (Formatter = {}));
+        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
  */
+
 /**
- * @record
+ * @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
  */
-function JsonArray() { }
 /**
  * @record
  */
-function JsonMap() { }
+function Alert() { }
+if (false) {
+    /**
+     * @return {?}
+     */
+    Alert.prototype.title = function () { };
+    /**
+     * @return {?}
+     */
+    Alert.prototype.content = function () { };
+    /**
+     * @return {?}
+     */
+    Alert.prototype.ok = function () { };
+}
 
 /**
  * @fileoverview added by tsickle
@@ -5954,131 +6029,150 @@ function JsonMap() { }
  */
 /**
  * @record
- * @template T
  */
-function RouteIdOptions() { }
+function Confirm() { }
 if (false) {
     /** @type {?|undefined} */
-    RouteIdOptions.prototype.as;
-    /** @type {?|undefined} */
-    RouteIdOptions.prototype.optional;
-    /** @type {?|undefined} */
-    RouteIdOptions.prototype.remember;
-    /** @type {?|undefined} */
-    RouteIdOptions.prototype.defaultValue;
+    Confirm.prototype.destructive;
+    /**
+     * @return {?}
+     */
+    Confirm.prototype.cancel = function () { };
 }
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
 /**
  * @record
- * @template T
+ * @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
  */
-function RouteParameterOptions() { }
-if (false) {
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.as;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.optional;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.remember;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    RouteParameterOptions.prototype.storeInUrl;
-}
 /**
  * @record
- * @template T
+ * @template D, R, E
  */
-function RouteListParameterOptions() { }
+function ActivityOutletContext() { }
 if (false) {
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.as;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.optional;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.remember;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.defaultValue;
-    /** @type {?|undefined} */
-    RouteListParameterOptions.prototype.storeInUrl;
+    /** @type {?} */
+    ActivityOutletContext.prototype.activityClass;
+    /** @type {?} */
+    ActivityOutletContext.prototype.activityData;
+    /**
+     * @param {?} component
+     * @return {?}
+     */
+    ActivityOutletContext.prototype.componentReady = function (component) { };
 }
+
 /**
- * @template T
- * @param {?} type
- * @param {?=} options
- * @return {?}
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-function RouteId(type, options) {
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
+var InteractionGuard = /** @class */ (function () {
+    function InteractionGuard(router, injector, interactionContext) {
+        this.router = router;
+        this.injector = injector;
+        this.interactionContext = interactionContext;
+    }
+    /**
+     * @param {?} route
+     * @param {?} state
+     * @return {?}
+     */
+    InteractionGuard.prototype.canActivate = /**
+     * @param {?} route
+     * @param {?} state
+     * @return {?}
+     */
+    function (route, state) {
+        return true;
+    };
+    /**
+     * @param {?} component
+     * @param {?} currentRoute
+     * @param {?} currentState
+     * @param {?=} nextState
      * @return {?}
      */
-    function (prototype, propertyKey) {
-        /** @type {?} */
-        var param = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
-/**
- * @template T
- * @param {?=} options
- * @return {?}
- */
-function VisitParameter(options) {
-    /** @type {?} */
-    var opts = Opts.get(options);
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
-     * @return {?}
+    InteractionGuard.prototype.canDeactivate = /**
+     * @param {?} component
+     * @param {?} currentRoute
+     * @param {?} currentState
+     * @param {?=} nextState
+     * @return {?}
+     */
+    function (component, currentRoute, currentState, nextState) {
+        return !this.interactionContext.isActive();
+    };
+    InteractionGuard.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    InteractionGuard.ctorParameters = function () { return [
+        { type: Router },
+        { type: Injector },
+        { type: InteractionContext }
+    ]; };
+    /** @nocollapse */ InteractionGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(InteractionContext)); }, token: InteractionGuard, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [ActivatedRouteSnapshot, RouterStateSnapshot]),
+        __metadata("design:returntype", Object)
+    ], InteractionGuard.prototype, "canActivate", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [NoopComponent, ActivatedRouteSnapshot, RouterStateSnapshot, RouterStateSnapshot]),
+        __metadata("design:returntype", Object)
+    ], InteractionGuard.prototype, "canDeactivate", null);
+    return InteractionGuard;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    InteractionGuard.prototype.router;
+    /**
+     * @type {?}
+     * @private
      */
-    function (prototype, propertyKey) {
-        /** @type {?} */
-        var param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
-}
-/**
- * @template E
- * @param {?=} options
- * @return {?}
- */
-function VisitParameterList(options) {
-    /** @type {?} */
-    var opts = Opts.get(options);
-    return (/**
-     * @param {?} prototype
-     * @param {?} propertyKey
-     * @return {?}
+    InteractionGuard.prototype.injector;
+    /**
+     * @type {?}
+     * @private
      */
-    function (prototype, propertyKey) {
-        /** @type {?} */
-        var param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
-        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        UseDelegate()(prototype, propertyKey);
-    });
+    InteractionGuard.prototype.interactionContext;
 }
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/**
- * @record
- * @template S
- */
-function ParameterSanitiser() { }
-if (false) {
-    /**
-     * @param {?} parameterValue
-     * @param {?=} visit
-     * @param {?=} injector
-     * @return {?}
-     */
-    ParameterSanitiser.prototype.sanitise = function (parameterValue, visit, injector) { };
-}
 
 /**
  * @fileoverview added by tsickle
@@ -6086,18 +6180,21 @@ if (false) {
  */
 /**
  * @record
- * @template T
  */
-function ParameterSnapshot() { }
+function NavItem() { }
 if (false) {
-    /** @type {?} */
-    ParameterSnapshot.prototype.definition;
-    /** @type {?} */
-    ParameterSnapshot.prototype.value;
     /**
      * @return {?}
      */
-    ParameterSnapshot.prototype.isMissing = function () { };
+    NavItem.prototype.title = function () { };
+    /**
+     * @return {?}
+     */
+    NavItem.prototype.icon = function () { };
+    /**
+     * @return {?}
+     */
+    NavItem.prototype.tooltip = function () { };
 }
 
 /**
@@ -6201,8 +6298,14 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var EnterPlaceGuard = /** @class */ (function () {
-    function EnterPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
+/**
+ * @abstract
+ */
+var  /**
+ * @abstract
+ */
+AbstractEnterPlaceGuard = /** @class */ (function () {
+    function AbstractEnterPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
         this.router = router;
         this.urlSerializer = urlSerializer;
         this.placeRouter = placeRouter;
@@ -6216,7 +6319,7 @@ var EnterPlaceGuard = /** @class */ (function () {
      * @param {?} state
      * @return {?}
      */
-    EnterPlaceGuard.prototype.canActivate = 
+    AbstractEnterPlaceGuard.prototype.canActivate = 
     // @Trace()
     /**
      * @param {?} activatedRoute
@@ -6225,85 +6328,177 @@ var EnterPlaceGuard = /** @class */ (function () {
      */
     function (activatedRoute, state) {
         return __awaiter(this, void 0, void 0, function () {
-            var placeDefinition, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, commands;
+            var _this = this;
             return __generator(this, function (_a) {
-                switch (_a.label) {
+                return [2 /*return*/, this.interceptInitialRouteOtherwise(activatedRoute, state, (/**
+                     * @return {?}
+                     */
+                    function () {
+                        return _this.authorisePlaceThen(activatedRoute, state, (/**
+                         * @param {?} placeDefinition
+                         * @return {?}
+                         */
+                        function (placeDefinition) { return __awaiter(_this, void 0, void 0, function () {
+                            var params, parsedParams, initialVisit, sanitiser, sanitisedVisit, commands;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        // Parse our route params.
+                                        params = new AbstractEnterPlaceGuard.ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                                        parsedParams = placeDefinition.parseRouteParams(params);
+                                        initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
+                                        sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
+                                        return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                                    case 1:
+                                        sanitisedVisit = _a.sent();
+                                        // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
+                                        this.placeRouter.navigationSession.storeVisit(sanitisedVisit);
+                                        if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
+                                            // Regenerate the url
+                                            commands = this.placeRouter.parseUrl(state).createRedirectCommandsFor(sanitisedVisit);
+                                            console.log('##### Place Guard Redirect', commands);
+                                            return [2 /*return*/, this.router.createUrlTree(commands, {
+                                                    replaceUrl: true,
+                                                    skipLocationChange: false
+                                                })];
+                                        }
+                                        else {
+                                            return [2 /*return*/, true];
+                                        }
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); }));
+                    }))];
+            });
+        });
+    };
+    /**
+     * @protected
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @param {?} canActivate
+     * @return {?}
+     */
+    AbstractEnterPlaceGuard.prototype.authorisePlaceThen = /**
+     * @protected
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @param {?} canActivate
+     * @return {?}
+     */
+    function (activatedRoute, state, canActivate) {
+        return __awaiter(this, void 0, void 0, function () {
+            var placeDefinition, authorised, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        if (!PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 2];
+                        if (!PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 4];
                         placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
-                        // Parse our route params.
-                        params = new EnterPlaceGuard.ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
-                        parsedParams = placeDefinition.parseRouteParams(params);
-                        initialVisit = this.placeRouter.navigationSession.getVisitFor(placeDefinition) || new Visit(placeDefinition, parsedParams);
-                        sanitiser = new VisitSanitiser(activatedRoute, this.router, this.placeHistory, this.injector);
-                        return [4 /*yield*/, sanitiser.sanitise(initialVisit.mergeRouteParameters(parsedParams))];
+                        if (!placeDefinition.authenticate) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.isAuthorised(activatedRoute, state)];
                     case 1:
-                        sanitisedVisit = _a.sent();
-                        // Save the visit with any updated parameters.  We need to save it so we remember any non route parameters
-                        this.placeRouter.navigationSession.storeVisit(sanitisedVisit);
-                        if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
-                            // Regenerate the url
-                            commands = this.placeRouter.parseUrl(state).createRedirectCommandsFor(sanitisedVisit);
-                            console.log('##### Place Guard Redirect', commands);
-                            return [2 /*return*/, this.router.createUrlTree(commands, {
-                                    replaceUrl: true,
-                                    skipLocationChange: false
-                                })];
-                        }
-                        else {
-                            return [2 /*return*/, true];
-                        }
+                        _a = _b.sent();
                         return [3 /*break*/, 3];
-                    case 2: return [2 /*return*/, lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
-                    case 3: return [2 /*return*/];
+                    case 2:
+                        _a = true;
+                        _b.label = 3;
+                    case 3:
+                        authorised = _a;
+                        return [2 /*return*/, authorised === true ? canActivate(placeDefinition) : authorised];
+                    case 4: return [2 /*return*/, lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
                 }
             });
         });
     };
-    EnterPlaceGuard.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    EnterPlaceGuard.ctorParameters = function () { return [
-        { type: Router },
-        { type: UrlSerializer },
-        { type: PlaceRouter },
-        { type: PlaceHistory },
-        { type: Injector }
-    ]; };
-    /** @nocollapse */ EnterPlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function EnterPlaceGuard_Factory() { return new EnterPlaceGuard(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(PlaceRouter), ɵɵinject(PlaceHistory), ɵɵinject(INJECTOR)); }, token: EnterPlaceGuard, providedIn: "root" });
-    return EnterPlaceGuard;
+    /**
+     * @protected
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @param {?} canActivate
+     * @return {?}
+     */
+    AbstractEnterPlaceGuard.prototype.interceptInitialRouteOtherwise = /**
+     * @protected
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @param {?} canActivate
+     * @return {?}
+     */
+    function (activatedRoute, state, canActivate) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                // TODO: this all only sort of works.  Opening dialogs and clicking back multiple times breaks things.
+                // TODO: next stage is to investigate tracking dialog state in a different placeoutlet and keeping those
+                // TODO: urls out of the history.
+                if (this.placeRouter.isInitialNavigation()) {
+                    // This is the very first entry into our app so we redirect to a dummy place so we can get bump our
+                    // history by one.  This ensures that we can capture back button presses on the initial page without
+                    // leaving our app.
+                    return [2 /*return*/, this.placeRouter.performInitialNavigationIntercept(activatedRoute, state)];
+                }
+                else {
+                    return [2 /*return*/, canActivate()];
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    AbstractEnterPlaceGuard.prototype.isAuthorised = /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    function (activatedRoute, state) {
+        return __awaiter(this, void 0, void 0, function () {
+            var authorised;
+            return __generator(this, function (_a) {
+                authorised = this.getAuthGuard(this.injector).canActivate(activatedRoute, state);
+                return [2 /*return*/, (authorised instanceof Observable) ? authorised.toPromise() : authorised];
+            });
+        });
+    };
+    return AbstractEnterPlaceGuard;
 }());
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    EnterPlaceGuard.prototype.router;
+    AbstractEnterPlaceGuard.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    EnterPlaceGuard.prototype.urlSerializer;
+    AbstractEnterPlaceGuard.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    EnterPlaceGuard.prototype.placeRouter;
+    AbstractEnterPlaceGuard.prototype.placeRouter;
     /**
      * @type {?}
      * @private
      */
-    EnterPlaceGuard.prototype.placeHistory;
+    AbstractEnterPlaceGuard.prototype.placeHistory;
     /**
      * @type {?}
      * @private
      */
-    EnterPlaceGuard.prototype.injector;
+    AbstractEnterPlaceGuard.prototype.injector;
+    /**
+     * @abstract
+     * @param {?} injector
+     * @return {?}
+     */
+    AbstractEnterPlaceGuard.prototype.getAuthGuard = function (injector) { };
 }
-(function (EnterPlaceGuard) {
+(function (AbstractEnterPlaceGuard) {
     /**
      * This a work around for the fact that an activated route with multiple segments doesn't
      * include the segment params in the paramMap as well as each segment returns an empty
@@ -6392,7 +6587,7 @@ if (false) {
         ], ConsolidatedParameterMap.prototype, "keys", null);
         return ConsolidatedParameterMap;
     }());
-    EnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
+    AbstractEnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
     if (false) {
         /**
          * @type {?}
@@ -6458,7 +6653,7 @@ if (false) {
          */
         ParamMapAdapter.prototype.params;
     }
-})(EnterPlaceGuard || (EnterPlaceGuard = {}));
+})(AbstractEnterPlaceGuard || (AbstractEnterPlaceGuard = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -6509,6 +6704,93 @@ if (false) {
     LeavePlaceGuard.prototype.placeRouter;
 }
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NoopAuthGuard = /** @class */ (function () {
+    function NoopAuthGuard() {
+    }
+    /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    NoopAuthGuard.prototype.canActivate = /**
+     * @param {?} activatedRoute
+     * @param {?} state
+     * @return {?}
+     */
+    function (activatedRoute, state) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, true];
+            });
+        });
+    };
+    NoopAuthGuard.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    NoopAuthGuard.ctorParameters = function () { return []; };
+    /** @nocollapse */ NoopAuthGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function NoopAuthGuard_Factory() { return new NoopAuthGuard(); }, token: NoopAuthGuard, providedIn: "root" });
+    return NoopAuthGuard;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ */
+function JsonArray() { }
+/**
+ * @record
+ */
+function JsonMap() { }
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ * @template S
+ */
+function ParameterSanitiser() { }
+if (false) {
+    /**
+     * @param {?} parameterValue
+     * @param {?=} visit
+     * @param {?=} injector
+     * @return {?}
+     */
+    ParameterSanitiser.prototype.sanitise = function (parameterValue, visit, injector) { };
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @record
+ * @template T
+ */
+function ParameterSnapshot() { }
+if (false) {
+    /** @type {?} */
+    ParameterSnapshot.prototype.definition;
+    /** @type {?} */
+    ParameterSnapshot.prototype.value;
+    /**
+     * @return {?}
+     */
+    ParameterSnapshot.prototype.isMissing = function () { };
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -6529,5 +6811,5 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EnterPlaceGuard, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NavigationSession, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, InteractionModule as ɵba, ActivityContainerComponent as ɵbb, ActivityOutletComponent as ɵbc, ConfirmationDialogComponent as ɵbd, AbstractActivity as ɵbe, ACTIVITY_DATA as ɵbf, Activity as ɵbg, ConfirmThenDialogComponent as ɵbi, AlertDialogComponent as ɵbj, InteractionOutletComponent as ɵbl, InplaceInteractionContextComponent as ɵbm, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbn, DialogInteractionService as ɵbo, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, NoopComponent as ɵk, PlaceModule as ɵl, EmptyStateComponent as ɵm, BusyOverlayComponent as ɵn, PlaceOutletComponent as ɵo, leftRightPlaceAnimation as ɵp, LEFT_RIGHT_PLACE_ANIMATION as ɵq, AUP_PLACE_CONFIG as ɵr, PlaceRouter as ɵt, NavigationSession as ɵu, InteractionContext as ɵv, PlaceHistory as ɵw, TabbedPlaceNavigationComponent as ɵx, AbstractPlaceNavigationComponent as ɵy, ListPlaceNavComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractActivity, AbstractEnterPlaceGuard, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InplaceInteractionContextComponent, InteractionContext, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NavigationSession, NoopAuthGuard, NoopComponent, NoopGatewayPlace, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, PlaceComponent as ɵba, Place as ɵbb, VisitParameter as ɵbc, Formatter as ɵbd, InteractionModule as ɵbe, ActivityContainerComponent as ɵbf, ActivityOutletComponent as ɵbg, ConfirmationDialogComponent as ɵbh, AbstractActivity as ɵbi, ACTIVITY_DATA as ɵbj, Activity as ɵbk, ConfirmThenDialogComponent as ɵbm, AlertDialogComponent as ɵbn, InteractionOutletComponent as ɵbp, InplaceInteractionContextComponent as ɵbq, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbr, DialogInteractionService as ɵbs, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, NoopComponent as ɵk, PlaceModule as ɵl, EmptyStateComponent as ɵm, BusyOverlayComponent as ɵn, PlaceOutletComponent as ɵo, leftRightPlaceAnimation as ɵp, LEFT_RIGHT_PLACE_ANIMATION as ɵq, AUP_PLACE_CONFIG as ɵr, PlaceRouter as ɵt, InteractionContext as ɵu, PlaceHistory as ɵv, TabbedPlaceNavigationComponent as ɵw, AbstractPlaceNavigationComponent as ɵx, ListPlaceNavComponent as ɵy, NoopGatewayPlace as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map