@coolon/angular-ui-powerups 0.0.72 → 0.0.74

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

@@ -1,13 +1,13 @@
-import { DOCUMENT, Location, CommonModule } from '@angular/common';
-import { EventEmitter, Input, Output, HostListener, Component, Directive, ElementRef, Inject, NgZone, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, Optional, ɵɵdefineInjectable, ɵɵinject, NgModule, HostBinding, SkipSelf, INJECTOR } from '@angular/core';
+import { DOCUMENT, CommonModule, Location } from '@angular/common';
+import { Directive, ElementRef, Inject, Input, HostListener, NgZone, NgModule, EventEmitter, Output, Component, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Injectable, Optional, ɵɵdefineInjectable, ɵɵinject, SkipSelf, HostBinding, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgressSpinnerModule, MatInputModule, MatFormFieldModule, MatSelectModule } from '@angular/material';
-import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
+import { MatInputModule, MatFormFieldModule, MatSelectModule, MatDialog, MatButtonModule, MatDialogModule, MatTabsModule as MatTabsModule$1, MatProgressSpinnerModule } from '@angular/material';
+import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __assign, __awaiter, __generator, __spread } from 'tslib';
-import { GarbageCollector, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, assert, UnaryCommand, lang, Dsl, Logger, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Trace, Guard as Guard$1, OptionsHelper, ValueHolder } from '@coolon/pectin';
+import { assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, UseDelegate, ValueModel, ListModel, StoreInListModel, DelegatingValueModel, MutableStream, MutableListModel, DelegatingListModel, StoreInValueModel, Binding, MutableValueModel, Trace, Guard as Guard$1, Command, OptionsHelper, ValueHolder } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
-import { Router, RouterModule, NavigationStart, NavigationEnd, NavigationError, ActivatedRoute, RouterOutlet, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Router, RouterModule, UrlSegment, NavigationStart, NavigationEnd, NavigationError, RouterOutlet, ActivatedRouteSnapshot, RouterStateSnapshot, UrlSerializer } from '@angular/router';
 import ___default, { last, isNil, isEqual } from 'lodash';
 import { assert as assert$1, Opts, Klass } from '@coolon/typescript-utilities';
 import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog as MatDialog$1 } from '@angular/material/dialog';
@@ -21,70 +21,35 @@ import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
 
-/**
- * @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;
-}(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 DelegatingFormValueModel();
-        // TODO: fix this.
-        // tslint:disable-next-line:no-output-native
-        _this.focus = new EventEmitter();
-        // tslint:disable-next-line:no-output-native
-        _this.blur = new EventEmitter();
-        // tslint:disable-next-line:no-output-native
-        _this.enterKey = new EventEmitter();
-        // tslint:disable-next-line:no-output-native
-        _this.escapeKey = new 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
@@ -92,725 +57,829 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     /**
      * @return {?}
      */
-    AbstractInputComponent.prototype.notifyClick = /**
+    CommandDirective.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
-        this.safelyInvoke(this.clickCommand);
+        assert.notNil(this.pectinCommand);
+        if (this.pectinCommand instanceof UnaryCommand) {
+            if (!this._commandParameterProvided) {
+                lang.illegalState('UnaryCommands required the command parameter to be specified.');
+            }
+        }
+        else {
+            if (this._commandParameterProvided) {
+                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 = 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 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: Directive, args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[pectinCommand]'
+                },] }
+    ];
+    /** @nocollapse */
+    CommandDirective.ctorParameters = function () { return [
+        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
+    ]; };
+    CommandDirective.propDecorators = {
+        pectinCommand: [{ type: Input }],
+        commandParameter: [{ type: Input }],
+        notifyClick: [{ type: HostListener, args: ['click', ['$event'],] }]
     };
+    return CommandDirective;
+}(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;
+}(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 = Dsl.disposeWith(this).chain;
+            chain(this.pectinFocusBinding.focusContext.focused).subscribe((/**
+             * @param {?} focused
+             * @return {?}
+             */
+            function (focused) {
+                if (focused && !_this.alreadyHasFocus()) {
+                    _this.tryAndFocus();
+                }
+            }));
+        }
+        else {
+            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: Input, args: ['valueModel',] }],
-        label: [{ type: Input }],
-        floatLabel: [{ type: Input }],
-        hint: [{ type: Input }],
-        placeholder: [{ type: Input }],
-        focusCommand: [{ type: Input, args: ['command.focus',] }],
-        blurCommand: [{ type: Input, args: ['command.blur',] }],
-        enterCommand: [{ type: Input, args: ['command.enter',] }],
-        escapeCommand: [{ type: Input, args: ['command.escape',] }],
-        clickCommand: [{ type: Input, args: ['command.click',] }],
-        focus: [{ type: Output }],
-        blur: [{ type: Output }],
-        enterKey: [{ type: Output }],
-        escapeKey: [{ type: Output }],
-        notifyClick: [{ type: HostListener, args: ['click',] }],
-        notifyFocusIn: [{ type: HostListener, args: ['focusin',] }],
-        notifyFocusOut: [{ type: HostListener, args: ['focusout',] }]
-    };
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ValueModel),
-        __metadata("design:paramtypes", [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;
-    }
     /**
+     * @private
      * @return {?}
      */
-    NumberInputComponent.prototype.ngOnInit = /**
+    FocusBindingDirective.prototype.hasBinding = /**
+     * @private
      * @return {?}
      */
     function () {
+        return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
     };
-    NumberInputComponent.decorators = [
-        { type: 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;
-    }
+    // Hook method for debugging via tracing.
+    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    PasswordInputComponent.prototype.ngOnInit = /**
+    FocusBindingDirective.prototype.alreadyHasFocus = 
+    // Hook method for debugging via tracing.
+    /**
      * @return {?}
      */
     function () {
+        return this.isFocused(this.focusTarget);
     };
-    PasswordInputComponent.decorators = [
-        { type: 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.
     /**
+     * @param {?} element
      * @return {?}
      */
-    SelectInputComponent.prototype.ngOnInit = /**
+    FocusBindingDirective.prototype.isFocused = 
+    // Hook method for debugging via tracing.
+    /**
+     * @param {?} element
      * @return {?}
      */
-    function () {
-    };
-    SelectInputComponent.decorators = [
-        { type: 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: Input }],
-        options: [{ type: Input }],
-        optionLabel: [{ type: Input }],
-        optionLabelFormat: [{ type: Input }]
+    function (element) {
+        return this.document.activeElement === element;
     };
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ListModel)
-    ], SelectInputComponent.prototype, "optionsModel", void 0);
-    __decorate([
-        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;
-    }
     /**
+     * @param {?=} retries
      * @return {?}
      */
-    StringInputComponent.prototype.ngOnInit = /**
+    FocusBindingDirective.prototype.tryAndFocus = /**
+     * @param {?=} retries
      * @return {?}
      */
-    function () {
+    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()) {
+                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 {
+                    Logger.get(this).warn("Tried to focus but gave up as the component wasn't enabled or visible.");
+                }
+            }
+        }
     };
-    StringInputComponent.decorators = [
-        { type: 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: 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
+    Object.defineProperty(FocusBindingDirective.prototype, "focusTarget", {
+        get: /**
          * @return {?}
          */
-        function (value) {
-            this._commandParameterProvided = true;
-            this._commandParameter = value;
+        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.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-        assert.notNil(this.pectinCommand);
-        if (this.pectinCommand instanceof UnaryCommand) {
-            if (!this._commandParameterProvided) {
-                lang.illegalState('UnaryCommands required the command parameter to be specified.');
-            }
-        }
-        else {
-            if (this._commandParameterProvided) {
-                lang.illegalState('command parameters are only supported by UnaryCommands');
-            }
-        }
-    };
+    FocusBindingDirective.prototype.modelShouldStillHaveFocus = 
+    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    CommandDirective.prototype.ngAfterViewInit = /**
-     * @return {?}
-     */
     function () {
-        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 = 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 this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
     };
+    // Hook method for debugging via tracing.
+    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    CommandDirective.prototype.ngOnDestroy = /**
-     * @return {?}
-     */
-    function () {
-        this.dispose();
-    };
+    FocusBindingDirective.prototype.canFocus = 
+    // Hook method for debugging via tracing.
     /**
-     * @param {?} $event
      * @return {?}
      */
-    CommandDirective.prototype.notifyClick = /**
-     * @param {?} $event
-     * @return {?}
-     */
-    function ($event) {
-        $event.preventDefault();
-        $event.stopPropagation();
-        if (this.pectinCommand.enabled.value) {
-            if (this.pectinCommand instanceof 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: Directive, args: [{
                     // tslint:disable-next-line:directive-selector
-                    selector: '[pectinCommand]'
+                    selector: '[pectinFocusBinding]'
                 },] }
     ];
     /** @nocollapse */
-    CommandDirective.ctorParameters = function () { return [
-        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
+    FocusBindingDirective.ctorParameters = function () { return [
+        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+        { type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] },
+        { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
     ]; };
-    CommandDirective.propDecorators = {
-        pectinCommand: [{ type: Input }],
-        commandParameter: [{ type: Input }],
-        notifyClick: [{ type: HostListener, args: ['click', ['$event'],] }]
+    FocusBindingDirective.propDecorators = {
+        pectinFocusBinding: [{ type: Input }],
+        focusBindingTarget: [{ type: Input }],
+        onFocusIn: [{ type: HostListener, args: ['focusin',] }],
+        onFocusOut: [{ type: HostListener, args: ['focusout',] }]
     };
-    return CommandDirective;
-}(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: NgModule, args: [{
+                    declarations: [
+                        CommandDirective,
+                        FocusBindingDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        BrowserAnimationsModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        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 DelegatingFormValueModel();
+        // TODO: fix this.
+        // tslint:disable-next-line:no-output-native
+        _this.focus = new EventEmitter();
+        // tslint:disable-next-line:no-output-native
+        _this.blur = new EventEmitter();
+        // tslint:disable-next-line:no-output-native
+        _this.enterKey = new EventEmitter();
+        // tslint:disable-next-line:no-output-native
+        _this.escapeKey = new 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 = Dsl.disposeWith(this).chain;
-            chain(this.pectinFocusBinding.focusContext.focused).subscribe((/**
-             * @param {?} focused
-             * @return {?}
-             */
-            function (focused) {
-                if (focused && !_this.alreadyHasFocus()) {
-                    _this.tryAndFocus();
-                }
-            }));
-        }
-        else {
-            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 () {
-        return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
+        this.safelyInvoke(this.escapeCommand);
+        this.escapeKey.emit();
+    };
+    /**
+     * @protected
+     * @param {?} command
+     * @return {?}
+     */
+    AbstractInputComponent.prototype.safelyInvoke = /**
+     * @protected
+     * @param {?} command
+     * @return {?}
+     */
+    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()) {
-                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 {
-                    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: Input, args: ['valueModel',] }],
+        label: [{ type: Input }],
+        floatLabel: [{ type: Input }],
+        hint: [{ type: Input }],
+        placeholder: [{ type: Input }],
+        focusCommand: [{ type: Input, args: ['command.focus',] }],
+        blurCommand: [{ type: Input, args: ['command.blur',] }],
+        enterCommand: [{ type: Input, args: ['command.enter',] }],
+        escapeCommand: [{ type: Input, args: ['command.escape',] }],
+        clickCommand: [{ type: Input, args: ['command.click',] }],
+        focus: [{ type: Output }],
+        blur: [{ type: Output }],
+        enterKey: [{ type: Output }],
+        escapeKey: [{ type: Output }],
+        notifyClick: [{ type: HostListener, args: ['click',] }],
+        notifyFocusIn: [{ type: HostListener, args: ['focusin',] }],
+        notifyFocusOut: [{ type: HostListener, args: ['focusout',] }]
+    };
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ValueModel),
+        __metadata("design:paramtypes", [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: 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 () {
-        /** @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: Directive, args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[pectinFocusBinding]'
-                },] }
+    PasswordInputComponent.decorators = [
+        { type: 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 */
-    FocusBindingDirective.ctorParameters = function () { return [
-        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-        { type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] },
-        { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-    ]; };
-    FocusBindingDirective.propDecorators = {
-        pectinFocusBinding: [{ type: Input }],
-        focusBindingTarget: [{ type: Input }],
-        onFocusIn: [{ type: HostListener, args: ['focusin',] }],
-        onFocusOut: [{ type: HostListener, args: ['focusout',] }]
-    };
-    return FocusBindingDirective;
-}(DisposableComponent));
-if (false) {
+    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;
+    }
     /**
-     * @type {?}
-     * @private
+     * @return {?}
      */
-    FocusBindingDirective.prototype.document;
+    SelectInputComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    SelectInputComponent.decorators = [
+        { type: 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 */
+    SelectInputComponent.ctorParameters = function () { return []; };
+    SelectInputComponent.propDecorators = {
+        optionsModel: [{ type: Input }],
+        options: [{ type: Input }],
+        optionLabel: [{ type: Input }],
+        optionLabelFormat: [{ type: Input }]
+    };
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ListModel)
+    ], SelectInputComponent.prototype, "optionsModel", void 0);
+    __decorate([
+        StoreInListModel('optionsModel'),
+        __metadata("design:type", Array)
+    ], SelectInputComponent.prototype, "options", void 0);
+    return SelectInputComponent;
+}(AbstractInputComponent));
+if (false) {
     /** @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: 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: 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: NgModule, args: [{
+                    declarations: [
+                        NumberInputComponent,
+                        StringInputComponent,
+                        PasswordInputComponent,
+                        SelectInputComponent,
+                        NoopComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BrowserAnimationsModule,
+                        FormsModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatTabsModule,
+                        DirectivesModule
+                    ],
+                    exports: [
+                        NumberInputComponent,
+                        StringInputComponent,
+                        PasswordInputComponent,
+                        SelectInputComponent,
+                        NoopComponent
+                    ]
+                },] }
+    ];
+    return ComponentsModule;
+}());
 
 /**
  * @fileoverview added by tsickle
@@ -1103,7 +1172,7 @@ var ActivityOutletComponent = /** @class */ (function () {
     });
     ActivityOutletComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'angular-ui-powerups-activity-outlet',
+                    selector: 'aup-activity-outlet',
                     template: '',
                     styles: [":host{display:block}"]
                 }] }
@@ -1194,9 +1263,9 @@ var AlertDialogComponent = /** @class */ (function (_super) {
     };
     AlertDialogComponent.decorators = [
         { type: 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 */
@@ -1275,9 +1344,9 @@ var ConfirmThenDialogComponent = /** @class */ (function (_super) {
     };
     ConfirmThenDialogComponent.decorators = [
         { type: 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 */
@@ -1341,9 +1410,9 @@ var ConfirmationDialogComponent = /** @class */ (function (_super) {
     };
     ConfirmationDialogComponent.decorators = [
         { type: 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 */
@@ -1789,8 +1858,8 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     };
     ActivityContainerComponent.decorators = [
         { type: 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}"]
                 }] }
     ];
@@ -1839,7 +1908,7 @@ var InteractionOutletComponent = /** @class */ (function () {
     }
     InteractionOutletComponent.decorators = [
         { type: 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}"]
                 }] }
@@ -1994,6 +2063,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
          * @return {?}
          */
         function () {
+            console.log("######  STARTING");
             _this.currentActivityId = v1();
             // this.location.go(this.router.routerState.snapshot.url, "aup");
             /** @type {?} */
@@ -2050,6 +2120,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
              * @return {?}
              */
             function () {
+                console.log("######  FINISHED");
                 _this.currentActivityId = null;
                 self.safelyUpdateActivityListDelegate(null);
             }));
@@ -2180,7 +2251,7 @@ var InteractionModule = /** @class */ (function () {
                         CommonModule,
                         MatButtonModule,
                         MatDialogModule,
-                        MatTabsModule,
+                        MatTabsModule$1,
                         PortalModule,
                         RouterModule
                     ],
@@ -2228,7 +2299,7 @@ var BusyOverlayComponent = /** @class */ (function () {
     };
     BusyOverlayComponent.decorators = [
         { type: 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}"]
                 }] }
@@ -2273,9 +2344,9 @@ var EmptyStateComponent = /** @class */ (function () {
     };
     EmptyStateComponent.decorators = [
         { type: 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 */
@@ -2590,11 +2661,10 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var 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;
@@ -2900,8 +2970,6 @@ if (false) {
     /** @type {?} */
     PlaceDefinition.prototype.authenticate;
     /** @type {?} */
-    PlaceDefinition.prototype.order;
-    /** @type {?} */
     PlaceDefinition.prototype.data;
     /** @type {?} */
     PlaceDefinition.prototype.routeParameters;
@@ -3092,136 +3160,182 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var AbstractPlaceNavigationComponent = /** @class */ (function (_super) {
-    __extends(AbstractPlaceNavigationComponent, _super);
-    function AbstractPlaceNavigationComponent() {
-        var _this = _super.call(this) || this;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.placeDefinitions = chain(_this.placesModel).map((/**
-         * @param {?} c
-         * @return {?}
-         */
-        function (c) { return 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 !isNil(this.getRouteId());
     };
-    AbstractPlaceNavigationComponent.propDecorators = {
-        places: [{ type: Input }],
-        placesModel: [{ type: 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([
-        StoreInListModel('placesModel'),
-        __metadata("design:type", Array)
-    ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
-    __decorate([
-        UseDelegate(),
-        __metadata("design:type", ListModel)
-    ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
-    __decorate([
-        Memoize(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [PlaceDefinition]),
-        __metadata("design:returntype", Object)
-    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
-    return AbstractPlaceNavigationComponent;
-}(DisposableComponent));
-if (false) {
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.places;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.placesModel;
-    /** @type {?} */
-    AbstractPlaceNavigationComponent.prototype.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 = 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 = 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: 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: HostBinding, args: ['class.expanded',] }]
+        return this.placeDefinition.hasRouteId() ?
+            [new UrlSegment(this.placeDefinition.path, {}), new UrlSegment(this.placeDefinition.getFormattedRouteId(this), this.placeDefinition.getFormattedRouteParameters(this))] :
+            [new 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;
 }
 
 /**
@@ -3475,200 +3589,29 @@ var PlaceHistory = /** @class */ (function () {
     function (placeDef, history) {
         this._history.set(placeDef, history);
     };
-    PlaceHistory.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    PlaceHistory.ctorParameters = function () { return [
-        { type: Router }
-    ]; };
-    /** @nocollapse */ PlaceHistory.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(ɵɵinject(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 !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.
-        /** @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);
-    };
-    /**
-     * @param {?} other
-     * @return {?}
-     */
-    Visit.prototype.hasRoutingChangedFrom = /**
-     * @param {?} other
-     * @return {?}
-     */
-    function (other) {
-        /** @type {?} */
-        var samePlace = other.placeDefinition === this.placeDefinition;
-        /** @type {?} */
-        var sameRouteParameters = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-        return !samePlace || !sameRouteParameters;
-    };
-    /**
-     * @param {?} other
-     * @return {?}
-     */
-    Visit.prototype.hasChangedFrom = /**
-     * @param {?} other
-     * @return {?}
-     */
-    function (other) {
-        /** @type {?} */
-        var sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-    };
-    return Visit;
+    PlaceHistory.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    PlaceHistory.ctorParameters = function () { return [
+        { type: Router }
+    ]; };
+    /** @nocollapse */ PlaceHistory.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceHistory_Factory() { return new PlaceHistory(ɵɵinject(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;
 }
 
 /**
@@ -3800,13 +3743,17 @@ var PlaceRouter = /** @class */ (function (_super) {
             });
         });
     };
+    // @Trace()
+    // @Trace()
     /**
      * @param {?} activatedRoute
      * @param {?} previous
      * @param {?} next
      * @return {?}
      */
-    PlaceRouter.prototype.pushVisitChangesToRoute = /**
+    PlaceRouter.prototype.pushVisitChangesToRoute = 
+    // @Trace()
+    /**
      * @param {?} activatedRoute
      * @param {?} previous
      * @param {?} next
@@ -3826,13 +3773,16 @@ var PlaceRouter = /** @class */ (function (_super) {
                          * @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
                             });
@@ -3981,12 +3931,6 @@ var PlaceRouter = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Visit, Object]),
         __metadata("design:returntype", Promise)
     ], PlaceRouter.prototype, "navigate", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [ActivatedRoute, Visit, Visit]),
-        __metadata("design:returntype", Promise)
-    ], PlaceRouter.prototype, "pushVisitChangesToRoute", null);
     return PlaceRouter;
 }(GarbageCollector));
 if (false) {
@@ -4100,18 +4044,40 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.router = router;
         _this.placeRouter = placeRouter;
-        _this.parentOutlet = parentOutlet;
         _this.animate = true;
         _this.placeChanged = new EventEmitter();
         _this._activePlace = new MutableValueModel();
+        _this._placeVisit = new MutableValueModel();
         _this._inOutletUpdate = new Guard$1();
         _this._activatedRouteModel = new MutableValueModel();
         _this._placeDefinition = new MutableValueModel();
-        /**
-         * TODO: This is now really a visit
-         */
-        _this._placeVisit = new MutableValueModel();
         var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        _this.parentOutletModel = new 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);
@@ -4175,6 +4141,16 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             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
@@ -4241,132 +4217,307 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
             this.animationDone();
         }
     };
+    // @Trace()
+    // @Trace()
+    /**
+     * @param {?} routerOutlet
+     * @param {?} $event
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.onOutletDeactivated = 
+    // @Trace()
+    /**
+     * @param {?} routerOutlet
+     * @param {?} $event
+     * @return {?}
+     */
+    function (routerOutlet, $event) {
+        var _this = this;
+        this._inOutletUpdate.whileTrue((/**
+         * @return {?}
+         */
+        function () {
+            _this._activePlace.value = null;
+            _this._activatedRouteModel.value = null;
+            _this._placeDefinition.value = null;
+        }));
+    };
+    /**
+     * @return {?}
+     */
+    PlaceOutletComponent.prototype.animationDone = /**
+     * @return {?}
+     */
+    function () {
+        if (this._activePlace.value) {
+            this._activePlace.value.onPlaceReady();
+        }
+    };
+    PlaceOutletComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'aup-place-outlet',
+                    template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"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 },
+        { type: PlaceRouter },
+        { type: PlaceOutletComponent, decorators: [{ type: SkipSelf }, { type: Optional }] }
+    ]; };
+    PlaceOutletComponent.propDecorators = {
+        animate: [{ type: Input }],
+        customPlaceAnimationOrderModel: [{ type: Input, args: ['placeAnimationOrderModel',] }],
+        customPlaceAnimationOrder: [{ type: Input, args: ['placeAnimationOrder',] }],
+        placeChanged: [{ type: Output }],
+        routerOut: [{ type: ViewChild, args: ['routeOutlet', { static: true },] }]
+    };
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ListModel)
+    ], PlaceOutletComponent.prototype, "customPlaceAnimationOrderModel", void 0);
+    __decorate([
+        StoreInListModel("customPlaceAnimationOrderModel"),
+        __metadata("design:type", Array)
+    ], PlaceOutletComponent.prototype, "customPlaceAnimationOrder", void 0);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Visit]),
+        __metadata("design:returntype", void 0)
+    ], PlaceOutletComponent.prototype, "navigate", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [RouterOutlet, 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 = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        _this.placeDefinitions = chain(_this.placesModel).map((/**
+         * @param {?} c
+         * @return {?}
+         */
+        function (c) { return PlaceComponent.getDefinition(c); }));
+        _this.relativeToModel = chain(_this.placeOutletModel).pullValueModel((/**
+         * @param {?} o
+         * @return {?}
+         */
+        function (o) { return o.activatedRouteModel; }));
+        _this.commandFactory = 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 (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 {?}
+     */
+    AbstractPlaceNavigationComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    AbstractPlaceNavigationComponent.propDecorators = {
+        places: [{ type: Input }],
+        placesModel: [{ type: Input }],
+        placeOutlet: [{ type: Input }],
+        placeOutletModel: [{ type: Input }]
+    };
+    __decorate([
+        StoreInListModel('placesModel'),
+        __metadata("design:type", Array)
+    ], AbstractPlaceNavigationComponent.prototype, "places", void 0);
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ListModel)
+    ], AbstractPlaceNavigationComponent.prototype, "placesModel", void 0);
+    __decorate([
+        StoreInValueModel('placeOutletModel'),
+        __metadata("design:type", PlaceOutletComponent)
+    ], AbstractPlaceNavigationComponent.prototype, "placeOutlet", void 0);
+    __decorate([
+        UseDelegate(),
+        __metadata("design:type", ValueModel)
+    ], AbstractPlaceNavigationComponent.prototype, "placeOutletModel", void 0);
+    __decorate([
+        Memoize(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [PlaceDefinition]),
+        __metadata("design:returntype", Object)
+    ], AbstractPlaceNavigationComponent.prototype, "getNav", null);
+    return AbstractPlaceNavigationComponent;
+}(DisposableComponent));
+if (false) {
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.places;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placesModel;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeOutlet;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeOutletModel;
+    /** @type {?} */
+    AbstractPlaceNavigationComponent.prototype.placeDefinitions;
+    /**
+     * @type {?}
+     * @protected
+     */
+    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;
+    }
     /**
-     * @param {?} routerOutlet
-     * @param {?} $event
      * @return {?}
      */
-    PlaceOutletComponent.prototype.onOutletDeactivated = /**
-     * @param {?} routerOutlet
-     * @param {?} $event
+    ListPlaceNavComponent.prototype.expandMenu = /**
      * @return {?}
      */
-    function (routerOutlet, $event) {
-        var _this = this;
-        this._inOutletUpdate.whileTrue((/**
-         * @return {?}
-         */
-        function () {
-            _this._activePlace.value = null;
-            _this._activatedRouteModel.value = null;
-            _this._placeDefinition.value = null;
-        }));
+    function () {
+        this.expanded = true;
     };
     /**
-     * @param {?} outlet
      * @return {?}
      */
-    PlaceOutletComponent.prototype.getPlaceOrder = /**
-     * @param {?} outlet
+    ListPlaceNavComponent.prototype.collapseMenu = /**
      * @return {?}
      */
-    function (outlet) {
-        return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
+    function () {
+        this.expanded = false;
     };
     /**
      * @return {?}
      */
-    PlaceOutletComponent.prototype.animationDone = /**
+    ListPlaceNavComponent.prototype.toggleMenu = /**
      * @return {?}
      */
     function () {
-        if (this._activePlace.value) {
-            this._activePlace.value.onPlaceReady();
-        }
+        this.expanded = !this.expanded;
     };
-    PlaceOutletComponent.decorators = [
+    ListPlaceNavComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'angular-ui-powerups-place-outlet',
-                    template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"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}"]
+                    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 */
-    PlaceOutletComponent.ctorParameters = function () { return [
-        { type: Router },
-        { type: PlaceRouter },
-        { type: PlaceOutletComponent, decorators: [{ type: SkipSelf }, { type: Optional }] }
-    ]; };
-    PlaceOutletComponent.propDecorators = {
-        animate: [{ type: Input }],
-        placeChanged: [{ type: Output }],
-        routerOut: [{ type: ViewChild, args: ['routeOutlet', { static: true },] }]
+    ListPlaceNavComponent.ctorParameters = function () { return []; };
+    ListPlaceNavComponent.propDecorators = {
+        expanded: [{ type: HostBinding, args: ['class.expanded',] }]
     };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Visit]),
-        __metadata("design:returntype", void 0)
-    ], PlaceOutletComponent.prototype, "navigate", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [RouterOutlet, PlaceComponent]),
-        __metadata("design:returntype", void 0)
-    ], PlaceOutletComponent.prototype, "onOutletActivated", null);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [RouterOutlet, Object]),
-        __metadata("design:returntype", void 0)
-    ], PlaceOutletComponent.prototype, "onOutletDeactivated", null);
-    return PlaceOutletComponent;
-}(DisposableComponent));
+    return ListPlaceNavComponent;
+}(AbstractPlaceNavigationComponent));
 if (false) {
     /** @type {?} */
-    PlaceOutletComponent.prototype.animate;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.placeChanged;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.routerOut;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype._activePlace;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype._inOutletUpdate;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype._activatedRouteModel;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype._placeDefinition;
-    /**
-     * TODO: This is now really a visit
-     * @type {?}
-     */
-    PlaceOutletComponent.prototype._placeVisit;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype.router;
-    /**
-     * @type {?}
-     * @private
-     */
-    PlaceOutletComponent.prototype.placeRouter;
-    /** @type {?} */
-    PlaceOutletComponent.prototype.parentOutlet;
+    ListPlaceNavComponent.prototype.expanded;
 }
 
 /**
@@ -4380,8 +4531,8 @@ var TabbedPlaceNavigationComponent = /** @class */ (function (_super) {
     }
     TabbedPlaceNavigationComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'angular-ui-powerups-tabbed-place-navigation',
-                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let 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: [""]
                 }] }
     ];
@@ -4404,10 +4555,11 @@ var PlaceModule = /** @class */ (function () {
                         BrowserAnimationsModule,
                         MatProgressSpinnerModule,
                         RouterModule,
-                        MatTabsModule$1,
+                        MatTabsModule,
                         MatListModule,
                         MatTooltipModule,
-                        MatIconModule
+                        MatIconModule,
+                        DirectivesModule
                     ],
                     declarations: [
                         EmptyStateComponent,
@@ -4439,15 +4591,7 @@ var AngularUiPowerupsModule = /** @class */ (function () {
     }
     AngularUiPowerupsModule.decorators = [
         { type: NgModule, args: [{
-                    declarations: [
-                        CommandDirective,
-                        FocusBindingDirective,
-                        NumberInputComponent,
-                        StringInputComponent,
-                        PasswordInputComponent,
-                        SelectInputComponent,
-                        NoopComponent
-                    ],
+                    declarations: [],
                     imports: [
                         CommonModule,
                         BrowserAnimationsModule,
@@ -4455,19 +4599,17 @@ var AngularUiPowerupsModule = /** @class */ (function () {
                         MatInputModule,
                         MatFormFieldModule,
                         MatSelectModule,
-                        MatTabsModule$1,
+                        MatTabsModule,
+                        DirectivesModule,
+                        ComponentsModule,
                         PlaceModule,
                         InteractionModule
                     ],
                     exports: [
-                        CommandDirective,
-                        FocusBindingDirective,
-                        NumberInputComponent,
-                        StringInputComponent,
-                        PasswordInputComponent,
-                        SelectInputComponent,
                         InteractionModule,
                         PlaceModule,
+                        DirectivesModule,
+                        ComponentsModule,
                         NoopComponent
                     ]
                 },] }
@@ -4963,7 +5105,7 @@ function Place(options) {
      */
     function (target) {
         if (PlaceComponent.isPlaceComponentConstructor(target)) {
-            PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, isNil(options.authenticate) ? false : options.authenticate, options.order, options.data, PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
+            PlaceComponent.injectDefinition(target, new PlaceDefinition(target, options.path, isNil(options.authenticate) ? false : options.authenticate, options.data, PlaceComponent.getRouteParameters(target), (options.children || []).map((/**
              * @param {?} c
              * @return {?}
              */
@@ -4983,8 +5125,6 @@ function Place(options) {
     if (false) {
         /** @type {?} */
         Options.prototype.path;
-        /** @type {?} */
-        Options.prototype.order;
         /** @type {?|undefined} */
         Options.prototype.data;
         /** @type {?|undefined} */
@@ -5288,218 +5428,79 @@ var VisitSanitiser = /** @class */ (function () {
                         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: Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    /** @nocollapse */
-    LeavePlaceGuard.ctorParameters = function () { return [
-        { type: Router },
-        { type: Injector },
-        { type: PlaceRouter },
-        { type: InteractionContext },
-        { type: Location }
-    ]; };
-    /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(PlaceRouter), ɵɵinject(InteractionContext), ɵɵinject(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
  */
-var PlaceRouteGuard = /** @class */ (function () {
-    function PlaceRouteGuard(router, placeRouter, placeHistory, injector) {
+var 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;
@@ -5511,7 +5512,7 @@ var PlaceRouteGuard = /** @class */ (function () {
      * @param {?} state
      * @return {?}
      */
-    PlaceRouteGuard.prototype.canActivate = 
+    EnterPlaceGuard.prototype.canActivate = 
     // @Trace()
     /**
      * @param {?} activatedRoute
@@ -5520,14 +5521,14 @@ var PlaceRouteGuard = /** @class */ (function () {
      */
     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 (!PlaceComponent.isPlaceComponentConstructor(activatedRoute.component)) return [3 /*break*/, 2];
                         placeDefinition = 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);
@@ -5537,11 +5538,10 @@ var PlaceRouteGuard = /** @class */ (function () {
                         // 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
@@ -5557,44 +5557,90 @@ var PlaceRouteGuard = /** @class */ (function () {
             });
         });
     };
-    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: Injectable, args: [{
                     providedIn: 'root'
                 },] }
     ];
     /** @nocollapse */
-    PlaceRouteGuard.ctorParameters = function () { return [
+    EnterPlaceGuard.ctorParameters = function () { return [
         { type: Router },
+        { type: UrlSerializer },
         { type: PlaceRouter },
         { type: PlaceHistory },
         { type: Injector }
     ]; };
-    /** @nocollapse */ PlaceRouteGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function PlaceRouteGuard_Factory() { return new PlaceRouteGuard(ɵɵinject(Router), ɵɵinject(PlaceRouter), ɵɵinject(PlaceHistory), ɵɵinject(INJECTOR)); }, token: PlaceRouteGuard, providedIn: "root" });
-    return PlaceRouteGuard;
+    /** @nocollapse */ EnterPlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function EnterPlaceGuard_Factory() { return new EnterPlaceGuard(ɵɵinject(Router), ɵɵinject(UrlSerializer), ɵɵinject(PlaceRouter), ɵɵinject(PlaceHistory), ɵɵinject(INJECTOR)); }, token: EnterPlaceGuard, providedIn: "root" });
+    return EnterPlaceGuard;
 }());
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.router;
+    EnterPlaceGuard.prototype.router;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.placeRouter;
+    EnterPlaceGuard.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.placeHistory;
+    EnterPlaceGuard.prototype.placeRouter;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.injector;
+    EnterPlaceGuard.prototype.placeHistory;
+    /**
+     * @type {?}
+     * @private
+     */
+    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
@@ -5683,7 +5729,7 @@ if (false) {
         ], ConsolidatedParameterMap.prototype, "keys", null);
         return ConsolidatedParameterMap;
     }());
-    PlaceRouteGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
+    EnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
     if (false) {
         /**
          * @type {?}
@@ -5749,7 +5795,209 @@ if (false) {
          */
         ParamMapAdapter.prototype.params;
     }
-})(PlaceRouteGuard || (PlaceRouteGuard = {}));
+})(EnterPlaceGuard || (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: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    LeavePlaceGuard.ctorParameters = function () { return [
+        { type: Router },
+        { type: Injector },
+        { type: PlaceRouter },
+        { type: InteractionContext },
+        { type: Location }
+    ]; };
+    /** @nocollapse */ LeavePlaceGuard.ngInjectableDef = ɵɵdefineInjectable({ factory: function LeavePlaceGuard_Factory() { return new LeavePlaceGuard(ɵɵinject(Router), ɵɵinject(INJECTOR), ɵɵinject(PlaceRouter), ɵɵinject(InteractionContext), ɵɵinject(Location)); }, token: LeavePlaceGuard, providedIn: "root" });
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [RouterStateSnapshot, 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;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -5771,5 +6019,5 @@ if (false) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, Formatter, InteractionContext, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NavigationSession, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, ACTIVITY_DATA as ɵba, Activity as ɵbb, ConfirmThenDialogComponent as ɵbd, AlertDialogComponent as ɵbe, InteractionOutletComponent as ɵbg, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbh, DialogInteractionService as ɵbi, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, NoopComponent as ɵi, PlaceModule as ɵj, EmptyStateComponent as ɵk, BusyOverlayComponent as ɵl, PlaceOutletComponent as ɵm, leftRightPlaceAnimation as ɵn, LEFT_RIGHT_PLACE_ANIMATION as ɵo, PlaceRouter as ɵp, PlaceHistory as ɵq, TabbedPlaceNavigationComponent as ɵr, AbstractPlaceNavigationComponent as ɵs, ListPlaceNavComponent as ɵt, InteractionModule as ɵu, ActivityContainerComponent as ɵv, InteractionContext as ɵw, ActivityOutletComponent as ɵx, ConfirmationDialogComponent as ɵy, AbstractActivity as ɵz };
+export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceNavigationComponent, Activity, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionService, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EnterPlaceGuard, FocusBindingDirective, Formatter, InteractionContext, InteractionGuard, InteractionModule, InteractionOutletComponent, LEFT_RIGHT_PLACE_ANIMATION, LeavePlaceGuard, ListPlaceNavComponent, NavigationSession, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceDefinition, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, ROUTE_PARAMETER_LIST_KEY, ResizeAwareComponent, RouteId, SelectInputComponent, StringInputComponent, TabbedPlaceNavigationComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, leftRightPlaceAnimation, slideDownAndUpAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, ConfirmationDialogComponent as ɵba, AbstractActivity as ɵbb, ACTIVITY_DATA as ɵbc, Activity as ɵbd, ConfirmThenDialogComponent as ɵbf, AlertDialogComponent as ɵbg, InteractionOutletComponent as ɵbi, DIALOG_INTERACTION_SERVICE_DEFAULTS as ɵbj, DialogInteractionService as ɵbk, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, NoopComponent as ɵk, PlaceModule as ɵl, EmptyStateComponent as ɵm, BusyOverlayComponent as ɵn, PlaceOutletComponent as ɵo, leftRightPlaceAnimation as ɵp, LEFT_RIGHT_PLACE_ANIMATION as ɵq, PlaceRouter as ɵr, PlaceHistory as ɵs, TabbedPlaceNavigationComponent as ɵt, AbstractPlaceNavigationComponent as ɵu, ListPlaceNavComponent as ɵv, InteractionModule as ɵw, ActivityContainerComponent as ɵx, InteractionContext as ɵy, ActivityOutletComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map