@coolon/angular-ui-powerups 1.10.0 → 1.11.0

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

@@ -1,27 +1,30 @@
 import { __decorate, __metadata, __param, __awaiter } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Self, HostBinding, Component, EventEmitter, Output, ContentChild, TemplateRef, ChangeDetectorRef, ContentChildren, QueryList, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, HostBinding, Component, ContentChild, TemplateRef, Self, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, QueryList, Optional, EventEmitter, Output, ChangeDetectorRef, ContentChildren, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule, MatTabGroup, MAT_TABS_CONFIG } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, Command, FocusManager, DelegatingFormValueModel, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, Deferred, Trace, MutableListModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
-import { PortalModule } from '@angular/cdk/portal';
+import { MatTableModule } from '@angular/material/table';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, FocusManager, MutableValueModel, TrackExternal, Command, Deferred, Trace, MutableListModel, Form, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
 import ___default, { isEqual, isNil } from 'lodash';
 import ResizeObserver from 'resize-observer-polyfill';
 import { assert as assert$1, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
+import { Overlay } from '@angular/cdk/overlay';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import produce from 'immer';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
@@ -325,42 +328,6 @@ DirectivesModule = __decorate([
     })
 ], DirectivesModule);
 
-let FocusContainerComponent = class FocusContainerComponent extends DisposableComponent {
-    constructor(focusManager) {
-        super();
-        this.focusManager = focusManager;
-        this.restoreFocusCommand = Command.create(() => {
-            this.restoreFocus();
-        });
-        this.tabIndex = -1;
-    }
-    ngOnInit() {
-    }
-    // @Trace()
-    restoreFocus() {
-        this.focusManager.restoreFocus();
-    }
-};
-FocusContainerComponent.ctorParameters = () => [
-    { type: FocusManager, decorators: [{ type: Self }] }
-];
-__decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", Object)
-], FocusContainerComponent.prototype, "tabIndex", void 0);
-FocusContainerComponent = __decorate([
-    Component({
-        selector: 'aup-focus-container',
-        template: "<ng-content></ng-content>\n",
-        providers: [
-            { provide: FocusManager }
-        ],
-        styles: [":host{display:block}"]
-    }),
-    __param(0, Self()),
-    __metadata("design:paramtypes", [FocusManager])
-], FocusContainerComponent);
-
 let FocusableComponent = class FocusableComponent extends DisposableComponent {
     constructor(el, focusManager, focusBindingFactory) {
         super();
@@ -415,1647 +382,2506 @@ FocusableComponent = __decorate([
     __metadata("design:paramtypes", [ElementRef, FocusManager, FocusBindingFactory])
 ], FocusableComponent);
 
-let AbstractInputComponent = class AbstractInputComponent extends DisposableComponent {
-    constructor() {
-        super();
-        /**
-         * A backing model for all our @Input() valueModel properties which should be defined as follows.
-         *
-         *    @Input() @TrackExternal({useExisting: "delegatingFormValueModel"})
-         *    valueModel: FormValueModel<string> | MutableValueModel<string>;
-         *
-         * This approach allows the input to accept plain or form models but all backed by a form
-         * friendly delegate.  We have to use an existing delegate for union types as pectin just
-         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
-         */
-        // We have to register it as a disposable so it ditches any listeners when we're disposed.
-        this.delegatingFormValueModel = this.registerDisposable(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();
-        const self = this;
-        this.errorStateMatcher = {
-            isErrorState(control, form) {
-                return self.hasErrors();
-            }
-        };
-    }
-    notifyClick() {
-        this.safelyInvoke(this.clickCommand);
+class Dimension {
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
     }
-    notifyFocusIn() {
-        this.safelyInvoke(this.focusCommand);
-        this.focus.emit();
+}
+
+class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
     }
-    notifyFocusOut() {
-        this.safelyInvoke(this.blurCommand);
-        this.blur.emit();
+    static from(data) {
+        return new Point(data.x, data.y);
     }
-    notifyEnterKey() {
-        this.safelyInvoke(this.enterCommand);
-        this.enterKey.emit();
+    translate(x, y) {
+        return new Point(this.x + x, this.y + y);
     }
-    notifyEscapeKey() {
-        this.safelyInvoke(this.escapeCommand);
-        this.escapeKey.emit();
+}
+
+class Bounds extends Dimension {
+    constructor(top, left, width, height) {
+        super(width, height);
+        this.top = top;
+        this.left = left;
+        this.width = width;
+        this.height = height;
     }
-    safelyInvoke(command) {
-        if (command && command.enabled.value) {
-            command.execute();
+    relativePositionOf(point) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
+        }
+        else {
+            return new Point(point.x - this.left, point.y - this.top);
         }
     }
-    ngOnInit() {
+}
+(function (Bounds) {
+    function ofElement(element) {
+        const rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
     }
-    isEnabled() {
-        return this.enabled.value;
+    Bounds.ofElement = ofElement;
+})(Bounds || (Bounds = {}));
+
+let ResizeAwareComponent = class ResizeAwareComponent extends DisposableComponent {
+    constructor(elementRef, ngZone) {
+        super();
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
     }
-    get enabled() {
-        return this.delegatingFormValueModel.enabled;
+    ngAfterViewInit() {
+        this.updateBounds();
+        const element = this.elementRef.nativeElement;
+        const ro = new ResizeObserver((entries, observer) => {
+            this.ngZone.run(() => this.updateBounds());
+        });
+        ro.observe(element);
+        this.onDispose(() => ro.disconnect());
     }
-    hasErrors() {
-        return !this.errorList.query().isEmpty();
+    get boundsModel() {
+        return this._boundsModel.readonly;
     }
-    get errorList() {
-        return this.delegatingFormValueModel.errorList;
+    get nativeElement() {
+        return this.elementRef.nativeElement;
     }
-    get firstError() {
-        return this.hasErrors() ? this.errorList.value[0] : null;
+    // TODO: Make this handle body scroll
+    relativePositionOf(point) {
+        return this.bounds.relativePositionOf(point);
+    }
+    get bounds() {
+        return this._boundsModel.value;
+    }
+    updateBounds() {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    }
+};
+ResizeAwareComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgZone }
+];
+ResizeAwareComponent = __decorate([
+    Directive(),
+    __metadata("design:paramtypes", [ElementRef, NgZone])
+], ResizeAwareComponent);
+
+/**
+ * @example
+ * // CSS Vars
+ * aup-card-container {
+ *   --card-gap: var(--card-gap, 16px);
+ *   --card-width: var(--card-width, 300px);
+ *   --card-height: var(--card-height, auto);
+ *   --card-min-height: var(--card-min-height, auto);
+ *   --card-background: var(--card-background, #fcfcfb);
+ * }
+ *
+ * // Content Templates:
+ * #addCardTemplate
+ * <ng-template #addCardTemplate>
+ *  This is a new card template, it will the the size of the other cards.
+ * </nav-template>
+ *
+ */
+let CardContainerComponent = class CardContainerComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
     }
 };
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], AbstractInputComponent.prototype, "label", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], AbstractInputComponent.prototype, "floatLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], AbstractInputComponent.prototype, "hint", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], AbstractInputComponent.prototype, "placeholder", void 0);
-__decorate([
-    Input('command.focus'),
-    __metadata("design:type", Command)
-], AbstractInputComponent.prototype, "focusCommand", void 0);
-__decorate([
-    Input('command.blur'),
-    __metadata("design:type", Command)
-], AbstractInputComponent.prototype, "blurCommand", void 0);
-__decorate([
-    Input('command.enter'),
+    TrackExternal(),
     __metadata("design:type", Command)
-], AbstractInputComponent.prototype, "enterCommand", void 0);
+], CardContainerComponent.prototype, "addCardCommand", void 0);
 __decorate([
-    Input('command.escape'),
-    __metadata("design:type", Command)
-], AbstractInputComponent.prototype, "escapeCommand", void 0);
+    ContentChild("addCardTemplate"),
+    __metadata("design:type", TemplateRef)
+], CardContainerComponent.prototype, "addCardTemplate", void 0);
+CardContainerComponent = __decorate([
+    Component({
+        selector: 'aup-card-container',
+        template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <mat-icon>add</mat-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
+        styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px)}aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+    }),
+    __metadata("design:paramtypes", [])
+], CardContainerComponent);
+
+let FocusContainerComponent = class FocusContainerComponent extends DisposableComponent {
+    constructor(focusManager) {
+        super();
+        this.focusManager = focusManager;
+        this.restoreFocusCommand = Command.create(() => {
+            this.restoreFocus();
+        });
+        this.tabIndex = -1;
+    }
+    ngOnInit() {
+    }
+    // @Trace()
+    restoreFocus() {
+        this.focusManager.restoreFocus();
+    }
+};
+FocusContainerComponent.ctorParameters = () => [
+    { type: FocusManager, decorators: [{ type: Self }] }
+];
 __decorate([
-    Input('command.click'),
-    __metadata("design:type", Command)
-], AbstractInputComponent.prototype, "clickCommand", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], AbstractInputComponent.prototype, "focus", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], AbstractInputComponent.prototype, "blur", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], AbstractInputComponent.prototype, "enterKey", void 0);
-__decorate([
-    Output(),
+    HostBinding('attr.tabindex'),
     __metadata("design:type", Object)
-], AbstractInputComponent.prototype, "escapeKey", void 0);
-__decorate([
-    HostListener('click'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], AbstractInputComponent.prototype, "notifyClick", null);
-__decorate([
-    HostListener('focusin'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], AbstractInputComponent.prototype, "notifyFocusIn", null);
-__decorate([
-    HostListener('focusout'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], AbstractInputComponent.prototype, "notifyFocusOut", null);
-AbstractInputComponent = __decorate([
-    Component({ template: '' }),
-    __metadata("design:paramtypes", [])
-], AbstractInputComponent);
+], FocusContainerComponent.prototype, "tabIndex", void 0);
+FocusContainerComponent = __decorate([
+    Component({
+        selector: 'aup-focus-container',
+        template: "<ng-content></ng-content>\n",
+        providers: [
+            { provide: FocusManager }
+        ],
+        styles: [":host{display:block}"]
+    }),
+    __param(0, Self()),
+    __metadata("design:paramtypes", [FocusManager])
+], FocusContainerComponent);
 
-let CheckboxInputComponent = class CheckboxInputComponent extends AbstractInputComponent {
+const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
+class Activity extends DisposableComponent {
     constructor() {
-        super();
-        this.color = 'accent';
-        this.labelPosition = 'after';
+        super(...arguments);
+        this._busyModel = new DelegatingValueModel().withDefault(false);
+        this.class = 'aup-activity';
     }
-    ngOnInit() {
+    initialise(nestedInteractionContext, activityContext) {
+        assert$1.isNil(this._activityContext);
+        this._activityContext = activityContext;
+        this._interactionContext = nestedInteractionContext;
     }
-};
+    get interactionContext() {
+        assert$1.isTruthy(this.isInitialised());
+        return this._interactionContext;
+    }
+    done(result) {
+        return this._activityContext.onDone(result);
+    }
+    cancel(error) {
+        this._activityContext.onCancel(error);
+    }
+    // @Trace()
+    onActivityReady() {
+    }
+    get busy() {
+        return this._busyModel.readonly;
+    }
+    busyWhile(busyModel) {
+        this._busyModel.setDelegate(busyModel);
+    }
+    isBusy() {
+        return this._busyModel.value;
+    }
+    isInitialised() {
+        return !!this._activityContext;
+    }
+}
 __decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    HostBinding('class'),
     __metadata("design:type", Object)
-], CheckboxInputComponent.prototype, "valueModel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CheckboxInputComponent.prototype, "color", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CheckboxInputComponent.prototype, "labelPosition", void 0);
-CheckboxInputComponent = __decorate([
-    Component({
-        selector: 'aup-checkbox-input',
-        template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"valueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
-        styles: [":host{display:inline-flex;flex-direction:column;margin-top:24px;margin-bottom:16px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
-    }),
-    __metadata("design:paramtypes", [])
-], CheckboxInputComponent);
+], Activity.prototype, "class", void 0);
 
-let NumberInputComponent = class NumberInputComponent extends AbstractInputComponent {
-    constructor() {
+let AlertDialogComponent = class AlertDialogComponent extends Activity {
+    constructor(alert) {
         super();
-        this.min = Number.MIN_SAFE_INTEGER;
-        this.max = Number.MAX_SAFE_INTEGER;
+        this.alert = alert;
     }
     ngOnInit() {
     }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
-    __metadata("design:type", Object)
-], NumberInputComponent.prototype, "valueModel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], NumberInputComponent.prototype, "min", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], NumberInputComponent.prototype, "max", void 0);
-NumberInputComponent = __decorate([
+AlertDialogComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+];
+AlertDialogComponent = __decorate([
     Component({
-        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]=\"delegatingFormValueModel?.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\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}"]
+        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<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
+        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
     }),
-    __metadata("design:paramtypes", [])
-], NumberInputComponent);
+    __param(0, Inject(ACTIVITY_DATA)),
+    __metadata("design:paramtypes", [Object])
+], AlertDialogComponent);
 
-let PasswordInputComponent = class PasswordInputComponent extends AbstractInputComponent {
-    constructor() {
+let ConfirmThenDialogComponent = class ConfirmThenDialogComponent extends Activity {
+    constructor(config) {
         super();
+        this.config = config;
+        assert.notNil(config);
     }
     ngOnInit() {
     }
+    get confirm() {
+        return this.config.confirm;
+    }
+    isDestructive() {
+        return this.confirm.destructive && this.confirm.destructive();
+    }
+    onConfirm() {
+        this.interactionContext.startActivity(this.config.activityType, this.config.data)
+            .then((result) => this.done(result))
+            .catch(error => this.cancel(error));
+    }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
-    __metadata("design:type", Object)
-], PasswordInputComponent.prototype, "valueModel", void 0);
-PasswordInputComponent = __decorate([
+ConfirmThenDialogComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+];
+ConfirmThenDialogComponent = __decorate([
     Component({
-        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]=\"delegatingFormValueModel.focusContext\"\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}"]
+        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<div 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</div>\n\n",
+        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
     }),
-    __metadata("design:paramtypes", [])
-], PasswordInputComponent);
+    __param(0, Inject(ACTIVITY_DATA)),
+    __metadata("design:paramtypes", [Object])
+], ConfirmThenDialogComponent);
 
-let SelectInputComponent = class SelectInputComponent extends AbstractInputComponent {
-    constructor() {
+let ConfirmationDialogComponent = class ConfirmationDialogComponent extends Activity {
+    constructor(confirm) {
         super();
-        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
+        this.confirm = confirm;
+        assert.notNil(confirm);
     }
     ngOnInit() {
     }
+    isDestructive() {
+        return this.confirm.destructive && this.confirm.destructive();
+    }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
-    __metadata("design:type", Object)
-], SelectInputComponent.prototype, "valueModel", void 0);
-__decorate([
-    Input(), TrackExternal(),
-    __metadata("design:type", ListModel)
-], SelectInputComponent.prototype, "optionsModel", void 0);
-__decorate([
-    Input(), StoreInListModel('optionsModel'),
-    __metadata("design:type", Array)
-], SelectInputComponent.prototype, "options", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], SelectInputComponent.prototype, "optionLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], SelectInputComponent.prototype, "allowNil", void 0);
-__decorate([
-    ContentChild("optionTemplate"),
-    __metadata("design:type", TemplateRef)
-], SelectInputComponent.prototype, "optionTemplateRef", void 0);
-__decorate([
-    ContentChild("nilOptionTemplate"),
-    __metadata("design:type", TemplateRef)
-], SelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], SelectInputComponent.prototype, "optionLabelFormat", void 0);
-SelectInputComponent = __decorate([
+ConfirmationDialogComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+];
+ConfirmationDialogComponent = __decorate([
     Component({
-        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]=\"delegatingFormValueModel.focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\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%}"]
+        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<div 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</div>\n\n",
+        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
     }),
-    __metadata("design:paramtypes", [])
-], SelectInputComponent);
+    __param(0, Inject(ACTIVITY_DATA)),
+    __metadata("design:paramtypes", [Object])
+], ConfirmationDialogComponent);
 
-let StringInputComponent = class StringInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.clearCommand = Command.create(() => {
-            this.valueModel.value = null;
-        });
-        this.clearCommand.disableWhile(chain.stringValue(this.valueModel).isBlank());
+class AbstractInteractionContext {
+    startActivity(activityType, data) {
+        return this.createAndLaunchActivity(activityType, data, false);
     }
-    ngOnInit() {
+    confirm(confirm) {
+        // Important: we have to implement confirmOrReject as the main entry point
+        // as the canDeactivation guards need to be able to cancel an interaction
+        // without caring about returning a value.
+        return this.confirmOrReject(confirm).then(() => true).catch(() => false);
     }
-};
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
-    __metadata("design:type", Object)
-], StringInputComponent.prototype, "valueModel", void 0);
-__decorate([
-    Input(), TrackExternal({ defaultValue: false }),
-    __metadata("design:type", ValueModel)
-], StringInputComponent.prototype, "enableClearModel", void 0);
-__decorate([
-    Input(), StoreInValueModel('enableClearModel'),
-    __metadata("design:type", Boolean)
-], StringInputComponent.prototype, "enableClear", void 0);
-StringInputComponent = __decorate([
-    Component({
-        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]=\"delegatingFormValueModel.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <mat-icon>close</mat-icon>\n  </button>\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}button[disabled]{visibility:hidden}"]
-    }),
-    __metadata("design:paramtypes", [])
-], StringInputComponent);
+    alert(alert) {
+        // TODO: Test disableClose === false
+        return this.createAndLaunchActivity(AlertDialogComponent, alert, false);
+    }
+    confirmOrReject(confirm) {
+        return this.createAndLaunchActivity(ConfirmationDialogComponent, confirm, true);
+    }
+    /**
+     * Presents the confirmation to the user and runs the activity only if the user confirms.
+     * @param confirm:Confirm the confirmation to display.
+     * @param activityType the activity to run if confirmed.
+     * @param data the activity data.
+     */
+    confirmThen(confirm, activityType, data) {
+        return this.createAndLaunchActivity(ConfirmThenDialogComponent, {
+            confirm,
+            activityType: activityType,
+            data: data
+        }, true);
+    }
+}
 
-let TextInputComponent = class TextInputComponent extends AbstractInputComponent {
-    constructor() {
-        super();
-        this.rows = 2;
-        // const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+class ActivityRef {
+    constructor(activityClass, activityData, onComplete) {
+        this.activityClass = activityClass;
+        this.activityData = activityData;
+        this.onComplete = onComplete;
+        this._complete = false;
+        this.deferredResult = Deferred.defer();
+    }
+    isActivityRealised() {
+        return !!this._activity;
+    }
+    isComplete() {
+        return this._complete;
+    }
+    get activity() {
+        assert.isTruthy(this.isActivityRealised());
+        return this._activity;
+    }
+    notifyActivityCreated(activity, nestedInteractionContext) {
+        assert.isNil(this._activity);
+        this._activity = activity;
+        const self = this;
+        this._activity.initialise(nestedInteractionContext, {
+            onDone(result) {
+                self.finishActivity(deferred => deferred.resolve(result));
+            },
+            onCancel(error) {
+                self.finishActivity(deferred => deferred.reject(error));
+            }
+        });
+    }
+    finishActivity(resolveOrReject) {
+        assert.isFalsey(this.isComplete());
+        resolveOrReject(this.deferredResult);
+        this._complete = true;
+        this.onComplete(this);
+    }
+    cancel() {
+        this.activity.cancel();
+    }
+    get activityResult() {
+        return this.deferredResult.promise;
+    }
+}
+
+/**
+ * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
+ * external service.
+ */
+let ActivityOutletComponent = class ActivityOutletComponent {
+    constructor(componentFactoryResolver, viewContainerRef, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
+    }
+    set activityRef(activityRef) {
+        if (this.activityRef && !this.activityRef.isComplete()) {
+            lang$1.illegalState("changing activity before previous one has completed");
+        }
+        this._activityRef = activityRef;
+        this.loadActivity(activityRef);
+    }
+    ;
+    get activityRef() {
+        return this._activityRef;
     }
     ngOnInit() {
     }
+    loadActivity(activityRef) {
+        const injector = Injector.create({
+            providers: [
+                { provide: ACTIVITY_DATA, useValue: activityRef.activityData }
+            ],
+            parent: this.injector
+        });
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(activityRef.activityClass);
+        this.viewContainerRef.clear();
+        // console.log(`creating component -> ${activityRef.activityClass.name}`);
+        this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
+        this.activityRef.notifyActivityCreated(this.activityComponentRef.instance, this.nestedInteractionContext);
+    }
+    get component() {
+        return this.activityComponentRef.instance;
+    }
 };
-__decorate([
-    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
-    __metadata("design:type", Object)
-], TextInputComponent.prototype, "valueModel", void 0);
+ActivityOutletComponent.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: ViewContainerRef },
+    { type: Injector }
+];
 __decorate([
     Input(),
     __metadata("design:type", Object)
-], TextInputComponent.prototype, "rows", void 0);
+], ActivityOutletComponent.prototype, "nestedInteractionContext", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Number)
-], TextInputComponent.prototype, "cols", void 0);
-TextInputComponent = __decorate([
+    __metadata("design:type", ActivityRef),
+    __metadata("design:paramtypes", [ActivityRef])
+], ActivityOutletComponent.prototype, "activityRef", null);
+ActivityOutletComponent = __decorate([
     Component({
-        selector: 'aup-text-input',
-        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\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}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
+        selector: 'aup-activity-outlet',
+        template: '',
+        styles: [":host{display:block}"]
     }),
-    __metadata("design:paramtypes", [])
-], TextInputComponent);
+    __metadata("design:paramtypes", [ComponentFactoryResolver,
+        ViewContainerRef,
+        Injector])
+], ActivityOutletComponent);
 
-let NoopComponent = class NoopComponent {
+let ActivityContainerComponent = class ActivityContainerComponent extends AbstractInteractionContext {
     constructor() {
+        super();
+        this.dynamicHeight = false;
+        this.activityTabs = [];
+        this.garbage = new GarbageCollector();
     }
-};
-NoopComponent = __decorate([
-    Component({
-        selector: 'aup-noop',
-        template: "",
-        styles: [":host{display:block}"]
-    }),
-    __metadata("design:paramtypes", [])
-], NoopComponent);
-
-let ScrollContainerComponent = class ScrollContainerComponent {
-    constructor() { }
     ngOnInit() {
     }
-};
-ScrollContainerComponent = __decorate([
-    Component({
-        selector: 'aup-scroll-container',
-        template: "<div class=\"container\">\n    <ng-content></ng-content>\n</div>\n",
-        styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}"]
-    }),
-    __metadata("design:paramtypes", [])
-], ScrollContainerComponent);
-
-var SwitchCaseWhenDirective_1, SwitchCaseDefaultDirective_1;
-class SwitchCaseOption {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    ngAfterViewInit() {
+        const { chain, observe } = Dsl.disposeWith(this);
+        // using the component directly rather than (animationDone)=.. allows us
+        // to keep our callback private.
+        observe.valuesFrom(this.tabs.animationDone).subscribe(() => this.onAnimationFinished());
     }
-    get name() {
-        return this.constructor.name;
+    initialise(identifier, api) {
+        assert.isFalsey(this.isInitialised());
+        assert.notNil(identifier);
+        assert.notNil(api);
+        this._identifier = identifier;
+        this.interactionServiceApi = api;
     }
-}
-let SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = class SwitchCaseWhenDirective extends SwitchCaseOption {
-    constructor(templateRef) {
-        super(templateRef);
-        this.isDefault = false;
+    get identifier() {
+        return this._identifier;
     }
-    matches(value) {
-        return this.aupSwitchCaseWhen === value;
+    isInitialised() {
+        return !!this.identifier;
     }
-};
-SwitchCaseWhenDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], SwitchCaseWhenDirective.prototype, "aupSwitchCaseWhen", void 0);
-SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = __decorate([
-    Directive({
-        selector: '[aupSwitchCaseWhen]',
-        providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective_1 }]
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], SwitchCaseWhenDirective);
-let SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = class SwitchCaseDefaultDirective extends SwitchCaseOption {
-    constructor(templateRef) {
-        super(templateRef);
-        this.isDefault = true;
+    /**
+     * Returns true if an activity is currently running.
+     */
+    isActive() {
+        return this.getActiveActivityCount() > 0;
     }
-    matches(value) {
-        return false;
+    registerDisposable(disposable) {
+        return this.garbage.registerDisposable(disposable);
     }
-};
-SwitchCaseDefaultDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
-    Directive({
-        selector: '[aupSwitchCaseDefault]',
-        providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], SwitchCaseDefaultDirective);
-let SwitchCaseComponent = class SwitchCaseComponent extends DisposableComponent {
-    constructor(cdr) {
-        super();
-        this.cdr = cdr;
-        this.selectedIndex = 0;
+    dispose() {
+        // TODO: think about auto cancelling any outstanding activity on dispose.
+        //       See NavigationState.Navigating for a use-case.
+        assert.isFalsey(this.isActive());
+        this.garbage.dispose();
     }
-    ngOnInit() {
+    getActiveActivityRef() {
+        if (!this.isActive()) {
+            lang$1.illegalState('no activity in progress');
+        }
+        return ___default.findLast(this.activityTabs, tab => !tab.isComplete());
     }
-    ngAfterContentInit() {
-        const subscription = this.switchCaseOptions.changes.subscribe(change => this.updateSelection());
-        this.onDispose(() => subscription.unsubscribe());
-        const { chain, when } = Dsl.disposeWith(this);
-        when.valueOf(this.switchModel).changes(() => this.updateSelection(), { initialValue: 'triggerChange' });
-        this.cdr.detectChanges();
+    /**
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
+     */
+    // @Trace()
+    cancelActiveActivity() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const activity = this.getActiveActivityRef();
+            activity.cancel();
+            if (this.isCleaningUp()) {
+                return this.waitForInteractionContextCleanupToFinish();
+            }
+            else {
+                return !this.isActive();
+            }
+        });
     }
-    updateSelection() {
-        const matchingIndicies = [];
-        this.switchCaseOptions.forEach((option, index) => {
-            if (option.matches(this.switchModel.value)) {
-                matchingIndicies.push(index);
+    // TODO: this handling of multiple nested activities is only used by the activity component and is not a general case.
+    // @Trace()
+    createAndLaunchActivity(activityType, data, disableClose) {
+        assert.isTruthy(this.isInitialised()); // make sure we've been initialised
+        const activityRef = new ActivityRef(activityType, data, () => {
+            const activeActivityCount = this.getActiveActivityCount() > 0;
+            if (activeActivityCount) {
+                this.triggerTabSynchronisation();
+            }
+            else {
+                this.finishAndStartCleanup();
             }
         });
-        if (matchingIndicies.length > 1) {
-            console.warn(`found ${matchingIndicies.length} matching case values, displaying the first.`);
+        this.launchActivity(activityRef);
+        // if this is the first activity let the interaction service know.
+        if (this.activityTabs.length === 1) {
+            // console.log('Now active!!!');
+            this.interactionServiceApi.notifyActive(this);
         }
-        if (matchingIndicies.length === 0) {
-            this.switchCaseOptions.forEach((option, index) => {
-                matchingIndicies.push(index);
+        return activityRef.activityResult;
+    }
+    getActiveActivityCount() {
+        return this.activityTabs.filter(ref => !ref.isComplete()).length;
+    }
+    /**
+     * Checks if this interaction context has finished an is in the process of waiting
+     * for all the infrastructure (including route updates) to be completed.
+     */
+    isCleaningUp() {
+        return !!this._deferredCleanUp;
+    }
+    waitForInteractionContextCleanupToFinish() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this._deferredCleanUp ?
+                this._deferredCleanUp :
+                true;
+        });
+    }
+    // @Trace()
+    finishAndStartCleanup() {
+        if (!this._deferredCleanUp) {
+            // Important:
+            // Clear our tabs so the next activity triggers a tab change.
+            // Without this our animation done wasn't called when a single
+            // new activity followed a single tab activity (since we're tracking
+            // by activity index)
+            this.activityTabs = [];
+            const promise = this.interactionServiceApi.notifyFinished(this);
+            this._deferredCleanUp = promise
+                .finally(() => {
+                this._deferredCleanUp = null;
             });
-            if (matchingIndicies.length > 1) {
-                console.warn(`found ${matchingIndicies.length} default case values, displaying the first.`);
-            }
         }
-        if (matchingIndicies.length > 0) {
-            this.selectedIndex = matchingIndicies[0];
+    }
+    // @Trace()
+    launchActivity(activityRef) {
+        const cleanedTabs = this.activityTabs.filter(tab => !tab.isComplete());
+        this.activityTabs = cleanedTabs.concat(activityRef);
+        this.synchroniseSelectedTabIndex();
+    }
+    activityIndex(index, activityRef) {
+        return index;
+    }
+    ;
+    onAnimationFinished() {
+        if (this.onAnimationFinishedJob) {
+            this.onAnimationFinishedJob();
+            this.onAnimationFinishedJob = undefined;
         }
-        else {
-            console.warn(`found no matching or default case values.`);
-            this.selectedIndex = -1;
+    }
+    /**
+     * Synchronises the selected tab index.
+     */
+    synchroniseSelectedTabIndex() {
+        const previousIndex = this.tabs.selectedIndex;
+        const newIndex = this.getActiveActivityCount() - 1;
+        if (previousIndex !== newIndex) {
+            this.tabs.selectedIndex = newIndex;
+            this.onAnimationFinishedJob = () => {
+                this.getSelectedOutlet().component.onActivityReady();
+                this.activityTabs = this.activityTabs.filter(tab => !tab.isComplete());
+            };
+        }
+    }
+    getSelectedOutlet() {
+        return this.activityOutlets.toArray()[this.tabs.selectedIndex];
+    }
+    // @Trace()
+    triggerTabSynchronisation() {
+        if (this.syncSelectedTabTimeout) {
+            clearTimeout(this.syncSelectedTabTimeout);
         }
+        this.syncSelectedTabTimeout = setTimeout(() => {
+            this.syncSelectedTabTimeout = null;
+            this.synchroniseSelectedTabIndex();
+        }, 75);
     }
 };
-SwitchCaseComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(), TrackExternal(),
-    __metadata("design:type", ValueModel)
-], SwitchCaseComponent.prototype, "switchModel", void 0);
 __decorate([
-    Input(), StoreInValueModel('switchModel'),
+    Input(),
     __metadata("design:type", Object)
-], SwitchCaseComponent.prototype, "switch", void 0);
+], ActivityContainerComponent.prototype, "dynamicHeight", void 0);
 __decorate([
-    ContentChildren(SwitchCaseOption),
+    ViewChild('tabs', { static: true }),
+    __metadata("design:type", MatTabGroup)
+], ActivityContainerComponent.prototype, "tabs", void 0);
+__decorate([
+    ViewChildren(ActivityOutletComponent),
     __metadata("design:type", QueryList)
-], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
-SwitchCaseComponent = __decorate([
+], ActivityContainerComponent.prototype, "activityOutlets", void 0);
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ActivityContainerComponent.prototype, "dispose", null);
+ActivityContainerComponent = __decorate([
     Component({
-        selector: 'aup-switch-case',
-        template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n",
-        styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
+        selector: 'aup-activity-container',
+        template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+        styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
     }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], SwitchCaseComponent);
+    __metadata("design:paramtypes", [])
+], ActivityContainerComponent);
 
-let VerticalFocusContainerComponent = class VerticalFocusContainerComponent extends FocusContainerComponent {
-    constructor(focusManager) {
-        super(focusManager);
-        this.focusManager = focusManager;
-    }
-    arrowLeft(event) {
-        if (this.leftArrowCommand.enabled.value) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.leftArrowCommand.execute();
-        }
-    }
-    arrowRight(event) {
-        if (this.rightArrowCommand.enabled.value) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.rightArrowCommand.execute();
-        }
+let AddItemInteractionContextComponent = class AddItemInteractionContextComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.tabindex = 0;
+        this.clickCommand = Command.create((context) => {
+            if (this.activityClass) {
+                this.startActivity(this.activityClass, this.activityData).catch(e => {
+                    //  don't care.
+                });
+            }
+            else {
+                this.addCommand.withContext(context).execute();
+            }
+        });
     }
-    arrowDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.focusManager.focusNext();
+    get active() {
+        return this.interactionContext ? this.interactionContext.isActive() : false;
     }
-    arrowUp(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.focusManager.focusPrevious();
+    startActivity(activityType, data) {
+        return this.interactionContext.startActivity(activityType, data);
     }
     ngOnInit() {
     }
 };
-VerticalFocusContainerComponent.ctorParameters = () => [
-    { type: FocusManager, decorators: [{ type: Self }] }
-];
 __decorate([
-    Input('command.arrowRight'),
-    TrackExternal(),
-    __metadata("design:type", Command)
-], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
+    Input(),
+    __metadata("design:type", String)
+], AddItemInteractionContextComponent.prototype, "label", void 0);
 __decorate([
-    Input('command.arrowLeft'),
+    Input(),
+    __metadata("design:type", Object)
+], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AddItemInteractionContextComponent.prototype, "activityData", void 0);
+__decorate([
+    Input(),
     TrackExternal(),
     __metadata("design:type", Command)
-], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
+], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
 __decorate([
-    HostListener('keyup.arrowLeft', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
+    ViewChild(InPlaceInteractionContextComponent),
+    __metadata("design:type", InPlaceInteractionContextComponent)
+], AddItemInteractionContextComponent.prototype, "interactionContext", void 0);
 __decorate([
-    HostListener('keyup.arrowRight', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], VerticalFocusContainerComponent.prototype, "arrowRight", null);
-__decorate([
-    HostListener('keyup.arrowDown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+    HostBinding('class.interaction-active'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], AddItemInteractionContextComponent.prototype, "active", null);
 __decorate([
-    HostListener('keyup.arrowUp', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], VerticalFocusContainerComponent.prototype, "arrowUp", null);
-VerticalFocusContainerComponent = __decorate([
+    HostBinding('tabindex'),
+    __metadata("design:type", Object)
+], AddItemInteractionContextComponent.prototype, "tabindex", void 0);
+AddItemInteractionContextComponent = __decorate([
     Component({
-        selector: 'aup-vertical-focus-container',
-        template: "<ng-content></ng-content>\n",
-        providers: [
-            { provide: FocusManager }
-        ],
-        styles: [":host{display:block}"]
+        selector: 'aup-add-item-interaction-context',
+        template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><mat-icon>add</mat-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n",
+        styles: [":host{--def-link-color:var(--link-color, currentColor);--def-link-backgound:var(--link-background, rgba(0, 0, 0, 0.05));--def-link-border-radius:var(--link-border-radius, 4px);--def-link-padding:var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:0}:host:hover{--link-background:rgba(0,0,0,0.1)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-backgound);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}"]
     }),
-    __param(0, Self()),
-    __metadata("design:paramtypes", [FocusManager])
-], VerticalFocusContainerComponent);
+    __metadata("design:paramtypes", [])
+], AddItemInteractionContextComponent);
 
-/**
- * @example
- * // CSS Vars
- * aup-card-container {
- *   --card-gap: var(--card-gap, 16px);
- *   --card-width: var(--card-width, 300px);
- *   --card-height: var(--card-height, auto);
- *   --card-min-height: var(--card-min-height, auto);
- *   --card-background: var(--card-background, #fcfcfb);
- * }
- *
- * // Content Templates:
- * #addCardTemplate
- * <ng-template #addCardTemplate>
- *  This is a new card template, it will the the size of the other cards.
- * </nav-template>
- *
- */
-let CardContainerComponent = class CardContainerComponent extends DisposableComponent {
-    constructor() {
+class InteractionServiceRoutingAdapter {
+    constructor(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
+        this.activeInteractionContextIds = activeInteractionContextIds;
+        this.activeModalContext = activeModalContext;
+        this.createExclusiveInteractionContext = createExclusiveInteractionContext;
+    }
+    isActive() {
+        return this.getActiveInteractionContextIds().length > 0;
+    }
+    isModalActive() {
+        return !!this.activeModalContext.value;
+    }
+    // @Trace()
+    isComponentInteracting(component) {
+        return component.interactionContext && component.interactionContext.isActive();
+    }
+    getActiveInteractionContextIds() {
+        return this.activeInteractionContextIds.value;
+    }
+    // @Trace()
+    cancelCurrentModalInteraction() {
+        return this.activeModalContext.value.cancelActiveActivity();
+    }
+    // @Trace()
+    cancelComponentInteraction(component) {
+        return component.interactionContext.cancelActiveActivity();
+    }
+}
+
+class ModalInteractionContextFactory {
+}
+
+var InteractionService_1;
+let inplaceMonitorCount = 0;
+let InteractionService = InteractionService_1 = class InteractionService {
+    constructor(modelInteractionContextFactory) {
+        this.modelInteractionContextFactory = modelInteractionContextFactory;
+        this.garbage = new GarbageCollector();
+        // private readonly _activeModalContext = new MutableValueModel<InteractionContext>();
+        // private readonly _activeInlineContext = new MutableValueModel<InteractionContext>();
+        // private readonly _activeContext: ValueModelChain<InteractionContext>;
+        this._navigationInProgress = new DelegatingValueModel().withDefault(false);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this.garbage);
+        this.exclusiveInteractionRegistry = new InteractionService_1.ContextRegistry();
+        this.modalInteractionRegistry = new InteractionService_1.ContextRegistry();
+        this.inPlaceInteractionRegistry = new InteractionService_1.ContextRegistry();
+        this.modalInteractionRegistry.disableWhen(valueOf.any(this.exclusiveInteractionRegistry.active, this.modalInteractionRegistry.active).areTruthy());
+        this.inPlaceInteractionRegistry.disableWhen(valueOf.any(this.exclusiveInteractionRegistry.active, this.modalInteractionRegistry.active, this.inPlaceInteractionRegistry.active).areTruthy());
+        this.active = valueOf.any(this.inPlaceInteractionRegistry.active, this.modalInteractionRegistry.active).areTruthy();
+        // TODO: chain.concat(listOrValueModels) would be nice.
+        this.activeInteractionContextIds = chain(this.inPlaceInteractionRegistry.interactionContextIds)
+            .concat(this.modalInteractionRegistry.interactionContextIds);
+        this.activeModalContext = chain(this.modalInteractionRegistry.interactionContexts).first();
+        this.inModalInteraction = chain(this.activeModalContext).isNotNil();
+    }
+    isActive() {
+        return this.active.value;
+    }
+    /**
+     * @deprecated use #createModalInteractionContextDisposedWith instead.
+     * @param disposable
+     */
+    createModalInteractionContextFor(disposable) {
+        return this.createModalInteractionContextDisposedWith(disposable);
+    }
+    /**
+     * Creates a new model interaction context that will be disposed along with the component.
+     * @param disposable
+     */
+    createModalInteractionContextDisposedWith(disposable) {
+        // TODO: look at making the registry the factory..
+        return this.modelInteractionContextFactory.createInteractionContext('modal', new InteractionService_1.ApiAdapter(this.placeRouter, this.modalInteractionRegistry));
+    }
+    registerInplaceInteractionContext(interactionContext) {
+        // TODO: look at making the registry the factory..
+        // Todo: check for double registration.
+        // Todo: allow multiple inplace interactions..
+        interactionContext.initialise(`ip${++inplaceMonitorCount}`, new InteractionService_1.ApiAdapter(this.placeRouter, this.inPlaceInteractionRegistry));
+    }
+    /**
+     * Creates an interaction context that will prevent any other contexts from starting an
+     * activity until it is disposed.  This is intended for use by the router for passing
+     * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
+     * try and interact in a way that we can't track and synchronise with the browser back
+     * button.
+     */
+    registerPlaceRouter(router) {
+        assert$1.isFalsey(this.placeRouter);
+        this.placeRouter = router;
+        this._navigationInProgress.setDelegate(this.placeRouter.navigationInProgress);
+        const self = this;
+        return new InteractionServiceRoutingAdapter(this.activeInteractionContextIds, this.activeModalContext, () => {
+            return self.modelInteractionContextFactory.createInteractionContext('exclusive', new InteractionService_1.ApiAdapter(this.placeRouter, this.exclusiveInteractionRegistry));
+        });
+    }
+};
+InteractionService.ctorParameters = () => [
+    { type: ModalInteractionContextFactory }
+];
+InteractionService.ɵprov = ɵɵdefineInjectable({ factory: function InteractionService_Factory() { return new InteractionService(ɵɵinject(ModalInteractionContextFactory)); }, token: InteractionService, providedIn: "root" });
+InteractionService = InteractionService_1 = __decorate([
+    Injectable({
+        providedIn: 'root'
+    }),
+    __metadata("design:paramtypes", [ModalInteractionContextFactory])
+], InteractionService);
+(function (InteractionService) {
+    /**
+     * Provides a mechanism for the service to keep track of what the API adapters are doing to
+     * ensure the rules are followed, i.e. modal or in-place interaction aren't started while
+     * an exclusive routing interaction is active.
+     */
+    class ContextRegistry extends GarbageCollector {
+        constructor() {
+            super();
+            this._interactions = new MutableListModel();
+            this._disabledDelegate = new DelegatingValueModel().withDefault(false);
+            const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+            this.active = chain(this._interactions).isNotEmpty();
+            this.interactionContextIds = chain(this._interactions).pluck("identifier");
+        }
+        get interactionContexts() {
+            return this._interactions.readonly;
+        }
+        start(context) {
+            this._interactions.push(context);
+        }
+        finish(context) {
+            this._interactions.remove(context);
+        }
+        isActive() {
+            return this.active.value;
+        }
+        disableWhen(disabled) {
+            this._disabledDelegate.setDelegate(disabled);
+        }
+    }
+    InteractionService.ContextRegistry = ContextRegistry;
+    class ApiAdapter {
+        constructor(placeRouter, contextRegistry) {
+            this.placeRouter = placeRouter;
+            this.contextRegistry = contextRegistry;
+        }
+        // @Trace()
+        notifyActive(context) {
+            assert$1.isTruthy(context.identifier);
+            this.contextRegistry.start(context);
+            return this.isNavigationInProgress() ? Promise.resolve() : this.placeRouter.syncInteractionContextIdsWithRouter();
+        }
+        // @Trace()
+        isNavigationInProgress() {
+            return this.placeRouter.navigationInProgress.value;
+        }
+        // @Trace()
+        notifyFinished(context) {
+            this.contextRegistry.finish(context);
+            // :: Important ::
+            // This method will be traversed by both the place router (during can canDeactivate guards) and user land code
+            // (both when routing is idle and while it is active in PlaceComponent.canDeactivate()).
+            // The result of pushInteractionIdsToRoute will not start until after the current route finishes, and the
+            // current route won't finish until after this promise returns... Deadlock.
+            // So in order to keep this logic out of the activities we perform the check here and ensure that
+            // any interactions with the context while routing is active returns immediately.
+            return this.isNavigationInProgress() ? Promise.resolve() : this.placeRouter.syncInteractionContextIdsWithRouter();
+        }
+    }
+    InteractionService.ApiAdapter = ApiAdapter;
+})(InteractionService || (InteractionService = {}));
+
+let InPlaceInteractionContextComponent = class InPlaceInteractionContextComponent extends DisposableComponent {
+    constructor(interactionService, tabConfig) {
         super();
+        this.interactionService = interactionService;
+        this.tabConfig = tabConfig;
+        /**
+         * If true then the first startActivity call will slide the activity into view. If false
+         * the activity will replace the existing content immediately.
+         */
+        this.animateFirstActivity = true;
+    }
+    get animationDuration() {
+        var _a;
+        return this.animateFirstActivity ? (((_a = this.tabConfig) === null || _a === void 0 ? void 0 : _a.animationDuration) || '500ms') : "0ms";
+    }
+    ngAfterViewInit() {
+        this.interactionService.registerInplaceInteractionContext(this);
+    }
+    initialise(id, api) {
+        this.activityContainerComponent.initialise(id, api);
+    }
+    get identifier() {
+        return this.activityContainerComponent.identifier;
+    }
+    alert(alert) {
+        return this.activityContainerComponent.alert(alert);
+    }
+    cancelActiveActivity() {
+        return this.activityContainerComponent.cancelActiveActivity();
+    }
+    confirm(confirm) {
+        return this.activityContainerComponent.confirm(confirm);
+    }
+    confirmOrReject(confirm) {
+        return this.activityContainerComponent.confirmOrReject(confirm);
+    }
+    confirmThen(confirm, activityType, data) {
+        return this.activityContainerComponent.confirmThen(confirm, activityType);
+    }
+    isActive() {
+        return this.activityContainerComponent.isActive();
     }
-    ngOnInit() {
+    startActivity(activityType, data) {
+        return this.activityContainerComponent.startActivity(activityType, data);
     }
 };
+InPlaceInteractionContextComponent.ctorParameters = () => [
+    { type: InteractionService },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_TABS_CONFIG,] }, { type: Optional }] }
+];
 __decorate([
-    Input(),
-    TrackExternal(),
-    __metadata("design:type", Command)
-], CardContainerComponent.prototype, "addCardCommand", void 0);
+    ViewChild('activityContainer', { static: true }),
+    __metadata("design:type", ActivityContainerComponent)
+], InPlaceInteractionContextComponent.prototype, "activityContainerComponent", void 0);
 __decorate([
-    ContentChild("addCardTemplate"),
-    __metadata("design:type", TemplateRef)
-], CardContainerComponent.prototype, "addCardTemplate", void 0);
-CardContainerComponent = __decorate([
+    Input(),
+    __metadata("design:type", Object)
+], InPlaceInteractionContextComponent.prototype, "animateFirstActivity", void 0);
+InPlaceInteractionContextComponent = __decorate([
     Component({
-        selector: 'aup-card-container',
-        template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <mat-icon>add</mat-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-        styles: [":root{--aup-default-padding:var(--default-padding, 18px)}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+        selector: 'aup-in-place-interaction-context',
+        template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
+        styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
     }),
-    __metadata("design:paramtypes", [])
-], CardContainerComponent);
-
-let ComponentsModule = class ComponentsModule {
-};
-ComponentsModule = __decorate([
-    NgModule({
-        declarations: [
-            NumberInputComponent,
-            StringInputComponent,
-            TextInputComponent,
-            PasswordInputComponent,
-            SelectInputComponent,
-            CheckboxInputComponent,
-            ScrollContainerComponent,
-            NoopComponent,
-            AbstractInputComponent,
-            SwitchCaseComponent,
-            SwitchCaseWhenDirective,
-            SwitchCaseDefaultDirective,
-            FocusContainerComponent,
-            VerticalFocusContainerComponent,
-            FocusableComponent,
-            CardContainerComponent
-        ],
-        imports: [
-            CommonModule,
-            BrowserAnimationsModule,
-            FormsModule,
-            MatInputModule,
-            MatFormFieldModule,
-            MatSelectModule,
-            MatTabsModule,
-            DirectivesModule,
-            MatIconModule,
-            MatButtonModule,
-            MatCheckboxModule
-        ],
-        exports: [
-            NumberInputComponent,
-            StringInputComponent,
-            TextInputComponent,
-            PasswordInputComponent,
-            CheckboxInputComponent,
-            SelectInputComponent,
-            ScrollContainerComponent,
-            NoopComponent,
-            SwitchCaseComponent,
-            SwitchCaseWhenDirective,
-            SwitchCaseDefaultDirective,
-            FocusContainerComponent,
-            VerticalFocusContainerComponent,
-            FocusableComponent,
-            CardContainerComponent
-        ],
-        providers: [
-            FocusBindingFactory
-        ]
-    })
-], ComponentsModule);
+    __param(1, Inject(MAT_TABS_CONFIG)), __param(1, Optional()),
+    __metadata("design:paramtypes", [InteractionService, Object])
+], InPlaceInteractionContextComponent);
 
-class Dimension {
-    constructor(width, height) {
-        this.width = width;
-        this.height = height;
+let PopupInteractionContextComponent = class PopupInteractionContextComponent extends DisposableComponent {
+    constructor(_element, _overlay) {
+        super();
+        this._element = _element;
+        this._overlay = _overlay;
+        this.outputPortal = new ComponentPortal(InPlaceInteractionContextComponent);
+        this.anchorX = 'start';
+        this.anchorY = 'bottom';
     }
-}
-
-class Point {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
+    get active() {
+        return this.isActive();
     }
-    static from(data) {
-        return new Point(data.x, data.y);
+    startActivity(activityType, data) {
+        const overlayRef = this._overlay.create({
+            hasBackdrop: false,
+            panelClass: 'aup-popup-interaction-panel',
+            positionStrategy: this._overlay.position()
+                .flexibleConnectedTo(this._element)
+                .withPositions(this.computePositions())
+                .withGrowAfterOpen(true)
+        });
+        const componentRef = overlayRef.attach(this.outputPortal);
+        this.interactionContext = componentRef.instance;
+        return new Promise((resolve, reject) => {
+            // HACK: afterViewInit won't have been called yet.  Need to add when.valueOf(interactionContext.ready).becomesTruthy(...)
+            setTimeout(() => {
+                this.interactionContext.startActivity(activityType, data)
+                    .then(resolve)
+                    .catch(reject)
+                    .finally(() => overlayRef.dispose());
+            });
+        });
     }
-    translate(x, y) {
-        return new Point(this.x + x, this.y + y);
+    computePositions() {
+        const overlayX = this.anchorX === 'start' ? 'start' : 'end';
+        const overlayY = this.anchorY === 'top' ? 'bottom' : 'top';
+        return [
+            { originX: this.anchorX, originY: this.anchorY, overlayX: overlayX, overlayY: overlayY }
+            // TODO: compute some meaningful alternatives.
+            // { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            // { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+            // { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+            // { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }
+        ];
     }
-}
+    cancelActiveActivity() {
+        return this.interactionContext.cancelActiveActivity();
+    }
+    isActive() {
+        return this.interactionContext && this.interactionContext.isActive();
+    }
+    ngOnInit() {
+    }
+};
+PopupInteractionContextComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Overlay }
+];
+__decorate([
+    HostBinding('class.interaction-active'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], PopupInteractionContextComponent.prototype, "active", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], PopupInteractionContextComponent.prototype, "anchorX", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], PopupInteractionContextComponent.prototype, "anchorY", void 0);
+PopupInteractionContextComponent = __decorate([
+    Component({
+        selector: 'aup-popup-interaction-context',
+        template: "<ng-content></ng-content>\n",
+        styles: [":host{display:inline}:host.interaction-active{background:rgba(0,0,0,.05)}"]
+    }),
+    __metadata("design:paramtypes", [ElementRef, Overlay])
+], PopupInteractionContextComponent);
 
-class Bounds extends Dimension {
-    constructor(top, left, width, height) {
-        super(width, height);
-        this.top = top;
-        this.left = left;
-        this.width = width;
-        this.height = height;
+let InteractionContextTriggerFor = class InteractionContextTriggerFor extends GarbageCollector {
+    constructor() {
+        super();
+        this.activityDone = new EventEmitter();
+        this.activityCancelled = new EventEmitter();
     }
-    relativePositionOf(point) {
-        if (point instanceof MouseEvent) {
-            return new Point(point.clientX - this.left, point.clientY - this.top);
+    onEnter(event) {
+        if (!this.aupInteractionContextTriggerFor.isActive()) {
+            this.startActivity();
         }
         else {
-            return new Point(point.x - this.left, point.y - this.top);
+            this.aupInteractionContextTriggerFor.cancelActiveActivity();
         }
     }
-}
-(function (Bounds) {
-    function ofElement(element) {
-        const rect = element.getBoundingClientRect();
-        return new Bounds(rect.top, rect.left, rect.width, rect.height);
+    onClick(event) {
+        if (!this.aupInteractionContextTriggerFor.isActive()) {
+            this.startActivity();
+        }
+        else {
+            this.aupInteractionContextTriggerFor.cancelActiveActivity();
+        }
     }
-    Bounds.ofElement = ofElement;
-})(Bounds || (Bounds = {}));
+    startActivity() {
+        assert.isTruthy(this.aupInteractionContextTriggerFor);
+        assert.isFalsey(this.aupInteractionContextTriggerFor.isActive());
+        assert.isTruthy(this.activityClass);
+        this.aupInteractionContextTriggerFor.startActivity(this.activityClass, this.activityData)
+            .then(result => {
+            this.activityDone.emit(result);
+        })
+            .catch(error => {
+            this.activityCancelled.emit(error);
+        });
+    }
+    prepareActivityData() {
+        return ___default.isFunction(this.activityDataFactory()) ? this.activityDataFactory() : this.activityData;
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], InteractionContextTriggerFor.prototype, "aupInteractionContextTriggerFor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], InteractionContextTriggerFor.prototype, "activityClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], InteractionContextTriggerFor.prototype, "activityData", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], InteractionContextTriggerFor.prototype, "activityDataFactory", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], InteractionContextTriggerFor.prototype, "activityDone", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], InteractionContextTriggerFor.prototype, "activityCancelled", void 0);
+__decorate([
+    HostListener('keyup.enter'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], InteractionContextTriggerFor.prototype, "onEnter", null);
+__decorate([
+    HostListener('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], InteractionContextTriggerFor.prototype, "onClick", null);
+InteractionContextTriggerFor = __decorate([
+    Directive({
+        selector: '[aupInteractionContextTriggerFor]'
+    }),
+    __metadata("design:paramtypes", [])
+], InteractionContextTriggerFor);
 
-let ResizeAwareComponent = class ResizeAwareComponent extends DisposableComponent {
-    constructor(elementRef, ngZone) {
+class DialogInteractionContext extends AbstractInteractionContext {
+    constructor(identifier, api, dialogService, config) {
         super();
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+        this.identifier = identifier;
+        this.api = api;
+        this.dialogService = dialogService;
+        this.config = config;
+        this.garbage = new GarbageCollector();
+        assert$1.notNil(dialogService);
     }
-    ngAfterViewInit() {
-        this.updateBounds();
-        const element = this.elementRef.nativeElement;
-        const ro = new ResizeObserver((entries, observer) => {
-            this.ngZone.run(() => this.updateBounds());
-        });
-        ro.observe(element);
-        this.onDispose(() => ro.disconnect());
+    cancelActiveActivity() {
+        return this.activityContainer.cancelActiveActivity();
     }
-    get boundsModel() {
-        return this._boundsModel.readonly;
+    dispose() {
+        if (this.isActive()) {
+            lang.illegalState('Dispose called while active.');
+        }
+        this.garbage.dispose();
     }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
+    registerDisposable(disposable) {
+        return this.garbage.registerDisposable(disposable);
     }
-    // TODO: Make this handle body scroll
-    relativePositionOf(point) {
-        return this.bounds.relativePositionOf(point);
+    isActive() {
+        return !!this.activityContainer && this.activityContainer.isActive();
     }
-    get bounds() {
-        return this._boundsModel.value;
+    createAndLaunchActivity(activityType, data, disableClose) {
+        assert$1.isNil(this._currentActivityRef);
+        const config = Object.assign(Object.assign({}, this.config), {
+            disableClose,
+            panelClass: 'dialog-interaction-context'
+        });
+        const self = this;
+        const matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
+        const activityContainer = this.activityContainer = matDialogRef.componentInstance;
+        this.activityContainer.initialise(this.identifier, this.api);
+        const activityResult = this.activityContainer.startActivity(activityType, data);
+        activityResult.finally(() => matDialogRef.close());
+        // we need to check if our onDone/onCancel methods above we called or if we were
+        // closed by the user clicking the backdrop.  If the later then we need to cancel our
+        // activity.
+        matDialogRef.afterClosed().subscribe(promiseAlreadyFinished => {
+            if (activityContainer.isActive()) {
+                activityContainer.cancelActiveActivity();
+            }
+            this.activityContainer = null;
+        });
+        matDialogRef.updateSize();
+        matDialogRef.afterOpened().subscribe(promiseAlreadyFinished => {
+            matDialogRef.updateSize();
+        });
+        return activityResult;
+    }
+}
+
+const DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
+let DialogInteractionContextFactory = class DialogInteractionContextFactory extends ModalInteractionContextFactory {
+    constructor(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+        super();
+        this.dialogService = dialogService;
+        this.dialogServiceDefaults = dialogServiceDefaults;
+        this.matDialogDefaultConfig = matDialogDefaultConfig;
+        assert$1.notNil(dialogService);
     }
-    updateBounds() {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    createInteractionContext(identifier, api) {
+        const config = Object.assign(Object.assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
+        return new DialogInteractionContext(identifier, api, this.dialogService, config);
     }
 };
-ResizeAwareComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone }
+DialogInteractionContextFactory.ctorParameters = () => [
+    { type: MatDialog },
+    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
+    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
 ];
-ResizeAwareComponent = __decorate([
-    Directive(),
-    __metadata("design:paramtypes", [ElementRef, NgZone])
-], ResizeAwareComponent);
+DialogInteractionContextFactory.ɵprov = ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(ɵɵinject(MatDialog), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
+DialogInteractionContextFactory = __decorate([
+    Injectable({
+        providedIn: 'root'
+    }),
+    __param(1, Optional()), __param(1, Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
+    __param(2, Optional()), __param(2, Inject(MAT_DIALOG_DEFAULT_OPTIONS)),
+    __metadata("design:paramtypes", [MatDialog,
+        MatDialogConfig,
+        MatDialogConfig])
+], DialogInteractionContextFactory);
 
 /**
  * @file Automatically generated by barrelsby.
  */
 
-let ActivityActionsComponent = class ActivityActionsComponent extends DisposableComponent {
+let AbstractInputActivity = class AbstractInputActivity extends Activity {
+    constructor(data) {
+        super();
+        this.data = data;
+        this.class = 'aup-input-activity';
+        const form = new Form();
+        this.valueModel = form.valueModel(this.data.initialValue);
+        this.valueModel.validateUsing(data.validators || []);
+        this.confirmCommand = Command.create(() => {
+            if (this.valueModel.validate()) {
+                if (data.save) {
+                    return Promise.resolve(data.save(this.valueModel, this.interactionContext))
+                        .then(() => this.done());
+                }
+                else {
+                    this.done(this.valueModel.value);
+                }
+            }
+        });
+        this.cancelCommand = Command.create(() => {
+            this.cancel();
+        });
+    }
+    onActivityReady() {
+        this.valueModel.focusContext.requestFocus();
+    }
+};
+AbstractInputActivity.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+];
+__decorate([
+    HostBinding('class'),
+    __metadata("design:type", Object)
+], AbstractInputActivity.prototype, "class", void 0);
+AbstractInputActivity = __decorate([
+    Component({
+        template: ``
+    }),
+    __param(0, Inject(ACTIVITY_DATA)),
+    __metadata("design:paramtypes", [Object])
+], AbstractInputActivity);
+
+let AbstractInputComponent = class AbstractInputComponent extends DisposableComponent {
     constructor() {
-        super(...arguments);
-        this.align = 'start';
+        super();
+        /**
+         * A backing model for all our @Input() valueModel properties which should be defined as follows.
+         *
+         *    @Input() @TrackExternal({useExisting: "delegatingFormValueModel"})
+         *    valueModel: FormValueModel<string> | MutableValueModel<string>;
+         *
+         * This approach allows the input to accept plain or form models but all backed by a form
+         * friendly delegate.  We have to use an existing delegate for union types as pectin just
+         * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
+         */
+        // We have to register it as a disposable so it ditches any listeners when we're disposed.
+        this.delegatingFormValueModel = this.registerDisposable(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();
+        this.baseClassName = 'aup-input-component';
+        const self = this;
+        this.errorStateMatcher = {
+            isErrorState(control, form) {
+                return self.hasErrors();
+            }
+        };
     }
-    get alignEnd() {
-        return this.align === 'end';
+    notifyClick() {
+        this.safelyInvoke(this.clickCommand);
+    }
+    notifyFocusIn() {
+        this.safelyInvoke(this.focusCommand);
+        this.focus.emit();
+    }
+    notifyFocusOut() {
+        this.safelyInvoke(this.blurCommand);
+        this.blur.emit();
+    }
+    notifyEnterKey() {
+        this.safelyInvoke(this.enterCommand);
+        this.enterKey.emit();
+    }
+    notifyEscapeKey() {
+        this.safelyInvoke(this.escapeCommand);
+        this.escapeKey.emit();
+    }
+    safelyInvoke(command) {
+        if (command && command.enabled.value) {
+            command.execute();
+        }
     }
     ngOnInit() {
     }
-    hasConfirmText() {
-        return !___default.isEmpty(this.confirmText);
+    isEnabled() {
+        return this.enabled.value;
+    }
+    get enabled() {
+        return this.delegatingFormValueModel.enabled;
+    }
+    hasErrors() {
+        return !this.errorList.query().isEmpty();
+    }
+    get errorList() {
+        return this.delegatingFormValueModel.errorList;
+    }
+    get firstError() {
+        return this.hasErrors() ? this.errorList.value[0] : null;
     }
 };
 __decorate([
     Input(),
-    TrackExternal(),
-    __metadata("design:type", Command)
-], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+    __metadata("design:type", String)
+], AbstractInputComponent.prototype, "label", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ActivityActionsComponent.prototype, "confirmText", void 0);
+], AbstractInputComponent.prototype, "floatLabel", void 0);
 __decorate([
     Input(),
-    TrackExternal(),
-    __metadata("design:type", Command)
-], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    __metadata("design:type", String)
+], AbstractInputComponent.prototype, "hint", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ActivityActionsComponent.prototype, "align", void 0);
+], AbstractInputComponent.prototype, "placeholder", void 0);
 __decorate([
-    HostBinding('class.align-end'),
-    __metadata("design:type", Boolean),
+    Input('command.focus'),
+    __metadata("design:type", Command)
+], AbstractInputComponent.prototype, "focusCommand", void 0);
+__decorate([
+    Input('command.blur'),
+    __metadata("design:type", Command)
+], AbstractInputComponent.prototype, "blurCommand", void 0);
+__decorate([
+    Input('command.enter'),
+    __metadata("design:type", Command)
+], AbstractInputComponent.prototype, "enterCommand", void 0);
+__decorate([
+    Input('command.escape'),
+    __metadata("design:type", Command)
+], AbstractInputComponent.prototype, "escapeCommand", void 0);
+__decorate([
+    Input('command.click'),
+    __metadata("design:type", Command)
+], AbstractInputComponent.prototype, "clickCommand", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "focus", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "blur", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "enterKey", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "escapeKey", void 0);
+__decorate([
+    HostBinding('class'),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "baseClassName", void 0);
+__decorate([
+    HostListener('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], AbstractInputComponent.prototype, "notifyClick", null);
+__decorate([
+    HostListener('focusin'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], AbstractInputComponent.prototype, "notifyFocusIn", null);
+__decorate([
+    HostListener('focusout'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], AbstractInputComponent.prototype, "notifyFocusOut", null);
+AbstractInputComponent = __decorate([
+    Component({ template: '' }),
     __metadata("design:paramtypes", [])
-], ActivityActionsComponent.prototype, "alignEnd", null);
-ActivityActionsComponent = __decorate([
-    Component({
-        selector: 'aup-activity-actions',
-        template: "<button class=\"cancel\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <mat-icon>clear</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <mat-icon>done</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
-        styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}"]
-    })
-], ActivityActionsComponent);
+], AbstractInputComponent);
 
-const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
-class Activity extends DisposableComponent {
+let CheckboxInputComponent = class CheckboxInputComponent extends AbstractInputComponent {
     constructor() {
-        super(...arguments);
-        this._busyModel = new DelegatingValueModel().withDefault(false);
-    }
-    initialise(nestedInteractionContext, activityContext) {
-        assert$1.isNil(this._activityContext);
-        this._activityContext = activityContext;
-        this._interactionContext = nestedInteractionContext;
-    }
-    get interactionContext() {
-        assert$1.isTruthy(this.isInitialised());
-        return this._interactionContext;
-    }
-    done(result) {
-        return this._activityContext.onDone(result);
-    }
-    cancel(error) {
-        this._activityContext.onCancel(error);
-    }
-    // @Trace()
-    onActivityReady() {
-    }
-    get busy() {
-        return this._busyModel.readonly;
-    }
-    busyWhile(busyModel) {
-        this._busyModel.setDelegate(busyModel);
-    }
-    isBusy() {
-        return this._busyModel.value;
+        super();
+        this.color = 'accent';
+        this.labelPosition = 'after';
     }
-    isInitialised() {
-        return !!this._activityContext;
+    ngOnInit() {
     }
-}
+};
+__decorate([
+    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    __metadata("design:type", Object)
+], CheckboxInputComponent.prototype, "valueModel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], CheckboxInputComponent.prototype, "color", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], CheckboxInputComponent.prototype, "labelPosition", void 0);
+CheckboxInputComponent = __decorate([
+    Component({
+        selector: 'aup-checkbox-input',
+        template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"valueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n",
+        styles: [":host{display:inline-flex;flex-direction:column;margin-top:24px;margin-bottom:16px}mat-error,mat-hint{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}"]
+    }),
+    __metadata("design:paramtypes", [])
+], CheckboxInputComponent);
 
-let AlertDialogComponent = class AlertDialogComponent extends Activity {
-    constructor(alert) {
+let NumberInputComponent = class NumberInputComponent extends AbstractInputComponent {
+    constructor() {
         super();
-        this.alert = alert;
+        this.min = Number.MIN_SAFE_INTEGER;
+        this.max = Number.MAX_SAFE_INTEGER;
     }
     ngOnInit() {
     }
 };
-AlertDialogComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
-];
-AlertDialogComponent = __decorate([
+__decorate([
+    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    __metadata("design:type", Object)
+], NumberInputComponent.prototype, "valueModel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], NumberInputComponent.prototype, "min", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], NumberInputComponent.prototype, "max", void 0);
+NumberInputComponent = __decorate([
     Component({
-        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<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
-        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
+        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]=\"delegatingFormValueModel?.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\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}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
     }),
-    __param(0, Inject(ACTIVITY_DATA)),
-    __metadata("design:paramtypes", [Object])
-], AlertDialogComponent);
+    __metadata("design:paramtypes", [])
+], NumberInputComponent);
 
-let ConfirmThenDialogComponent = class ConfirmThenDialogComponent extends Activity {
-    constructor(config) {
+let PasswordInputComponent = class PasswordInputComponent extends AbstractInputComponent {
+    constructor() {
         super();
-        this.config = config;
-        assert.notNil(config);
     }
     ngOnInit() {
     }
-    get confirm() {
-        return this.config.confirm;
-    }
-    isDestructive() {
-        return this.confirm.destructive && this.confirm.destructive();
-    }
-    onConfirm() {
-        this.interactionContext.startActivity(this.config.activityType, this.config.data)
-            .then((result) => this.done(result))
-            .catch(error => this.cancel(error));
-    }
 };
-ConfirmThenDialogComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
-];
-ConfirmThenDialogComponent = __decorate([
+__decorate([
+    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+    __metadata("design:type", Object)
+], PasswordInputComponent.prototype, "valueModel", void 0);
+PasswordInputComponent = __decorate([
     Component({
-        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<div 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</div>\n\n",
-        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
+        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]=\"delegatingFormValueModel.focusContext\"\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}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
     }),
-    __param(0, Inject(ACTIVITY_DATA)),
-    __metadata("design:paramtypes", [Object])
-], ConfirmThenDialogComponent);
+    __metadata("design:paramtypes", [])
+], PasswordInputComponent);
 
-let ConfirmationDialogComponent = class ConfirmationDialogComponent extends Activity {
-    constructor(confirm) {
+let SelectInputComponent = class SelectInputComponent extends AbstractInputComponent {
+    constructor() {
         super();
-        this.confirm = confirm;
-        assert.notNil(confirm);
+        this.optionLabelFormat = (option) => (option && this.optionLabel) ? option[this.optionLabel] : option;
     }
     ngOnInit() {
     }
-    isDestructive() {
-        return this.confirm.destructive && this.confirm.destructive();
-    }
 };
-ConfirmationDialogComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
-];
-ConfirmationDialogComponent = __decorate([
+__decorate([
+    Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+    __metadata("design:type", Object)
+], SelectInputComponent.prototype, "valueModel", void 0);
+__decorate([
+    Input(), TrackExternal(),
+    __metadata("design:type", ListModel)
+], SelectInputComponent.prototype, "optionsModel", void 0);
+__decorate([
+    Input(), StoreInListModel('optionsModel'),
+    __metadata("design:type", Array)
+], SelectInputComponent.prototype, "options", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], SelectInputComponent.prototype, "optionLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], SelectInputComponent.prototype, "allowNil", void 0);
+__decorate([
+    ContentChild("optionTemplate"),
+    __metadata("design:type", TemplateRef)
+], SelectInputComponent.prototype, "optionTemplateRef", void 0);
+__decorate([
+    ContentChild("nilOptionTemplate"),
+    __metadata("design:type", TemplateRef)
+], SelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], SelectInputComponent.prototype, "optionLabelFormat", void 0);
+SelectInputComponent = __decorate([
     Component({
-        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<div 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</div>\n\n",
-        styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
+        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]=\"delegatingFormValueModel.focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n        [ngTemplateOutlet]=\"optionTemplateRef\"\n        [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\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%}"]
     }),
-    __param(0, Inject(ACTIVITY_DATA)),
-    __metadata("design:paramtypes", [Object])
-], ConfirmationDialogComponent);
-
-class AbstractInteractionContext {
-    startActivity(activityType, data) {
-        return this.createAndLaunchActivity(activityType, data, false);
-    }
-    confirm(confirm) {
-        // Important: we have to implement confirmOrReject as the main entry point
-        // as the canDeactivation guards need to be able to cancel an interaction
-        // without caring about returning a value.
-        return this.confirmOrReject(confirm).then(() => true).catch(() => false);
-    }
-    alert(alert) {
-        // TODO: Test disableClose === false
-        return this.createAndLaunchActivity(AlertDialogComponent, alert, false);
-    }
-    confirmOrReject(confirm) {
-        return this.createAndLaunchActivity(ConfirmationDialogComponent, confirm, true);
-    }
-    /**
-     * Presents the confirmation to the user and runs the activity only if the user confirms.
-     * @param confirm:Confirm the confirmation to display.
-     * @param activityType the activity to run if confirmed.
-     * @param data the activity data.
-     */
-    confirmThen(confirm, activityType, data) {
-        return this.createAndLaunchActivity(ConfirmThenDialogComponent, {
-            confirm,
-            activityType: activityType,
-            data: data
-        }, true);
-    }
-}
+    __metadata("design:paramtypes", [])
+], SelectInputComponent);
 
-class ActivityRef {
-    constructor(activityClass, activityData, onComplete) {
-        this.activityClass = activityClass;
-        this.activityData = activityData;
-        this.onComplete = onComplete;
-        this._complete = false;
-        this.deferredResult = Deferred.defer();
-    }
-    isActivityRealised() {
-        return !!this._activity;
-    }
-    isComplete() {
-        return this._complete;
-    }
-    get activity() {
-        assert.isTruthy(this.isActivityRealised());
-        return this._activity;
-    }
-    notifyActivityCreated(activity, nestedInteractionContext) {
-        assert.isNil(this._activity);
-        this._activity = activity;
-        const self = this;
-        this._activity.initialise(nestedInteractionContext, {
-            onDone(result) {
-                self.finishActivity(deferred => deferred.resolve(result));
-            },
-            onCancel(error) {
-                self.finishActivity(deferred => deferred.reject(error));
-            }
-        });
-    }
-    finishActivity(resolveOrReject) {
-        assert.isFalsey(this.isComplete());
-        resolveOrReject(this.deferredResult);
-        this._complete = true;
-        this.onComplete(this);
-    }
-    cancel() {
-        this.activity.cancel();
-    }
-    get activityResult() {
-        return this.deferredResult.promise;
-    }
-}
+let StringInputActivity = class StringInputActivity extends AbstractInputActivity {
+};
+StringInputActivity = __decorate([
+    Component({
+        selector: 'aup-string-input-activity',
+        template: `
+    <aup-string-input [valueModel]="valueModel"
+                      [label]="data.label"
+                      [placeholder]="data.placeholder"
+                      [command.enter]="confirmCommand"
+                      [command.escape]="cancelCommand"></aup-string-input>
+    <aup-activity-actions align="end"
+                          [confirmCommand]="confirmCommand"
+                          [cancelCommand]="cancelCommand"></aup-activity-actions>
+  `
+    })
+], StringInputActivity);
 
-/**
- * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
- * external service.
- */
-let ActivityOutletComponent = class ActivityOutletComponent {
-    constructor(componentFactoryResolver, viewContainerRef, injector) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.injector = injector;
-    }
-    set activityRef(activityRef) {
-        if (this.activityRef && !this.activityRef.isComplete()) {
-            lang$1.illegalState("changing activity before previous one has completed");
-        }
-        this._activityRef = activityRef;
-        this.loadActivity(activityRef);
-    }
-    ;
-    get activityRef() {
-        return this._activityRef;
-    }
-    ngOnInit() {
-    }
-    loadActivity(activityRef) {
-        const injector = Injector.create({
-            providers: [
-                { provide: ACTIVITY_DATA, useValue: activityRef.activityData }
-            ],
-            parent: this.injector
+let StringInputComponent = class StringInputComponent extends AbstractInputComponent {
+    constructor() {
+        super();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.clearCommand = Command.create(() => {
+            this.valueModel.value = null;
         });
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(activityRef.activityClass);
-        this.viewContainerRef.clear();
-        // console.log(`creating component -> ${activityRef.activityClass.name}`);
-        this.activityComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector);
-        this.activityRef.notifyActivityCreated(this.activityComponentRef.instance, this.nestedInteractionContext);
+        this.clearCommand.disableWhile(chain.stringValue(this.valueModel).isBlank());
     }
-    get component() {
-        return this.activityComponentRef.instance;
+    ngOnInit() {
     }
 };
-ActivityOutletComponent.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: Injector }
-];
 __decorate([
-    Input(),
+    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
     __metadata("design:type", Object)
-], ActivityOutletComponent.prototype, "nestedInteractionContext", void 0);
+], StringInputComponent.prototype, "valueModel", void 0);
 __decorate([
-    Input(),
-    __metadata("design:type", ActivityRef),
-    __metadata("design:paramtypes", [ActivityRef])
-], ActivityOutletComponent.prototype, "activityRef", null);
-ActivityOutletComponent = __decorate([
+    Input(), TrackExternal({ defaultValue: false }),
+    __metadata("design:type", ValueModel)
+], StringInputComponent.prototype, "enableClearModel", void 0);
+__decorate([
+    Input(), StoreInValueModel('enableClearModel'),
+    __metadata("design:type", Boolean)
+], StringInputComponent.prototype, "enableClear", void 0);
+StringInputComponent = __decorate([
     Component({
-        selector: 'aup-activity-outlet',
-        template: '',
-        styles: [":host{display:block}"]
+        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]=\"delegatingFormValueModel.focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <mat-icon>close</mat-icon>\n  </button>\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}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}"]
     }),
-    __metadata("design:paramtypes", [ComponentFactoryResolver,
-        ViewContainerRef,
-        Injector])
-], ActivityOutletComponent);
+    __metadata("design:paramtypes", [])
+], StringInputComponent);
 
-let ActivityContainerComponent = class ActivityContainerComponent extends AbstractInteractionContext {
+let TextInputComponent = class TextInputComponent extends AbstractInputComponent {
     constructor() {
         super();
-        this.dynamicHeight = false;
-        this.activityTabs = [];
-        this.garbage = new GarbageCollector();
+        this.rows = 2;
+        // const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
     }
     ngOnInit() {
     }
-    ngAfterViewInit() {
-        const { chain, observe } = Dsl.disposeWith(this);
-        // using the component directly rather than (animationDone)=.. allows us
-        // to keep our callback private.
-        observe.valuesFrom(this.tabs.animationDone).subscribe(() => this.onAnimationFinished());
-    }
-    initialise(identifier, api) {
-        assert.isFalsey(this.isInitialised());
-        assert.notNil(identifier);
-        assert.notNil(api);
-        this._identifier = identifier;
-        this.interactionServiceApi = api;
-    }
-    get identifier() {
-        return this._identifier;
-    }
-    isInitialised() {
-        return !!this.identifier;
-    }
-    /**
-     * Returns true if an activity is currently running.
-     */
-    isActive() {
-        return this.getActiveActivityCount() > 0;
-    }
-    registerDisposable(disposable) {
-        return this.garbage.registerDisposable(disposable);
+};
+__decorate([
+    Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+    __metadata("design:type", Object)
+], TextInputComponent.prototype, "valueModel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], TextInputComponent.prototype, "rows", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], TextInputComponent.prototype, "cols", void 0);
+TextInputComponent = __decorate([
+    Component({
+        selector: 'aup-text-input',
+        template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\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}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
+    }),
+    __metadata("design:paramtypes", [])
+], TextInputComponent);
+
+let NoopComponent = class NoopComponent {
+    constructor() {
     }
-    dispose() {
-        // TODO: think about auto cancelling any outstanding activity on dispose.
-        //       See NavigationState.Navigating for a use-case.
-        assert.isFalsey(this.isActive());
-        this.garbage.dispose();
+};
+NoopComponent = __decorate([
+    Component({
+        selector: 'aup-noop',
+        template: "",
+        styles: [":host{display:block}"]
+    }),
+    __metadata("design:paramtypes", [])
+], NoopComponent);
+
+let ScrollContainerComponent = class ScrollContainerComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    getActiveActivityRef() {
-        if (!this.isActive()) {
-            lang$1.illegalState('no activity in progress');
-        }
-        return ___default.findLast(this.activityTabs, tab => !tab.isComplete());
+};
+ScrollContainerComponent = __decorate([
+    Component({
+        selector: 'aup-scroll-container',
+        template: "<div class=\"container\">\n    <ng-content></ng-content>\n</div>\n",
+        styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}"]
+    }),
+    __metadata("design:paramtypes", [])
+], ScrollContainerComponent);
+
+var SwitchCaseWhenDirective_1, SwitchCaseDefaultDirective_1;
+class SwitchCaseOption {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    /**
-     * Cancels the current activity and returns true the context is no longer active, false if
-     * there is still another activity running.
-     */
-    // @Trace()
-    cancelActiveActivity() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const activity = this.getActiveActivityRef();
-            activity.cancel();
-            if (this.isCleaningUp()) {
-                return this.waitForInteractionContextCleanupToFinish();
-            }
-            else {
-                return !this.isActive();
-            }
-        });
+    get name() {
+        return this.constructor.name;
     }
-    // TODO: this handling of multiple nested activities is only used by the activity component and is not a general case.
-    // @Trace()
-    createAndLaunchActivity(activityType, data, disableClose) {
-        assert.isTruthy(this.isInitialised()); // make sure we've been initialised
-        const activityRef = new ActivityRef(activityType, data, () => {
-            const activeActivityCount = this.getActiveActivityCount() > 0;
-            if (activeActivityCount) {
-                this.triggerTabSynchronisation();
-            }
-            else {
-                this.finishAndStartCleanup();
-            }
-        });
-        this.launchActivity(activityRef);
-        // if this is the first activity let the interaction service know.
-        if (this.activityTabs.length === 1) {
-            // console.log('Now active!!!');
-            this.interactionServiceApi.notifyActive(this);
-        }
-        return activityRef.activityResult;
+}
+let SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = class SwitchCaseWhenDirective extends SwitchCaseOption {
+    constructor(templateRef) {
+        super(templateRef);
+        this.isDefault = false;
     }
-    getActiveActivityCount() {
-        return this.activityTabs.filter(ref => !ref.isComplete()).length;
+    matches(value) {
+        return this.aupSwitchCaseWhen === value;
     }
-    /**
-     * Checks if this interaction context has finished an is in the process of waiting
-     * for all the infrastructure (including route updates) to be completed.
-     */
-    isCleaningUp() {
-        return !!this._deferredCleanUp;
+};
+SwitchCaseWhenDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], SwitchCaseWhenDirective.prototype, "aupSwitchCaseWhen", void 0);
+SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = __decorate([
+    Directive({
+        selector: '[aupSwitchCaseWhen]',
+        providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective_1 }]
+    }),
+    __metadata("design:paramtypes", [TemplateRef])
+], SwitchCaseWhenDirective);
+let SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = class SwitchCaseDefaultDirective extends SwitchCaseOption {
+    constructor(templateRef) {
+        super(templateRef);
+        this.isDefault = true;
     }
-    waitForInteractionContextCleanupToFinish() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this._deferredCleanUp ?
-                this._deferredCleanUp :
-                true;
-        });
+    matches(value) {
+        return false;
     }
-    // @Trace()
-    finishAndStartCleanup() {
-        if (!this._deferredCleanUp) {
-            // Important:
-            // Clear our tabs so the next activity triggers a tab change.
-            // Without this our animation done wasn't called when a single
-            // new activity followed a single tab activity (since we're tracking
-            // by activity index)
-            this.activityTabs = [];
-            const promise = this.interactionServiceApi.notifyFinished(this);
-            this._deferredCleanUp = promise
-                .finally(() => {
-                this._deferredCleanUp = null;
-            });
-        }
+};
+SwitchCaseDefaultDirective.ctorParameters = () => [
+    { type: TemplateRef }
+];
+SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
+    Directive({
+        selector: '[aupSwitchCaseDefault]',
+        providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
+    }),
+    __metadata("design:paramtypes", [TemplateRef])
+], SwitchCaseDefaultDirective);
+let SwitchCaseComponent = class SwitchCaseComponent extends DisposableComponent {
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.selectedIndex = 0;
     }
-    // @Trace()
-    launchActivity(activityRef) {
-        const cleanedTabs = this.activityTabs.filter(tab => !tab.isComplete());
-        this.activityTabs = cleanedTabs.concat(activityRef);
-        this.synchroniseSelectedTabIndex();
+    ngOnInit() {
     }
-    activityIndex(index, activityRef) {
-        return index;
+    ngAfterContentInit() {
+        const subscription = this.switchCaseOptions.changes.subscribe(change => this.updateSelection());
+        this.onDispose(() => subscription.unsubscribe());
+        const { chain, when } = Dsl.disposeWith(this);
+        when.valueOf(this.switchModel).changes(() => this.updateSelection(), { initialValue: 'triggerChange' });
+        this.cdr.detectChanges();
     }
-    ;
-    onAnimationFinished() {
-        if (this.onAnimationFinishedJob) {
-            this.onAnimationFinishedJob();
-            this.onAnimationFinishedJob = undefined;
+    updateSelection() {
+        const matchingIndicies = [];
+        this.switchCaseOptions.forEach((option, index) => {
+            if (option.matches(this.switchModel.value)) {
+                matchingIndicies.push(index);
+            }
+        });
+        if (matchingIndicies.length > 1) {
+            console.warn(`found ${matchingIndicies.length} matching case values, displaying the first.`);
         }
-    }
-    /**
-     * Synchronises the selected tab index.
-     */
-    synchroniseSelectedTabIndex() {
-        const previousIndex = this.tabs.selectedIndex;
-        const newIndex = this.getActiveActivityCount() - 1;
-        if (previousIndex !== newIndex) {
-            this.tabs.selectedIndex = newIndex;
-            this.onAnimationFinishedJob = () => {
-                this.getSelectedOutlet().component.onActivityReady();
-                this.activityTabs = this.activityTabs.filter(tab => !tab.isComplete());
-            };
+        if (matchingIndicies.length === 0) {
+            this.switchCaseOptions.forEach((option, index) => {
+                matchingIndicies.push(index);
+            });
+            if (matchingIndicies.length > 1) {
+                console.warn(`found ${matchingIndicies.length} default case values, displaying the first.`);
+            }
         }
-    }
-    getSelectedOutlet() {
-        return this.activityOutlets.toArray()[this.tabs.selectedIndex];
-    }
-    // @Trace()
-    triggerTabSynchronisation() {
-        if (this.syncSelectedTabTimeout) {
-            clearTimeout(this.syncSelectedTabTimeout);
+        if (matchingIndicies.length > 0) {
+            this.selectedIndex = matchingIndicies[0];
+        }
+        else {
+            console.warn(`found no matching or default case values.`);
+            this.selectedIndex = -1;
         }
-        this.syncSelectedTabTimeout = setTimeout(() => {
-            this.syncSelectedTabTimeout = null;
-            this.synchroniseSelectedTabIndex();
-        }, 75);
     }
 };
+SwitchCaseComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 __decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ActivityContainerComponent.prototype, "dynamicHeight", void 0);
+    Input(), TrackExternal(),
+    __metadata("design:type", ValueModel)
+], SwitchCaseComponent.prototype, "switchModel", void 0);
 __decorate([
-    ViewChild('tabs', { static: true }),
-    __metadata("design:type", MatTabGroup)
-], ActivityContainerComponent.prototype, "tabs", void 0);
+    Input(), StoreInValueModel('switchModel'),
+    __metadata("design:type", Object)
+], SwitchCaseComponent.prototype, "switch", void 0);
 __decorate([
-    ViewChildren(ActivityOutletComponent),
+    ContentChildren(SwitchCaseOption),
     __metadata("design:type", QueryList)
-], ActivityContainerComponent.prototype, "activityOutlets", void 0);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ActivityContainerComponent.prototype, "dispose", null);
-ActivityContainerComponent = __decorate([
+], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
+SwitchCaseComponent = __decorate([
     Component({
-        selector: 'aup-activity-container',
-        template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
-        styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
+        selector: 'aup-switch-case',
+        template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n",
+        styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
     }),
-    __metadata("design:paramtypes", [])
-], ActivityContainerComponent);
+    __metadata("design:paramtypes", [ChangeDetectorRef])
+], SwitchCaseComponent);
 
-class InteractionServiceRoutingAdapter {
-    constructor(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
-        this.activeInteractionContextIds = activeInteractionContextIds;
-        this.activeModalContext = activeModalContext;
-        this.createExclusiveInteractionContext = createExclusiveInteractionContext;
+let DefaultCellRendererComponent = class DefaultCellRendererComponent {
+    constructor() {
     }
-    isActive() {
-        return this.getActiveInteractionContextIds().length > 0;
+    set value(value) {
+        this._value = value;
     }
-    isModalActive() {
-        return !!this.activeModalContext.value;
+    get value() {
+        return this._value;
     }
-    // @Trace()
-    isComponentInteracting(component) {
-        return component.interactionContext && component.interactionContext.isActive();
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], DefaultCellRendererComponent.prototype, "value", null);
+DefaultCellRendererComponent = __decorate([
+    Component({
+        selector: 'aup-default-cell-renderer',
+        template: "{{value}}\n",
+        styles: [""]
+    }),
+    __metadata("design:paramtypes", [])
+], DefaultCellRendererComponent);
+
+let DefaultHeaderCellRendererComponent = class DefaultHeaderCellRendererComponent {
+    constructor() {
     }
-    getActiveInteractionContextIds() {
-        return this.activeInteractionContextIds.value;
+};
+__decorate([
+    Input(),
+    __metadata("design:type", ColumnModel)
+], DefaultHeaderCellRendererComponent.prototype, "columnModel", void 0);
+DefaultHeaderCellRendererComponent = __decorate([
+    Component({
+        selector: 'aup-default-header-renderer',
+        template: "{{columnModel.getHeaderText()}}\n",
+        styles: [""]
+    }),
+    __metadata("design:paramtypes", [])
+], DefaultHeaderCellRendererComponent);
+
+var TableModel_1;
+// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
+// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+/**
+ * Example:
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Editable tables
+ * @example
+ * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+ *   if (form.validate()) {
+ *     // normal form save stuff
+ *     return true; // finish editing
+ *   }
+ *   return false; // continue editiing
+ * }
+ * const colorsNames: ListModel<string> = ...;
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.pluck("lastName").cellEditor(StringInputComponent, {
+ *     validators: [Validator.present("We need a last name")]
+ *   });
+ *   table.pluck("age").cellEditor(NumberInputComponent);
+ *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+ *     initialiseComponent(component: SelectInputComponent) {
+ *       selectInput.optionsModel = colorsNames; // <- initialise our component
+ *     }
+ *   });
+ *   table.addEditControls(saveCommand); // <- required to enable editing
+ * });
+ *
+ * Selection models
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ * });
+ *
+ * Custom cell renderers and editors
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor")
+ *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+ *        // configure your component with what ever you need.
+ *      });
+ *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+ *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * I18n
+ * @example
+ * [table.yml]
+ * table:
+ *   columns(ColumnTextProperties[]):
+ *      firstName:
+ *         headerText: "First Name"
+ *      fullName:
+ *         headerText: "Full Name"
+ *
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ *
+ *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+ * });
+ */
+let TableModel = TableModel_1 = class TableModel {
+    constructor(sourceOfTruth) {
+        this.sourceOfTruth = sourceOfTruth;
+        this._garbage = new GarbageCollector();
+        this._columns = new MutableListModel();
+        this._editorSessions = new MutableListModel();
+        this.identityOf = sourceOfTruth.identityOf;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this._garbage);
+        this._columnsById = chain(this._columns).indexBy('columnId');
+        this._rowsBeingEdited = new MutableListModel([], {
+            identifiedWith: this.identityOf
+        });
+        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
+        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
+        this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
     }
-    // @Trace()
-    cancelCurrentModalInteraction() {
-        return this.activeModalContext.value.cancelActiveActivity();
+    static fromList(sourceOfTruth, builder) {
+        const model = new TableModel_1(sourceOfTruth);
+        builder(model);
+        return model;
     }
-    // @Trace()
-    cancelComponentInteraction(component) {
-        return component.interactionContext.cancelActiveActivity();
+    get rowsBeingEdited() {
+        return this._rowsBeingEdited.readonly;
     }
-}
-
-class ModalInteractionContextFactory {
-}
-
-var InteractionService_1;
-let inplaceMonitorCount = 0;
-let InteractionService = InteractionService_1 = class InteractionService {
-    constructor(modelInteractionContextFactory) {
-        this.modelInteractionContextFactory = modelInteractionContextFactory;
-        this.garbage = new GarbageCollector();
-        // private readonly _activeModalContext = new MutableValueModel<InteractionContext>();
-        // private readonly _activeInlineContext = new MutableValueModel<InteractionContext>();
-        // private readonly _activeContext: ValueModelChain<InteractionContext>;
-        this._navigationInProgress = new DelegatingValueModel().withDefault(false);
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this.garbage);
-        this.exclusiveInteractionRegistry = new InteractionService_1.ContextRegistry();
-        this.modalInteractionRegistry = new InteractionService_1.ContextRegistry();
-        this.inPlaceInteractionRegistry = new InteractionService_1.ContextRegistry();
-        this.modalInteractionRegistry.disableWhen(valueOf.any(this.exclusiveInteractionRegistry.active, this.modalInteractionRegistry.active).areTruthy());
-        this.inPlaceInteractionRegistry.disableWhen(valueOf.any(this.exclusiveInteractionRegistry.active, this.modalInteractionRegistry.active, this.inPlaceInteractionRegistry.active).areTruthy());
-        this.active = valueOf.any(this.inPlaceInteractionRegistry.active, this.modalInteractionRegistry.active).areTruthy();
-        // TODO: chain.concat(listOrValueModels) would be nice.
-        this.activeInteractionContextIds = chain(this.inPlaceInteractionRegistry.interactionContextIds)
-            .concat(this.modalInteractionRegistry.interactionContextIds);
-        this.activeModalContext = chain(this.modalInteractionRegistry.interactionContexts).first();
-        this.inModalInteraction = chain(this.activeModalContext).isNotNil();
+    getTrackByFunction() {
+        return (index, item) => {
+            return this.identityOf ? this.identityOf(item) : index;
+        };
     }
-    isActive() {
-        return this.active.value;
+    get columns() {
+        return this._columns.readonly;
     }
-    /**
-     * @deprecated use #createModalInteractionContextDisposedWith instead.
-     * @param disposable
-     */
-    createModalInteractionContextFor(disposable) {
-        return this.createModalInteractionContextDisposedWith(disposable);
+    pluck(property) {
+        return this.addColumn(new PropertyColumnModel(property, this));
     }
-    /**
-     * Creates a new model interaction context that will be disposed along with the component.
-     * @param disposable
-     */
-    createModalInteractionContextDisposedWith(disposable) {
-        // TODO: look at making the registry the factory..
-        return this.modelInteractionContextFactory.createInteractionContext('modal', new InteractionService_1.ApiAdapter(this.placeRouter, this.modalInteractionRegistry));
+    addSelectionColumn(selectionModel) {
+        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
     }
-    registerInplaceInteractionContext(interactionContext) {
-        // TODO: look at making the registry the factory..
-        // Todo: check for double registration.
-        // Todo: allow multiple inplace interactions..
-        interactionContext.initialise(`ip${++inplaceMonitorCount}`, new InteractionService_1.ApiAdapter(this.placeRouter, this.inPlaceInteractionRegistry));
+    addEditControls(saveCommand) {
+        this.saveCommand = saveCommand;
+        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
     }
-    /**
-     * Creates an interaction context that will prevent any other contexts from starting an
-     * activity until it is disposed.  This is intended for use by the router for passing
-     * to PlaceComponent.canDeactivate(interactionContext).  This ensures components don't
-     * try and interact in a way that we can't track and synchronise with the browser back
-     * button.
-     */
-    registerPlaceRouter(router) {
-        assert$1.isFalsey(this.placeRouter);
-        this.placeRouter = router;
-        this._navigationInProgress.setDelegate(this.placeRouter.navigationInProgress);
-        const self = this;
-        return new InteractionServiceRoutingAdapter(this.activeInteractionContextIds, this.activeModalContext, () => {
-            return self.modelInteractionContextFactory.createInteractionContext('exclusive', new InteractionService_1.ApiAdapter(this.placeRouter, this.exclusiveInteractionRegistry));
-        });
+    addCustomColumn(columnId, dataAccessor) {
+        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
     }
-};
-InteractionService.ctorParameters = () => [
-    { type: ModalInteractionContextFactory }
-];
-InteractionService.ɵprov = ɵɵdefineInjectable({ factory: function InteractionService_Factory() { return new InteractionService(ɵɵinject(ModalInteractionContextFactory)); }, token: InteractionService, providedIn: "root" });
-InteractionService = InteractionService_1 = __decorate([
-    Injectable({
-        providedIn: 'root'
-    }),
-    __metadata("design:paramtypes", [ModalInteractionContextFactory])
-], InteractionService);
-(function (InteractionService) {
-    /**
-     * Provides a mechanism for the service to keep track of what the API adapters are doing to
-     * ensure the rules are followed, i.e. modal or in-place interaction aren't started while
-     * an exclusive routing interaction is active.
-     */
-    class ContextRegistry extends GarbageCollector {
-        constructor() {
-            super();
-            this._interactions = new MutableListModel();
-            this._disabledDelegate = new DelegatingValueModel().withDefault(false);
-            const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-            this.active = chain(this._interactions).isNotEmpty();
-            this.interactionContextIds = chain(this._interactions).pluck("identifier");
-        }
-        get interactionContexts() {
-            return this._interactions.readonly;
-        }
-        start(context) {
-            this._interactions.push(context);
-        }
-        finish(context) {
-            this._interactions.remove(context);
-        }
-        isActive() {
-            return this.active.value;
+    addColumn(column) {
+        if (this._columnsById.get(column.columnId)) {
+            lang.illegalState(`Column with id=${column.columnId} already exists`);
         }
-        disableWhen(disabled) {
-            this._disabledDelegate.setDelegate(disabled);
+        else {
+            this._columns.push(column);
         }
+        return column;
     }
-    InteractionService.ContextRegistry = ContextRegistry;
-    class ApiAdapter {
-        constructor(placeRouter, contextRegistry) {
-            this.placeRouter = placeRouter;
-            this.contextRegistry = contextRegistry;
-        }
-        // @Trace()
-        notifyActive(context) {
-            assert$1.isTruthy(context.identifier);
-            this.contextRegistry.start(context);
-            return this.isNavigationInProgress() ? Promise.resolve() : this.placeRouter.syncInteractionContextIdsWithRouter();
+    columnTextProperties(columnTextProperties) {
+        this._columnTextPropertiesLookup = columnTextProperties;
+    }
+    getColumnTextProperties(column) {
+        const factory = this._columnTextPropertiesLookup[column.columnId];
+        return factory ? factory() : undefined;
+    }
+    startEditSession(row) {
+        const rowId = this.identityOf(row);
+        if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+            return lang.illegalState(`Row with id=${rowId} already being edited`);
         }
-        // @Trace()
-        isNavigationInProgress() {
-            return this.placeRouter.navigationInProgress.value;
+        else {
+            const editSession = new TableModel_1.EditSession(rowId, row, this.saveCommand);
+            const { when } = Dsl.disposeWith(editSession);
+            when.valueOf(editSession.rowValueModel).changes((editedValue) => {
+                this._rowsBeingEdited.replaceOrPush(editedValue);
+            }, { initialValue: 'triggerChangeUnlessNil' });
+            this._editorSessions.push(editSession);
+            editSession.onDispose(() => {
+                this._rowsBeingEdited.remove(editSession.rowValueModel.value);
+                this._editorSessions.remove(editSession);
+            });
+            return editSession;
         }
-        // @Trace()
-        notifyFinished(context) {
-            this.contextRegistry.finish(context);
-            // :: Important ::
-            // This method will be traversed by both the place router (during can canDeactivate guards) and user land code
-            // (both when routing is idle and while it is active in PlaceComponent.canDeactivate()).
-            // The result of pushInteractionIdsToRoute will not start until after the current route finishes, and the
-            // current route won't finish until after this promise returns... Deadlock.
-            // So in order to keep this logic out of the activities we perform the check here and ensure that
-            // any interactions with the context while routing is active returns immediately.
-            return this.isNavigationInProgress() ? Promise.resolve() : this.placeRouter.syncInteractionContextIdsWithRouter();
+    }
+    getEditSessionFor(row) {
+        return this._editorSessionByRowId.get(this.identityOf(row));
+    }
+    cancelAllEditorSessions() {
+        this._editorSessions.runInTransaction((draft) => {
+            this._rowsBeingEdited.runInTransaction(() => {
+                draft.value.forEach(session => session.dispose());
+            });
+        });
+    }
+};
+TableModel.ctorParameters = () => [
+    { type: ListModel }
+];
+TableModel = TableModel_1 = __decorate([
+    TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
+    __metadata("design:paramtypes", [ListModel])
+], TableModel);
+(function (TableModel) {
+    class EditSession extends GarbageCollector {
+        constructor(rowId, row, saveCommand) {
+            super();
+            this.rowId = rowId;
+            this.saveCommand = saveCommand;
+            this._editorValue = new MutableValueModel();
+            this.rowValueModel = this._editorValue.readonly;
+            this.form = new Form();
+            this.form.load(row);
+            this._editorValue.value = row;
+            this.form.onEdit(() => {
+                this._editorValue.value = produce(this._editorValue.value, draft => {
+                    this.form.writeDirtyStateTo(draft);
+                });
+            });
         }
     }
-    InteractionService.ApiAdapter = ApiAdapter;
-})(InteractionService || (InteractionService = {}));
+    TableModel.EditSession = EditSession;
+})(TableModel || (TableModel = {}));
 
-let InPlaceInteractionContextComponent = class InPlaceInteractionContextComponent extends DisposableComponent {
-    constructor(interactionService, tabConfig) {
+let EditRowControls = class EditRowControls extends DisposableComponent {
+    constructor() {
         super();
-        this.interactionService = interactionService;
-        this.tabConfig = tabConfig;
-        /**
-         * If true then the first startActivity call will slide the activity into view. If false
-         * the activity will replace the existing content immediately.
-         */
-        this.animateFirstActivity = true;
+        this.saveCommand = Command.create(() => {
+            this.editSession.saveCommand.execute(this.editSession.form)
+                .then((finished) => {
+                if (finished) {
+                    this.editSession.dispose();
+                }
+            });
+        });
+        this.cancelCommand = Command.create(() => {
+            this.editSession.dispose();
+        });
     }
-    get animationDuration() {
+    ngOnInit() {
+    }
+    get form() {
         var _a;
-        return this.animateFirstActivity ? (((_a = this.tabConfig) === null || _a === void 0 ? void 0 : _a.animationDuration) || '500ms') : "0ms";
+        return (_a = this.editSession) === null || _a === void 0 ? void 0 : _a.form;
     }
-    ngAfterViewInit() {
-        this.interactionService.registerInplaceInteractionContext(this);
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], EditRowControls.prototype, "row", void 0);
+__decorate([
+    Input(),
+    TrackExternal(),
+    __metadata("design:type", Command)
+], EditRowControls.prototype, "editRowCommand", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TableModel.EditSession)
+], EditRowControls.prototype, "editSession", void 0);
+EditRowControls = __decorate([
+    Component({
+        selector: 'aup-row-editor-controls',
+        template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><mat-icon>edit</mat-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><mat-icon>done</mat-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><mat-icon>clear</mat-icon></button>\n",
+        styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}"]
+    }),
+    __metadata("design:paramtypes", [])
+], EditRowControls);
+
+let SelectCellRendererComponent = class SelectCellRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.selectCommand = Command.create(() => {
+            this.selectionModel.selectCommand.execute(this.row);
+        });
     }
-    initialise(id, api) {
-        this.activityContainerComponent.initialise(id, api);
+    set row(value) {
+        this._row = value;
     }
-    get identifier() {
-        return this.activityContainerComponent.identifier;
+    get row() {
+        return this._row;
     }
-    alert(alert) {
-        return this.activityContainerComponent.alert(alert);
+    isSelected() {
+        return this.selectionModel.isSelected(this.row);
     }
-    cancelActiveActivity() {
-        return this.activityContainerComponent.cancelActiveActivity();
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], SelectCellRendererComponent.prototype, "row", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], SelectCellRendererComponent.prototype, "selectionModel", void 0);
+SelectCellRendererComponent = __decorate([
+    Component({
+        selector: 'aup-select-cell-renderer',
+        template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n",
+        styles: [""]
+    }),
+    __metadata("design:paramtypes", [])
+], SelectCellRendererComponent);
+
+let SelectHeaderCellRendererComponent = class SelectHeaderCellRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.selectCommand = Command.create(() => {
+            this.selectionModel.toggleAllCommand.execute();
+        });
     }
-    confirm(confirm) {
-        return this.activityContainerComponent.confirm(confirm);
+    isSelected() {
+        return this.selectionModel.allSelected.value;
     }
-    confirmOrReject(confirm) {
-        return this.activityContainerComponent.confirmOrReject(confirm);
+    isIntermediate() {
+        return this.selectionModel.someSelected.value;
     }
-    confirmThen(confirm, activityType, data) {
-        return this.activityContainerComponent.confirmThen(confirm, activityType);
+};
+__decorate([
+    Input(),
+    __metadata("design:type", MultipleSelectionModel)
+], SelectHeaderCellRendererComponent.prototype, "selectionModel", void 0);
+SelectHeaderCellRendererComponent = __decorate([
+    Component({
+        selector: 'aup-select-header-cell-renderer',
+        template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n",
+        styles: [""]
+    }),
+    __metadata("design:paramtypes", [])
+], SelectHeaderCellRendererComponent);
+
+class ColumnModel {
+    constructor(columnId, defaults) {
+        this.columnId = columnId;
+        this.defaults = defaults;
+        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
+            component.columnModel = column;
+        });
     }
-    isActive() {
-        return this.activityContainerComponent.isActive();
+    getHeaderText() {
+        var _a;
+        return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
     }
-    startActivity(activityType, data) {
-        return this.activityContainerComponent.startActivity(activityType, data);
+    getDefaultHeaderText() {
+        return this.columnId;
+    }
+    getColumnTextProperties() {
+        return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
+    }
+    textProperties(columnTextProperties) {
+        this._columnTextProperties = columnTextProperties;
+        return this;
+    }
+    setCellRenderer(cellRenderer, initialiser) {
+        this._cellRendererConfig = {
+            portal: new ComponentPortal(cellRenderer),
+            pushState: initialiser
+        };
+    }
+    cellHeaderRenderer(cellRenderer, initialiser) {
+        this._columnHeaderConfig = {
+            portal: new ComponentPortal(cellRenderer),
+            initialiseComponent: initialiser
+        };
+    }
+    setCellEditor(cellEditor) {
+        this._cellEditorConfig = cellEditor;
+    }
+    get cellRendererPortal() {
+        return this._cellRendererConfig.portal;
+    }
+    get columnHeaderCellRendererPortal() {
+        return this._columnHeaderConfig.portal;
+    }
+    get cellEditorPortal() {
+        var _a;
+        return (_a = this._cellEditorConfig) === null || _a === void 0 ? void 0 : _a.portal;
+    }
+    hasEditor() {
+        return !!this._cellEditorConfig;
+    }
+    updateCellRenderer(component, row, editRowCommand, editSession) {
+        this._cellRendererConfig.pushState(component, row, editRowCommand, editSession);
+    }
+    initialiseHeader(component) {
+        this._columnHeaderConfig.initialiseComponent(component, this);
+    }
+    initialiseEditor(component, editSession) {
+        this._cellEditorConfig.initialiseComponent(component, editSession);
+    }
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", String)
+], ColumnModel.prototype, "getHeaderText", null);
+__decorate([
+    Memoize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Object)
+], ColumnModel.prototype, "getColumnTextProperties", null);
+class PropertyColumnModel extends ColumnModel {
+    constructor(property, defaults) {
+        super(property.toString(), defaults);
+        this.property = property;
+        this.cellRenderer(DefaultCellRendererComponent);
+    }
+    cellRenderer(componentType) {
+        this.setCellRenderer(componentType, (component, row) => {
+            component.value = row[this.property];
+        });
+    }
+    cellEditor(editor, options) {
+        this.setCellEditor({
+            portal: new ComponentPortal(editor),
+            initialiseComponent: (component, editSession) => {
+                const formValueModel = editSession.form.pluck(this.property);
+                if (options === null || options === void 0 ? void 0 : options.validators) {
+                    formValueModel.validateUsing(options.validators);
+                }
+                component.valueModel = formValueModel;
+                if (options === null || options === void 0 ? void 0 : options.initialiseComponent) {
+                    options.initialiseComponent(component);
+                }
+            }
+        });
+        return this;
+    }
+}
+class CustomValueColumnModel extends ColumnModel {
+    constructor(columnId, defaults, getValue) {
+        super(columnId, defaults);
+        this.getValue = getValue;
+        this.cellRenderer(DefaultCellRendererComponent);
+    }
+    cellRenderer(componentType) {
+        this.setCellRenderer(componentType, (component, row) => {
+            component.value = this.getValue(row);
+        });
+    }
+}
+class EditorControlColumnModel extends ColumnModel {
+    constructor(columnId, saveCommand, defaults) {
+        super(columnId, defaults);
+        this.cellRenderer(EditRowControls);
+    }
+    cellRenderer(componentType) {
+        this.setCellRenderer(componentType, (component, row, editRowCommand, editSession) => {
+            component.row = row;
+            component.editSession = editSession;
+            component.editRowCommand = editRowCommand;
+        });
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+class CustomTemplateColumnModel extends ColumnModel {
+    constructor(columnId, defaults, component) {
+        super(columnId, defaults);
+    }
+}
+class SelectionColumnModel extends ColumnModel {
+    constructor(columnId, defaults, selectionModel) {
+        super(columnId, defaults);
+        if (selectionModel instanceof MultipleSelectionModel) {
+            this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
+                component.selectionModel = selectionModel;
+            });
+        }
+        this.setCellRenderer(SelectCellRendererComponent, (component, row, editRowCommand, editSession) => {
+            component.row = row;
+            component.selectionModel = selectionModel;
+        });
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+
+/**
+ * Create your model:
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Create your table
+ * @example
+ * <aup-table [tableModel]="heroTableModel"></aup-table>
+ *
+ * Styling
+ * @example
+ * aup-table {
+ *   --column-gap: 10px; // defaults to 24px
+ *   aup-table-cell-renderer {
+ *     &:first-column {
+ *       // do stuff
+ *     }
+ *     &:last-column {
+ *       // do stuff
+ *     }
+ *   }
+ * }
+ */
+let TableComponent = class TableComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.columns = chain(this.tableModel.columns);
+        this.columnIds = chain(this.columns).pluck('columnId');
+    }
+    isEditing(row) {
+        return !!this.tableModel.getEditSessionFor(row);
     }
 };
-InPlaceInteractionContextComponent.ctorParameters = () => [
-    { type: InteractionService },
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_TABS_CONFIG,] }, { type: Optional }] }
+__decorate([
+    Input(),
+    TrackExternal(),
+    __metadata("design:type", TableModel)
+], TableComponent.prototype, "tableModel", void 0);
+TableComponent = __decorate([
+    Component({
+        selector: 'aup-table',
+        template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.getTrackByFunction()\">\n\n  <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\">\n      <aup-table-cell-renderer [column]=\"column\"\n                               [row]=\"row\"\n                               [tableModel]=\"tableModel\"\n                               [editSession]=\"tableModel.getEditSessionFor(row)\"\n                               [attr.column-index]=\"index\"\n                               [class.first-column]=\"first\"\n                               [class.last-column]=\"last\"\n      ></aup-table-cell-renderer>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: columnIds.value;\"></tr>\n\n</table>\n",
+        styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{flex:1}"]
+    }),
+    __metadata("design:paramtypes", [])
+], TableComponent);
+
+let ColumnTemplateDirective = class ColumnTemplateDirective {
+    constructor(host, templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+    }
+};
+ColumnTemplateDirective.ctorParameters = () => [
+    { type: TableComponent },
+    { type: TemplateRef },
+    { type: ViewContainerRef }
 ];
+ColumnTemplateDirective = __decorate([
+    Directive({
+        selector: '[aupColumnTemplate]'
+    }),
+    __metadata("design:paramtypes", [TableComponent,
+        TemplateRef,
+        ViewContainerRef])
+], ColumnTemplateDirective);
+
+let TableCellRendererComponent = class TableCellRendererComponent {
+    constructor() {
+        this.defaultClassNames = "aup-header-cell-renderer";
+        this.editRowCommand = Command.create(() => {
+            this.tableModel.startEditSession(this.row);
+        });
+    }
+    initialiseRenderer(instance) {
+        if (this.renderer !== instance) {
+            this.renderer = instance;
+            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
+        }
+    }
+    initialiseEditor(instance) {
+        if (this.editor !== instance) {
+            this.editor = instance;
+            this.column.initialiseEditor(this.editor, this.editSession);
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.renderer) {
+            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
+            this.renderer.editSession = this.editSession;
+        }
+    }
+    hasActiveEditor() {
+        return this.editSession && this.column.hasEditor();
+    }
+};
 __decorate([
-    ViewChild('activityContainer', { static: true }),
-    __metadata("design:type", ActivityContainerComponent)
-], InPlaceInteractionContextComponent.prototype, "activityContainerComponent", void 0);
+    Input(),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "row", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", ColumnModel)
+], TableCellRendererComponent.prototype, "column", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TableModel.EditSession)
+], TableCellRendererComponent.prototype, "editSession", void 0);
 __decorate([
     Input(),
+    __metadata("design:type", TableModel)
+], TableCellRendererComponent.prototype, "tableModel", void 0);
+__decorate([
+    HostBinding('class'),
     __metadata("design:type", Object)
-], InPlaceInteractionContextComponent.prototype, "animateFirstActivity", void 0);
-InPlaceInteractionContextComponent = __decorate([
+], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+TableCellRendererComponent = __decorate([
     Component({
-        selector: 'aup-in-place-interaction-context',
-        template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
-        styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
+        selector: 'aup-table-cell-renderer',
+        template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"column.cellRendererPortal\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"column.cellEditorPortal\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
+        styles: [":host{display:flex;flex-direction:column;align-items:stretch}"]
     }),
-    __param(1, Inject(MAT_TABS_CONFIG)), __param(1, Optional()),
-    __metadata("design:paramtypes", [InteractionService, Object])
-], InPlaceInteractionContextComponent);
+    __metadata("design:paramtypes", [])
+], TableCellRendererComponent);
 
-class DialogInteractionContext extends AbstractInteractionContext {
-    constructor(identifier, api, dialogService, config) {
-        super();
-        this.identifier = identifier;
-        this.api = api;
-        this.dialogService = dialogService;
-        this.config = config;
-        this.garbage = new GarbageCollector();
-        assert$1.notNil(dialogService);
+let TableHeaderCellRendererComponent = class TableHeaderCellRendererComponent {
+    constructor() {
+        this.defaultClassNames = "aup-header-cell-renderer";
     }
-    cancelActiveActivity() {
-        return this.activityContainer.cancelActiveActivity();
+    initialiseHeader(instance) {
+        if (this.renderer !== instance) {
+            this.renderer = instance;
+            this.column.initialiseHeader(this.renderer);
+        }
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", ColumnModel)
+], TableHeaderCellRendererComponent.prototype, "column", void 0);
+__decorate([
+    HostBinding('class'),
+    __metadata("design:type", Object)
+], TableHeaderCellRendererComponent.prototype, "defaultClassNames", void 0);
+TableHeaderCellRendererComponent = __decorate([
+    Component({
+        selector: 'aup-table-header-cell-renderer',
+        template: "<ng-container [cdkPortalOutlet]=\"column.columnHeaderCellRendererPortal\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
+        styles: [":host{display:flex;flex-direction:column;align-items:stretch}"]
+    }),
+    __metadata("design:paramtypes", [])
+], TableHeaderCellRendererComponent);
+
+let VerticalFocusContainerComponent = class VerticalFocusContainerComponent extends FocusContainerComponent {
+    constructor(focusManager) {
+        super(focusManager);
+        this.focusManager = focusManager;
     }
-    dispose() {
-        if (this.isActive()) {
-            lang.illegalState('Dispose called while active.');
+    arrowLeft(event) {
+        if (this.leftArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.leftArrowCommand.execute();
         }
-        this.garbage.dispose();
-    }
-    registerDisposable(disposable) {
-        return this.garbage.registerDisposable(disposable);
     }
-    isActive() {
-        return !!this.activityContainer && this.activityContainer.isActive();
+    arrowRight(event) {
+        if (this.rightArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.rightArrowCommand.execute();
+        }
     }
-    createAndLaunchActivity(activityType, data, disableClose) {
-        assert$1.isNil(this._currentActivityRef);
-        const config = Object.assign(Object.assign({}, this.config), {
-            disableClose,
-            panelClass: 'dialog-interaction-context'
-        });
-        const self = this;
-        const matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
-        const activityContainer = this.activityContainer = matDialogRef.componentInstance;
-        this.activityContainer.initialise(this.identifier, this.api);
-        const activityResult = this.activityContainer.startActivity(activityType, data);
-        activityResult.finally(() => matDialogRef.close());
-        // we need to check if our onDone/onCancel methods above we called or if we were
-        // closed by the user clicking the backdrop.  If the later then we need to cancel our
-        // activity.
-        matDialogRef.afterClosed().subscribe(promiseAlreadyFinished => {
-            if (activityContainer.isActive()) {
-                activityContainer.cancelActiveActivity();
-            }
-            this.activityContainer = null;
-        });
-        matDialogRef.updateSize();
-        matDialogRef.afterOpened().subscribe(promiseAlreadyFinished => {
-            matDialogRef.updateSize();
-        });
-        return activityResult;
+    arrowDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusNext();
     }
-}
-
-const DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
-let DialogInteractionContextFactory = class DialogInteractionContextFactory extends ModalInteractionContextFactory {
-    constructor(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
-        super();
-        this.dialogService = dialogService;
-        this.dialogServiceDefaults = dialogServiceDefaults;
-        this.matDialogDefaultConfig = matDialogDefaultConfig;
-        assert$1.notNil(dialogService);
+    arrowUp(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusPrevious();
     }
-    createInteractionContext(identifier, api) {
-        const config = Object.assign(Object.assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
-        return new DialogInteractionContext(identifier, api, this.dialogService, config);
+    ngOnInit() {
     }
 };
-DialogInteractionContextFactory.ctorParameters = () => [
-    { type: MatDialog },
-    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
-    { type: MatDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [MAT_DIALOG_DEFAULT_OPTIONS,] }] }
+VerticalFocusContainerComponent.ctorParameters = () => [
+    { type: FocusManager, decorators: [{ type: Self }] }
 ];
-DialogInteractionContextFactory.ɵprov = ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(ɵɵinject(MatDialog), ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), ɵɵinject(MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
-DialogInteractionContextFactory = __decorate([
-    Injectable({
-        providedIn: 'root'
+__decorate([
+    Input('command.arrowRight'),
+    TrackExternal(),
+    __metadata("design:type", Command)
+], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
+__decorate([
+    Input('command.arrowLeft'),
+    TrackExternal(),
+    __metadata("design:type", Command)
+], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
+__decorate([
+    HostListener('keyup.arrowLeft', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
+__decorate([
+    HostListener('keyup.arrowRight', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowRight", null);
+__decorate([
+    HostListener('keyup.arrowDown', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+__decorate([
+    HostListener('keyup.arrowUp', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowUp", null);
+VerticalFocusContainerComponent = __decorate([
+    Component({
+        selector: 'aup-vertical-focus-container',
+        template: "<ng-content></ng-content>\n",
+        providers: [
+            { provide: FocusManager }
+        ],
+        styles: [":host{display:block}"]
     }),
-    __param(1, Optional()), __param(1, Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
-    __param(2, Optional()), __param(2, Inject(MAT_DIALOG_DEFAULT_OPTIONS)),
-    __metadata("design:paramtypes", [MatDialog,
-        MatDialogConfig,
-        MatDialogConfig])
-], DialogInteractionContextFactory);
+    __param(0, Self()),
+    __metadata("design:paramtypes", [FocusManager])
+], VerticalFocusContainerComponent);
 
 /**
  * @file Automatically generated by barrelsby.
  */
 
-let AddItemInteractionContextComponent = class AddItemInteractionContextComponent extends DisposableComponent {
+let ActivityActionsComponent = class ActivityActionsComponent extends DisposableComponent {
     constructor() {
-        super();
-        this.tabindex = 0;
-        this.clickCommand = Command.create((context) => {
-            if (this.activityClass) {
-                this.startActivity(this.activityClass, this.activityData).catch(e => {
-                    //  don't care.
-                });
-            }
-            else {
-                this.addCommand.withContext(context).execute();
-            }
-        });
-    }
-    get active() {
-        return this.interactionContext ? this.interactionContext.isActive() : false;
+        super(...arguments);
+        this.align = 'start';
     }
-    startActivity(activityType, data) {
-        return this.interactionContext.startActivity(activityType, data);
+    get alignEnd() {
+        return this.align === 'end';
     }
     ngOnInit() {
     }
+    hasConfirmText() {
+        return !___default.isEmpty(this.confirmText);
+    }
 };
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], AddItemInteractionContextComponent.prototype, "label", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
+    TrackExternal(),
+    __metadata("design:type", Command)
+], ActivityActionsComponent.prototype, "confirmCommand", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Object)
-], AddItemInteractionContextComponent.prototype, "activityData", void 0);
+    __metadata("design:type", String)
+], ActivityActionsComponent.prototype, "confirmText", void 0);
 __decorate([
     Input(),
     TrackExternal(),
     __metadata("design:type", Command)
-], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
+], ActivityActionsComponent.prototype, "cancelCommand", void 0);
 __decorate([
-    ViewChild(InPlaceInteractionContextComponent),
-    __metadata("design:type", InPlaceInteractionContextComponent)
-], AddItemInteractionContextComponent.prototype, "interactionContext", void 0);
+    Input(),
+    __metadata("design:type", String)
+], ActivityActionsComponent.prototype, "align", void 0);
 __decorate([
-    HostBinding('class.interaction-active'),
+    HostBinding('class.align-end'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
-], AddItemInteractionContextComponent.prototype, "active", null);
-__decorate([
-    HostBinding('tabindex'),
-    __metadata("design:type", Object)
-], AddItemInteractionContextComponent.prototype, "tabindex", void 0);
-AddItemInteractionContextComponent = __decorate([
+], ActivityActionsComponent.prototype, "alignEnd", null);
+ActivityActionsComponent = __decorate([
     Component({
-        selector: 'aup-add-item-interaction-context',
-        template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><mat-icon>add</mat-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n",
-        styles: [":host{--def-link-color:var(--link-color, currentColor);--def-link-backgound:var(--link-background, rgba(0, 0, 0, 0.05));--def-link-border-radius:var(--link-border-radius, 4px);--def-link-padding:var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:0}:host:hover{--link-background:rgba(0,0,0,0.1)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-backgound);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}"]
-    }),
-    __metadata("design:paramtypes", [])
-], AddItemInteractionContextComponent);
+        selector: 'aup-activity-actions',
+        template: "<button class=\"cancel\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <mat-icon>clear</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <mat-icon>done</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
+        styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}"]
+    })
+], ActivityActionsComponent);
 
 let InteractionModule = class InteractionModule {
 };
@@ -2081,14 +2907,18 @@ InteractionModule = __decorate([
             ActivityOutletComponent,
             InPlaceInteractionContextComponent,
             AddItemInteractionContextComponent,
-            ActivityActionsComponent
+            ActivityActionsComponent,
+            PopupInteractionContextComponent,
+            InteractionContextTriggerFor
         ],
         exports: [
             ActivityContainerComponent,
             ActivityOutletComponent,
             InPlaceInteractionContextComponent,
             AddItemInteractionContextComponent,
-            ActivityActionsComponent
+            ActivityActionsComponent,
+            PopupInteractionContextComponent,
+            InteractionContextTriggerFor
         ],
         entryComponents: [
             ActivityContainerComponent,
@@ -2097,11 +2927,89 @@ InteractionModule = __decorate([
             AlertDialogComponent
         ],
         providers: [
-            InteractionService,
+            InteractionService
+            // {
+            //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
+            // }
         ]
     })
 ], InteractionModule);
 
+let ComponentsModule = class ComponentsModule {
+};
+ComponentsModule = __decorate([
+    NgModule({
+        declarations: [
+            AbstractInputComponent,
+            AbstractInputActivity,
+            NumberInputComponent,
+            StringInputComponent,
+            StringInputActivity,
+            TextInputComponent,
+            PasswordInputComponent,
+            SelectInputComponent,
+            CheckboxInputComponent,
+            ScrollContainerComponent,
+            NoopComponent,
+            SwitchCaseComponent,
+            SwitchCaseWhenDirective,
+            SwitchCaseDefaultDirective,
+            FocusContainerComponent,
+            VerticalFocusContainerComponent,
+            FocusableComponent,
+            CardContainerComponent,
+            TableComponent,
+            EditRowControls,
+            ColumnTemplateDirective,
+            DefaultCellRendererComponent,
+            TableCellRendererComponent,
+            SelectCellRendererComponent,
+            SelectHeaderCellRendererComponent,
+            DefaultHeaderCellRendererComponent,
+            TableHeaderCellRendererComponent
+        ],
+        imports: [
+            CommonModule,
+            BrowserAnimationsModule,
+            FormsModule,
+            MatInputModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatTabsModule,
+            DirectivesModule,
+            MatIconModule,
+            MatButtonModule,
+            MatCheckboxModule,
+            InteractionModule,
+            MatTableModule,
+            PortalModule
+        ],
+        exports: [
+            NumberInputComponent,
+            StringInputComponent,
+            TextInputComponent,
+            PasswordInputComponent,
+            CheckboxInputComponent,
+            SelectInputComponent,
+            ScrollContainerComponent,
+            NoopComponent,
+            SwitchCaseComponent,
+            SwitchCaseWhenDirective,
+            SwitchCaseDefaultDirective,
+            FocusContainerComponent,
+            VerticalFocusContainerComponent,
+            FocusableComponent,
+            CardContainerComponent,
+            TableComponent,
+            EditRowControls,
+            ColumnTemplateDirective
+        ],
+        providers: [
+            FocusBindingFactory,
+        ]
+    })
+], ComponentsModule);
+
 class ParameterDefinition {
     constructor(propertyName, options, urlFormat) {
         this.propertyName = propertyName;
@@ -4575,5 +5483,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectInputComponent, SidePlaceNavigationComponent, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, PlaceOutletComponent as ɵba, leftRightPlaceAnimation as ɵbb, LEFT_RIGHT_PLACE_ANIMATION as ɵbc, AUP_PLACE_CONFIG as ɵbd, PlaceRouter as ɵbf, InteractionService as ɵbg, ModalInteractionContextFactory as ɵbh, UrlService as ɵbi, PlaceHistory as ɵbj, TabbedPlaceNavigationComponent as ɵbk, AbstractPlaceNavigationComponent as ɵbl, ListPlaceNavComponent as ɵbm, SidePlaceNavigationComponent as ɵbn, InteractionModule as ɵbo, ActivityContainerComponent as ɵbp, AbstractInteractionContext as ɵbq, ActivityOutletComponent as ɵbr, ConfirmationDialogComponent as ɵbs, ACTIVITY_DATA as ɵbt, Activity as ɵbu, ConfirmThenDialogComponent as ɵbw, AlertDialogComponent as ɵbx, InPlaceInteractionContextComponent as ɵbz, FocusBindingDirective as ɵc, AddItemInteractionContextComponent as ɵca, DisposableComponent as ɵcb, InPlaceInteractionContextComponent as ɵcc, ActivityActionsComponent as ɵcd, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, NumberInputComponent as ɵg, AbstractInputComponent as ɵh, StringInputComponent as ɵi, TextInputComponent as ɵj, PasswordInputComponent as ɵk, SelectInputComponent as ɵl, CheckboxInputComponent as ɵm, ScrollContainerComponent as ɵn, NoopComponent as ɵo, SwitchCaseOption as ɵp, SwitchCaseWhenDirective as ɵq, SwitchCaseDefaultDirective as ɵr, SwitchCaseComponent as ɵs, FocusContainerComponent as ɵt, VerticalFocusContainerComponent as ɵu, FocusableComponent as ɵv, CardContainerComponent as ɵw, PlaceModule as ɵx, EmptyStateComponent as ɵy, BusyOverlayComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, InteractionModule as ɵbk, ActivityContainerComponent as ɵbl, AbstractInteractionContext as ɵbm, ActivityOutletComponent as ɵbn, ConfirmationDialogComponent as ɵbo, ACTIVITY_DATA as ɵbp, Activity as ɵbq, ConfirmThenDialogComponent as ɵbs, AlertDialogComponent as ɵbt, InPlaceInteractionContextComponent as ɵbv, InteractionService as ɵbw, ModalInteractionContextFactory as ɵbx, AddItemInteractionContextComponent as ɵby, DisposableComponent as ɵbz, FocusBindingDirective as ɵc, InPlaceInteractionContextComponent as ɵca, ActivityActionsComponent as ɵcb, PopupInteractionContextComponent as ɵcc, InteractionContextTriggerFor as ɵcd, PlaceModule as ɵce, EmptyStateComponent as ɵcf, BusyOverlayComponent as ɵcg, PlaceOutletComponent as ɵch, leftRightPlaceAnimation as ɵci, LEFT_RIGHT_PLACE_ANIMATION as ɵcj, AUP_PLACE_CONFIG as ɵck, PlaceRouter as ɵcm, UrlService as ɵcn, PlaceHistory as ɵco, TabbedPlaceNavigationComponent as ɵcp, AbstractPlaceNavigationComponent as ɵcq, ListPlaceNavComponent as ɵcr, SidePlaceNavigationComponent as ɵcs, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractInputActivity as ɵh, Activity as ɵi, ACTIVITY_DATA as ɵj, NumberInputComponent as ɵk, StringInputComponent as ɵl, StringInputActivity as ɵm, TextInputComponent as ɵn, PasswordInputComponent as ɵo, SelectInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map