@coolon/angular-ui-powerups 0.0.92 → 0.0.94

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/router'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@angular/router', 'lodash', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.ng.router, global.___default, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver));
-}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, ___default, typescriptUtilities, dialog, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/router'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/material/tabs', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@angular/router', 'lodash', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/icon', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.material.tabs, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.ng.router, global.___default, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.icon, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.rxjs));
+}(this, function (exports, common, core, forms, material, tabs, animations, pectin, portal, router, ___default, typescriptUtilities, dialog, icon, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
@@ -1272,7 +1272,7 @@
      * @abstract
      * @template D, R, E
      */
-    exports.ɵbf = /** @class */ (function (_super) {
+    exports.ɵbk = /** @class */ (function (_super) {
         __extends(Activity, _super);
         function Activity() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -1362,12 +1362,12 @@
          * @type {?}
          * @private
          */
-        exports.ɵbf.prototype._busyModel;
+        exports.ɵbk.prototype._busyModel;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵbf.prototype._activityContext;
+        exports.ɵbk.prototype._activityContext;
     }
     (function (Activity) {
         /**
@@ -1382,7 +1382,7 @@
             /** @type {?} */
             Callbacks.prototype.onCancel;
         }
-    })(exports.ɵbf || (exports.ɵbf = {}));
+    })(exports.ɵbk || (exports.ɵbk = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1539,7 +1539,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return AbstractActivity;
-    }(exports.ɵbf));
+    }(exports.ɵbk));
 
     /**
      * @fileoverview added by tsickle
@@ -1585,7 +1585,7 @@
     /**
      * @template D, R, E
      */
-    exports.ɵbh = /** @class */ (function (_super) {
+    exports.ɵbm = /** @class */ (function (_super) {
         __extends(ConfirmThenDialogComponent, _super);
         function ConfirmThenDialogComponent(config, interactionContext) {
             var _this = _super.call(this) || this;
@@ -1657,9 +1657,9 @@
     }(AbstractActivity));
     if (false) {
         /** @type {?} */
-        exports.ɵbh.prototype.config;
+        exports.ɵbm.prototype.config;
         /** @type {?} */
-        exports.ɵbh.prototype.interactionContext;
+        exports.ɵbm.prototype.interactionContext;
     }
     (function (ConfirmThenDialogComponent) {
         /**
@@ -1676,7 +1676,7 @@
             /** @type {?} */
             Data.prototype.data;
         }
-    })(exports.ɵbh || (exports.ɵbh = {}));
+    })(exports.ɵbm || (exports.ɵbm = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -2040,7 +2040,7 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this.startActivity(exports.ɵbh, {
+            return this.startActivity(exports.ɵbm, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
@@ -2287,7 +2287,7 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this._startActivity(exports.ɵbh, {
+            return this._startActivity(exports.ɵbm, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
@@ -2528,7 +2528,7 @@
              * @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");
@@ -2589,7 +2589,7 @@
                  */
                 function () {
                     _this._inActivityPromise.value = false;
-                    console.log('######  FINISHED');
+                    // console.log('######  FINISHED');
                     // this.currentActivityId = null;
                     self.safelyUpdateActivityListDelegate(null);
                 }));
@@ -2654,7 +2654,7 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this._startActivity(exports.ɵbh, {
+            return this._startActivity(exports.ɵbm, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
@@ -2722,7 +2722,7 @@
                         declarations: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbh,
+                            exports.ɵbm,
                             AlertDialogComponent,
                             ActivityOutletComponent,
                             InteractionOutletComponent,
@@ -2737,7 +2737,7 @@
                         entryComponents: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbh,
+                            exports.ɵbm,
                             AlertDialogComponent
                         ],
                         providers: [
@@ -3374,7 +3374,7 @@
     // this one seems ok.
     /** @type {?} */
     var ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
-    exports.PlaceComponent = /** @class */ (function (_super) {
+    exports.ɵba = /** @class */ (function (_super) {
         __extends(PlaceComponent, _super);
         function PlaceComponent() {
             return _super.call(this) || this;
@@ -3481,9 +3481,9 @@
          * @type {?}
          * @private
          */
-        exports.PlaceComponent.prototype.visit;
+        exports.ɵba.prototype.visit;
         /** @type {?} */
-        exports.PlaceComponent.prototype.interactionContext;
+        exports.ɵba.prototype.interactionContext;
     }
     (function (PlaceComponent) {
         /**
@@ -3519,7 +3519,7 @@
             Reflect.defineMetadata(DEFINITION_META_DATA_KEY, definition, klass);
         }
         PlaceComponent.injectDefinition = injectDefinition;
-    })(exports.PlaceComponent || (exports.PlaceComponent = {}));
+    })(exports.ɵba || (exports.ɵba = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -4141,1993 +4141,2070 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.ɵt = /** @class */ (function (_super) {
-        __extends(PlaceRouter, _super);
-        function PlaceRouter(router$1, urlSerializer, interactionContext, angularLocation, placeHistory) {
-            var _this = _super.call(this) || this;
-            _this.router = router$1;
-            _this.urlSerializer = urlSerializer;
-            _this.interactionContext = interactionContext;
-            _this.angularLocation = angularLocation;
-            _this.placeHistory = placeHistory;
-            _this.firstRoute = true;
-            _this._navigationSessionModel = new pectin.MutableValueModel();
-            _this._activeVisits = new pectin.MutableListModel();
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.activeVisitIndex = chain(_this._activeVisits).indexBy('placeDefinition');
-            _this.navigationSessionFactory = new exports.NavigationSession.Factory(interactionContext);
-            angularLocation.onUrlChange((/**
-             * @param {?} url
-             * @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
-             * @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 router.NavigationStart) {
-                    _this.onAngularRouterStarted(event);
-                }
-                if (event instanceof router.NavigationEnd) {
-                    _this.onAngularRouterFinished(false);
-                }
-                if (event instanceof router.NavigationError) {
-                    _this.onAngularRouterFinished(true);
-                }
-            }));
-            _this.navigationSessionActive = chain(_this.navigationSessionModel).isNotNil();
-            _this.navigationSessionActive.subscribe((/**
-             * @param {?} active
-             * @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: /**
-             * @return {?}
-             */
-            function () {
-                return this._navigationSessionModel.value;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(PlaceRouter.prototype, "navigationSessionModel", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._navigationSessionModel.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(PlaceRouter.prototype, "activeVisits", {
-            get: /**
-             * @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
+    /**
+     * @param {?} options
+     * @return {?}
+     */
+    function Place(options) {
+        return (/**
+         * @param {?} target
          * @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
+        function (target) {
+            if (exports.ɵba.isPlaceComponentConstructor(target)) {
+                exports.ɵba.injectDefinition(target, new exports.PlaceDefinition(target, options.path, ___default.isNil(options.authenticate) ? false : options.authenticate, options.data, exports.ɵba.getRouteParameters(target), (options.children || []).map((/**
+                 * @param {?} c
                  * @return {?}
                  */
-                function (v) { return _this.placeHistory.add(v); }));
-                this._activeVisits.value = visits;
+                function (c) { return exports.ɵba.getDefinition(c); }))));
             }
             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);
-                }
+                pectin.lang.illegalState(target + " must extend PlaceComponent to use the @Place decorator");
             }
-            this._navigationSessionModel.value = null;
-        };
-        /**
-         * @param {?} activatedRoute
-         * @return {?}
-         */
-        PlaceRouter.prototype.extractChildPath = /**
-         * @param {?} activatedRoute
-         * @return {?}
-         */
-        function (activatedRoute) {
-            return ___default__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: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceRouter.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: router.UrlSerializer },
-            { type: InteractionContext },
-            { type: common.Location },
-            { type: PlaceHistory }
-        ]; };
-        /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(router.UrlSerializer), core.ɵɵinject(InteractionContext), core.ɵɵinject(common.Location), core.ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Visit, Object]),
-            __metadata("design:returntype", Promise)
-        ], PlaceRouter.prototype, "navigate", null);
-        return PlaceRouter;
-    }(pectin.GarbageCollector));
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵt.prototype.firstRoute;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵt.prototype._navigationSessionModel;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵt.prototype._activeVisits;
-        /** @type {?} */
-        exports.ɵt.prototype.navigationSessionActive;
-        /** @type {?} */
-        exports.ɵt.prototype.activeVisitIndex;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵt.prototype.navigationSessionFactory;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵt.prototype.router;
-        /**
-         * @type {?}
-         * @private
-         */
-        exports.ɵt.prototype.urlSerializer;
+        });
+    }
+    (function (Place) {
         /**
-         * @type {?}
-         * @private
+         * @record
          */
-        exports.ɵt.prototype.interactionContext;
-        /** @type {?} */
-        exports.ɵt.prototype.angularLocation;
-        /** @type {?} */
-        exports.ɵt.prototype.placeHistory;
-    }
-    (function (PlaceRouter) {
-        var UrlHelper = /** @class */ (function () {
-            function UrlHelper(urlTree) {
-                this.urlTree = urlTree;
-                console.log({ segments: this.urlTree.root.children.primary.segments });
+        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
+
+    (function (Formatter) {
+        var StringType = /** @class */ (function () {
+            function StringType() {
             }
             /**
+             * @param {?} value
              * @return {?}
              */
-            UrlHelper.prototype.cloneUrlSegmentList = /**
+            StringType.prototype.format = /**
+             * @param {?} value
              * @return {?}
              */
-            function () {
-                return __spread(this.urlTree.root.children.primary.segments);
+            function (value) {
+                return value;
             };
             /**
-             * @param {?} visit
+             * @param {?} value
              * @return {?}
              */
-            UrlHelper.prototype.updateVisitSegments = /**
-             * @param {?} visit
+            StringType.prototype.parse = /**
+             * @param {?} value
              * @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 (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;
+            function (value) {
+                return value;
             };
+            return StringType;
+        }());
+        var NumberType = /** @class */ (function () {
+            function NumberType() {
+            }
             /**
-             * 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 router.UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
-                        new router.UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
-                    ]
-                    :
-                        [
-                            new router.UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit))
-                        ];
+             * @param {?} value
+             * @return {?}
+             */
+            NumberType.prototype.format = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return ___default__default.isNumber(value) && !___default__default.isNaN(value) ? "" + value : null;
             };
             /**
-             * @param {?} visit
+             * @param {?} value
              * @return {?}
              */
-            UrlHelper.prototype.createRedirectCommandsFor = /**
-             * @param {?} visit
+            NumberType.prototype.parse = /**
+             * @param {?} value
              * @return {?}
              */
-            function (visit) {
-                /** @type {?} */
-                var segments = this.updateVisitSegments(visit);
+            function (value) {
                 /** @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;
+                var parsed = Number.parseFloat(value);
+                return ___default__default.isNaN(parsed) ? null : parsed;
             };
+            return NumberType;
+        }());
+        var BooleanType = /** @class */ (function () {
+            function BooleanType() {
+            }
             /**
-             * @param {?} placeDef
+             * @param {?} value
              * @return {?}
              */
-            UrlHelper.prototype.includesPathOf = /**
-             * @param {?} placeDef
+            BooleanType.prototype.format = /**
+             * @param {?} value
              * @return {?}
              */
-            function (placeDef) {
-                return this.cloneUrlSegmentList().find((/**
-                 * @param {?} s
-                 * @return {?}
-                 */
-                function (s) { return s.path === placeDef.path; }));
+            function (value) {
+                return value ? 'true' : 'false';
             };
-            __decorate([
-                pectin.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
+             * @param {?} value
+             * @return {?}
              */
-            UrlHelper.prototype.urlTree;
-        }
-    })(exports.ɵt || (exports.ɵt = {}));
+            BooleanType.prototype.parse = /**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) {
+                return value === 'true';
+            };
+            return BooleanType;
+        }());
+        Formatter.STRING = new StringType();
+        Formatter.NUMBER = new NumberType();
+        Formatter.BOOLEAN = new BooleanType();
+    })(exports.ɵbd || (exports.ɵbd = {}));
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    // Freezes the state of the components at the start of the animation.
-    /** @type {?} */
-    var animationStartStyle = animations$1.style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
-    /** @type {?} */
-    var left = [
-        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
-        animations$1.group([
-            animations$1.query(':enter', [
-                animations$1.style({ transform: 'translateX(-100%)' }),
-                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
-            ], {
-                optional: true
-            }),
-            animations$1.query(':leave', [
-                animations$1.style({ transform: 'translateX(0%)' }),
-                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(100%)' }))
-            ], {
-                optional: true
-            })
-        ])
-    ];
-    /** @type {?} */
-    var right = [
-        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
-        animations$1.group([
-            animations$1.query(':enter', [
-                animations$1.style({ transform: 'translateX(100%)', minHeight: '1px' }),
-                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
-            ], {
-                optional: true
-            }),
-            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('{{duration}} ease-out', animations$1.style({
-                    transform: 'translateX(-100%)',
-                    minHeight: '1px'
-                }))], {
-                optional: true
-            })
-        ])
-    ];
     /**
-     * @param {?} duration
-     * @return {?}
+     * @record
+     * @template T
      */
-    function leftRightPlaceAnimation(duration) {
-        return animations$1.trigger('routeAnimations', [
-            animations$1.transition(':increment', right, { params: { duration: duration } }),
-            animations$1.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 exports.ParameterDefinition.RouteId(propertyKey.toString(), options, type);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.UseDelegate()(prototype, propertyKey);
+        });
+    }
+    /**
+     * @template T
+     * @param {?=} options
+     * @return {?}
+     */
+    function VisitParameter(options) {
         /** @type {?} */
-        PlaceRef.prototype.placeDefinition;
-        /**
-         * @param {?} param
+        var opts = typescriptUtilities.Opts.get(options);
+        return (/**
+         * @param {?} prototype
+         * @param {?} propertyKey
          * @return {?}
          */
-        PlaceRef.prototype.initialiseBindings = function (param) { };
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = new exports.ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.UseDelegate()(prototype, propertyKey);
+        });
+    }
+    /**
+     * @template E
+     * @param {?=} options
+     * @return {?}
+     */
+    function VisitParameterList(options) {
+        /** @type {?} */
+        var opts = typescriptUtilities.Opts.get(options);
+        return (/**
+         * @param {?} prototype
+         * @param {?} propertyKey
+         * @return {?}
+         */
+        function (prototype, propertyKey) {
+            /** @type {?} */
+            var param = new exports.ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.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.Router }
+        ]; };
+        NoopGatewayPlace.decorators = [
+            { type: core.Component, args: [{
+                        template: ''
+                    }] }
+        ];
+        /** @nocollapse */
+        NoopGatewayPlace.ctorParameters = function () { return [
+            { type: router.Router }
+        ]; };
+        __decorate([
+            VisitParameter({ storeInUrl: exports.ɵbd.STRING }),
+            __metadata("design:type", pectin.MutableValueModel)
+        ], NoopGatewayPlace.prototype, "returnUrl", void 0);
+        NoopGatewayPlace = __decorate([
+            Place({
+                path: 'aup-gateway-route',
+                authenticate: false
+            }),
+            __metadata("design:paramtypes", [router.Router])
+        ], NoopGatewayPlace);
+        return NoopGatewayPlace;
+    }(exports.ɵba));
+    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 = exports.ɵba.getDefinition(NoopGatewayPlace);
+    exports.ɵt = /** @class */ (function (_super) {
+        __extends(PlaceRouter, _super);
+        function PlaceRouter(router$1, 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 core.EventEmitter();
-            _this._activePlace = new pectin.MutableValueModel();
-            _this._activePlaceVisitModel = new pectin.DelegatingValueModel();
-            _this._inOutletActivation = new pectin.Guard();
-            _this._inOutletDeactivation = new pectin.Guard();
-            _this._inRouteVisitUpdate = new pectin.Guard();
-            _this._activatedRouteModel = new pectin.MutableValueModel();
-            _this._placeDefinition = new pectin.MutableValueModel();
-            _this.initialPlaceIndex = null;
+            _this.router = router$1;
+            _this.urlSerializer = urlSerializer;
+            _this.interactionContext = interactionContext;
+            _this.angularLocation = angularLocation;
+            _this.placeHistory = placeHistory;
+            _this.firstRoute = true;
+            _this._navigationSessionModel = new pectin.MutableValueModel();
+            _this._activeVisits = new pectin.MutableListModel();
+            _this.initialRedirectStarted = false;
+            _this.initialRedirectFinished = false;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.parentOutletModel = new pectin.MutableValueModel(parentOutlet);
-            _this._activePlaceVisitModel.setDelegate(new pectin.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 exports.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 (___default.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 router.NavigationStart) {
+                    _this.onAngularRouterStarted(event);
                 }
-                return ___default.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 router.NavigationEnd) {
+                    _this.onAngularRouterFinished(false);
+                }
+                if (event instanceof router.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 pectin.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__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: core.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.Router },
-            { type: exports.ɵt },
-            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [AUP_PLACE_CONFIG,] }] },
-            { type: PlaceOutletComponent, decorators: [{ type: core.SkipSelf }, { type: core.Optional }] }
-        ]; };
-        PlaceOutletComponent.propDecorators = {
-            animate: [{ type: core.Input }],
-            customPlaceAnimationOrderModel: [{ type: core.Input, args: ['placeAnimationOrderModel',] }],
-            customPlaceAnimationOrder: [{ type: core.Input, args: ['placeAnimationOrder',] }],
-            placeChanged: [{ type: core.Output }],
-            routerOut: [{ type: core.ViewChild, args: ['routeOutlet', { static: true },] }]
+        function (snapshot) {
+            return new PlaceRouter.UrlHelper(this.urlSerializer.parse(snapshot.url));
         };
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
-        __decorate([
-            pectin.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;
+        // 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
-         */
-        PlaceOutletComponent.prototype._activePlace;
-        /**
-         * @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) {
+            pectin.assert.isTruthy(this.isInitialNavigation());
+            pectin.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: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceRouter.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: router.UrlSerializer },
+            { type: InteractionContext },
+            { type: common.Location },
+            { type: PlaceHistory }
+        ]; };
+        /** @nocollapse */ PlaceRouter.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(router.UrlSerializer), core.ɵɵinject(InteractionContext), core.ɵɵinject(common.Location), core.ɵɵinject(PlaceHistory)); }, token: PlaceRouter, providedIn: "root" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Visit, Object]),
+            __metadata("design:returntype", Promise)
+        ], PlaceRouter.prototype, "navigate", null);
+        return PlaceRouter;
+    }(pectin.GarbageCollector));
+    if (false) {
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype._inOutletUpdate;
+        exports.ɵt.prototype.firstRoute;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype._inRouteVisitUpdate;
+        exports.ɵt.prototype._navigationSessionModel;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype._activatedRouteModel;
+        exports.ɵt.prototype._activeVisits;
+        /** @type {?} */
+        exports.ɵt.prototype.navigationSessionActive;
+        /** @type {?} */
+        exports.ɵt.prototype.activeVisitIndex;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype._placeDefinition;
+        exports.ɵt.prototype.navigationSessionFactory;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.parentOutletModel;
-        /** @type {?} */
-        PlaceOutletComponent.prototype.placeAnimationOrder;
+        exports.ɵt.prototype.initialRedirectStarted;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.initialPlaceIndex;
+        exports.ɵt.prototype.initialRedirectFinished;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.routerVisit;
+        exports.ɵt.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.router;
+        exports.ɵt.prototype.urlSerializer;
         /**
          * @type {?}
          * @private
          */
-        PlaceOutletComponent.prototype.placeRouter;
+        exports.ɵt.prototype.interactionContext;
         /** @type {?} */
-        PlaceOutletComponent.prototype.placeConfig;
+        exports.ɵt.prototype.angularLocation;
+        /** @type {?} */
+        exports.ɵt.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 = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.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 exports.PlaceComponent.getDefinition(c); }));
-            _this.commandFactory = pectin.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: core.Component, args: [{
-                        template: ''
-                    }] }
-        ];
-        /** @nocollapse */
-        AbstractPlaceNavigationComponent.ctorParameters = function () { return []; };
-        AbstractPlaceNavigationComponent.propDecorators = {
-            places: [{ type: core.Input }],
-            placesModel: [{ type: core.Input }],
-            placeOutlet: [{ type: core.Input }],
-            placeOutletModel: [{ type: core.Input }]
-        };
-        __decorate([
-            pectin.StoreInListModel('placesModel'),
-            __metadata("design:type", Array)
-        ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
-        __decorate([
-            pectin.StoreInValueModel('placeOutletModel'),
-            __metadata("design:type", PlaceOutletComponent)
-        ], AbstractPlaceNavigationComponent.prototype, "placeOutlet", void 0);
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ValueModel)
-        ], AbstractPlaceNavigationComponent.prototype, "placeOutletModel", void 0);
-        __decorate([
-            src.Memoize(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [exports.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 router.UrlSegment(visit.placeDefinition.path, visit.placeDefinition.getFormattedRouteParameters(visit)),
+                        new router.UrlSegment(visit.placeDefinition.getFormattedRouteId(visit), {})
+                    ]
+                    :
+                        [
+                            new router.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([
+                pectin.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;
+        }
+    })(exports.ɵt || (exports.ɵt = {}));
 
     /**
      * @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: core.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: core.Input }],
-            busy: [{ type: core.Input }]
-        };
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ValueModel)
-        ], BusyOverlayComponent.prototype, "busyModel", void 0);
-        __decorate([
-            pectin.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 = animations$1.style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
+    /** @type {?} */
+    var left = [
+        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
+        animations$1.group([
+            animations$1.query(':enter', [
+                animations$1.style({ transform: 'translateX(-100%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
+            ], {
+                optional: true
+            }),
+            animations$1.query(':leave', [
+                animations$1.style({ transform: 'translateX(0%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(100%)' }))
+            ], {
+                optional: true
+            })
+        ])
+    ];
+    /** @type {?} */
+    var right = [
+        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
+        animations$1.group([
+            animations$1.query(':enter', [
+                animations$1.style({ transform: 'translateX(100%)', minHeight: '1px' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
+            ], {
+                optional: true
+            }),
+            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('{{duration}} ease-out', animations$1.style({
+                    transform: 'translateX(-100%)',
+                    minHeight: '1px'
+                }))], {
+                optional: true
+            })
+        ])
+    ];
+    /**
+     * @param {?} duration
+     * @return {?}
+     */
+    function leftRightPlaceAnimation(duration) {
+        return animations$1.trigger('routeAnimations', [
+            animations$1.transition(':increment', right, { params: { duration: duration } }),
+            animations$1.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: core.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 core.EventEmitter();
+            _this._activePlace = new pectin.MutableValueModel();
+            _this._previousPlace = new pectin.MutableValueModel();
+            _this._activePlaceVisitModel = new pectin.DelegatingValueModel();
+            _this._inOutletActivation = new pectin.Guard();
+            _this._inOutletDeactivation = new pectin.Guard();
+            _this._inRouteVisitUpdate = new pectin.Guard();
+            _this._activatedRouteModel = new pectin.MutableValueModel();
+            _this._placeDefinition = new pectin.MutableValueModel();
+            _this.initialPlaceIndex = null;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.parentOutletModel = new pectin.MutableValueModel(parentOutlet);
+            _this._activePlaceVisitModel.setDelegate(new pectin.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 (___default.isNil(_this.initialPlaceIndex && placeIndex >= 0)) {
+                        _this.initialPlaceIndex = placeIndex;
+                    }
+                }
+                return ___default.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;
-        };
-        ListPlaceNavComponent.decorators = [
-            { type: core.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: core.HostBinding, args: ['class.expanded',] }]
+        function (visit) {
+            // console.log({ activatedRoute: this._activatedRouteModel.value });
+            this.placeRouter.navigate(visit, {
+                relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
+            });
+        };
+        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: core.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: core.NgModule, args: [{
-                        imports: [
-                            common.CommonModule,
-                            animations.BrowserAnimationsModule,
-                            material.MatProgressSpinnerModule,
-                            router.RouterModule,
-                            tabs.MatTabsModule,
-                            list.MatListModule,
-                            tooltip.MatTooltipModule,
-                            icon.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: core.NgModule, args: [{
-                        declarations: [],
-                        imports: [
-                            common.CommonModule,
-                            animations.BrowserAnimationsModule,
-                            forms.FormsModule,
-                            material.MatInputModule,
-                            material.MatFormFieldModule,
-                            material.MatSelectModule,
-                            tabs.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 = animations$1.style({
-        opacity: 0,
-        'height': '0',
-        paddingTop: '0',
-        paddingBottom: '0'
-    });
-    /**
-     * @param {?} triggerName
-     * @param {?=} options
-     * @return {?}
-     */
-    function slideDownAndUpAnimation(triggerName, options) {
-        // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
-        /** @type {?} */
-        var duration = pectin.OptionsHelper.get(options).getOptional('duration', '100ms');
-        /** @type {?} */
-        var hiddenStyleDef = pectin.OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
-        return animations$1.trigger(triggerName, [
-            animations$1.transition(':enter', [hiddenStyleDef, animations$1.animate('100ms')]),
-            animations$1.transition(':leave', [animations$1.animate('100ms', hiddenStyleDef)])
-        ]);
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var Dimension = /** @class */ (function () {
-        function Dimension(width, height) {
-            this.width = width;
-            this.height = height;
-        }
-        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 {?}
          */
-        Point.from = /**
-         * @param {?} data
+        PlaceOutletComponent.prototype.pushVisitChangesToRoute = /**
+         * @param {?} next
+         * @param {?} previous
          * @return {?}
          */
-        function (data) {
-            return new Point(data.x, data.y);
+        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 {?} x
-         * @param {?} y
+         * @param {?} routerOutlet
+         * @param {?} place
          * @return {?}
          */
-        Point.prototype.translate = /**
-         * @param {?} x
-         * @param {?} y
+        PlaceOutletComponent.prototype.onOutletActivated = 
+        // @Trace()
+        /**
+         * @param {?} routerOutlet
+         * @param {?} place
          * @return {?}
          */
-        function (x, y) {
-            return new Point(this.x + x, this.y + 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 pectin.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();
+            }
         };
-        return Point;
-    }());
-    if (false) {
-        /** @type {?} */
-        Point.prototype.x;
-        /** @type {?} */
-        Point.prototype.y;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    exports.Bounds = /** @class */ (function (_super) {
-        __extends(Bounds, _super);
-        function Bounds(top, left, width, height) {
-            var _this = _super.call(this, width, height) || this;
-            _this.top = top;
-            _this.left = left;
-            _this.width = width;
-            _this.height = height;
-            return _this;
-        }
+        // @Trace()
+        // @Trace()
         /**
-         * @param {?} point
          * @return {?}
          */
-        Bounds.prototype.relativePositionOf = /**
-         * @param {?} point
+        PlaceOutletComponent.prototype.onOutletDeactivated = 
+        // @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 () {
+            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);
+            }));
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @return {?}
+         */
+        PlaceOutletComponent.prototype.animationStarted = 
+        // @Trace()
+        /**
+         * @return {?}
+         */
+        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: core.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.Router },
+            { type: exports.ɵt },
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [AUP_PLACE_CONFIG,] }] },
+            { type: PlaceOutletComponent, decorators: [{ type: core.SkipSelf }, { type: core.Optional }] }
+        ]; };
+        PlaceOutletComponent.propDecorators = {
+            animate: [{ type: core.Input }],
+            animateModel: [{ type: core.Input, args: ['animateModel',] }],
+            customPlaceAnimationOrderModel: [{ type: core.Input, args: ['placeAnimationOrderModel',] }],
+            customPlaceAnimationOrder: [{ type: core.Input, args: ['placeAnimationOrder',] }],
+            placeChanged: [{ type: core.Output }],
+            routerOut: [{ type: core.ViewChild, args: ['routeOutlet', { static: true },] }]
+        };
+        __decorate([
+            pectin.StoreInValueModel('animateModel'),
+            __metadata("design:type", Boolean)
+        ], PlaceOutletComponent.prototype, "animate", void 0);
+        __decorate([
+            pectin.UseDelegate({ defaultValue: true }),
+            __metadata("design:type", pectin.ValueModel)
+        ], PlaceOutletComponent.prototype, "animateModel", void 0);
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
+        __decorate([
+            pectin.StoreInListModel('customPlaceAnimationOrderModel'),
+            __metadata("design:type", Array)
+        ], PlaceOutletComponent.prototype, "customPlaceAnimationOrder", void 0);
+        return PlaceOutletComponent;
+    }(DisposableComponent));
     if (false) {
         /** @type {?} */
-        exports.Bounds.prototype.top;
+        PlaceOutletComponent.prototype.animate;
         /** @type {?} */
-        exports.Bounds.prototype.left;
+        PlaceOutletComponent.prototype.animateModel;
+        /** @type {?} */
+        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 {?} */
-        exports.Bounds.prototype.width;
+        PlaceOutletComponent.prototype.ready;
         /** @type {?} */
-        exports.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;
-    })(exports.Bounds || (exports.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 pectin.ValueHolder(new exports.Bounds(0, 0, 0, 0));
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.placeDefinitions = chain(_this.placesModel).map((/**
+             * @param {?} c
+             * @return {?}
+             */
+            function (c) { return exports.ɵba.getDefinition(c); }));
+            _this.commandFactory = pectin.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 = exports.Bounds.ofElement(this.nativeElement);
         };
-        return ResizeAwareComponent;
+        AbstractPlaceNavigationComponent.decorators = [
+            { type: core.Component, args: [{
+                        template: ''
+                    }] }
+        ];
+        /** @nocollapse */
+        AbstractPlaceNavigationComponent.ctorParameters = function () { return []; };
+        AbstractPlaceNavigationComponent.propDecorators = {
+            places: [{ type: core.Input }],
+            placesModel: [{ type: core.Input }],
+            placeOutlet: [{ type: core.Input }],
+            placeOutletModel: [{ type: core.Input }]
+        };
+        __decorate([
+            pectin.StoreInListModel('placesModel'),
+            __metadata("design:type", Array)
+        ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
+        __decorate([
+            pectin.StoreInValueModel('placeOutletModel'),
+            __metadata("design:type", PlaceOutletComponent)
+        ], AbstractPlaceNavigationComponent.prototype, "placeOutlet", void 0);
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ValueModel)
+        ], AbstractPlaceNavigationComponent.prototype, "placeOutletModel", void 0);
+        __decorate([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [exports.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: core.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: core.Input }],
+            busy: [{ type: core.Input }]
+        };
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ValueModel)
+        ], BusyOverlayComponent.prototype, "busyModel", void 0);
+        __decorate([
+            pectin.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: core.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: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
+        ListPlaceNavComponent.decorators = [
+            { type: core.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.Router },
-            { type: core.Injector },
-            { type: InteractionContext }
-        ]; };
-        /** @nocollapse */ InteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(InteractionContext)); }, token: InteractionGuard, providedIn: "root" });
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [router.ActivatedRouteSnapshot, router.RouterStateSnapshot]),
-            __metadata("design:returntype", Object)
-        ], InteractionGuard.prototype, "canActivate", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [NoopComponent, router.ActivatedRouteSnapshot, router.RouterStateSnapshot, router.RouterStateSnapshot]),
-            __metadata("design:returntype", Object)
-        ], InteractionGuard.prototype, "canDeactivate", null);
-        return InteractionGuard;
-    }());
+        ListPlaceNavComponent.ctorParameters = function () { return []; };
+        ListPlaceNavComponent.propDecorators = {
+            expanded: [{ type: core.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: core.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: core.NgModule, args: [{
+                        imports: [
+                            common.CommonModule,
+                            animations.BrowserAnimationsModule,
+                            material.MatProgressSpinnerModule,
+                            router.RouterModule,
+                            tabs.MatTabsModule,
+                            list.MatListModule,
+                            tooltip.MatTooltipModule,
+                            icon.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: core.NgModule, args: [{
+                        declarations: [],
+                        imports: [
+                            common.CommonModule,
+                            animations.BrowserAnimationsModule,
+                            forms.FormsModule,
+                            material.MatInputModule,
+                            material.MatFormFieldModule,
+                            material.MatSelectModule,
+                            tabs.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 = animations$1.style({
+        opacity: 0,
+        'height': '0',
+        paddingTop: '0',
+        paddingBottom: '0'
+    });
+    /**
+     * @param {?} triggerName
+     * @param {?=} options
+     * @return {?}
+     */
+    function slideDownAndUpAnimation(triggerName, options) {
+        // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
+        /** @type {?} */
+        var duration = pectin.OptionsHelper.get(options).getOptional('duration', '100ms');
+        /** @type {?} */
+        var hiddenStyleDef = pectin.OptionsHelper.get(options).getOptional('hiddenStyleDef', defaultHiddenStyleDef);
+        return animations$1.trigger(triggerName, [
+            animations$1.transition(':enter', [hiddenStyleDef, animations$1.animate('100ms')]),
+            animations$1.transition(':leave', [animations$1.animate('100ms', hiddenStyleDef)])
+        ]);
+    }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+
     /**
-     * @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
+    exports.Bounds = /** @class */ (function (_super) {
+        __extends(Bounds, _super);
+        function Bounds(top, left, width, height) {
+            var _this = _super.call(this, width, height) || this;
+            _this.top = top;
+            _this.left = left;
+            _this.width = width;
+            _this.height = height;
+            return _this;
+        }
+        /**
+         * @param {?} point
          * @return {?}
          */
-        function (target) {
-            if (exports.PlaceComponent.isPlaceComponentConstructor(target)) {
-                exports.PlaceComponent.injectDefinition(target, new exports.PlaceDefinition(target, options.path, ___default.isNil(options.authenticate) ? false : options.authenticate, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
-                 * @param {?} c
-                 * @return {?}
-                 */
-                function (c) { return exports.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 {
-                pectin.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 {?} */
+        exports.Bounds.prototype.top;
+        /** @type {?} */
+        exports.Bounds.prototype.left;
+        /** @type {?} */
+        exports.Bounds.prototype.width;
+        /** @type {?} */
+        exports.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;
+    })(exports.Bounds || (exports.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
-
-    (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__default.isNumber(value) && !___default__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 pectin.ValueHolder(new exports.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__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();
-    })(exports.Formatter || (exports.Formatter = {}));
+            function () {
+                return this._boundsModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @private
+         * @return {?}
+         */
+        ResizeAwareComponent.prototype.updateBounds = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
+        };
+        return ResizeAwareComponent;
+    }(DisposableComponent));
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        ResizeAwareComponent.prototype._boundsModel;
+        /**
+         * @type {?}
+         * @protected
+         */
+        ResizeAwareComponent.prototype.elementRef;
+        /**
+         * @type {?}
+         * @protected
+         */
+        ResizeAwareComponent.prototype.ngZone;
+    }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+
     /**
-     * @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
@@ -6135,131 +6212,150 @@
      */
     /**
      * @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 exports.ParameterDefinition.RouteId(propertyKey.toString(), options, type);
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
-    /**
-     * @template T
-     * @param {?=} options
-     * @return {?}
-     */
-    function VisitParameter(options) {
-        /** @type {?} */
-        var opts = typescriptUtilities.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: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        InteractionGuard.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: core.Injector },
+            { type: InteractionContext }
+        ]; };
+        /** @nocollapse */ InteractionGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function InteractionGuard_Factory() { return new InteractionGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(InteractionContext)); }, token: InteractionGuard, providedIn: "root" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [router.ActivatedRouteSnapshot, router.RouterStateSnapshot]),
+            __metadata("design:returntype", Object)
+        ], InteractionGuard.prototype, "canActivate", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [NoopComponent, router.ActivatedRouteSnapshot, router.RouterStateSnapshot, router.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 exports.ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.UseDelegate()(prototype, propertyKey);
-        });
-    }
-    /**
-     * @template E
-     * @param {?=} options
-     * @return {?}
-     */
-    function VisitParameterList(options) {
-        /** @type {?} */
-        var opts = typescriptUtilities.Opts.get(options);
-        return (/**
-         * @param {?} prototype
-         * @param {?} propertyKey
-         * @return {?}
+        InteractionGuard.prototype.injector;
+        /**
+         * @type {?}
+         * @private
          */
-        function (prototype, propertyKey) {
-            /** @type {?} */
-            var param = new exports.ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional("storeInUrl", null));
-            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-            pectin.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
@@ -6267,18 +6363,21 @@
      */
     /**
      * @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 () { };
     }
 
     /**
@@ -6382,8 +6481,14 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.EnterPlaceGuard = /** @class */ (function () {
-        function EnterPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
+    /**
+     * @abstract
+     */
+      /**
+     * @abstract
+     */
+    exports.AbstractEnterPlaceGuard = /** @class */ (function () {
+        function AbstractEnterPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
             this.router = router;
             this.urlSerializer = urlSerializer;
             this.placeRouter = placeRouter;
@@ -6397,7 +6502,7 @@
          * @param {?} state
          * @return {?}
          */
-        EnterPlaceGuard.prototype.canActivate = 
+        AbstractEnterPlaceGuard.prototype.canActivate = 
         // @Trace()
         /**
          * @param {?} activatedRoute
@@ -6406,85 +6511,177 @@
          */
         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 (!exports.PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 2];
-                            placeDefinition = exports.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 (!exports.ɵba.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 4];
+                            placeDefinition = exports.ɵba.getDefinition(activatedRoute.component);
+                            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*/, pectin.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*/, pectin.lang.illegalState("expected component to be an instance of PlaceComponent, got " + activatedRoute.component)];
                     }
                 });
             });
         };
-        EnterPlaceGuard.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        EnterPlaceGuard.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: router.UrlSerializer },
-            { type: exports.ɵt },
-            { type: PlaceHistory },
-            { type: core.Injector }
-        ]; };
-        /** @nocollapse */ EnterPlaceGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function EnterPlaceGuard_Factory() { return new EnterPlaceGuard(core.ɵɵinject(router.Router), core.ɵɵinject(router.UrlSerializer), core.ɵɵinject(exports.ɵt), core.ɵɵinject(PlaceHistory), core.ɵɵinject(core.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 rxjs.Observable) ? authorised.toPromise() : authorised];
+                });
+            });
+        };
+        return AbstractEnterPlaceGuard;
     }());
     if (false) {
         /**
          * @type {?}
          * @private
          */
-        exports.EnterPlaceGuard.prototype.router;
+        exports.AbstractEnterPlaceGuard.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        exports.EnterPlaceGuard.prototype.urlSerializer;
+        exports.AbstractEnterPlaceGuard.prototype.urlSerializer;
         /**
          * @type {?}
          * @private
          */
-        exports.EnterPlaceGuard.prototype.placeRouter;
+        exports.AbstractEnterPlaceGuard.prototype.placeRouter;
         /**
          * @type {?}
          * @private
          */
-        exports.EnterPlaceGuard.prototype.placeHistory;
+        exports.AbstractEnterPlaceGuard.prototype.placeHistory;
         /**
          * @type {?}
          * @private
          */
-        exports.EnterPlaceGuard.prototype.injector;
+        exports.AbstractEnterPlaceGuard.prototype.injector;
+        /**
+         * @abstract
+         * @param {?} injector
+         * @return {?}
+         */
+        exports.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
@@ -6573,7 +6770,7 @@
             ], ConsolidatedParameterMap.prototype, "keys", null);
             return ConsolidatedParameterMap;
         }());
-        EnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
+        AbstractEnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
         if (false) {
             /**
              * @type {?}
@@ -6639,7 +6836,7 @@
              */
             ParamMapAdapter.prototype.params;
         }
-    })(exports.EnterPlaceGuard || (exports.EnterPlaceGuard = {}));
+    })(exports.AbstractEnterPlaceGuard || (exports.AbstractEnterPlaceGuard = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -6690,12 +6887,99 @@
         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: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        NoopAuthGuard.ctorParameters = function () { return []; };
+        /** @nocollapse */ NoopAuthGuard.ngInjectableDef = core.ɵɵ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 () { };
+    }
+
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
-    exports.Activity = exports.ɵbf;
+    exports.Activity = exports.ɵbk;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
@@ -6703,7 +6987,7 @@
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CommandDirective = CommandDirective;
     exports.ComponentsModule = ComponentsModule;
-    exports.ConfirmThenDialogComponent = exports.ɵbh;
+    exports.ConfirmThenDialogComponent = exports.ɵbm;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
     exports.DEFINITION_META_DATA_KEY = DEFINITION_META_DATA_KEY;
     exports.DIALOG_INTERACTION_SERVICE_DEFAULTS = DIALOG_INTERACTION_SERVICE_DEFAULTS;
@@ -6713,6 +6997,7 @@
     exports.DisposableComponent = DisposableComponent;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.FocusBindingDirective = FocusBindingDirective;
+    exports.Formatter = exports.ɵbd;
     exports.InplaceInteractionContextComponent = InplaceInteractionContextComponent;
     exports.InteractionContext = InteractionContext;
     exports.InteractionGuard = InteractionGuard;
@@ -6721,10 +7006,13 @@
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.LeavePlaceGuard = LeavePlaceGuard;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
+    exports.NoopAuthGuard = NoopAuthGuard;
     exports.NoopComponent = NoopComponent;
+    exports.NoopGatewayPlace = NoopGatewayPlace;
     exports.NumberInputComponent = NumberInputComponent;
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
+    exports.PlaceComponent = exports.ɵba;
     exports.PlaceHistory = PlaceHistory;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
@@ -6744,16 +7032,19 @@
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = ActivityContainerComponent;
-    exports.ɵbb = ActivityOutletComponent;
-    exports.ɵbc = ConfirmationDialogComponent;
-    exports.ɵbd = AbstractActivity;
-    exports.ɵbe = ACTIVITY_DATA;
-    exports.ɵbi = AlertDialogComponent;
-    exports.ɵbk = InteractionOutletComponent;
-    exports.ɵbl = InplaceInteractionContextComponent;
-    exports.ɵbm = DIALOG_INTERACTION_SERVICE_DEFAULTS;
-    exports.ɵbn = DialogInteractionService;
+    exports.ɵbb = Place;
+    exports.ɵbc = VisitParameter;
+    exports.ɵbe = InteractionModule;
+    exports.ɵbf = ActivityContainerComponent;
+    exports.ɵbg = ActivityOutletComponent;
+    exports.ɵbh = ConfirmationDialogComponent;
+    exports.ɵbi = AbstractActivity;
+    exports.ɵbj = ACTIVITY_DATA;
+    exports.ɵbn = AlertDialogComponent;
+    exports.ɵbp = InteractionOutletComponent;
+    exports.ɵbq = InplaceInteractionContextComponent;
+    exports.ɵbr = DIALOG_INTERACTION_SERVICE_DEFAULTS;
+    exports.ɵbs = DialogInteractionService;
     exports.ɵc = FocusBindingDirective;
     exports.ɵd = DisposableComponent;
     exports.ɵe = ComponentsModule;
@@ -6775,7 +7066,7 @@
     exports.ɵw = TabbedPlaceNavigationComponent;
     exports.ɵx = AbstractPlaceNavigationComponent;
     exports.ɵy = ListPlaceNavComponent;
-    exports.ɵz = InteractionModule;
+    exports.ɵz = NoopGatewayPlace;
 
     Object.defineProperty(exports, '__esModule', { value: true });