@coolon/angular-ui-powerups 0.0.72 → 0.0.74

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

@@ -204,70 +204,35 @@
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var DisposableComponent = /** @class */ (function (_super) {
-        __extends(DisposableComponent, _super);
-        function DisposableComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * @return {?}
-         */
-        DisposableComponent.prototype.ngOnDestroy = /**
-         * @return {?}
-         */
-        function () {
-            this.dispose();
-        };
-        return DisposableComponent;
-    }(pectin.GarbageCollector));
-
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     /**
-     * @abstract
-     * @template T
+     * @template P
      */
-    var AbstractInputComponent = /** @class */ (function (_super) {
-        __extends(AbstractInputComponent, _super);
-        function AbstractInputComponent() {
+    var CommandDirective = /** @class */ (function (_super) {
+        __extends(CommandDirective, _super);
+        function CommandDirective(elementRef) {
             var _this = _super.call(this) || this;
-            _this.valueModel = new pectin.DelegatingFormValueModel();
-            // TODO: fix this.
-            // tslint:disable-next-line:no-output-native
-            _this.focus = new core.EventEmitter();
-            // tslint:disable-next-line:no-output-native
-            _this.blur = new core.EventEmitter();
-            // tslint:disable-next-line:no-output-native
-            _this.enterKey = new core.EventEmitter();
-            // tslint:disable-next-line:no-output-native
-            _this.escapeKey = new core.EventEmitter();
-            /** @type {?} */
-            var self = _this;
-            _this.errorStateMatcher = {
-                isErrorState: /**
-                 * @param {?} control
-                 * @param {?} form
-                 * @return {?}
-                 */
-                function (control, form) {
-                    return self.hasErrors();
-                }
-            };
+            _this.elementRef = elementRef;
+            _this._commandParameterProvided = false;
             return _this;
         }
-        Object.defineProperty(AbstractInputComponent.prototype, "userValueModel", {
+        Object.defineProperty(CommandDirective.prototype, "commandParameter", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this._commandParameter;
+            },
             set: /**
-             * @param {?} model
+             * @param {?} value
              * @return {?}
              */
-            function (model) {
-                this.valueModel.setDelegate(model);
+            function (value) {
+                this._commandParameterProvided = true;
+                this._commandParameter = value;
             },
             enumerable: true,
             configurable: true
@@ -275,725 +240,829 @@
         /**
          * @return {?}
          */
-        AbstractInputComponent.prototype.notifyClick = /**
+        CommandDirective.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
-            this.safelyInvoke(this.clickCommand);
+            pectin.assert.notNil(this.pectinCommand);
+            if (this.pectinCommand instanceof pectin.UnaryCommand) {
+                if (!this._commandParameterProvided) {
+                    pectin.lang.illegalState('UnaryCommands required the command parameter to be specified.');
+                }
+            }
+            else {
+                if (this._commandParameterProvided) {
+                    pectin.lang.illegalState('command parameters are only supported by UnaryCommands');
+                }
+            }
         };
         /**
          * @return {?}
          */
-        AbstractInputComponent.prototype.notifyFocusIn = /**
+        CommandDirective.prototype.ngAfterViewInit = /**
          * @return {?}
          */
         function () {
-            this.safelyInvoke(this.focusCommand);
-            this.focus.emit();
+            var _this = this;
+            // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
+            // we need to do this.
+            var chain = pectin.Dsl.disposeWith(this).chain;
+            chain(this.pectinCommand.enabled).subscribe((/**
+             * @param {?} enabled
+             * @return {?}
+             */
+            function (enabled) {
+                if (enabled) {
+                    _this.elementRef.nativeElement.removeAttribute('disabled');
+                    if (_this.elementRef.nativeElement.tagName === 'A') {
+                        _this.elementRef.nativeElement.setAttribute('href', 'javascript:void');
+                    }
+                }
+                else {
+                    _this.elementRef.nativeElement.setAttribute('disabled', 'disabled');
+                    if (_this.elementRef.nativeElement.tagName === 'A') {
+                        _this.elementRef.nativeElement.removeAttribute('href');
+                    }
+                }
+            }));
         };
         /**
          * @return {?}
          */
-        AbstractInputComponent.prototype.notifyFocusOut = /**
+        CommandDirective.prototype.ngOnDestroy = /**
          * @return {?}
          */
         function () {
-            this.safelyInvoke(this.blurCommand);
-            this.blur.emit();
+            this.dispose();
         };
         /**
+         * @param {?} $event
          * @return {?}
          */
-        AbstractInputComponent.prototype.notifyEnterKey = /**
+        CommandDirective.prototype.notifyClick = /**
+         * @param {?} $event
          * @return {?}
          */
-        function () {
-            this.safelyInvoke(this.enterCommand);
-            this.enterKey.emit();
+        function ($event) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            if (this.pectinCommand.enabled.value) {
+                if (this.pectinCommand instanceof pectin.UnaryCommand) {
+                    this.pectinCommand.withContext({ event: $event }).execute(this.commandParameter);
+                }
+                else {
+                    this.pectinCommand.withContext({ event: $event }).execute();
+                }
+            }
+            else {
+                console.warn('disabled command clicked, ignoring.');
+            }
+        };
+        CommandDirective.decorators = [
+            { type: core.Directive, args: [{
+                        // tslint:disable-next-line:directive-selector
+                        selector: '[pectinCommand]'
+                    },] }
+        ];
+        /** @nocollapse */
+        CommandDirective.ctorParameters = function () { return [
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
+        ]; };
+        CommandDirective.propDecorators = {
+            pectinCommand: [{ type: core.Input }],
+            commandParameter: [{ type: core.Input }],
+            notifyClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
         };
+        return CommandDirective;
+    }(pectin.GarbageCollector));
+    if (false) {
+        /** @type {?} */
+        CommandDirective.prototype.pectinCommand;
+        /**
+         * @type {?}
+         * @private
+         */
+        CommandDirective.prototype._commandParameter;
+        /**
+         * @type {?}
+         * @private
+         */
+        CommandDirective.prototype._commandParameterProvided;
+        /**
+         * @type {?}
+         * @private
+         */
+        CommandDirective.prototype.elementRef;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var DisposableComponent = /** @class */ (function (_super) {
+        __extends(DisposableComponent, _super);
+        function DisposableComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
         /**
          * @return {?}
          */
-        AbstractInputComponent.prototype.notifyEscapeKey = /**
+        DisposableComponent.prototype.ngOnDestroy = /**
          * @return {?}
          */
         function () {
-            this.safelyInvoke(this.escapeCommand);
-            this.escapeKey.emit();
+            this.dispose();
         };
+        return DisposableComponent;
+    }(pectin.GarbageCollector));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var FocusBindingDirective = /** @class */ (function (_super) {
+        __extends(FocusBindingDirective, _super);
+        function FocusBindingDirective(el, ngZone, document) {
+            var _this = _super.call(this) || this;
+            _this.el = el;
+            _this.ngZone = ngZone;
+            // @see https://stackoverflow.com/questions/49513359/could-not-resolve-type-document-in-angular5/53715642#53715642
+            _this.document = (/** @type {?} */ (document));
+            return _this;
+        }
         /**
-         * @protected
-         * @param {?} command
          * @return {?}
          */
-        AbstractInputComponent.prototype.safelyInvoke = /**
-         * @protected
-         * @param {?} command
+        FocusBindingDirective.prototype.onFocusIn = /**
          * @return {?}
          */
-        function (command) {
-            if (command && command.enabled.value) {
-                command.execute();
+        function () {
+            if (this.hasBinding()) {
+                this.pectinFocusBinding.focusContext.notifyFocusIn();
             }
         };
         /**
          * @return {?}
          */
-        AbstractInputComponent.prototype.ngOnInit = /**
+        FocusBindingDirective.prototype.onFocusOut = /**
          * @return {?}
          */
         function () {
+            if (this.hasBinding()) {
+                this.pectinFocusBinding.focusContext.notifyFocusOut();
+            }
         };
         /**
          * @return {?}
          */
-        AbstractInputComponent.prototype.isEnabled = /**
+        FocusBindingDirective.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
-            return this.enabled.value;
         };
-        Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this.valueModel.enabled;
-            },
-            enumerable: true,
-            configurable: true
-        });
         /**
          * @return {?}
          */
-        AbstractInputComponent.prototype.hasErrors = /**
+        FocusBindingDirective.prototype.ngAfterViewInit = /**
          * @return {?}
          */
         function () {
-            return !this.errorList.query().isEmpty();
+            var _this = this;
+            // TODO: Make this also track the current enabled/disabled state.
+            if (this.hasBinding()) {
+                var chain = pectin.Dsl.disposeWith(this).chain;
+                chain(this.pectinFocusBinding.focusContext.focused).subscribe((/**
+                 * @param {?} focused
+                 * @return {?}
+                 */
+                function (focused) {
+                    if (focused && !_this.alreadyHasFocus()) {
+                        _this.tryAndFocus();
+                    }
+                }));
+            }
+            else {
+                pectin.Logger.get(this).warn('pectinFocusBinding was nil');
+            }
         };
-        Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this.valueModel.errorList;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(AbstractInputComponent.prototype, "firstError", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this.hasErrors() ? this.errorList.value[0] : null;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        AbstractInputComponent.propDecorators = {
-            userValueModel: [{ type: core.Input, args: ['valueModel',] }],
-            label: [{ type: core.Input }],
-            floatLabel: [{ type: core.Input }],
-            hint: [{ type: core.Input }],
-            placeholder: [{ type: core.Input }],
-            focusCommand: [{ type: core.Input, args: ['command.focus',] }],
-            blurCommand: [{ type: core.Input, args: ['command.blur',] }],
-            enterCommand: [{ type: core.Input, args: ['command.enter',] }],
-            escapeCommand: [{ type: core.Input, args: ['command.escape',] }],
-            clickCommand: [{ type: core.Input, args: ['command.click',] }],
-            focus: [{ type: core.Output }],
-            blur: [{ type: core.Output }],
-            enterKey: [{ type: core.Output }],
-            escapeKey: [{ type: core.Output }],
-            notifyClick: [{ type: core.HostListener, args: ['click',] }],
-            notifyFocusIn: [{ type: core.HostListener, args: ['focusin',] }],
-            notifyFocusOut: [{ type: core.HostListener, args: ['focusout',] }]
-        };
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ValueModel),
-            __metadata("design:paramtypes", [pectin.ValueModel])
-        ], AbstractInputComponent.prototype, "userValueModel", null);
-        return AbstractInputComponent;
-    }(DisposableComponent));
-    if (false) {
-        /** @type {?} */
-        AbstractInputComponent.prototype.valueModel;
-        /** @type {?} */
-        AbstractInputComponent.prototype.label;
-        /** @type {?} */
-        AbstractInputComponent.prototype.floatLabel;
-        /** @type {?} */
-        AbstractInputComponent.prototype.hint;
-        /** @type {?} */
-        AbstractInputComponent.prototype.placeholder;
-        /** @type {?} */
-        AbstractInputComponent.prototype.focusCommand;
-        /** @type {?} */
-        AbstractInputComponent.prototype.blurCommand;
-        /** @type {?} */
-        AbstractInputComponent.prototype.enterCommand;
-        /** @type {?} */
-        AbstractInputComponent.prototype.escapeCommand;
-        /** @type {?} */
-        AbstractInputComponent.prototype.clickCommand;
-        /** @type {?} */
-        AbstractInputComponent.prototype.focus;
-        /** @type {?} */
-        AbstractInputComponent.prototype.blur;
-        /** @type {?} */
-        AbstractInputComponent.prototype.enterKey;
-        /** @type {?} */
-        AbstractInputComponent.prototype.escapeKey;
-        /** @type {?} */
-        AbstractInputComponent.prototype.errorStateMatcher;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var NumberInputComponent = /** @class */ (function (_super) {
-        __extends(NumberInputComponent, _super);
-        function NumberInputComponent() {
-            return _super.call(this) || this;
-        }
-        /**
-         * @return {?}
-         */
-        NumberInputComponent.prototype.ngOnInit = /**
-         * @return {?}
-         */
-        function () {
-        };
-        NumberInputComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-number-input',
-                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        NumberInputComponent.ctorParameters = function () { return []; };
-        return NumberInputComponent;
-    }(AbstractInputComponent));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var PasswordInputComponent = /** @class */ (function (_super) {
-        __extends(PasswordInputComponent, _super);
-        function PasswordInputComponent() {
-            return _super.call(this) || this;
-        }
         /**
+         * @private
          * @return {?}
          */
-        PasswordInputComponent.prototype.ngOnInit = /**
+        FocusBindingDirective.prototype.hasBinding = /**
+         * @private
          * @return {?}
          */
         function () {
+            return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
         };
-        PasswordInputComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-password-input',
-                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
-                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        PasswordInputComponent.ctorParameters = function () { return []; };
-        return PasswordInputComponent;
-    }(AbstractInputComponent));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @template T
-     */
-    var SelectInputComponent = /** @class */ (function (_super) {
-        __extends(SelectInputComponent, _super);
-        function SelectInputComponent() {
-            var _this = _super.call(this) || this;
-            _this.optionLabelFormat = (/**
-             * @param {?} option
-             * @return {?}
-             */
-            function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; });
-            return _this;
-        }
+        // Hook method for debugging via tracing.
+        // Hook method for debugging via tracing.
         /**
          * @return {?}
          */
-        SelectInputComponent.prototype.ngOnInit = /**
-         * @return {?}
-         */
-        function () {
-        };
-        SelectInputComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-select-input',
-                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"valueModel\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value\" [value]=\"option\">{{optionLabelFormat(option)}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        SelectInputComponent.ctorParameters = function () { return []; };
-        SelectInputComponent.propDecorators = {
-            optionsModel: [{ type: core.Input }],
-            options: [{ type: core.Input }],
-            optionLabel: [{ type: core.Input }],
-            optionLabelFormat: [{ type: core.Input }]
-        };
-        __decorate([
-            pectin.UseDelegate(),
-            __metadata("design:type", pectin.ListModel)
-        ], SelectInputComponent.prototype, "optionsModel", void 0);
-        __decorate([
-            pectin.StoreInListModel('optionsModel'),
-            __metadata("design:type", Array)
-        ], SelectInputComponent.prototype, "options", void 0);
-        return SelectInputComponent;
-    }(AbstractInputComponent));
-    if (false) {
-        /** @type {?} */
-        SelectInputComponent.prototype.optionsModel;
-        /** @type {?} */
-        SelectInputComponent.prototype.options;
-        /** @type {?} */
-        SelectInputComponent.prototype.optionLabel;
-        /** @type {?} */
-        SelectInputComponent.prototype.optionLabelFormat;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var StringInputComponent = /** @class */ (function (_super) {
-        __extends(StringInputComponent, _super);
-        function StringInputComponent() {
-            return _super.call(this) || this;
-        }
+        FocusBindingDirective.prototype.alreadyHasFocus = 
+        // Hook method for debugging via tracing.
         /**
          * @return {?}
          */
-        StringInputComponent.prototype.ngOnInit = /**
-         * @return {?}
-         */
         function () {
+            return this.isFocused(this.focusTarget);
         };
-        StringInputComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-string-input',
-                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
-                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        StringInputComponent.ctorParameters = function () { return []; };
-        return StringInputComponent;
-    }(AbstractInputComponent));
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var NoopComponent = /** @class */ (function () {
-        function NoopComponent() {
-        }
-        NoopComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-noop',
-                        template: "",
-                        styles: [":host{display:block}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        NoopComponent.ctorParameters = function () { return []; };
-        return NoopComponent;
-    }());
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @template P
-     */
-    var CommandDirective = /** @class */ (function (_super) {
-        __extends(CommandDirective, _super);
-        function CommandDirective(elementRef) {
-            var _this = _super.call(this) || this;
-            _this.elementRef = elementRef;
-            _this._commandParameterProvided = false;
-            return _this;
-        }
-        Object.defineProperty(CommandDirective.prototype, "commandParameter", {
-            get: /**
-             * @return {?}
-             */
-            function () {
-                return this._commandParameter;
-            },
-            set: /**
-             * @param {?} value
-             * @return {?}
-             */
-            function (value) {
-                this._commandParameterProvided = true;
-                this._commandParameter = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
+        // Hook method for debugging via tracing.
+        // Hook method for debugging via tracing.
         /**
+         * @param {?} element
          * @return {?}
          */
-        CommandDirective.prototype.ngOnInit = /**
-         * @return {?}
-         */
-        function () {
-            pectin.assert.notNil(this.pectinCommand);
-            if (this.pectinCommand instanceof pectin.UnaryCommand) {
-                if (!this._commandParameterProvided) {
-                    pectin.lang.illegalState('UnaryCommands required the command parameter to be specified.');
-                }
-            }
-            else {
-                if (this._commandParameterProvided) {
-                    pectin.lang.illegalState('command parameters are only supported by UnaryCommands');
-                }
-            }
+        FocusBindingDirective.prototype.isFocused = 
+        // Hook method for debugging via tracing.
+        /**
+         * @param {?} element
+         * @return {?}
+         */
+        function (element) {
+            return this.document.activeElement === element;
         };
         /**
+         * @param {?=} retries
          * @return {?}
          */
-        CommandDirective.prototype.ngAfterViewInit = /**
+        FocusBindingDirective.prototype.tryAndFocus = /**
+         * @param {?=} retries
          * @return {?}
          */
-        function () {
+        function (retries) {
             var _this = this;
-            // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
-            // we need to do this.
-            var chain = pectin.Dsl.disposeWith(this).chain;
-            chain(this.pectinCommand.enabled).subscribe((/**
-             * @param {?} enabled
-             * @return {?}
-             */
-            function (enabled) {
-                if (enabled) {
-                    _this.elementRef.nativeElement.removeAttribute('disabled');
-                    if (_this.elementRef.nativeElement.tagName === 'A') {
-                        _this.elementRef.nativeElement.setAttribute('href', 'javascript:void');
-                    }
+            if (retries === void 0) { retries = 5; }
+            if (this.modelShouldStillHaveFocus() && this.canFocus()) {
+                if (!this.alreadyHasFocus()) {
+                    this.focusTarget.focus();
                 }
-                else {
-                    _this.elementRef.nativeElement.setAttribute('disabled', 'disabled');
-                    if (_this.elementRef.nativeElement.tagName === 'A') {
-                        _this.elementRef.nativeElement.removeAttribute('href');
+                // if we didn't get the focus we try again later.
+                if (!this.alreadyHasFocus()) {
+                    pectin.Logger.get(this).log("focus failed, trying " + retries + " more times");
+                    if (retries > 0) {
+                        // try again on the next paint
+                        // TODO: is there an angular way of doing this without calling a window function.
+                        requestAnimationFrame((/**
+                         * @return {?}
+                         */
+                        function () {
+                            _this.tryAndFocus(retries - 1);
+                        }));
+                    }
+                    else {
+                        pectin.Logger.get(this).warn("Tried to focus but gave up as the component wasn't enabled or visible.");
                     }
                 }
-            }));
+            }
         };
+        Object.defineProperty(FocusBindingDirective.prototype, "focusTarget", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.focusBindingTarget || this.el.nativeElement;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        // Hook method for debugging via tracing.
+        // Hook method for debugging via tracing.
         /**
          * @return {?}
          */
-        CommandDirective.prototype.ngOnDestroy = /**
+        FocusBindingDirective.prototype.modelShouldStillHaveFocus = 
+        // Hook method for debugging via tracing.
+        /**
          * @return {?}
          */
         function () {
-            this.dispose();
+            return this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
         };
+        // Hook method for debugging via tracing.
+        // Hook method for debugging via tracing.
         /**
-         * @param {?} $event
          * @return {?}
          */
-        CommandDirective.prototype.notifyClick = /**
-         * @param {?} $event
+        FocusBindingDirective.prototype.canFocus = 
+        // Hook method for debugging via tracing.
+        /**
          * @return {?}
          */
-        function ($event) {
-            $event.preventDefault();
-            $event.stopPropagation();
-            if (this.pectinCommand.enabled.value) {
-                if (this.pectinCommand instanceof pectin.UnaryCommand) {
-                    this.pectinCommand.withContext({ event: $event }).execute(this.commandParameter);
-                }
-                else {
-                    this.pectinCommand.withContext({ event: $event }).execute();
-                }
-            }
-            else {
-                console.warn('disabled command clicked, ignoring.');
-            }
+        function () {
+            /** @type {?} */
+            var dimension = this.focusTarget.getBoundingClientRect();
+            /** @type {?} */
+            var hasSize = dimension.height >= 0 && dimension.height >= 0;
+            // tslint:disable-next-line:no-string-literal
+            return hasSize && !this.focusTarget['disabled'];
         };
-        CommandDirective.decorators = [
+        FocusBindingDirective.decorators = [
             { type: core.Directive, args: [{
                         // tslint:disable-next-line:directive-selector
-                        selector: '[pectinCommand]'
+                        selector: '[pectinFocusBinding]'
                     },] }
         ];
         /** @nocollapse */
-        CommandDirective.ctorParameters = function () { return [
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] }
+        FocusBindingDirective.ctorParameters = function () { return [
+            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
+            { type: core.NgZone, decorators: [{ type: core.Inject, args: [core.NgZone,] }] },
+            { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
         ]; };
-        CommandDirective.propDecorators = {
-            pectinCommand: [{ type: core.Input }],
-            commandParameter: [{ type: core.Input }],
-            notifyClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
+        FocusBindingDirective.propDecorators = {
+            pectinFocusBinding: [{ type: core.Input }],
+            focusBindingTarget: [{ type: core.Input }],
+            onFocusIn: [{ type: core.HostListener, args: ['focusin',] }],
+            onFocusOut: [{ type: core.HostListener, args: ['focusout',] }]
         };
-        return CommandDirective;
-    }(pectin.GarbageCollector));
+        return FocusBindingDirective;
+    }(DisposableComponent));
     if (false) {
-        /** @type {?} */
-        CommandDirective.prototype.pectinCommand;
         /**
          * @type {?}
          * @private
          */
-        CommandDirective.prototype._commandParameter;
+        FocusBindingDirective.prototype.document;
+        /** @type {?} */
+        FocusBindingDirective.prototype.pectinFocusBinding;
+        /** @type {?} */
+        FocusBindingDirective.prototype.focusBindingTarget;
         /**
          * @type {?}
          * @private
          */
-        CommandDirective.prototype._commandParameterProvided;
+        FocusBindingDirective.prototype.el;
         /**
          * @type {?}
          * @private
          */
-        CommandDirective.prototype.elementRef;
+        FocusBindingDirective.prototype.ngZone;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var FocusBindingDirective = /** @class */ (function (_super) {
-        __extends(FocusBindingDirective, _super);
-        function FocusBindingDirective(el, ngZone, document) {
+    var DirectivesModule = /** @class */ (function () {
+        function DirectivesModule() {
+        }
+        DirectivesModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [
+                            CommandDirective,
+                            FocusBindingDirective
+                        ],
+                        imports: [
+                            common.CommonModule,
+                            animations.BrowserAnimationsModule,
+                            forms.FormsModule,
+                            material.MatInputModule,
+                            material.MatFormFieldModule,
+                            material.MatSelectModule,
+                            tabs.MatTabsModule
+                        ],
+                        exports: [
+                            CommandDirective,
+                            FocusBindingDirective
+                        ]
+                    },] }
+        ];
+        return DirectivesModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @abstract
+     * @template T
+     */
+    var AbstractInputComponent = /** @class */ (function (_super) {
+        __extends(AbstractInputComponent, _super);
+        function AbstractInputComponent() {
             var _this = _super.call(this) || this;
-            _this.el = el;
-            _this.ngZone = ngZone;
-            // @see https://stackoverflow.com/questions/49513359/could-not-resolve-type-document-in-angular5/53715642#53715642
-            _this.document = (/** @type {?} */ (document));
+            _this.valueModel = new pectin.DelegatingFormValueModel();
+            // TODO: fix this.
+            // tslint:disable-next-line:no-output-native
+            _this.focus = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
+            _this.blur = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
+            _this.enterKey = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
+            _this.escapeKey = new core.EventEmitter();
+            /** @type {?} */
+            var self = _this;
+            _this.errorStateMatcher = {
+                isErrorState: /**
+                 * @param {?} control
+                 * @param {?} form
+                 * @return {?}
+                 */
+                function (control, form) {
+                    return self.hasErrors();
+                }
+            };
             return _this;
         }
+        Object.defineProperty(AbstractInputComponent.prototype, "userValueModel", {
+            set: /**
+             * @param {?} model
+             * @return {?}
+             */
+            function (model) {
+                this.valueModel.setDelegate(model);
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
-        FocusBindingDirective.prototype.onFocusIn = /**
+        AbstractInputComponent.prototype.notifyClick = /**
          * @return {?}
          */
         function () {
-            if (this.hasBinding()) {
-                this.pectinFocusBinding.focusContext.notifyFocusIn();
-            }
+            this.safelyInvoke(this.clickCommand);
         };
         /**
          * @return {?}
          */
-        FocusBindingDirective.prototype.onFocusOut = /**
+        AbstractInputComponent.prototype.notifyFocusIn = /**
          * @return {?}
          */
         function () {
-            if (this.hasBinding()) {
-                this.pectinFocusBinding.focusContext.notifyFocusOut();
-            }
+            this.safelyInvoke(this.focusCommand);
+            this.focus.emit();
         };
         /**
          * @return {?}
          */
-        FocusBindingDirective.prototype.ngOnInit = /**
+        AbstractInputComponent.prototype.notifyFocusOut = /**
          * @return {?}
          */
         function () {
+            this.safelyInvoke(this.blurCommand);
+            this.blur.emit();
         };
         /**
          * @return {?}
          */
-        FocusBindingDirective.prototype.ngAfterViewInit = /**
+        AbstractInputComponent.prototype.notifyEnterKey = /**
          * @return {?}
          */
         function () {
-            var _this = this;
-            // TODO: Make this also track the current enabled/disabled state.
-            if (this.hasBinding()) {
-                var chain = pectin.Dsl.disposeWith(this).chain;
-                chain(this.pectinFocusBinding.focusContext.focused).subscribe((/**
-                 * @param {?} focused
-                 * @return {?}
-                 */
-                function (focused) {
-                    if (focused && !_this.alreadyHasFocus()) {
-                        _this.tryAndFocus();
-                    }
-                }));
-            }
-            else {
-                pectin.Logger.get(this).warn('pectinFocusBinding was nil');
-            }
+            this.safelyInvoke(this.enterCommand);
+            this.enterKey.emit();
         };
         /**
-         * @private
          * @return {?}
          */
-        FocusBindingDirective.prototype.hasBinding = /**
-         * @private
+        AbstractInputComponent.prototype.notifyEscapeKey = /**
+         * @return {?}
+         */
+        function () {
+            this.safelyInvoke(this.escapeCommand);
+            this.escapeKey.emit();
+        };
+        /**
+         * @protected
+         * @param {?} command
+         * @return {?}
+         */
+        AbstractInputComponent.prototype.safelyInvoke = /**
+         * @protected
+         * @param {?} command
          * @return {?}
          */
-        function () {
-            return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
+        function (command) {
+            if (command && command.enabled.value) {
+                command.execute();
+            }
         };
-        // Hook method for debugging via tracing.
-        // Hook method for debugging via tracing.
         /**
          * @return {?}
          */
-        FocusBindingDirective.prototype.alreadyHasFocus = 
-        // Hook method for debugging via tracing.
-        /**
+        AbstractInputComponent.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
-            return this.isFocused(this.focusTarget);
         };
-        // Hook method for debugging via tracing.
-        // Hook method for debugging via tracing.
         /**
-         * @param {?} element
          * @return {?}
          */
-        FocusBindingDirective.prototype.isFocused = 
-        // Hook method for debugging via tracing.
-        /**
-         * @param {?} element
+        AbstractInputComponent.prototype.isEnabled = /**
          * @return {?}
          */
-        function (element) {
-            return this.document.activeElement === element;
+        function () {
+            return this.enabled.value;
         };
+        Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.valueModel.enabled;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
-         * @param {?=} retries
          * @return {?}
          */
-        FocusBindingDirective.prototype.tryAndFocus = /**
-         * @param {?=} retries
+        AbstractInputComponent.prototype.hasErrors = /**
          * @return {?}
          */
-        function (retries) {
-            var _this = this;
-            if (retries === void 0) { retries = 5; }
-            if (this.modelShouldStillHaveFocus() && this.canFocus()) {
-                if (!this.alreadyHasFocus()) {
-                    this.focusTarget.focus();
-                }
-                // if we didn't get the focus we try again later.
-                if (!this.alreadyHasFocus()) {
-                    pectin.Logger.get(this).log("focus failed, trying " + retries + " more times");
-                    if (retries > 0) {
-                        // try again on the next paint
-                        // TODO: is there an angular way of doing this without calling a window function.
-                        requestAnimationFrame((/**
-                         * @return {?}
-                         */
-                        function () {
-                            _this.tryAndFocus(retries - 1);
-                        }));
-                    }
-                    else {
-                        pectin.Logger.get(this).warn("Tried to focus but gave up as the component wasn't enabled or visible.");
-                    }
-                }
-            }
+        function () {
+            return !this.errorList.query().isEmpty();
         };
-        Object.defineProperty(FocusBindingDirective.prototype, "focusTarget", {
+        Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
             get: /**
              * @return {?}
              */
             function () {
-                return this.focusBindingTarget || this.el.nativeElement;
+                return this.valueModel.errorList;
             },
             enumerable: true,
             configurable: true
         });
-        // Hook method for debugging via tracing.
-        // Hook method for debugging via tracing.
+        Object.defineProperty(AbstractInputComponent.prototype, "firstError", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.hasErrors() ? this.errorList.value[0] : null;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AbstractInputComponent.propDecorators = {
+            userValueModel: [{ type: core.Input, args: ['valueModel',] }],
+            label: [{ type: core.Input }],
+            floatLabel: [{ type: core.Input }],
+            hint: [{ type: core.Input }],
+            placeholder: [{ type: core.Input }],
+            focusCommand: [{ type: core.Input, args: ['command.focus',] }],
+            blurCommand: [{ type: core.Input, args: ['command.blur',] }],
+            enterCommand: [{ type: core.Input, args: ['command.enter',] }],
+            escapeCommand: [{ type: core.Input, args: ['command.escape',] }],
+            clickCommand: [{ type: core.Input, args: ['command.click',] }],
+            focus: [{ type: core.Output }],
+            blur: [{ type: core.Output }],
+            enterKey: [{ type: core.Output }],
+            escapeKey: [{ type: core.Output }],
+            notifyClick: [{ type: core.HostListener, args: ['click',] }],
+            notifyFocusIn: [{ type: core.HostListener, args: ['focusin',] }],
+            notifyFocusOut: [{ type: core.HostListener, args: ['focusout',] }]
+        };
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ValueModel),
+            __metadata("design:paramtypes", [pectin.ValueModel])
+        ], AbstractInputComponent.prototype, "userValueModel", null);
+        return AbstractInputComponent;
+    }(DisposableComponent));
+    if (false) {
+        /** @type {?} */
+        AbstractInputComponent.prototype.valueModel;
+        /** @type {?} */
+        AbstractInputComponent.prototype.label;
+        /** @type {?} */
+        AbstractInputComponent.prototype.floatLabel;
+        /** @type {?} */
+        AbstractInputComponent.prototype.hint;
+        /** @type {?} */
+        AbstractInputComponent.prototype.placeholder;
+        /** @type {?} */
+        AbstractInputComponent.prototype.focusCommand;
+        /** @type {?} */
+        AbstractInputComponent.prototype.blurCommand;
+        /** @type {?} */
+        AbstractInputComponent.prototype.enterCommand;
+        /** @type {?} */
+        AbstractInputComponent.prototype.escapeCommand;
+        /** @type {?} */
+        AbstractInputComponent.prototype.clickCommand;
+        /** @type {?} */
+        AbstractInputComponent.prototype.focus;
+        /** @type {?} */
+        AbstractInputComponent.prototype.blur;
+        /** @type {?} */
+        AbstractInputComponent.prototype.enterKey;
+        /** @type {?} */
+        AbstractInputComponent.prototype.escapeKey;
+        /** @type {?} */
+        AbstractInputComponent.prototype.errorStateMatcher;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var NumberInputComponent = /** @class */ (function (_super) {
+        __extends(NumberInputComponent, _super);
+        function NumberInputComponent() {
+            return _super.call(this) || this;
+        }
         /**
          * @return {?}
          */
-        FocusBindingDirective.prototype.modelShouldStillHaveFocus = 
-        // Hook method for debugging via tracing.
-        /**
+        NumberInputComponent.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
-            return this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
         };
-        // Hook method for debugging via tracing.
-        // Hook method for debugging via tracing.
+        NumberInputComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'aup-number-input',
+                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        NumberInputComponent.ctorParameters = function () { return []; };
+        return NumberInputComponent;
+    }(AbstractInputComponent));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var PasswordInputComponent = /** @class */ (function (_super) {
+        __extends(PasswordInputComponent, _super);
+        function PasswordInputComponent() {
+            return _super.call(this) || this;
+        }
         /**
          * @return {?}
          */
-        FocusBindingDirective.prototype.canFocus = 
-        // Hook method for debugging via tracing.
+        PasswordInputComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        PasswordInputComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'aup-password-input',
+                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        PasswordInputComponent.ctorParameters = function () { return []; };
+        return PasswordInputComponent;
+    }(AbstractInputComponent));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @template T
+     */
+    var SelectInputComponent = /** @class */ (function (_super) {
+        __extends(SelectInputComponent, _super);
+        function SelectInputComponent() {
+            var _this = _super.call(this) || this;
+            _this.optionLabelFormat = (/**
+             * @param {?} option
+             * @return {?}
+             */
+            function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; });
+            return _this;
+        }
         /**
          * @return {?}
          */
+        SelectInputComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
         function () {
-            /** @type {?} */
-            var dimension = this.focusTarget.getBoundingClientRect();
-            /** @type {?} */
-            var hasSize = dimension.height >= 0 && dimension.height >= 0;
-            // tslint:disable-next-line:no-string-literal
-            return hasSize && !this.focusTarget['disabled'];
         };
-        FocusBindingDirective.decorators = [
-            { type: core.Directive, args: [{
-                        // tslint:disable-next-line:directive-selector
-                        selector: '[pectinFocusBinding]'
-                    },] }
+        SelectInputComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'aup-select-input',
+                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"valueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"valueModel\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of optionsModel.value\" [value]=\"option\">{{optionLabelFormat(option)}}\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
+                        styles: [":host{display:inline-block}mat-form-field{width:100%}"]
+                    }] }
         ];
         /** @nocollapse */
-        FocusBindingDirective.ctorParameters = function () { return [
-            { type: core.ElementRef, decorators: [{ type: core.Inject, args: [core.ElementRef,] }] },
-            { type: core.NgZone, decorators: [{ type: core.Inject, args: [core.NgZone,] }] },
-            { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] }
-        ]; };
-        FocusBindingDirective.propDecorators = {
-            pectinFocusBinding: [{ type: core.Input }],
-            focusBindingTarget: [{ type: core.Input }],
-            onFocusIn: [{ type: core.HostListener, args: ['focusin',] }],
-            onFocusOut: [{ type: core.HostListener, args: ['focusout',] }]
+        SelectInputComponent.ctorParameters = function () { return []; };
+        SelectInputComponent.propDecorators = {
+            optionsModel: [{ type: core.Input }],
+            options: [{ type: core.Input }],
+            optionLabel: [{ type: core.Input }],
+            optionLabelFormat: [{ type: core.Input }]
         };
-        return FocusBindingDirective;
-    }(DisposableComponent));
+        __decorate([
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], SelectInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], SelectInputComponent.prototype, "options", void 0);
+        return SelectInputComponent;
+    }(AbstractInputComponent));
     if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        FocusBindingDirective.prototype.document;
         /** @type {?} */
-        FocusBindingDirective.prototype.pectinFocusBinding;
+        SelectInputComponent.prototype.optionsModel;
         /** @type {?} */
-        FocusBindingDirective.prototype.focusBindingTarget;
+        SelectInputComponent.prototype.options;
+        /** @type {?} */
+        SelectInputComponent.prototype.optionLabel;
+        /** @type {?} */
+        SelectInputComponent.prototype.optionLabelFormat;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var StringInputComponent = /** @class */ (function (_super) {
+        __extends(StringInputComponent, _super);
+        function StringInputComponent() {
+            return _super.call(this) || this;
+        }
         /**
-         * @type {?}
-         * @private
+         * @return {?}
          */
-        FocusBindingDirective.prototype.el;
-        /**
-         * @type {?}
-         * @private
+        StringInputComponent.prototype.ngOnInit = /**
+         * @return {?}
          */
-        FocusBindingDirective.prototype.ngZone;
-    }
+        function () {
+        };
+        StringInputComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'aup-string-input',
+                        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [(ngModel)]=\"valueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"valueModel\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                        styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        StringInputComponent.ctorParameters = function () { return []; };
+        return StringInputComponent;
+    }(AbstractInputComponent));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var NoopComponent = /** @class */ (function () {
+        function NoopComponent() {
+        }
+        NoopComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'aup-noop',
+                        template: "",
+                        styles: [":host{display:block}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        NoopComponent.ctorParameters = function () { return []; };
+        return NoopComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ComponentsModule = /** @class */ (function () {
+        function ComponentsModule() {
+        }
+        ComponentsModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [
+                            NumberInputComponent,
+                            StringInputComponent,
+                            PasswordInputComponent,
+                            SelectInputComponent,
+                            NoopComponent
+                        ],
+                        imports: [
+                            common.CommonModule,
+                            animations.BrowserAnimationsModule,
+                            forms.FormsModule,
+                            material.MatInputModule,
+                            material.MatFormFieldModule,
+                            material.MatSelectModule,
+                            tabs.MatTabsModule,
+                            DirectivesModule
+                        ],
+                        exports: [
+                            NumberInputComponent,
+                            StringInputComponent,
+                            PasswordInputComponent,
+                            SelectInputComponent,
+                            NoopComponent
+                        ]
+                    },] }
+        ];
+        return ComponentsModule;
+    }());
 
     /**
      * @fileoverview added by tsickle
@@ -1087,7 +1156,7 @@
      * @abstract
      * @template D, R, E
      */
-    exports.ɵbb = /** @class */ (function (_super) {
+    exports.ɵbd = /** @class */ (function (_super) {
         __extends(Activity, _super);
         function Activity() {
             var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -1177,12 +1246,12 @@
          * @type {?}
          * @private
          */
-        exports.ɵbb.prototype._busyModel;
+        exports.ɵbd.prototype._busyModel;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵbb.prototype._activityContext;
+        exports.ɵbd.prototype._activityContext;
     }
     (function (Activity) {
         /**
@@ -1197,7 +1266,7 @@
             /** @type {?} */
             Callbacks.prototype.onCancel;
         }
-    })(exports.ɵbb || (exports.ɵbb = {}));
+    })(exports.ɵbd || (exports.ɵbd = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1286,7 +1355,7 @@
         });
         ActivityOutletComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-activity-outlet',
+                        selector: 'aup-activity-outlet',
                         template: '',
                         styles: [":host{display:block}"]
                     }] }
@@ -1354,7 +1423,7 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return AbstractActivity;
-    }(exports.ɵbb));
+    }(exports.ɵbd));
 
     /**
      * @fileoverview added by tsickle
@@ -1377,9 +1446,9 @@
         };
         AlertDialogComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-alert-dialog',
+                        selector: 'aup-alert-dialog',
                         template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</p>\n",
-                        styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
                     }] }
         ];
         /** @nocollapse */
@@ -1400,7 +1469,7 @@
     /**
      * @template D, R, E
      */
-    exports.ɵbd = /** @class */ (function (_super) {
+    exports.ɵbf = /** @class */ (function (_super) {
         __extends(ConfirmThenDialogComponent, _super);
         function ConfirmThenDialogComponent(config, interactionContext) {
             var _this = _super.call(this) || this;
@@ -1458,9 +1527,9 @@
         };
         ConfirmThenDialogComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-confirmation-dialog',
+                        selector: 'aup-confirmation-dialog',
                         template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"onConfirm()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</p>\n\n",
-                        styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
                     }] }
         ];
         /** @nocollapse */
@@ -1472,9 +1541,9 @@
     }(AbstractActivity));
     if (false) {
         /** @type {?} */
-        exports.ɵbd.prototype.config;
+        exports.ɵbf.prototype.config;
         /** @type {?} */
-        exports.ɵbd.prototype.interactionContext;
+        exports.ɵbf.prototype.interactionContext;
     }
     (function (ConfirmThenDialogComponent) {
         /**
@@ -1491,7 +1560,7 @@
             /** @type {?} */
             Data.prototype.data;
         }
-    })(exports.ɵbd || (exports.ɵbd = {}));
+    })(exports.ɵbf || (exports.ɵbf = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1524,9 +1593,9 @@
         };
         ConfirmationDialogComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-confirmation-dialog',
+                        selector: 'aup-confirmation-dialog',
                         template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\" data-cy=\"cancel-button\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\"\n          (click)=\"done()\" data-cy=\"confirm-button\">{{confirm.ok()}}</button>\n</p>\n\n",
-                        styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
                     }] }
         ];
         /** @nocollapse */
@@ -1843,7 +1912,7 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this.startActivity(exports.ɵbd, {
+            return this.startActivity(exports.ɵbf, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
@@ -1972,8 +2041,8 @@
         };
         ActivityContainerComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-activity-container',
-                        template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab *ngFor=\"let tab of activityTabs.value\">\n    <angular-ui-powerups-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"tab\"></angular-ui-powerups-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+                        selector: 'aup-activity-container',
+                        template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"true\">\n  <mat-tab *ngFor=\"let tab of activityTabs.value\">\n    <aup-activity-outlet [interactionContext]=\"this\"\n                                         [activityContext]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
                         styles: [":host{display:block}"]
                     }] }
         ];
@@ -2022,7 +2091,7 @@
         }
         InteractionOutletComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-interaction-outlet',
+                        selector: 'aup-interaction-outlet',
                         template: "<router-outlet name=\"interaction-context\"></router-outlet>\n",
                         styles: [":host{display:block}"]
                     }] }
@@ -2177,6 +2246,7 @@
              * @return {?}
              */
             function () {
+                console.log("######  STARTING");
                 _this.currentActivityId = uuid.v1();
                 // this.location.go(this.router.routerState.snapshot.url, "aup");
                 /** @type {?} */
@@ -2233,6 +2303,7 @@
                  * @return {?}
                  */
                 function () {
+                    console.log("######  FINISHED");
                     _this.currentActivityId = null;
                     self.safelyUpdateActivityListDelegate(null);
                 }));
@@ -2297,7 +2368,7 @@
          * @return {?}
          */
         function (confirm, activityType, data) {
-            return this._startActivity(exports.ɵbd, {
+            return this._startActivity(exports.ɵbf, {
                 confirm: confirm,
                 activityType: activityType,
                 data: data
@@ -2370,7 +2441,7 @@
                         declarations: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbd,
+                            exports.ɵbf,
                             AlertDialogComponent,
                             ActivityOutletComponent,
                             InteractionOutletComponent
@@ -2383,7 +2454,7 @@
                         entryComponents: [
                             ActivityContainerComponent,
                             ConfirmationDialogComponent,
-                            exports.ɵbd,
+                            exports.ɵbf,
                             AlertDialogComponent
                         ],
                         providers: [
@@ -2411,7 +2482,7 @@
         };
         BusyOverlayComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-busy-overlay',
+                        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}"]
                     }] }
@@ -2456,9 +2527,9 @@
         };
         EmptyStateComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-empty-state',
+                        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(--angular-ui-powerups-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
+                        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 */
@@ -2773,11 +2844,10 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     exports.PlaceDefinition = /** @class */ (function () {
-        function PlaceDefinition(component, path, authenticate, order, data, routeParameters, children) {
+        function PlaceDefinition(component, path, authenticate, data, routeParameters, children) {
             this.component = component;
             this.path = path;
             this.authenticate = authenticate;
-            this.order = order;
             this.data = data;
             this.routeParameters = routeParameters;
             this.children = children;
@@ -3083,8 +3153,6 @@
         /** @type {?} */
         exports.PlaceDefinition.prototype.authenticate;
         /** @type {?} */
-        exports.PlaceDefinition.prototype.order;
-        /** @type {?} */
         exports.PlaceDefinition.prototype.data;
         /** @type {?} */
         exports.PlaceDefinition.prototype.routeParameters;
@@ -3275,136 +3343,182 @@
      * @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
-             * @return {?}
-             */
-            function (c) { return exports.PlaceComponent.getDefinition(c); }));
-            return _this;
+    /**
+     * @record
+     */
+    function Params() { }
+    var Visit = /** @class */ (function () {
+        function Visit(placeDefinition, visitParameters) {
+            if (visitParameters === void 0) { visitParameters = {}; }
+            this.placeDefinition = placeDefinition;
+            this.visitParameters = visitParameters;
         }
+        // @Trace()
+        // @Trace()
         /**
-         * @param {?} placeDef
          * @return {?}
          */
-        AbstractPlaceNavigationComponent.prototype.getNav = /**
-         * @param {?} placeDef
+        Visit.prototype.getRouteId = 
+        // @Trace()
+        /**
          * @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: (/**
-                 * @return {?}
-                 */
-                function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); })
-            };
+        function () {
+            return this.placeDefinition.getRouteIdFrom(this);
         };
+        // @Trace()
+        // @Trace()
         /**
          * @return {?}
          */
-        AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
+        Visit.prototype.hasRouteId = 
+        // @Trace()
+        /**
          * @return {?}
          */
         function () {
+            return !___default.isNil(this.getRouteId());
         };
-        AbstractPlaceNavigationComponent.propDecorators = {
-            places: [{ type: core.Input }],
-            placesModel: [{ type: core.Input }]
+        /**
+         * Returns the value of the place parameter with the specified name.  The parameter
+         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+         * same as the the ValueModel property name.
+         * @param parameterName the field name of the property model or the `as` option if specified.
+         */
+        /**
+         * Returns the value of the place parameter with the specified name.  The parameter
+         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+         * same as the the ValueModel property name.
+         * @param {?} parameterName the field name of the property model or the `as` option if specified.
+         * @return {?}
+         */
+        Visit.prototype.getParameter = /**
+         * Returns the value of the place parameter with the specified name.  The parameter
+         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+         * same as the the ValueModel property name.
+         * @param {?} parameterName the field name of the property model or the `as` option if specified.
+         * @return {?}
+         */
+        function (parameterName) {
+            return this.visitParameters[parameterName];
+        };
+        // @Trace()
+        // @Trace()
+        /**
+         * @param {?} parameterName
+         * @return {?}
+         */
+        Visit.prototype.hasParameter = 
+        // @Trace()
+        /**
+         * @param {?} parameterName
+         * @return {?}
+         */
+        function (parameterName) {
+            return Object.keys(this.visitParameters).includes(parameterName);
+        };
+        /**
+         * @template S
+         * @param {?} parameter
+         * @param {?} value
+         * @return {?}
+         */
+        Visit.prototype.replace = /**
+         * @template S
+         * @param {?} parameter
+         * @param {?} value
+         * @return {?}
+         */
+        function (parameter, value) {
+            var _a;
+            return new Visit(this.placeDefinition, __assign({}, this.visitParameters, (_a = {}, _a[parameter.name] = value, _a)));
+        };
+        /**
+         * @template S
+         * @param {?} routeParams
+         * @return {?}
+         */
+        Visit.prototype.mergeRouteParameters = /**
+         * @template S
+         * @param {?} routeParams
+         * @return {?}
+         */
+        function (routeParams) {
+            var _this = this;
+            // todo: whitelist parameters.
+            /** @type {?} */
+            var routeParameterKeys = Object.keys(routeParams);
+            /** @type {?} */
+            var params = {};
+            this.placeDefinition.getVisitParameterDefs().forEach((/**
+             * @param {?} def
+             * @return {?}
+             */
+            function (def) {
+                if (def.isRouteId || def.isRouteParameter) {
+                    if (routeParameterKeys.includes(def.name)) {
+                        params[def.name] = routeParams[def.name];
+                    }
+                }
+                else {
+                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
+                    // defaults and remember sanitisation process.
+                    if (_this.hasParameter(def.name)) {
+                        params[def.name] = _this.getParameter(def.name);
+                    }
+                }
+            }));
+            return new Visit(this.placeDefinition, params);
         };
-        __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([
-            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.placeDefinitions;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var ListPlaceNavComponent = /** @class */ (function (_super) {
-        __extends(ListPlaceNavComponent, _super);
-        function ListPlaceNavComponent() {
-            var _this = _super.call(this) || this;
-            _this.expanded = true;
-            return _this;
-        }
         /**
+         * @param {?} other
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.expandMenu = /**
+        Visit.prototype.hasRoutingChangedFrom = /**
+         * @param {?} other
          * @return {?}
          */
-        function () {
-            this.expanded = true;
+        function (other) {
+            /** @type {?} */
+            var samePlace = other.placeDefinition === this.placeDefinition;
+            /** @type {?} */
+            var sameRouteParameters = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+            return !samePlace || !sameRouteParameters;
         };
         /**
+         * @param {?} other
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.collapseMenu = /**
+        Visit.prototype.hasChangedFrom = /**
+         * @param {?} other
          * @return {?}
          */
-        function () {
-            this.expanded = false;
+        function (other) {
+            /** @type {?} */
+            var sameNonRouteParameters = ___default.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
         };
         /**
          * @return {?}
          */
-        ListPlaceNavComponent.prototype.toggleMenu = /**
+        Visit.prototype.getUrlSegments = /**
          * @return {?}
          */
         function () {
-            this.expanded = !this.expanded;
-        };
-        ListPlaceNavComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-list-place-nav',
-                        template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     [replaceUrl]=\"true\"\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).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:inherit}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',] }]
+            return this.placeDefinition.hasRouteId() ?
+                [new router.UrlSegment(this.placeDefinition.path, {}), new router.UrlSegment(this.placeDefinition.getFormattedRouteId(this), this.placeDefinition.getFormattedRouteParameters(this))] :
+                [new router.UrlSegment(this.placeDefinition.path, this.placeDefinition.getFormattedRouteParameters(this))];
         };
-        return ListPlaceNavComponent;
-    }(AbstractPlaceNavigationComponent));
+        return Visit;
+    }());
     if (false) {
         /** @type {?} */
-        ListPlaceNavComponent.prototype.expanded;
+        Visit.prototype.placeDefinition;
+        /**
+         * @type {?}
+         * @private
+         */
+        Visit.prototype.visitParameters;
     }
 
     /**
@@ -3615,243 +3729,72 @@
         /**
          * @param {?} state
          * @return {?}
-         */
-        function (state) {
-            /** @type {?} */
-            var history = this.getHistory(state.placeDefinition);
-            /** @type {?} */
-            var previousState = ___default__default.last(history);
-            if (!previousState || state.hasChangedFrom(previousState)) {
-                history.unshift(state); // LIFO
-                this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
-            }
-        };
-        /**
-         * @param {?} placeDef
-         * @return {?}
-         */
-        PlaceHistory.prototype.getHistory = /**
-         * @param {?} placeDef
-         * @return {?}
-         */
-        function (placeDef) {
-            /** @type {?} */
-            var history = this._history.get(placeDef);
-            if (!history) {
-                history = [];
-                this.setHistory(placeDef, history);
-            }
-            return history;
-        };
-        /**
-         * @private
-         * @param {?} placeDef
-         * @param {?} history
-         * @return {?}
-         */
-        PlaceHistory.prototype.setHistory = /**
-         * @private
-         * @param {?} placeDef
-         * @param {?} history
-         * @return {?}
-         */
-        function (placeDef, history) {
-            this._history.set(placeDef, history);
-        };
-        PlaceHistory.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        PlaceHistory.ctorParameters = function () { return [
-            { type: router.Router }
-        ]; };
-        /** @nocollapse */ PlaceHistory.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(core.ɵɵinject(router.Router)); }, token: PlaceHistory, providedIn: "root" });
-        return PlaceHistory;
-    }());
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        PlaceHistory.prototype._history;
-        /**
-         * @type {?}
-         * @private
-         */
-        PlaceHistory.prototype.router;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @record
-     */
-    function Params() { }
-    var Visit = /** @class */ (function () {
-        function Visit(placeDefinition, visitParameters) {
-            if (visitParameters === void 0) { visitParameters = {}; }
-            this.placeDefinition = placeDefinition;
-            this.visitParameters = visitParameters;
-        }
-        // @Trace()
-        // @Trace()
-        /**
-         * @return {?}
-         */
-        Visit.prototype.getRouteId = 
-        // @Trace()
-        /**
-         * @return {?}
-         */
-        function () {
-            return this.placeDefinition.getRouteIdFrom(this);
-        };
-        // @Trace()
-        // @Trace()
-        /**
-         * @return {?}
-         */
-        Visit.prototype.hasRouteId = 
-        // @Trace()
-        /**
-         * @return {?}
-         */
-        function () {
-            return !___default.isNil(this.getRouteId());
-        };
-        /**
-         * Returns the value of the place parameter with the specified name.  The parameter
-         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-         * same as the the ValueModel property name.
-         * @param parameterName the field name of the property model or the `as` option if specified.
-         */
-        /**
-         * Returns the value of the place parameter with the specified name.  The parameter
-         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-         * same as the the ValueModel property name.
-         * @param {?} parameterName the field name of the property model or the `as` option if specified.
-         * @return {?}
-         */
-        Visit.prototype.getParameter = /**
-         * Returns the value of the place parameter with the specified name.  The parameter
-         * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-         * same as the the ValueModel property name.
-         * @param {?} parameterName the field name of the property model or the `as` option if specified.
-         * @return {?}
-         */
-        function (parameterName) {
-            return this.visitParameters[parameterName];
-        };
-        // @Trace()
-        // @Trace()
-        /**
-         * @param {?} parameterName
-         * @return {?}
-         */
-        Visit.prototype.hasParameter = 
-        // @Trace()
-        /**
-         * @param {?} parameterName
-         * @return {?}
-         */
-        function (parameterName) {
-            return Object.keys(this.visitParameters).includes(parameterName);
-        };
-        /**
-         * @template S
-         * @param {?} parameter
-         * @param {?} value
-         * @return {?}
-         */
-        Visit.prototype.replace = /**
-         * @template S
-         * @param {?} parameter
-         * @param {?} value
-         * @return {?}
-         */
-        function (parameter, value) {
-            var _a;
-            return new Visit(this.placeDefinition, __assign({}, this.visitParameters, (_a = {}, _a[parameter.name] = value, _a)));
-        };
-        /**
-         * @template S
-         * @param {?} routeParams
-         * @return {?}
-         */
-        Visit.prototype.mergeRouteParameters = /**
-         * @template S
-         * @param {?} routeParams
-         * @return {?}
-         */
-        function (routeParams) {
-            var _this = this;
-            // todo: whitelist parameters.
+         */
+        function (state) {
             /** @type {?} */
-            var routeParameterKeys = Object.keys(routeParams);
+            var history = this.getHistory(state.placeDefinition);
             /** @type {?} */
-            var params = {};
-            this.placeDefinition.getVisitParameterDefs().forEach((/**
-             * @param {?} def
-             * @return {?}
-             */
-            function (def) {
-                if (def.isRouteId || def.isRouteParameter) {
-                    if (routeParameterKeys.includes(def.name)) {
-                        params[def.name] = routeParams[def.name];
-                    }
-                }
-                else {
-                    // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
-                    // defaults and remember sanitisation process.
-                    if (_this.hasParameter(def.name)) {
-                        params[def.name] = _this.getParameter(def.name);
-                    }
-                }
-            }));
-            return new Visit(this.placeDefinition, params);
+            var previousState = ___default__default.last(history);
+            if (!previousState || state.hasChangedFrom(previousState)) {
+                history.unshift(state); // LIFO
+                this.setHistory(state.placeDefinition, history.slice(0, 3)); // limit our history to 4 visits
+            }
         };
         /**
-         * @param {?} other
+         * @param {?} placeDef
          * @return {?}
          */
-        Visit.prototype.hasRoutingChangedFrom = /**
-         * @param {?} other
+        PlaceHistory.prototype.getHistory = /**
+         * @param {?} placeDef
          * @return {?}
          */
-        function (other) {
-            /** @type {?} */
-            var samePlace = other.placeDefinition === this.placeDefinition;
+        function (placeDef) {
             /** @type {?} */
-            var sameRouteParameters = ___default.isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-            return !samePlace || !sameRouteParameters;
+            var history = this._history.get(placeDef);
+            if (!history) {
+                history = [];
+                this.setHistory(placeDef, history);
+            }
+            return history;
         };
         /**
-         * @param {?} other
+         * @private
+         * @param {?} placeDef
+         * @param {?} history
          * @return {?}
          */
-        Visit.prototype.hasChangedFrom = /**
-         * @param {?} other
+        PlaceHistory.prototype.setHistory = /**
+         * @private
+         * @param {?} placeDef
+         * @param {?} history
          * @return {?}
          */
-        function (other) {
-            /** @type {?} */
-            var sameNonRouteParameters = ___default.isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-            return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+        function (placeDef, history) {
+            this._history.set(placeDef, history);
         };
-        return Visit;
+        PlaceHistory.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        PlaceHistory.ctorParameters = function () { return [
+            { type: router.Router }
+        ]; };
+        /** @nocollapse */ PlaceHistory.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(core.ɵɵinject(router.Router)); }, token: PlaceHistory, providedIn: "root" });
+        return PlaceHistory;
     }());
     if (false) {
-        /** @type {?} */
-        Visit.prototype.placeDefinition;
         /**
          * @type {?}
          * @private
          */
-        Visit.prototype.visitParameters;
+        PlaceHistory.prototype._history;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceHistory.prototype.router;
     }
 
     /**
@@ -3983,13 +3926,17 @@
                 });
             });
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} activatedRoute
          * @param {?} previous
          * @param {?} next
          * @return {?}
          */
-        PlaceRouter.prototype.pushVisitChangesToRoute = /**
+        PlaceRouter.prototype.pushVisitChangesToRoute = 
+        // @Trace()
+        /**
          * @param {?} activatedRoute
          * @param {?} previous
          * @param {?} next
@@ -4009,13 +3956,16 @@
                              * @return {?}
                              */
                             function (router) {
+                                // 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>]
                                 /** @type {?} */
                                 var relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
                                 /** @type {?} */
                                 var commands = __spread([
                                     relativePath
                                 ], _this.createRouteParameters(next), _this.extractChildPath(activatedRoute.snapshot));
-                                console.log('### Redirect', commands);
+                                console.log('### Push Changes to route Redirect', { commands: commands, relativeTo: activatedRoute.snapshot.url });
                                 return router.navigate(commands, {
                                     relativeTo: activatedRoute
                                 });
@@ -4164,12 +4114,6 @@
             __metadata("design:paramtypes", [Visit, Object]),
             __metadata("design:returntype", Promise)
         ], PlaceRouter.prototype, "navigate", null);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [router.ActivatedRoute, Visit, Visit]),
-            __metadata("design:returntype", Promise)
-        ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
         return PlaceRouter;
     }(pectin.GarbageCollector));
     if (false) {
@@ -4283,18 +4227,40 @@
             var _this = _super.call(this) || this;
             _this.router = router;
             _this.placeRouter = placeRouter;
-            _this.parentOutlet = parentOutlet;
             _this.animate = true;
             _this.placeChanged = new core.EventEmitter();
             _this._activePlace = new pectin.MutableValueModel();
+            _this._placeVisit = new pectin.MutableValueModel();
             _this._inOutletUpdate = new pectin.Guard();
             _this._activatedRouteModel = new pectin.MutableValueModel();
             _this._placeDefinition = new pectin.MutableValueModel();
-            /**
-             * TODO: This is now really a visit
-             */
-            _this._placeVisit = new pectin.MutableValueModel();
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.parentOutletModel = new pectin.MutableValueModel(parentOutlet);
+            /** @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
+             * @return {?}
+             */
+            function (p) { return (/** @type {?} */ (p.constructor)); }));
+            _this.placeAnimationOrder = chain(_this.customPlaceAnimationOrderModel)
+                .otherwise(defaultPlaceAnimationOrder)
+                .indexOf(activatePlaceType)
+                .map((/**
+             * @param {?} order
+             * @return {?}
+             */
+            function (order) { return Math.max(order, 0); })); // we get -1 on the first load which triggers an animation to the first page, so alway pin it to 0.
+            // we get -1 on the first load which triggers an animation to the first page, so alway pin it to 0.
             // Push incoming changes into the component
             /** @type {?} */
             var routeVisit = chain(_this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
@@ -4358,6 +4324,16 @@
                 relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
             });
         };
+        Object.defineProperty(PlaceOutletComponent.prototype, "parentOutlet", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.parentOutletModel.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @param {?} next
          * @param {?} previous
@@ -4424,12 +4400,16 @@
                 this.animationDone();
             }
         };
+        // @Trace()
+        // @Trace()
         /**
          * @param {?} routerOutlet
          * @param {?} $event
          * @return {?}
          */
-        PlaceOutletComponent.prototype.onOutletDeactivated = /**
+        PlaceOutletComponent.prototype.onOutletDeactivated = 
+        // @Trace()
+        /**
          * @param {?} routerOutlet
          * @param {?} $event
          * @return {?}
@@ -4446,110 +4426,281 @@
             }));
         };
         /**
-         * @param {?} outlet
          * @return {?}
          */
-        PlaceOutletComponent.prototype.getPlaceOrder = /**
-         * @param {?} outlet
+        PlaceOutletComponent.prototype.animationDone = /**
+         * @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]=\"placeAnimationOrder.value\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated(routerOutlet, $event)\">\n  </router-outlet>\n</div>\n\n",
+                        animations: [LEFT_RIGHT_PLACE_ANIMATION],
+                        styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        PlaceOutletComponent.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: PlaceRouter },
+            { 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 },] }]
+        };
+        __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);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [Visit]),
+            __metadata("design:returntype", void 0)
+        ], PlaceOutletComponent.prototype, "navigate", null);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [router.RouterOutlet, exports.PlaceComponent]),
+            __metadata("design:returntype", void 0)
+        ], PlaceOutletComponent.prototype, "onOutletActivated", null);
+        return PlaceOutletComponent;
+    }(DisposableComponent));
+    if (false) {
+        /** @type {?} */
+        PlaceOutletComponent.prototype.animate;
+        /** @type {?} */
+        PlaceOutletComponent.prototype.customPlaceAnimationOrderModel;
+        /** @type {?} */
+        PlaceOutletComponent.prototype.customPlaceAnimationOrder;
+        /** @type {?} */
+        PlaceOutletComponent.prototype.placeChanged;
+        /** @type {?} */
+        PlaceOutletComponent.prototype.routerOut;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype._activePlace;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype._placeVisit;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype._inOutletUpdate;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype._activatedRouteModel;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype._placeDefinition;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype.parentOutletModel;
+        /** @type {?} */
+        PlaceOutletComponent.prototype.placeAnimationOrder;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype.router;
+        /**
+         * @type {?}
+         * @private
+         */
+        PlaceOutletComponent.prototype.placeRouter;
+    }
+
+    /**
+     * @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
+             * @return {?}
+             */
+            function (c) { return exports.PlaceComponent.getDefinition(c); }));
+            _this.relativeToModel = chain(_this.placeOutletModel).pullValueModel((/**
+             * @param {?} o
+             * @return {?}
+             */
+            function (o) { return o.activatedRouteModel; }));
+            _this.commandFactory = pectin.Command.createFactory((/**
+             * @param {?} placeDefinition
+             * @return {?}
+             */
+            function (placeDefinition) {
+                _this.placeOutlet.navigate(new Visit(placeDefinition));
+            }));
+            return _this;
+        }
+        /**
+         * @param {?} placeDef
+         * @return {?}
+         */
+        AbstractPlaceNavigationComponent.prototype.getNav = /**
+         * @param {?} placeDef
          * @return {?}
          */
-        function (outlet) {
-            return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
+        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: (/**
+                 * @return {?}
+                 */
+                function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); })
+            };
         };
         /**
          * @return {?}
          */
-        PlaceOutletComponent.prototype.animationDone = /**
+        AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
          * @return {?}
          */
         function () {
-            if (this._activePlace.value) {
-                this._activePlace.value.onPlaceReady();
-            }
         };
-        PlaceOutletComponent.decorators = [
-            { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-place-outlet',
-                        template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated(routerOutlet, $event)\">\n  </router-outlet>\n</div>\n\n",
-                        animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                        styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
-                    }] }
-        ];
-        /** @nocollapse */
-        PlaceOutletComponent.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: PlaceRouter },
-            { type: PlaceOutletComponent, decorators: [{ type: core.SkipSelf }, { type: core.Optional }] }
-        ]; };
-        PlaceOutletComponent.propDecorators = {
-            animate: [{ type: core.Input }],
-            placeChanged: [{ type: core.Output }],
-            routerOut: [{ type: core.ViewChild, args: ['routeOutlet', { static: true },] }]
+        AbstractPlaceNavigationComponent.propDecorators = {
+            places: [{ type: core.Input }],
+            placesModel: [{ type: core.Input }],
+            placeOutlet: [{ type: core.Input }],
+            placeOutletModel: [{ type: core.Input }]
         };
         __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Visit]),
-            __metadata("design:returntype", void 0)
-        ], PlaceOutletComponent.prototype, "navigate", null);
+            pectin.StoreInListModel('placesModel'),
+            __metadata("design:type", Array)
+        ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
         __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [router.RouterOutlet, exports.PlaceComponent]),
-            __metadata("design:returntype", void 0)
-        ], PlaceOutletComponent.prototype, "onOutletActivated", null);
+            pectin.UseDelegate(),
+            __metadata("design:type", pectin.ListModel)
+        ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
         __decorate([
-            pectin.Trace(),
+            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", [router.RouterOutlet, Object]),
-            __metadata("design:returntype", void 0)
-        ], PlaceOutletComponent.prototype, "onOutletDeactivated", null);
-        return PlaceOutletComponent;
+            __metadata("design:paramtypes", [exports.PlaceDefinition]),
+            __metadata("design:returntype", Object)
+        ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+        return AbstractPlaceNavigationComponent;
     }(DisposableComponent));
     if (false) {
         /** @type {?} */
-        PlaceOutletComponent.prototype.animate;
+        AbstractPlaceNavigationComponent.prototype.places;
         /** @type {?} */
-        PlaceOutletComponent.prototype.placeChanged;
+        AbstractPlaceNavigationComponent.prototype.placesModel;
         /** @type {?} */
-        PlaceOutletComponent.prototype.routerOut;
+        AbstractPlaceNavigationComponent.prototype.placeOutlet;
+        /** @type {?} */
+        AbstractPlaceNavigationComponent.prototype.placeOutletModel;
+        /** @type {?} */
+        AbstractPlaceNavigationComponent.prototype.placeDefinitions;
         /**
          * @type {?}
-         * @private
+         * @protected
          */
-        PlaceOutletComponent.prototype._activePlace;
+        AbstractPlaceNavigationComponent.prototype.relativeToModel;
+        /** @type {?} */
+        AbstractPlaceNavigationComponent.prototype.commandFactory;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var ListPlaceNavComponent = /** @class */ (function (_super) {
+        __extends(ListPlaceNavComponent, _super);
+        function ListPlaceNavComponent() {
+            var _this = _super.call(this) || this;
+            _this.expanded = true;
+            return _this;
+        }
         /**
-         * @type {?}
-         * @private
+         * @return {?}
          */
-        PlaceOutletComponent.prototype._inOutletUpdate;
-        /**
-         * @type {?}
-         * @private
+        ListPlaceNavComponent.prototype.expandMenu = /**
+         * @return {?}
          */
-        PlaceOutletComponent.prototype._activatedRouteModel;
+        function () {
+            this.expanded = true;
+        };
         /**
-         * @type {?}
-         * @private
+         * @return {?}
          */
-        PlaceOutletComponent.prototype._placeDefinition;
-        /**
-         * TODO: This is now really a visit
-         * @type {?}
+        ListPlaceNavComponent.prototype.collapseMenu = /**
+         * @return {?}
          */
-        PlaceOutletComponent.prototype._placeVisit;
+        function () {
+            this.expanded = false;
+        };
         /**
-         * @type {?}
-         * @private
+         * @return {?}
          */
-        PlaceOutletComponent.prototype.router;
-        /**
-         * @type {?}
-         * @private
+        ListPlaceNavComponent.prototype.toggleMenu = /**
+         * @return {?}
          */
-        PlaceOutletComponent.prototype.placeRouter;
+        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 place of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(place)\"\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).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:inherit}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',] }]
+        };
+        return ListPlaceNavComponent;
+    }(AbstractPlaceNavigationComponent));
+    if (false) {
         /** @type {?} */
-        PlaceOutletComponent.prototype.parentOutlet;
+        ListPlaceNavComponent.prototype.expanded;
     }
 
     /**
@@ -4563,8 +4714,8 @@
         }
         TabbedPlaceNavigationComponent.decorators = [
             { type: core.Component, args: [{
-                        selector: 'angular-ui-powerups-tabbed-place-navigation',
-                        template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let place of placeDefinitions.value\"\n     [routerLink]='place.path'\n     [replaceUrl]=\"true\"\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span>{{getNav(place).title()}}</span>\n  </a>\n</nav>\n",
+                        selector: 'aup-tabbed-place-navigation',
+                        template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let place of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(place)\"\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span>{{getNav(place).title()}}</span>\n  </a>\n</nav>\n",
                         styles: [""]
                     }] }
         ];
@@ -4590,7 +4741,8 @@
                             tabs.MatTabsModule,
                             list.MatListModule,
                             tooltip.MatTooltipModule,
-                            icon.MatIconModule
+                            icon.MatIconModule,
+                            DirectivesModule
                         ],
                         declarations: [
                             EmptyStateComponent,
@@ -4622,15 +4774,7 @@
         }
         AngularUiPowerupsModule.decorators = [
             { type: core.NgModule, args: [{
-                        declarations: [
-                            CommandDirective,
-                            FocusBindingDirective,
-                            NumberInputComponent,
-                            StringInputComponent,
-                            PasswordInputComponent,
-                            SelectInputComponent,
-                            NoopComponent
-                        ],
+                        declarations: [],
                         imports: [
                             common.CommonModule,
                             animations.BrowserAnimationsModule,
@@ -4639,18 +4783,16 @@
                             material.MatFormFieldModule,
                             material.MatSelectModule,
                             tabs.MatTabsModule,
+                            DirectivesModule,
+                            ComponentsModule,
                             PlaceModule,
                             InteractionModule
                         ],
                         exports: [
-                            CommandDirective,
-                            FocusBindingDirective,
-                            NumberInputComponent,
-                            StringInputComponent,
-                            PasswordInputComponent,
-                            SelectInputComponent,
                             InteractionModule,
                             PlaceModule,
+                            DirectivesModule,
+                            ComponentsModule,
                             NoopComponent
                         ]
                     },] }
@@ -5146,7 +5288,7 @@
          */
         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.order, options.data, exports.PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+                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 {?}
                  */
@@ -5166,8 +5308,6 @@
         if (false) {
             /** @type {?} */
             Options.prototype.path;
-            /** @type {?} */
-            Options.prototype.order;
             /** @type {?|undefined} */
             Options.prototype.data;
             /** @type {?|undefined} */
@@ -5471,218 +5611,79 @@
                             placeDef = visit.placeDefinition;
                             if (!placeDef.hasRouteId()) return [3 /*break*/, 2];
                             routeIdDef = placeDef.getRouteIdParameterDef();
-                            routeId = visit.getRouteId();
-                            return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
-                        case 1:
-                            sanitisedValue = _a.sent();
-                            console.log({ routeId: routeId, sanitisedValue: sanitisedValue });
-                            // ###------- EARLY EXIT --------###
-                            if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
-                                // if the route id has changed we redirect immediately as other
-                                // parameter sanitisers might use it.
-                                return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
-                            }
-                            _a.label = 2;
-                        case 2:
-                            // if we didn't replace the routeId we continue the url present parameters.
-                            parameterDefs = placeDef.getVisitParameterDefs({
-                                includeRouteParameters: true,
-                                includeNonRouteParameters: true
-                            });
-                            sanitisedVisit = visit;
-                            i = 0;
-                            _a.label = 3;
-                        case 3:
-                            if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
-                            def = parameterDefs[i];
-                            value = visit.getParameter(def.name);
-                            return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
-                        case 4:
-                            sanitisedValue = _a.sent();
-                            if (def.hasChanged(value, sanitisedValue)) {
-                                sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
-                            }
-                            _a.label = 5;
-                        case 5:
-                            i++;
-                            return [3 /*break*/, 3];
-                        case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
-                    }
-                });
-            });
-        };
-        return VisitSanitiser;
-    }());
-    if (false) {
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.activatedRoute;
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.router;
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.placeHistory;
-        /**
-         * @type {?}
-         * @private
-         */
-        VisitSanitiser.prototype.injector;
-    }
-
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    var LeavePlaceGuard = /** @class */ (function () {
-        function LeavePlaceGuard(router, injector, placeRouter, interactionContext, angularLocation) {
-            this.router = router;
-            this.injector = injector;
-            this.placeRouter = placeRouter;
-            this.interactionContext = interactionContext;
-            this.angularLocation = angularLocation;
-        }
-        /**
-         * @private
-         * @param {?} nextState
-         * @param {?} placeDefinitionPath
-         * @return {?}
-         */
-        LeavePlaceGuard.prototype.isLeavingTheCurrentPlace = /**
-         * @private
-         * @param {?} nextState
-         * @param {?} placeDefinitionPath
-         * @return {?}
-         */
-        function (nextState, placeDefinitionPath) {
-            // TODO: this will break with child routes... need to examine the router states properly.
-            return !nextState.url.startsWith(placeDefinitionPath);
-        };
-        /**
-         * @param {?} component
-         * @param {?} currentRoute
-         * @param {?} currentState
-         * @param {?=} nextState
-         * @return {?}
-         */
-        LeavePlaceGuard.prototype.canDeactivate = /**
-         * @param {?} component
-         * @param {?} currentRoute
-         * @param {?} currentState
-         * @param {?=} nextState
-         * @return {?}
-         */
-        function (component, currentRoute, currentState, nextState) {
-            return __awaiter(this, void 0, void 0, function () {
-                var placeDefinitionPath, self_1, canLeave;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            placeDefinitionPath = "/" + component.placeDefinition.path;
-                            if (!this.placeRouter.navigationSession.alreadyAccepted(component)) return [3 /*break*/, 1];
-                            // We'll get called multiple times if there's any parameter sanitisation so
-                            // we always return true if we accepted on a previous cycle of the current
-                            // navigation session.
-                            return [2 /*return*/, true];
+                            routeId = visit.getRouteId();
+                            return [4 /*yield*/, routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector)];
                         case 1:
-                            self_1 = this;
-                            canLeave = true;
-                            if (!this.isLeavingTheCurrentPlace(nextState, placeDefinitionPath)) return [3 /*break*/, 4];
-                            // we check the interaction first, so that components that don't need to check if they're in an
-                            // interaction during the canDeactivate cycle.
-                            // TODO: Add tests: show dialog -> hit back -> same route
-                            if (this.interactionContext.isActive()) {
-                                canLeave = false;
-                                console.log('cancelling', { activity: this.interactionContext.currentActivity });
-                                this.interactionContext.currentActivity.cancel(null);
+                            sanitisedValue = _a.sent();
+                            console.log({ routeId: routeId, sanitisedValue: sanitisedValue });
+                            // ###------- EARLY EXIT --------###
+                            if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
+                                // if the route id has changed we redirect immediately as other
+                                // parameter sanitisers might use it.
+                                return [2 /*return*/, visit.replace(routeIdDef, sanitisedValue)];
                             }
-                            if (!canLeave) return [3 /*break*/, 3];
-                            return [4 /*yield*/, component.canDeactivate()];
+                            _a.label = 2;
                         case 2:
-                            // TODO: Add tests: hit back -> confirm leave dialog -> hit back -> close dialog ->  hit back -> confirm leave dialog.
-                            canLeave = _a.sent();
+                            // if we didn't replace the routeId we continue the url present parameters.
+                            parameterDefs = placeDef.getVisitParameterDefs({
+                                includeRouteParameters: true,
+                                includeNonRouteParameters: true
+                            });
+                            sanitisedVisit = visit;
+                            i = 0;
                             _a.label = 3;
-                        case 3: return [3 /*break*/, 5];
+                        case 3:
+                            if (!(i < parameterDefs.length)) return [3 /*break*/, 6];
+                            def = parameterDefs[i];
+                            value = visit.getParameter(def.name);
+                            return [4 /*yield*/, def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector)];
                         case 4:
-                            if (this.interactionContext.isActive()) {
-                                console.log('cancelling', { activity: this.interactionContext.currentActivity });
-                                this.interactionContext.currentActivity.cancel(null);
-                                canLeave = false;
-                            }
-                            else {
-                                canLeave = true;
+                            sanitisedValue = _a.sent();
+                            if (def.hasChanged(value, sanitisedValue)) {
+                                sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
                             }
                             _a.label = 5;
                         case 5:
-                            if (canLeave) {
-                                // We'll get called multiple times if there's any parameter sanitisation so
-                                // we remember the acceptance for the duration of the current navigation session.
-                                self_1.placeRouter.navigationSession.rememberAcceptanceOf(component);
-                            }
-                            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 (this.placeRouter.navigationSession.isPopState) {
-                                    console.log('cancelled during popstate');
-                                    this.angularLocation.go(this.placeRouter.navigationSession.popStateReturnUrl);
-                                }
-                            }
-                            return [2 /*return*/, canLeave];
+                            i++;
+                            return [3 /*break*/, 3];
+                        case 6: return [2 /*return*/, sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit];
                     }
                 });
             });
         };
-        LeavePlaceGuard.decorators = [
-            { type: core.Injectable, args: [{
-                        providedIn: 'root'
-                    },] }
-        ];
-        /** @nocollapse */
-        LeavePlaceGuard.ctorParameters = function () { return [
-            { type: router.Router },
-            { type: core.Injector },
-            { type: PlaceRouter },
-            { type: InteractionContext },
-            { type: common.Location }
-        ]; };
-        /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(PlaceRouter), core.ɵɵinject(InteractionContext), core.ɵɵinject(common.Location)); }, token: LeavePlaceGuard, providedIn: "root" });
-        return LeavePlaceGuard;
+        return VisitSanitiser;
     }());
     if (false) {
         /**
          * @type {?}
          * @private
          */
-        LeavePlaceGuard.prototype.router;
+        VisitSanitiser.prototype.activatedRoute;
         /**
          * @type {?}
          * @private
          */
-        LeavePlaceGuard.prototype.injector;
+        VisitSanitiser.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        LeavePlaceGuard.prototype.placeRouter;
-        /** @type {?} */
-        LeavePlaceGuard.prototype.interactionContext;
-        /** @type {?} */
-        LeavePlaceGuard.prototype.angularLocation;
+        VisitSanitiser.prototype.placeHistory;
+        /**
+         * @type {?}
+         * @private
+         */
+        VisitSanitiser.prototype.injector;
     }
 
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.PlaceRouteGuard = /** @class */ (function () {
-        function PlaceRouteGuard(router, placeRouter, placeHistory, injector) {
+    exports.EnterPlaceGuard = /** @class */ (function () {
+        function EnterPlaceGuard(router, urlSerializer, placeRouter, placeHistory, injector) {
             this.router = router;
+            this.urlSerializer = urlSerializer;
             this.placeRouter = placeRouter;
             this.placeHistory = placeHistory;
             this.injector = injector;
@@ -5694,7 +5695,7 @@
          * @param {?} state
          * @return {?}
          */
-        PlaceRouteGuard.prototype.canActivate = 
+        EnterPlaceGuard.prototype.canActivate = 
         // @Trace()
         /**
          * @param {?} activatedRoute
@@ -5703,14 +5704,14 @@
          */
         function (activatedRoute, state) {
             return __awaiter(this, void 0, void 0, function () {
-                var placeDefinition, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, parameterCommands, commands;
+                var placeDefinition, params, parsedParams, initialVisit, sanitiser, sanitisedVisit, routerStateUrlTree, commands;
                 return __generator(this, function (_a) {
                     switch (_a.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 PlaceRouteGuard.ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                            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);
@@ -5720,11 +5721,10 @@
                             // 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)) {
-                                parameterCommands = sanitisedVisit.hasRouteId() ?
-                                    [placeDefinition.getFormattedRouteId(sanitisedVisit), placeDefinition.getFormattedRouteParameters(sanitisedVisit)] :
-                                    [placeDefinition.getFormattedRouteParameters(sanitisedVisit)];
-                                commands = [(activatedRoute.url[0].path)].concat(parameterCommands, this.placeRouter.extractChildPath(activatedRoute));
-                                console.log('##### Redirect', commands);
+                                routerStateUrlTree = this.urlSerializer.parse(state.url);
+                                // Regenerate the url
+                                commands = this.createRedirectCommands(sanitisedVisit, __spread(routerStateUrlTree.root.children.primary.segments)).commands;
+                                console.log('##### Place Guard Redirect', commands);
                                 return [2 /*return*/, this.router.createUrlTree(commands, {
                                         replaceUrl: true,
                                         skipLocationChange: false
@@ -5740,44 +5740,90 @@
                 });
             });
         };
-        PlaceRouteGuard.decorators = [
+        /**
+         * @private
+         * @param {?} sanitisedVisit
+         * @param {?} path
+         * @return {?}
+         */
+        EnterPlaceGuard.prototype.createRedirectCommands = /**
+         * @private
+         * @param {?} sanitisedVisit
+         * @param {?} path
+         * @return {?}
+         */
+        function (sanitisedVisit, path) {
+            // Ugly, but it works for now.
+            /** @type {?} */
+            var newSegments = sanitisedVisit.getUrlSegments();
+            /** @type {?} */
+            var replaceAt = path.findIndex((/**
+             * @param {?} segment
+             * @return {?}
+             */
+            function (segment) { return segment.path === newSegments[0].path; }));
+            /** @type {?} */
+            var newPath = __spread(path);
+            newPath.splice.apply(newPath, __spread([replaceAt, newSegments.length], newSegments)); // do not use the return value, it's the items that were removed!
+            // do not use the return value, it's the items that were removed!
+            /** @type {?} */
+            var commands = [];
+            newPath.forEach((/**
+             * @param {?} s
+             * @return {?}
+             */
+            function (s) {
+                commands.push(s.path);
+                if (s.parameterMap.keys.length > 0) {
+                    commands.push(s.parameters);
+                }
+            }));
+            return { newPath: newPath, commands: commands };
+        };
+        EnterPlaceGuard.decorators = [
             { type: core.Injectable, args: [{
                         providedIn: 'root'
                     },] }
         ];
         /** @nocollapse */
-        PlaceRouteGuard.ctorParameters = function () { return [
+        EnterPlaceGuard.ctorParameters = function () { return [
             { type: router.Router },
+            { type: router.UrlSerializer },
             { type: PlaceRouter },
             { type: PlaceHistory },
             { type: core.Injector }
         ]; };
-        /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(core.ɵɵinject(router.Router), core.ɵɵinject(PlaceRouter), core.ɵɵinject(PlaceHistory), core.ɵɵinject(core.INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
-        return PlaceRouteGuard;
+        /** @nocollapse */ EnterPlaceGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function EnterPlaceGuard_Factory() { return new EnterPlaceGuard(core.ɵɵinject(router.Router), core.ɵɵinject(router.UrlSerializer), core.ɵɵinject(PlaceRouter), core.ɵɵinject(PlaceHistory), core.ɵɵinject(core.INJECTOR)); }, token: EnterPlaceGuard, providedIn: "root" });
+        return EnterPlaceGuard;
     }());
     if (false) {
         /**
          * @type {?}
          * @private
          */
-        exports.PlaceRouteGuard.prototype.router;
+        exports.EnterPlaceGuard.prototype.router;
         /**
          * @type {?}
          * @private
          */
-        exports.PlaceRouteGuard.prototype.placeRouter;
+        exports.EnterPlaceGuard.prototype.urlSerializer;
         /**
          * @type {?}
          * @private
          */
-        exports.PlaceRouteGuard.prototype.placeHistory;
+        exports.EnterPlaceGuard.prototype.placeRouter;
         /**
          * @type {?}
          * @private
          */
-        exports.PlaceRouteGuard.prototype.injector;
+        exports.EnterPlaceGuard.prototype.placeHistory;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.EnterPlaceGuard.prototype.injector;
     }
-    (function (PlaceRouteGuard) {
+    (function (EnterPlaceGuard) {
         /**
          * 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
@@ -5866,7 +5912,7 @@
             ], ConsolidatedParameterMap.prototype, "keys", null);
             return ConsolidatedParameterMap;
         }());
-        PlaceRouteGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
+        EnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
         if (false) {
             /**
              * @type {?}
@@ -5932,25 +5978,229 @@
              */
             ParamMapAdapter.prototype.params;
         }
-    })(exports.PlaceRouteGuard || (exports.PlaceRouteGuard = {}));
+    })(exports.EnterPlaceGuard || (exports.EnterPlaceGuard = {}));
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var LeavePlaceGuard = /** @class */ (function () {
+        function LeavePlaceGuard(router, injector, placeRouter, interactionContext, angularLocation) {
+            this.router = router;
+            this.injector = injector;
+            this.placeRouter = placeRouter;
+            this.interactionContext = interactionContext;
+            this.angularLocation = angularLocation;
+        }
+        /**
+         * @private
+         * @param {?} nextState
+         * @param {?} placeDefinition
+         * @return {?}
+         */
+        LeavePlaceGuard.prototype.isLeavingTheCurrentPlace = /**
+         * @private
+         * @param {?} nextState
+         * @param {?} placeDefinition
+         * @return {?}
+         */
+        function (nextState, placeDefinition) {
+            // TODO: this will break with child routes... need to examine the router states properly.
+            // console.log('canDeactivate', {
+            //   staticPath: placeDefinitionPath,
+            //   currentStateUrl: currentState.url,
+            //   nextStateUrl: nextState.url
+            //   // alreadyDeclined: this._alreadyAccepted
+            // });
+            // Example of the above when navigating to a different child route.
+            // canDeactivate {staticPath: "/hero-details",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-details",
+            //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats"
+            // }
+            // TODO: this will break with child routes... need to examine the router states properly.
+            // console.log('canDeactivate', {
+            //   staticPath: placeDefinitionPath,
+            //   currentStateUrl: currentState.url,
+            //   nextStateUrl: nextState.url
+            //   // alreadyDeclined: this._alreadyAccepted
+            // });
+            // Example of the above when navigating to a different child route.
+            // canDeactivate {staticPath: "/hero-details",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-details",
+            //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats"
+            // }
+            // Example clicking on router tab of the parent component (de-activates the parent due to route param changes)
+            // canDeactivate {
+            //    staticPath: "/hero-stats",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/"
+            // }
+            // canDeactivate {
+            //    staticPath: "/route-parameters",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/"
+            // }
+            // logger.class.js:54 ParameterSnapshot.sanitise -> {idModel: -1, pv: undefined, pl: Array(0), dv: undefined, dl: Array(0), …}
+            // parameter-snapshot.ts:20 {name: "idModel", mine: -1, theirs: null}
+            // place-router.ts:28 redirect path (3) ["route-parameters", "-1", {…}]
+            // canDeactivate {
+            //    staticPath: "/hero-stats",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/-1"
+            // }
+            // canDeactivate {
+            //    staticPath: "/route-parameters",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/-1"
+            // }
+            // logger.class.js:54 ParameterSnapshot.sanitise -> {idModel: -1, pv: undefined, pl: Array(0), dv: "A", dl: Array(3), …}
+            // parameter-snapshot.ts:20 {name: "dv", mine: "A", theirs: undefined}
+            // place-router.ts:28 redirect path (3) ["route-parameters", "-1", {…}]
+            // canDeactivate {
+            //    staticPath: "/hero-stats",
+            //    currentStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c/hero-stats",
+            //    nextStateUrl: "/route-parameters/-1;dv=A;dl=a,b,c;rdv=A;rdl=a,b,c"
+            // }
+            /** @type {?} */
+            var placeDefinitionPath = "/" + placeDefinition.path;
+            return !nextState.url.startsWith(placeDefinitionPath);
+        };
+        /**
+         * @param {?} component
+         * @param {?} currentRoute
+         * @param {?} currentState
+         * @param {?=} nextState
+         * @return {?}
+         */
+        LeavePlaceGuard.prototype.canDeactivate = /**
+         * @param {?} component
+         * @param {?} currentRoute
+         * @param {?} currentState
+         * @param {?=} nextState
+         * @return {?}
+         */
+        function (component, currentRoute, currentState, nextState) {
+            return __awaiter(this, void 0, void 0, function () {
+                var self_1, canLeave;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!this.placeRouter.navigationSession.alreadyAccepted(component)) return [3 /*break*/, 1];
+                            // We'll get called multiple times if there's any parameter sanitisation so
+                            // we always return true if we accepted on a previous cycle of the current
+                            // navigation session.
+                            return [2 /*return*/, true];
+                        case 1:
+                            self_1 = this;
+                            canLeave = true;
+                            if (!this.isLeavingTheCurrentPlace(nextState, component.placeDefinition)) return [3 /*break*/, 4];
+                            // we check the interaction first, so that components that don't need to check if they're in an
+                            // interaction during the canDeactivate cycle.
+                            // TODO: Add tests: show dialog -> hit back -> same route
+                            if (this.interactionContext.isActive()) {
+                                canLeave = false;
+                                console.log('cancelling', { activity: this.interactionContext.currentActivity });
+                                this.interactionContext.currentActivity.cancel(null);
+                            }
+                            if (!canLeave) return [3 /*break*/, 3];
+                            return [4 /*yield*/, component.canDeactivate()];
+                        case 2:
+                            // TODO: Add tests: hit back -> confirm leave dialog -> hit back -> close dialog ->  hit back -> confirm leave dialog.
+                            canLeave = _a.sent();
+                            _a.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            if (this.interactionContext.isActive()) {
+                                console.log('cancelling', { activity: this.interactionContext.currentActivity });
+                                this.interactionContext.currentActivity.cancel(null);
+                                canLeave = false;
+                            }
+                            else {
+                                canLeave = true;
+                            }
+                            _a.label = 5;
+                        case 5:
+                            if (canLeave) {
+                                // We'll get called multiple times if there's any parameter sanitisation so
+                                // we remember the acceptance for the duration of the current navigation session.
+                                self_1.placeRouter.navigationSession.rememberAcceptanceOf(component);
+                            }
+                            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 (this.placeRouter.navigationSession.isPopState) {
+                                    console.log('cancelled during popstate');
+                                    this.angularLocation.go(this.placeRouter.navigationSession.popStateReturnUrl);
+                                }
+                            }
+                            return [2 /*return*/, canLeave];
+                    }
+                });
+            });
+        };
+        LeavePlaceGuard.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        LeavePlaceGuard.ctorParameters = function () { return [
+            { type: router.Router },
+            { type: core.Injector },
+            { type: PlaceRouter },
+            { type: InteractionContext },
+            { type: common.Location }
+        ]; };
+        /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(core.ɵɵinject(router.Router), core.ɵɵinject(core.INJECTOR), core.ɵɵinject(PlaceRouter), core.ɵɵinject(InteractionContext), core.ɵɵinject(common.Location)); }, token: LeavePlaceGuard, providedIn: "root" });
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [router.RouterStateSnapshot, exports.PlaceDefinition]),
+            __metadata("design:returntype", void 0)
+        ], LeavePlaceGuard.prototype, "isLeavingTheCurrentPlace", null);
+        return LeavePlaceGuard;
+    }());
+    if (false) {
+        /**
+         * @type {?}
+         * @private
+         */
+        LeavePlaceGuard.prototype.router;
+        /**
+         * @type {?}
+         * @private
+         */
+        LeavePlaceGuard.prototype.injector;
+        /**
+         * @type {?}
+         * @private
+         */
+        LeavePlaceGuard.prototype.placeRouter;
+        /** @type {?} */
+        LeavePlaceGuard.prototype.interactionContext;
+        /** @type {?} */
+        LeavePlaceGuard.prototype.angularLocation;
+    }
 
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
-    exports.Activity = exports.ɵbb;
+    exports.Activity = exports.ɵbd;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CommandDirective = CommandDirective;
-    exports.ConfirmThenDialogComponent = exports.ɵbd;
+    exports.ComponentsModule = ComponentsModule;
+    exports.ConfirmThenDialogComponent = exports.ɵbf;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
     exports.DEFINITION_META_DATA_KEY = DEFINITION_META_DATA_KEY;
     exports.DIALOG_INTERACTION_SERVICE_DEFAULTS = DIALOG_INTERACTION_SERVICE_DEFAULTS;
     exports.DialogInteractionService = DialogInteractionService;
     exports.Dimension = Dimension;
+    exports.DirectivesModule = DirectivesModule;
     exports.DisposableComponent = DisposableComponent;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.FocusBindingDirective = FocusBindingDirective;
@@ -5982,37 +6232,39 @@
     exports.VisitSanitiser = VisitSanitiser;
     exports.leftRightPlaceAnimation = leftRightPlaceAnimation;
     exports.slideDownAndUpAnimation = slideDownAndUpAnimation;
-    exports.ɵa = CommandDirective;
-    exports.ɵb = FocusBindingDirective;
-    exports.ɵba = ACTIVITY_DATA;
-    exports.ɵbe = AlertDialogComponent;
-    exports.ɵbg = InteractionOutletComponent;
-    exports.ɵbh = DIALOG_INTERACTION_SERVICE_DEFAULTS;
-    exports.ɵbi = DialogInteractionService;
-    exports.ɵc = DisposableComponent;
-    exports.ɵd = NumberInputComponent;
-    exports.ɵe = AbstractInputComponent;
-    exports.ɵf = StringInputComponent;
-    exports.ɵg = PasswordInputComponent;
-    exports.ɵh = SelectInputComponent;
-    exports.ɵi = NoopComponent;
-    exports.ɵj = PlaceModule;
-    exports.ɵk = EmptyStateComponent;
-    exports.ɵl = BusyOverlayComponent;
-    exports.ɵm = PlaceOutletComponent;
-    exports.ɵn = leftRightPlaceAnimation;
-    exports.ɵo = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵp = PlaceRouter;
-    exports.ɵq = PlaceHistory;
-    exports.ɵr = TabbedPlaceNavigationComponent;
-    exports.ɵs = AbstractPlaceNavigationComponent;
-    exports.ɵt = ListPlaceNavComponent;
-    exports.ɵu = InteractionModule;
-    exports.ɵv = ActivityContainerComponent;
-    exports.ɵw = InteractionContext;
-    exports.ɵx = ActivityOutletComponent;
-    exports.ɵy = ConfirmationDialogComponent;
-    exports.ɵz = AbstractActivity;
+    exports.ɵa = DirectivesModule;
+    exports.ɵb = CommandDirective;
+    exports.ɵba = ConfirmationDialogComponent;
+    exports.ɵbb = AbstractActivity;
+    exports.ɵbc = ACTIVITY_DATA;
+    exports.ɵbg = AlertDialogComponent;
+    exports.ɵbi = InteractionOutletComponent;
+    exports.ɵbj = DIALOG_INTERACTION_SERVICE_DEFAULTS;
+    exports.ɵbk = DialogInteractionService;
+    exports.ɵc = FocusBindingDirective;
+    exports.ɵd = DisposableComponent;
+    exports.ɵe = ComponentsModule;
+    exports.ɵf = NumberInputComponent;
+    exports.ɵg = AbstractInputComponent;
+    exports.ɵh = StringInputComponent;
+    exports.ɵi = PasswordInputComponent;
+    exports.ɵj = SelectInputComponent;
+    exports.ɵk = NoopComponent;
+    exports.ɵl = PlaceModule;
+    exports.ɵm = EmptyStateComponent;
+    exports.ɵn = BusyOverlayComponent;
+    exports.ɵo = PlaceOutletComponent;
+    exports.ɵp = leftRightPlaceAnimation;
+    exports.ɵq = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵr = PlaceRouter;
+    exports.ɵs = PlaceHistory;
+    exports.ɵt = TabbedPlaceNavigationComponent;
+    exports.ɵu = AbstractPlaceNavigationComponent;
+    exports.ɵv = ListPlaceNavComponent;
+    exports.ɵw = InteractionModule;
+    exports.ɵx = ActivityContainerComponent;
+    exports.ɵy = InteractionContext;
+    exports.ɵz = ActivityOutletComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });