@coolon/angular-ui-powerups 0.0.71 → 0.0.74

package/fesm2015/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 { GarbageCollector, assert, UnaryCommand, lang, Dsl, 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 { __decorate, __metadata, __awaiter } 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 { 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';
@@ -25,98 +25,179 @@ import ResizeObserver from 'resize-observer-polyfill';
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class DisposableComponent extends GarbageCollector {
+/**
+ * @template P
+ */
+class CommandDirective extends GarbageCollector {
+    /**
+     * @param {?} elementRef
+     */
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+        this._commandParameterProvided = false;
+    }
     /**
+     * @param {?} value
      * @return {?}
      */
-    ngOnDestroy() {
-        this.dispose();
+    set commandParameter(value) {
+        this._commandParameterProvided = true;
+        this._commandParameter = value;
     }
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @abstract
- * @template T
- */
-class AbstractInputComponent extends DisposableComponent {
-    constructor() {
-        super();
-        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 {?} */
-        const self = this;
-        this.errorStateMatcher = {
-            /**
-             * @param {?} control
-             * @param {?} form
-             * @return {?}
-             */
-            isErrorState(control, form) {
-                return self.hasErrors();
-            }
-        };
+    /**
+     * @return {?}
+     */
+    get commandParameter() {
+        return this._commandParameter;
     }
     /**
-     * @param {?} model
      * @return {?}
      */
-    set userValueModel(model) {
-        this.valueModel.setDelegate(model);
+    ngOnInit() {
+        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 {?}
      */
-    notifyClick() {
-        this.safelyInvoke(this.clickCommand);
+    ngAfterViewInit() {
+        // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
+        // we need to do this.
+        const { chain } = Dsl.disposeWith(this);
+        chain(this.pectinCommand.enabled).subscribe((/**
+         * @param {?} enabled
+         * @return {?}
+         */
+        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 {?}
      */
-    notifyFocusIn() {
-        this.safelyInvoke(this.focusCommand);
-        this.focus.emit();
+    ngOnDestroy() {
+        this.dispose();
     }
     /**
+     * @param {?} $event
      * @return {?}
      */
-    notifyFocusOut() {
-        this.safelyInvoke(this.blurCommand);
-        this.blur.emit();
+    notifyClick($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 = () => [
+    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
+];
+CommandDirective.propDecorators = {
+    pectinCommand: [{ type: Input }],
+    commandParameter: [{ type: Input }],
+    notifyClick: [{ type: HostListener, args: ['click', ['$event'],] }]
+};
+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
+ */
+class DisposableComponent extends GarbageCollector {
     /**
      * @return {?}
      */
-    notifyEnterKey() {
-        this.safelyInvoke(this.enterCommand);
-        this.enterKey.emit();
+    ngOnDestroy() {
+        this.dispose();
+    }
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class FocusBindingDirective extends DisposableComponent {
+    /**
+     * @param {?} el
+     * @param {?} ngZone
+     * @param {?} document
+     */
+    constructor(el, ngZone, document) {
+        super();
+        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 {?}
      */
-    notifyEscapeKey() {
-        this.safelyInvoke(this.escapeCommand);
-        this.escapeKey.emit();
+    onFocusIn() {
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusContext.notifyFocusIn();
+        }
     }
     /**
-     * @protected
-     * @param {?} command
      * @return {?}
      */
-    safelyInvoke(command) {
-        if (command && command.enabled.value) {
-            command.execute();
+    onFocusOut() {
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusContext.notifyFocusOut();
         }
     }
     /**
@@ -127,401 +208,251 @@ class AbstractInputComponent extends DisposableComponent {
     /**
      * @return {?}
      */
-    isEnabled() {
-        return this.enabled.value;
+    ngAfterViewInit() {
+        // TODO: Make this also track the current enabled/disabled state.
+        if (this.hasBinding()) {
+            const { chain } = Dsl.disposeWith(this);
+            chain(this.pectinFocusBinding.focusContext.focused).subscribe((/**
+             * @param {?} focused
+             * @return {?}
+             */
+            (focused) => {
+                if (focused && !this.alreadyHasFocus()) {
+                    this.tryAndFocus();
+                }
+            }));
+        }
+        else {
+            Logger.get(this).warn('pectinFocusBinding was nil');
+        }
     }
     /**
+     * @private
      * @return {?}
      */
-    get enabled() {
-        return this.valueModel.enabled;
+    hasBinding() {
+        return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
     }
+    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    hasErrors() {
-        return !this.errorList.query().isEmpty();
+    alreadyHasFocus() {
+        return this.isFocused(this.focusTarget);
     }
+    // Hook method for debugging via tracing.
     /**
+     * @param {?} element
      * @return {?}
      */
-    get errorList() {
-        return this.valueModel.errorList;
+    isFocused(element) {
+        return this.document.activeElement === element;
     }
     /**
+     * @param {?=} retries
      * @return {?}
      */
-    get firstError() {
-        return this.hasErrors() ? this.errorList.value[0] : null;
-    }
-}
-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);
-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
- */
-class NumberInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-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 = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class PasswordInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-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 = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @template T
- */
-class SelectInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-        this.optionLabelFormat = (/**
-         * @param {?} option
-         * @return {?}
-         */
-        (option) => (option && this.optionLabel) ? option[this.optionLabel] : option);
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-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 = () => [];
-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);
-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
- */
-class StringInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-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 = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class NoopComponent {
-    constructor() {
-    }
-}
-NoopComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'angular-ui-powerups-noop',
-                template: "",
-                styles: [":host{display:block}"]
-            }] }
-];
-/** @nocollapse */
-NoopComponent.ctorParameters = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @template P
- */
-class CommandDirective extends GarbageCollector {
-    /**
-     * @param {?} elementRef
-     */
-    constructor(elementRef) {
-        super();
-        this.elementRef = elementRef;
-        this._commandParameterProvided = false;
-    }
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    set commandParameter(value) {
-        this._commandParameterProvided = true;
-        this._commandParameter = value;
-    }
-    /**
-     * @return {?}
-     */
-    get commandParameter() {
-        return this._commandParameter;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        assert.notNil(this.pectinCommand);
-        if (this.pectinCommand instanceof UnaryCommand) {
-            if (!this._commandParameterProvided) {
-                lang.illegalState('UnaryCommands required the command parameter to be specified.');
+    tryAndFocus(retries = 5) {
+        if (this.modelShouldStillHaveFocus() && this.canFocus()) {
+            if (!this.alreadyHasFocus()) {
+                this.focusTarget.focus();
             }
-        }
-        else {
-            if (this._commandParameterProvided) {
-                lang.illegalState('command parameters are only supported by UnaryCommands');
+            // 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 {?}
+                     */
+                    () => {
+                        this.tryAndFocus(retries - 1);
+                    }));
+                }
+                else {
+                    Logger.get(this).warn(`Tried to focus but gave up as the component wasn't enabled or visible.`);
+                }
             }
         }
     }
     /**
      * @return {?}
      */
-    ngAfterViewInit() {
-        // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
-        // we need to do this.
-        const { chain } = Dsl.disposeWith(this);
-        chain(this.pectinCommand.enabled).subscribe((/**
-         * @param {?} enabled
-         * @return {?}
-         */
-        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');
-                }
-            }
-        }));
+    get focusTarget() {
+        return this.focusBindingTarget || this.el.nativeElement;
     }
+    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    ngOnDestroy() {
-        this.dispose();
+    modelShouldStillHaveFocus() {
+        return this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
     }
+    // Hook method for debugging via tracing.
     /**
-     * @param {?} $event
      * @return {?}
      */
-    notifyClick($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.');
-        }
+    canFocus() {
+        /** @type {?} */
+        const dimension = this.focusTarget.getBoundingClientRect();
+        /** @type {?} */
+        const 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 = () => [
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
+FocusBindingDirective.ctorParameters = () => [
+    { 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',] }]
 };
 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
  */
-class FocusBindingDirective extends DisposableComponent {
+class DirectivesModule {
+}
+DirectivesModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    CommandDirective,
+                    FocusBindingDirective
+                ],
+                imports: [
+                    CommonModule,
+                    BrowserAnimationsModule,
+                    FormsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    MatSelectModule,
+                    MatTabsModule
+                ],
+                exports: [
+                    CommandDirective,
+                    FocusBindingDirective
+                ]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @abstract
+ * @template T
+ */
+class AbstractInputComponent extends DisposableComponent {
+    constructor() {
+        super();
+        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 {?} */
+        const self = this;
+        this.errorStateMatcher = {
+            /**
+             * @param {?} control
+             * @param {?} form
+             * @return {?}
+             */
+            isErrorState(control, form) {
+                return self.hasErrors();
+            }
+        };
+    }
     /**
-     * @param {?} el
-     * @param {?} ngZone
-     * @param {?} document
+     * @param {?} model
+     * @return {?}
      */
-    constructor(el, ngZone, document) {
-        super();
-        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));
+    set userValueModel(model) {
+        this.valueModel.setDelegate(model);
     }
     /**
      * @return {?}
      */
-    onFocusIn() {
-        if (this.hasBinding()) {
-            this.pectinFocusBinding.focusContext.notifyFocusIn();
-        }
+    notifyClick() {
+        this.safelyInvoke(this.clickCommand);
     }
     /**
      * @return {?}
      */
-    onFocusOut() {
-        if (this.hasBinding()) {
-            this.pectinFocusBinding.focusContext.notifyFocusOut();
+    notifyFocusIn() {
+        this.safelyInvoke(this.focusCommand);
+        this.focus.emit();
+    }
+    /**
+     * @return {?}
+     */
+    notifyFocusOut() {
+        this.safelyInvoke(this.blurCommand);
+        this.blur.emit();
+    }
+    /**
+     * @return {?}
+     */
+    notifyEnterKey() {
+        this.safelyInvoke(this.enterCommand);
+        this.enterKey.emit();
+    }
+    /**
+     * @return {?}
+     */
+    notifyEscapeKey() {
+        this.safelyInvoke(this.escapeCommand);
+        this.escapeKey.emit();
+    }
+    /**
+     * @protected
+     * @param {?} command
+     * @return {?}
+     */
+    safelyInvoke(command) {
+        if (command && command.enabled.value) {
+            command.execute();
         }
     }
     /**
@@ -532,139 +463,271 @@ class FocusBindingDirective extends DisposableComponent {
     /**
      * @return {?}
      */
-    ngAfterViewInit() {
-        // TODO: Make this also track the current enabled/disabled state.
-        if (this.hasBinding()) {
-            const { chain } = Dsl.disposeWith(this);
-            chain(this.pectinFocusBinding.focusContext.focused).subscribe((/**
-             * @param {?} focused
-             * @return {?}
-             */
-            (focused) => {
-                if (focused && !this.alreadyHasFocus()) {
-                    this.tryAndFocus();
-                }
-            }));
-        }
-        else {
-            Logger.get(this).warn('pectinFocusBinding was nil');
-        }
+    isEnabled() {
+        return this.enabled.value;
     }
     /**
-     * @private
      * @return {?}
      */
-    hasBinding() {
-        return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
+    get enabled() {
+        return this.valueModel.enabled;
     }
-    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    alreadyHasFocus() {
-        return this.isFocused(this.focusTarget);
+    hasErrors() {
+        return !this.errorList.query().isEmpty();
     }
-    // Hook method for debugging via tracing.
     /**
-     * @param {?} element
      * @return {?}
      */
-    isFocused(element) {
-        return this.document.activeElement === element;
+    get errorList() {
+        return this.valueModel.errorList;
     }
     /**
-     * @param {?=} retries
      * @return {?}
      */
-    tryAndFocus(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 {?}
-                     */
-                    () => {
-                        this.tryAndFocus(retries - 1);
-                    }));
-                }
-                else {
-                    Logger.get(this).warn(`Tried to focus but gave up as the component wasn't enabled or visible.`);
-                }
-            }
-        }
+    get firstError() {
+        return this.hasErrors() ? this.errorList.value[0] : null;
+    }
+}
+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);
+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
+ */
+class NumberInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
     }
     /**
      * @return {?}
      */
-    get focusTarget() {
-        return this.focusBindingTarget || this.el.nativeElement;
+    ngOnInit() {
+    }
+}
+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 = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class PasswordInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
     }
-    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    modelShouldStillHaveFocus() {
-        return this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
+    ngOnInit() {
+    }
+}
+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 */
+PasswordInputComponent.ctorParameters = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/**
+ * @template T
+ */
+class SelectInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
+        this.optionLabelFormat = (/**
+         * @param {?} option
+         * @return {?}
+         */
+        (option) => (option && this.optionLabel) ? option[this.optionLabel] : option);
     }
-    // Hook method for debugging via tracing.
     /**
      * @return {?}
      */
-    canFocus() {
-        /** @type {?} */
-        const dimension = this.focusTarget.getBoundingClientRect();
-        /** @type {?} */
-        const hasSize = dimension.height >= 0 && dimension.height >= 0;
-        // tslint:disable-next-line:no-string-literal
-        return hasSize && !this.focusTarget['disabled'];
+    ngOnInit() {
     }
 }
-FocusBindingDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line:directive-selector
-                selector: '[pectinFocusBinding]'
-            },] }
+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 */
-FocusBindingDirective.ctorParameters = () => [
-    { 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',] }]
+SelectInputComponent.ctorParameters = () => [];
+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);
 if (false) {
-    /**
-     * @type {?}
-     * @private
-     */
-    FocusBindingDirective.prototype.document;
     /** @type {?} */
-    FocusBindingDirective.prototype.pectinFocusBinding;
+    SelectInputComponent.prototype.optionsModel;
     /** @type {?} */
-    FocusBindingDirective.prototype.focusBindingTarget;
-    /**
-     * @type {?}
-     * @private
-     */
-    FocusBindingDirective.prototype.el;
+    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
+ */
+class StringInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
+    }
     /**
-     * @type {?}
-     * @private
+     * @return {?}
      */
-    FocusBindingDirective.prototype.ngZone;
+    ngOnInit() {
+    }
+}
+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 = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class NoopComponent {
+    constructor() {
+    }
+}
+NoopComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-noop',
+                template: "",
+                styles: [":host{display:block}"]
+            }] }
+];
+/** @nocollapse */
+NoopComponent.ctorParameters = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class 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
+                ]
+            },] }
+];
 
 /**
  * @fileoverview added by tsickle
@@ -902,7 +965,7 @@ class ActivityOutletComponent {
 }
 ActivityOutletComponent.decorators = [
     { type: Component, args: [{
-                selector: 'angular-ui-powerups-activity-outlet',
+                selector: 'aup-activity-outlet',
                 template: '',
                 styles: [":host{display:block}"]
             }] }
@@ -980,9 +1043,9 @@ class AlertDialogComponent extends AbstractActivity {
 }
 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 */
@@ -1048,9 +1111,9 @@ class ConfirmThenDialogComponent extends AbstractActivity {
 }
 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 */
@@ -1108,9 +1171,9 @@ class ConfirmationDialogComponent extends AbstractActivity {
 }
 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 */
@@ -1443,8 +1506,8 @@ class ActivityContainerComponent extends InteractionContext {
 }
 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}"]
             }] }
 ];
@@ -1492,7 +1555,7 @@ class InteractionOutletComponent {
 }
 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}"]
             }] }
@@ -1606,6 +1669,7 @@ class DialogInteractionService extends InteractionContext {
          * @return {?}
          */
         () => {
+            console.log("######  STARTING");
             this.currentActivityId = v1();
             // this.location.go(this.router.routerState.snapshot.url, "aup");
             /** @type {?} */
@@ -1662,6 +1726,7 @@ class DialogInteractionService extends InteractionContext {
              * @return {?}
              */
             () => {
+                console.log("######  FINISHED");
                 this.currentActivityId = null;
                 self.safelyUpdateActivityListDelegate(null);
             }));
@@ -1765,7 +1830,7 @@ InteractionModule.decorators = [
                     CommonModule,
                     MatButtonModule,
                     MatDialogModule,
-                    MatTabsModule,
+                    MatTabsModule$1,
                     PortalModule,
                     RouterModule
                 ],
@@ -1809,7 +1874,7 @@ class BusyOverlayComponent {
 }
 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}"]
             }] }
@@ -1850,13 +1915,13 @@ class EmptyStateComponent {
 }
 EmptyStateComponent.decorators = [
     { type: Component, args: [{
-                selector: 'angular-ui-powerups-empty-state',
+                selector: 'aup-empty-state',
                 template: `
       <div class="container">
           <ng-content></ng-content>
       </div>
   `,
-                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 */
@@ -2099,16 +2164,14 @@ class PlaceDefinition {
      * @param {?} component
      * @param {?} path
      * @param {?} authenticate
-     * @param {?} order
      * @param {?} data
      * @param {?} routeParameters
      * @param {?} children
      */
-    constructor(component, path, authenticate, order, data, routeParameters, children) {
+    constructor(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;
@@ -2341,8 +2404,6 @@ if (false) {
     /** @type {?} */
     PlaceDefinition.prototype.authenticate;
     /** @type {?} */
-    PlaceDefinition.prototype.order;
-    /** @type {?} */
     PlaceDefinition.prototype.data;
     /** @type {?} */
     PlaceDefinition.prototype.routeParameters;
@@ -2506,114 +2567,128 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class AbstractPlaceNavigationComponent extends DisposableComponent {
-    constructor() {
-        super();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.placeDefinitions = chain(this.placesModel).map((/**
-         * @param {?} c
-         * @return {?}
-         */
-        c => PlaceComponent.getDefinition(c)));
+/**
+ * @record
+ */
+function Params() { }
+class Visit {
+    /**
+     * @param {?} placeDefinition
+     * @param {?=} visitParameters
+     */
+    constructor(placeDefinition, visitParameters = {}) {
+        this.placeDefinition = placeDefinition;
+        this.visitParameters = visitParameters;
     }
+    // @Trace()
     /**
-     * @param {?} placeDef
      * @return {?}
      */
-    getNav(placeDef) {
-        /** @type {?} */
-        const navItem = (/** @type {?} */ (placeDef.getPlaceData('nav')));
-        return {
-            title: (/**
-             * @return {?}
-             */
-            () => navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title'])),
-            tooltip: (/**
-             * @return {?}
-             */
-            () => navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null)),
-            icon: (/**
-             * @return {?}
-             */
-            () => navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null))
-        };
+    getRouteId() {
+        return this.placeDefinition.getRouteIdFrom(this);
+    }
+    // @Trace()
+    /**
+     * @return {?}
+     */
+    hasRouteId() {
+        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.
+     * @return {?}
+     */
+    getParameter(parameterName) {
+        return this.visitParameters[parameterName];
+    }
+    // @Trace()
+    /**
+     * @param {?} parameterName
+     * @return {?}
+     */
+    hasParameter(parameterName) {
+        return Object.keys(this.visitParameters).includes(parameterName);
     }
     /**
+     * @template S
+     * @param {?} parameter
+     * @param {?} value
      * @return {?}
      */
-    ngOnInit() {
+    replace(parameter, value) {
+        return new Visit(this.placeDefinition, Object.assign({}, this.visitParameters, { [parameter.name]: value }));
     }
-}
-AbstractPlaceNavigationComponent.propDecorators = {
-    places: [{ type: Input }],
-    placesModel: [{ 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([
-    Memoize(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [PlaceDefinition]),
-    __metadata("design:returntype", Object)
-], AbstractPlaceNavigationComponent.prototype, "getNav", null);
-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
- */
-class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
-    constructor() {
-        super();
-        this.expanded = true;
+    /**
+     * @template S
+     * @param {?} routeParams
+     * @return {?}
+     */
+    mergeRouteParameters(routeParams) {
+        // todo: whitelist parameters.
+        /** @type {?} */
+        const routeParameterKeys = Object.keys(routeParams);
+        /** @type {?} */
+        const params = {};
+        this.placeDefinition.getVisitParameterDefs().forEach((/**
+         * @param {?} def
+         * @return {?}
+         */
+        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 {?}
      */
-    expandMenu() {
-        this.expanded = true;
+    hasRoutingChangedFrom(other) {
+        /** @type {?} */
+        const samePlace = other.placeDefinition === this.placeDefinition;
+        /** @type {?} */
+        const sameRouteParameters = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
+        return !samePlace || !sameRouteParameters;
     }
     /**
+     * @param {?} other
      * @return {?}
      */
-    collapseMenu() {
-        this.expanded = false;
+    hasChangedFrom(other) {
+        /** @type {?} */
+        const sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
     }
     /**
      * @return {?}
      */
-    toggleMenu() {
-        this.expanded = !this.expanded;
+    getUrlSegments() {
+        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))];
     }
 }
-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 = () => [];
-ListPlaceNavComponent.propDecorators = {
-    expanded: [{ type: HostBinding, args: ['class.expanded',] }]
-};
 if (false) {
     /** @type {?} */
-    ListPlaceNavComponent.prototype.expanded;
+    Visit.prototype.placeDefinition;
+    /**
+     * @type {?}
+     * @private
+     */
+    Visit.prototype.visitParameters;
 }
 
 /**
@@ -2836,126 +2911,6 @@ if (false) {
     PlaceHistory.prototype.router;
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-function Params() { }
-class Visit {
-    /**
-     * @param {?} placeDefinition
-     * @param {?=} visitParameters
-     */
-    constructor(placeDefinition, visitParameters = {}) {
-        this.placeDefinition = placeDefinition;
-        this.visitParameters = visitParameters;
-    }
-    // @Trace()
-    /**
-     * @return {?}
-     */
-    getRouteId() {
-        return this.placeDefinition.getRouteIdFrom(this);
-    }
-    // @Trace()
-    /**
-     * @return {?}
-     */
-    hasRouteId() {
-        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.
-     * @return {?}
-     */
-    getParameter(parameterName) {
-        return this.visitParameters[parameterName];
-    }
-    // @Trace()
-    /**
-     * @param {?} parameterName
-     * @return {?}
-     */
-    hasParameter(parameterName) {
-        return Object.keys(this.visitParameters).includes(parameterName);
-    }
-    /**
-     * @template S
-     * @param {?} parameter
-     * @param {?} value
-     * @return {?}
-     */
-    replace(parameter, value) {
-        return new Visit(this.placeDefinition, Object.assign({}, this.visitParameters, { [parameter.name]: value }));
-    }
-    /**
-     * @template S
-     * @param {?} routeParams
-     * @return {?}
-     */
-    mergeRouteParameters(routeParams) {
-        // todo: whitelist parameters.
-        /** @type {?} */
-        const routeParameterKeys = Object.keys(routeParams);
-        /** @type {?} */
-        const params = {};
-        this.placeDefinition.getVisitParameterDefs().forEach((/**
-         * @param {?} def
-         * @return {?}
-         */
-        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 {?}
-     */
-    hasRoutingChangedFrom(other) {
-        /** @type {?} */
-        const samePlace = other.placeDefinition === this.placeDefinition;
-        /** @type {?} */
-        const sameRouteParameters = isEqual(this.placeDefinition.getFormattedRouteParameters(this, true), this.placeDefinition.getFormattedRouteParameters(other, true));
-        return !samePlace || !sameRouteParameters;
-    }
-    /**
-     * @param {?} other
-     * @return {?}
-     */
-    hasChangedFrom(other) {
-        /** @type {?} */
-        const sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
-    }
-}
-if (false) {
-    /** @type {?} */
-    Visit.prototype.placeDefinition;
-    /**
-     * @type {?}
-     * @private
-     */
-    Visit.prototype.visitParameters;
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -3055,6 +3010,7 @@ class PlaceRouter extends GarbageCollector {
             })));
         });
     }
+    // @Trace()
     /**
      * @param {?} activatedRoute
      * @param {?} previous
@@ -3073,6 +3029,9 @@ class PlaceRouter extends GarbageCollector {
                  * @return {?}
                  */
                 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 {?} */
                     const relativePath = !!previous.placeDefinition.hasRouteId() ? '..' : '.';
                     /** @type {?} */
@@ -3081,7 +3040,7 @@ class PlaceRouter extends GarbageCollector {
                         ...this.createRouteParameters(next),
                         ...this.extractChildPath(activatedRoute.snapshot)
                     ];
-                    console.log('### Redirect', commands);
+                    console.log('### Push Changes to route Redirect', { commands, relativeTo: activatedRoute.snapshot.url });
                     return router.navigate(commands, {
                         relativeTo: activatedRoute
                     });
@@ -3189,12 +3148,6 @@ __decorate([
     __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);
 if (false) {
     /**
      * @type {?}
@@ -3310,29 +3263,51 @@ class PlaceOutletComponent extends DisposableComponent {
         super();
         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();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        // Handle incoming route changes.
+        this.parentOutletModel = new MutableValueModel(parentOutlet);
         /** @type {?} */
-        const inRouteVisitUpdate = new Guard$1();
+        const defaultPlaceAnimationOrder = chain(this.parentOutletModel)
+            .pullValueModel((/**
+         * @param {?} o
+         * @return {?}
+         */
+        o => o.activePlaceModel))
+            .pluck("placeDefinition")
+            .pluckList("children")
+            .pluck("component");
+        /** @type {?} */
+        const activatePlaceType = chain(this.activePlaceModel).map((/**
+         * @param {?} p
+         * @return {?}
+         */
+        p => (/** @type {?} */ (p.constructor))));
+        this.placeAnimationOrder = chain(this.customPlaceAnimationOrderModel)
+            .otherwise(defaultPlaceAnimationOrder)
+            .indexOf(activatePlaceType)
+            .map((/**
+         * @param {?} order
+         * @return {?}
+         */
+        order => 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 {?} */
         const routeVisit = chain(this._activePlace).pluck('placeDefinition').findIn(placeRouter.activeVisitIndex);
+        /** @type {?} */
+        const inRouteVisitUpdate = new Guard$1();
         when.valueOf(routeVisit).changes((/**
          * @param {?} visit
          * @return {?}
          */
         (visit) => {
-            if (visit) {
+            if (visit) { // can be null while the place and index sync up
                 inRouteVisitUpdate.whileTrue((/**
                  * @return {?}
                  */
@@ -3377,6 +3352,12 @@ class PlaceOutletComponent extends DisposableComponent {
             relativeTo: this.parentOutlet ? this.parentOutlet.activatedRouteModel.value : null
         });
     }
+    /**
+     * @return {?}
+     */
+    get parentOutlet() {
+        return this.parentOutletModel.value;
+    }
     /**
      * @param {?} next
      * @param {?} previous
@@ -3424,6 +3405,7 @@ class PlaceOutletComponent extends DisposableComponent {
             this.animationDone();
         }
     }
+    // @Trace()
     /**
      * @param {?} routerOutlet
      * @param {?} $event
@@ -3437,14 +3419,7 @@ class PlaceOutletComponent extends DisposableComponent {
             this._activePlace.value = null;
             this._activatedRouteModel.value = null;
             this._placeDefinition.value = null;
-        }));
-    }
-    /**
-     * @param {?} outlet
-     * @return {?}
-     */
-    getPlaceOrder(outlet) {
-        return this.animate && outlet && outlet.activatedRouteData && outlet.activatedRouteData['placeOrder'];
+        }));
     }
     /**
      * @return {?}
@@ -3457,8 +3432,8 @@ class PlaceOutletComponent extends DisposableComponent {
 }
 PlaceOutletComponent.decorators = [
     { type: Component, args: [{
-                selector: 'angular-ui-powerups-place-outlet',
-                template: "<div class=\"router-outlet-container\"\n     [@routeAnimations]=\"getPlaceOrder(routerOutlet)\"\n     (@routeAnimations.done)=\"animationDone()\"\n>\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                 (deactivate)=\"onOutletDeactivated(routerOutlet, $event)\">\n  </router-outlet>\n</div>\n\n",
+                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}"]
             }] }
@@ -3471,9 +3446,19 @@ PlaceOutletComponent.ctorParameters = () => [
 ];
 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),
@@ -3486,16 +3471,14 @@ __decorate([
     __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);
 if (false) {
     /** @type {?} */
     PlaceOutletComponent.prototype.animate;
     /** @type {?} */
+    PlaceOutletComponent.prototype.customPlaceAnimationOrderModel;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.customPlaceAnimationOrder;
+    /** @type {?} */
     PlaceOutletComponent.prototype.placeChanged;
     /** @type {?} */
     PlaceOutletComponent.prototype.routerOut;
@@ -3504,6 +3487,11 @@ if (false) {
      * @private
      */
     PlaceOutletComponent.prototype._activePlace;
+    /**
+     * @type {?}
+     * @private
+     */
+    PlaceOutletComponent.prototype._placeVisit;
     /**
      * @type {?}
      * @private
@@ -3520,10 +3508,12 @@ if (false) {
      */
     PlaceOutletComponent.prototype._placeDefinition;
     /**
-     * TODO: This is now really a visit
      * @type {?}
+     * @private
      */
-    PlaceOutletComponent.prototype._placeVisit;
+    PlaceOutletComponent.prototype.parentOutletModel;
+    /** @type {?} */
+    PlaceOutletComponent.prototype.placeAnimationOrder;
     /**
      * @type {?}
      * @private
@@ -3534,8 +3524,153 @@ if (false) {
      * @private
      */
     PlaceOutletComponent.prototype.placeRouter;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class AbstractPlaceNavigationComponent extends DisposableComponent {
+    constructor() {
+        super();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.placeDefinitions = chain(this.placesModel).map((/**
+         * @param {?} c
+         * @return {?}
+         */
+        c => PlaceComponent.getDefinition(c)));
+        this.relativeToModel = chain(this.placeOutletModel).pullValueModel((/**
+         * @param {?} o
+         * @return {?}
+         */
+        o => o.activatedRouteModel));
+        this.commandFactory = Command.createFactory((/**
+         * @param {?} placeDefinition
+         * @return {?}
+         */
+        (placeDefinition) => {
+            this.placeOutlet.navigate(new Visit(placeDefinition));
+        }));
+    }
+    /**
+     * @param {?} placeDef
+     * @return {?}
+     */
+    getNav(placeDef) {
+        /** @type {?} */
+        const navItem = (/** @type {?} */ (placeDef.getPlaceData('nav')));
+        return {
+            title: (/**
+             * @return {?}
+             */
+            () => navItem ? navItem.title() : placeDef.searchPlaceData(['navTitle', 'title'])),
+            tooltip: (/**
+             * @return {?}
+             */
+            () => navItem && navItem.tooltip ? navItem.tooltip() : placeDef.getPlaceData('navTooltip', null)),
+            icon: (/**
+             * @return {?}
+             */
+            () => navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null))
+        };
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+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);
+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
+ */
+class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
+    constructor() {
+        super();
+        this.expanded = true;
+    }
+    /**
+     * @return {?}
+     */
+    expandMenu() {
+        this.expanded = true;
+    }
+    /**
+     * @return {?}
+     */
+    collapseMenu() {
+        this.expanded = false;
+    }
+    /**
+     * @return {?}
+     */
+    toggleMenu() {
+        this.expanded = !this.expanded;
+    }
+}
+ListPlaceNavComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-list-place-nav',
+                template: "<mat-nav-list class=\"app-menu\">\n  <a mat-list-item *ngFor=\"let place of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(place)\"\n     routerLinkActive #rla=\"routerLinkActive\"\n     [matTooltip]=\"getNav(place).tooltip()\">\n    <mat-icon *ngIf=\"getNav(place).icon()\">{{getNav(place).icon()}}</mat-icon>\n    <span class=\"expanded-only\">{{getNav(place).title()}}</span>\n  </a>\n</mat-nav-list>\n",
+                styles: [":host{display:flex;flex-direction:column;--expanded-width:235px;--nav-item-width:var(--nav-bar-height);width:var(--nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--expanded-width);max-width:var(--expanded-width)}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}.header{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;height:var(--nav-bar-height);border-bottom:var(--pinstripe-border);cursor:pointer}.header .menu{flex:1}.header button{color:inherit;width:var(--nav-item-width);height:var(--nav-bar-height)}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--nav-item-width);height:var(--nav-bar-height);color:inherit}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item mat-icon{margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}a[ng-reflect-router-link=manage-instruments] mat-icon{transform:rotate(90deg)}.app-menu{padding-top:0}"]
+            }] }
+];
+/** @nocollapse */
+ListPlaceNavComponent.ctorParameters = () => [];
+ListPlaceNavComponent.propDecorators = {
+    expanded: [{ type: HostBinding, args: ['class.expanded',] }]
+};
+if (false) {
     /** @type {?} */
-    PlaceOutletComponent.prototype.parentOutlet;
+    ListPlaceNavComponent.prototype.expanded;
 }
 
 /**
@@ -3549,8 +3684,8 @@ class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
 }
 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: [""]
             }] }
 ];
@@ -3570,10 +3705,11 @@ PlaceModule.decorators = [
                     BrowserAnimationsModule,
                     MatProgressSpinnerModule,
                     RouterModule,
-                    MatTabsModule$1,
+                    MatTabsModule,
                     MatListModule,
                     MatTooltipModule,
-                    MatIconModule
+                    MatIconModule,
+                    DirectivesModule
                 ],
                 declarations: [
                     EmptyStateComponent,
@@ -3602,15 +3738,7 @@ class AngularUiPowerupsModule {
 }
 AngularUiPowerupsModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [
-                    CommandDirective,
-                    FocusBindingDirective,
-                    NumberInputComponent,
-                    StringInputComponent,
-                    PasswordInputComponent,
-                    SelectInputComponent,
-                    NoopComponent
-                ],
+                declarations: [],
                 imports: [
                     CommonModule,
                     BrowserAnimationsModule,
@@ -3618,19 +3746,17 @@ AngularUiPowerupsModule.decorators = [
                     MatInputModule,
                     MatFormFieldModule,
                     MatSelectModule,
-                    MatTabsModule$1,
+                    MatTabsModule,
+                    DirectivesModule,
+                    ComponentsModule,
                     PlaceModule,
                     InteractionModule
                 ],
                 exports: [
-                    CommandDirective,
-                    FocusBindingDirective,
-                    NumberInputComponent,
-                    StringInputComponent,
-                    PasswordInputComponent,
-                    SelectInputComponent,
                     InteractionModule,
                     PlaceModule,
+                    DirectivesModule,
+                    ComponentsModule,
                     NoopComponent
                 ]
             },] }
@@ -4086,7 +4212,7 @@ function Place(options) {
      */
     (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 {?}
              */
@@ -4106,14 +4232,14 @@ function Place(options) {
     if (false) {
         /** @type {?} */
         Options.prototype.path;
-        /** @type {?} */
-        Options.prototype.order;
         /** @type {?|undefined} */
         Options.prototype.data;
         /** @type {?|undefined} */
         Options.prototype.authenticate;
         /** @type {?|undefined} */
         Options.prototype.children;
+        /** @type {?|undefined} */
+        Options.prototype.defaultChild;
     }
 })(Place || (Place = {}));
 
@@ -4383,249 +4509,69 @@ class VisitSanitiser {
                     // if the route id has changed we redirect immediately as other
                     // parameter sanitisers might use it.
                     return visit.replace(routeIdDef, sanitisedValue);
-                }
-            }
-            // if we didn't replace the routeId we continue the url present parameters.
-            /** @type {?} */
-            const parameterDefs = placeDef.getVisitParameterDefs({
-                includeRouteParameters: true,
-                includeNonRouteParameters: true
-            });
-            /** @type {?} */
-            let sanitisedVisit = visit;
-            for (let i = 0; i < parameterDefs.length; i++) {
-                /** @type {?} */
-                const def = parameterDefs[i];
-                /** @type {?} */
-                const value = visit.getParameter(def.name);
-                /** @type {?} */
-                const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector);
-                if (def.hasChanged(value, sanitisedValue)) {
-                    sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
-                }
-            }
-            return sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit;
-        });
-    }
-}
-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
- */
-class LeavePlaceGuard {
-    /**
-     * @param {?} router
-     * @param {?} injector
-     * @param {?} placeRouter
-     * @param {?} interactionContext
-     * @param {?} angularLocation
-     */
-    constructor(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 {?}
-     */
-    isLeavingTheCurrentPlace(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 {?}
-     */
-    canDeactivate(component, currentRoute, currentState, nextState) {
-        return __awaiter(this, void 0, void 0, function* () {
-            /** @type {?} */
-            const placeDefinitionPath = `/${component.placeDefinition.path}`;
-            // 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"
-            // }
-            // TODO: Add tests
-            if (this.placeRouter.navigationSession.alreadyAccepted(component)) {
-                // 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 true;
+                }
             }
-            else {
+            // if we didn't replace the routeId we continue the url present parameters.
+            /** @type {?} */
+            const parameterDefs = placeDef.getVisitParameterDefs({
+                includeRouteParameters: true,
+                includeNonRouteParameters: true
+            });
+            /** @type {?} */
+            let sanitisedVisit = visit;
+            for (let i = 0; i < parameterDefs.length; i++) {
                 /** @type {?} */
-                const self = this;
+                const def = parameterDefs[i];
                 /** @type {?} */
-                let canLeave = true;
-                if (this.isLeavingTheCurrentPlace(nextState, placeDefinitionPath)) {
-                    // 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);
-                    }
-                    // No interaction in progress, so ask the component .
-                    // This may start an interaction, hence checking the interaction context above. I.e. if the place pops up the dialog, and
-                    // the user clicks back again, we'll re-enter here and go bang when the component tries to open another
-                    // dialog.
-                    if (canLeave) {
-                        // TODO: Add tests: hit back -> confirm leave dialog -> hit back -> close dialog ->  hit back -> confirm leave dialog.
-                        canLeave = yield component.canDeactivate();
-                    }
-                    // We also block back button parameter changes while the dialog is open.
-                    // NOTE: Now that I'm catching parameter changes I could possibly retry using a fragment or
-                    // query parameter to track the dialog being open.  Previously I was just checking this on
-                    // path changes... if that worked it'd fix the case where the back button breaks with an activity
-                    // open on the first page: https://coolon.atlassian.net/browse/AUP-33
-                }
-                else {
-                    if (this.interactionContext.isActive()) {
-                        console.log('cancelling', { activity: this.interactionContext.currentActivity });
-                        this.interactionContext.currentActivity.cancel(null);
-                        canLeave = false;
-                    }
-                    else {
-                        canLeave = true;
-                    }
-                }
-                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.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);
-                    }
+                const value = visit.getParameter(def.name);
+                /** @type {?} */
+                const sanitisedValue = yield def.sanitise(value, sanitisedVisit, this.placeHistory, this.injector);
+                if (def.hasChanged(value, sanitisedValue)) {
+                    sanitisedVisit = sanitisedVisit.replace(def, sanitisedValue);
                 }
-                return canLeave;
             }
+            return sanitisedVisit.hasChangedFrom(visit) ? sanitisedVisit : visit;
         });
     }
 }
-LeavePlaceGuard.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-LeavePlaceGuard.ctorParameters = () => [
-    { 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" });
 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
  */
-class PlaceRouteGuard {
+class EnterPlaceGuard {
     /**
      * @param {?} router
+     * @param {?} urlSerializer
      * @param {?} placeRouter
      * @param {?} placeHistory
      * @param {?} injector
      */
-    constructor(router, placeRouter, placeHistory, injector) {
+    constructor(router, urlSerializer, placeRouter, placeHistory, injector) {
         this.router = router;
+        this.urlSerializer = urlSerializer;
         this.placeRouter = placeRouter;
         this.placeHistory = placeHistory;
         this.injector = injector;
@@ -4643,7 +4589,7 @@ class PlaceRouteGuard {
                 const placeDefinition = PlaceComponent.getDefinition(activatedRoute.component);
                 // Parse our route params.
                 /** @type {?} */
-                const params = new PlaceRouteGuard.ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
+                const params = new EnterPlaceGuard.ConsolidatedParameterMap(activatedRoute.paramMap, activatedRoute.url);
                 /** @type {?} */
                 const parsedParams = placeDefinition.parseRouteParams(params);
                 /** @type {?} */
@@ -4656,12 +4602,10 @@ class PlaceRouteGuard {
                 this.placeRouter.navigationSession.storeVisit(sanitisedVisit);
                 if (initialVisit.hasRoutingChangedFrom(sanitisedVisit)) {
                     /** @type {?} */
-                    const parameterCommands = sanitisedVisit.hasRouteId() ?
-                        [placeDefinition.getFormattedRouteId(sanitisedVisit), placeDefinition.getFormattedRouteParameters(sanitisedVisit)] :
-                        [placeDefinition.getFormattedRouteParameters(sanitisedVisit)];
-                    /** @type {?} */
-                    const commands = [(activatedRoute.url[0].path)].concat(parameterCommands, this.placeRouter.extractChildPath(activatedRoute));
-                    console.log('##### Redirect', commands);
+                    const routerStateUrlTree = this.urlSerializer.parse(state.url);
+                    // Regenerate the url
+                    const { commands } = this.createRedirectCommands(sanitisedVisit, [...routerStateUrlTree.root.children.primary.segments]);
+                    console.log('##### Place Guard Redirect', commands);
                     return this.router.createUrlTree(commands, {
                         replaceUrl: true,
                         skipLocationChange: false
@@ -4676,43 +4620,83 @@ class PlaceRouteGuard {
             }
         });
     }
+    /**
+     * @private
+     * @param {?} sanitisedVisit
+     * @param {?} path
+     * @return {?}
+     */
+    createRedirectCommands(sanitisedVisit, path) {
+        // Ugly, but it works for now.
+        /** @type {?} */
+        const newSegments = sanitisedVisit.getUrlSegments();
+        /** @type {?} */
+        const replaceAt = path.findIndex((/**
+         * @param {?} segment
+         * @return {?}
+         */
+        segment => segment.path === newSegments[0].path));
+        /** @type {?} */
+        const newPath = [...path];
+        newPath.splice(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 {?} */
+        const commands = [];
+        newPath.forEach((/**
+         * @param {?} s
+         * @return {?}
+         */
+        s => {
+            commands.push(s.path);
+            if (s.parameterMap.keys.length > 0) {
+                commands.push(s.parameters);
+            }
+        }));
+        return { newPath, commands };
+    }
 }
-PlaceRouteGuard.decorators = [
+EnterPlaceGuard.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
 /** @nocollapse */
-PlaceRouteGuard.ctorParameters = () => [
+EnterPlaceGuard.ctorParameters = () => [
     { 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" });
+/** @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" });
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.router;
+    EnterPlaceGuard.prototype.router;
+    /**
+     * @type {?}
+     * @private
+     */
+    EnterPlaceGuard.prototype.urlSerializer;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.placeRouter;
+    EnterPlaceGuard.prototype.placeRouter;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.placeHistory;
+    EnterPlaceGuard.prototype.placeHistory;
     /**
      * @type {?}
      * @private
      */
-    PlaceRouteGuard.prototype.injector;
+    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
@@ -4788,7 +4772,7 @@ if (false) {
         __metadata("design:type", Array),
         __metadata("design:paramtypes", [])
     ], ConsolidatedParameterMap.prototype, "keys", null);
-    PlaceRouteGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
+    EnterPlaceGuard.ConsolidatedParameterMap = ConsolidatedParameterMap;
     if (false) {
         /**
          * @type {?}
@@ -4840,7 +4824,207 @@ if (false) {
          */
         ParamMapAdapter.prototype.params;
     }
-})(PlaceRouteGuard || (PlaceRouteGuard = {}));
+})(EnterPlaceGuard || (EnterPlaceGuard = {}));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class LeavePlaceGuard {
+    /**
+     * @param {?} router
+     * @param {?} injector
+     * @param {?} placeRouter
+     * @param {?} interactionContext
+     * @param {?} angularLocation
+     */
+    constructor(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 {?}
+     */
+    isLeavingTheCurrentPlace(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 {?} */
+        const placeDefinitionPath = `/${placeDefinition.path}`;
+        return !nextState.url.startsWith(placeDefinitionPath);
+    }
+    /**
+     * @param {?} component
+     * @param {?} currentRoute
+     * @param {?} currentState
+     * @param {?=} nextState
+     * @return {?}
+     */
+    canDeactivate(component, currentRoute, currentState, nextState) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // TODO: Add tests
+            if (this.placeRouter.navigationSession.alreadyAccepted(component)) {
+                // 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 true;
+            }
+            else {
+                /** @type {?} */
+                const self = this;
+                /** @type {?} */
+                let canLeave = true;
+                if (this.isLeavingTheCurrentPlace(nextState, component.placeDefinition)) {
+                    // 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);
+                    }
+                    // No interaction in progress, so ask the component .
+                    // This may start an interaction, hence checking the interaction context above. I.e. if the place pops up the dialog, and
+                    // the user clicks back again, we'll re-enter here and go bang when the component tries to open another
+                    // dialog.
+                    if (canLeave) {
+                        // TODO: Add tests: hit back -> confirm leave dialog -> hit back -> close dialog ->  hit back -> confirm leave dialog.
+                        canLeave = yield component.canDeactivate();
+                    }
+                    // We also block back button parameter changes while the dialog is open.
+                    // NOTE: Now that I'm catching parameter changes I could possibly retry using a fragment or
+                    // query parameter to track the dialog being open.  Previously I was just checking this on
+                    // path changes... if that worked it'd fix the case where the back button breaks with an activity
+                    // open on the first page: https://coolon.atlassian.net/browse/AUP-33
+                }
+                else {
+                    if (this.interactionContext.isActive()) {
+                        console.log('cancelling', { activity: this.interactionContext.currentActivity });
+                        this.interactionContext.currentActivity.cancel(null);
+                        canLeave = false;
+                    }
+                    else {
+                        canLeave = true;
+                    }
+                }
+                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.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 canLeave;
+            }
+        });
+    }
+}
+LeavePlaceGuard.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+LeavePlaceGuard.ctorParameters = () => [
+    { 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);
+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
@@ -4862,5 +5046,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