@coolon/angular-ui-powerups 1.9.0 → 1.11.0

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

@@ -1,27 +1,30 @@
 import { __extends, __decorate, __metadata, __param, __awaiter, __generator, __assign, __spread } 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 { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, 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 { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, 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 { FlexModule } from '@angular/flex-layout';
+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';
@@ -362,45 +365,6 @@ var DirectivesModule = /** @class */ (function () {
     return DirectivesModule;
 }());
 
-var FocusContainerComponent = /** @class */ (function (_super) {
-    __extends(FocusContainerComponent, _super);
-    function FocusContainerComponent(focusManager) {
-        var _this = _super.call(this) || this;
-        _this.focusManager = focusManager;
-        _this.restoreFocusCommand = Command.create(function () {
-            _this.restoreFocus();
-        });
-        _this.tabIndex = -1;
-        return _this;
-    }
-    FocusContainerComponent.prototype.ngOnInit = function () {
-    };
-    // @Trace()
-    FocusContainerComponent.prototype.restoreFocus = function () {
-        this.focusManager.restoreFocus();
-    };
-    FocusContainerComponent.ctorParameters = function () { return [
-        { 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);
-    return FocusContainerComponent;
-}(DisposableComponent));
-
 var FocusableComponent = /** @class */ (function (_super) {
     __extends(FocusableComponent, _super);
     function FocusableComponent(el, focusManager, focusBindingFactory) {
@@ -466,1826 +430,2785 @@ var FocusableComponent = /** @class */ (function (_super) {
     return FocusableComponent;
 }(DisposableComponent));
 
-var AbstractInputComponent = /** @class */ (function (_super) {
-    __extends(AbstractInputComponent, _super);
-    function AbstractInputComponent() {
-        var _this = _super.call(this) || this;
-        /**
-         * 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();
-        var self = _this;
-        _this.errorStateMatcher = {
-            isErrorState: function (control, form) {
-                return self.hasErrors();
-            }
-        };
-        return _this;
+var Dimension = /** @class */ (function () {
+    function Dimension(width, height) {
+        this.width = width;
+        this.height = height;
     }
-    AbstractInputComponent.prototype.notifyClick = function () {
-        this.safelyInvoke(this.clickCommand);
-    };
-    AbstractInputComponent.prototype.notifyFocusIn = function () {
-        this.safelyInvoke(this.focusCommand);
-        this.focus.emit();
-    };
-    AbstractInputComponent.prototype.notifyFocusOut = function () {
-        this.safelyInvoke(this.blurCommand);
-        this.blur.emit();
-    };
-    AbstractInputComponent.prototype.notifyEnterKey = function () {
-        this.safelyInvoke(this.enterCommand);
-        this.enterKey.emit();
+    return Dimension;
+}());
+
+var Point = /** @class */ (function () {
+    function Point(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    Point.from = function (data) {
+        return new Point(data.x, data.y);
     };
-    AbstractInputComponent.prototype.notifyEscapeKey = function () {
-        this.safelyInvoke(this.escapeCommand);
-        this.escapeKey.emit();
+    Point.prototype.translate = function (x, y) {
+        return new Point(this.x + x, this.y + y);
     };
-    AbstractInputComponent.prototype.safelyInvoke = function (command) {
-        if (command && command.enabled.value) {
-            command.execute();
+    return Point;
+}());
+
+var Bounds = /** @class */ (function (_super) {
+    __extends(Bounds, _super);
+    function Bounds(top, left, width, height) {
+        var _this = _super.call(this, width, height) || this;
+        _this.top = top;
+        _this.left = left;
+        _this.width = width;
+        _this.height = height;
+        return _this;
+    }
+    Bounds.prototype.relativePositionOf = function (point) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
+        }
+        else {
+            return new Point(point.x - this.left, point.y - this.top);
         }
     };
-    AbstractInputComponent.prototype.ngOnInit = function () {
-    };
-    AbstractInputComponent.prototype.isEnabled = function () {
-        return this.enabled.value;
+    return Bounds;
+}(Dimension));
+(function (Bounds) {
+    function ofElement(element) {
+        var rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
+    }
+    Bounds.ofElement = ofElement;
+})(Bounds || (Bounds = {}));
+
+var ResizeAwareComponent = /** @class */ (function (_super) {
+    __extends(ResizeAwareComponent, _super);
+    function ResizeAwareComponent(elementRef, ngZone) {
+        var _this = _super.call(this) || this;
+        _this.elementRef = elementRef;
+        _this.ngZone = ngZone;
+        _this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+        return _this;
+    }
+    ResizeAwareComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        this.updateBounds();
+        var element = this.elementRef.nativeElement;
+        var ro = new ResizeObserver(function (entries, observer) {
+            _this.ngZone.run(function () { return _this.updateBounds(); });
+        });
+        ro.observe(element);
+        this.onDispose(function () { return ro.disconnect(); });
     };
-    Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
+    Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
         get: function () {
-            return this.delegatingFormValueModel.enabled;
+            return this._boundsModel.readonly;
         },
         enumerable: true,
         configurable: true
     });
-    AbstractInputComponent.prototype.hasErrors = function () {
-        return !this.errorList.query().isEmpty();
-    };
-    Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
+    Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
         get: function () {
-            return this.delegatingFormValueModel.errorList;
+            return this.elementRef.nativeElement;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(AbstractInputComponent.prototype, "firstError", {
+    // TODO: Make this handle body scroll
+    ResizeAwareComponent.prototype.relativePositionOf = function (point) {
+        return this.bounds.relativePositionOf(point);
+    };
+    Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
         get: function () {
-            return this.hasErrors() ? this.errorList.value[0] : null;
+            return this._boundsModel.value;
         },
         enumerable: true,
         configurable: true
     });
+    ResizeAwareComponent.prototype.updateBounds = function () {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    };
+    ResizeAwareComponent.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: NgZone }
+    ]; };
+    ResizeAwareComponent = __decorate([
+        Directive(),
+        __metadata("design:paramtypes", [ElementRef, NgZone])
+    ], ResizeAwareComponent);
+    return ResizeAwareComponent;
+}(DisposableComponent));
+
+/**
+ * @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>
+ *
+ */
+var CardContainerComponent = /** @class */ (function (_super) {
+    __extends(CardContainerComponent, _super);
+    function CardContainerComponent() {
+        return _super.call(this) || this;
+    }
+    CardContainerComponent.prototype.ngOnInit = function () {
+    };
     __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'),
-        __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'),
+        TrackExternal(),
         __metadata("design:type", Command)
-    ], AbstractInputComponent.prototype, "clickCommand", void 0);
+    ], CardContainerComponent.prototype, "addCardCommand", 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([
-        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: '' }),
+        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", [])
-    ], AbstractInputComponent);
-    return AbstractInputComponent;
+    ], CardContainerComponent);
+    return CardContainerComponent;
 }(DisposableComponent));
 
-var CheckboxInputComponent = /** @class */ (function (_super) {
-    __extends(CheckboxInputComponent, _super);
-    function CheckboxInputComponent() {
+var FocusContainerComponent = /** @class */ (function (_super) {
+    __extends(FocusContainerComponent, _super);
+    function FocusContainerComponent(focusManager) {
         var _this = _super.call(this) || this;
-        _this.color = 'accent';
-        _this.labelPosition = 'after';
+        _this.focusManager = focusManager;
+        _this.restoreFocusCommand = Command.create(function () {
+            _this.restoreFocus();
+        });
+        _this.tabIndex = -1;
         return _this;
     }
-    CheckboxInputComponent.prototype.ngOnInit = function () {
+    FocusContainerComponent.prototype.ngOnInit = function () {
+    };
+    // @Trace()
+    FocusContainerComponent.prototype.restoreFocus = function () {
+        this.focusManager.restoreFocus();
     };
+    FocusContainerComponent.ctorParameters = function () { return [
+        { type: FocusManager, decorators: [{ type: Self }] }
+    ]; };
     __decorate([
-        Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+        HostBinding('attr.tabindex'),
         __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([
+    ], FocusContainerComponent.prototype, "tabIndex", void 0);
+    FocusContainerComponent = __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}"]
+            selector: 'aup-focus-container',
+            template: "<ng-content></ng-content>\n",
+            providers: [
+                { provide: FocusManager }
+            ],
+            styles: [":host{display:block}"]
         }),
-        __metadata("design:paramtypes", [])
-    ], CheckboxInputComponent);
-    return CheckboxInputComponent;
-}(AbstractInputComponent));
+        __param(0, Self()),
+        __metadata("design:paramtypes", [FocusManager])
+    ], FocusContainerComponent);
+    return FocusContainerComponent;
+}(DisposableComponent));
 
-var NumberInputComponent = /** @class */ (function (_super) {
-    __extends(NumberInputComponent, _super);
-    function NumberInputComponent() {
-        var _this = _super.call(this) || this;
-        _this.min = Number.MIN_SAFE_INTEGER;
-        _this.max = Number.MAX_SAFE_INTEGER;
+var ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
+var Activity = /** @class */ (function (_super) {
+    __extends(Activity, _super);
+    function Activity() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._busyModel = new DelegatingValueModel().withDefault(false);
+        _this.class = 'aup-activity';
         return _this;
     }
-    NumberInputComponent.prototype.ngOnInit = function () {
+    Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
+        assert$1.isNil(this._activityContext);
+        this._activityContext = activityContext;
+        this._interactionContext = nestedInteractionContext;
+    };
+    Object.defineProperty(Activity.prototype, "interactionContext", {
+        get: function () {
+            assert$1.isTruthy(this.isInitialised());
+            return this._interactionContext;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Activity.prototype.done = function (result) {
+        return this._activityContext.onDone(result);
+    };
+    Activity.prototype.cancel = function (error) {
+        this._activityContext.onCancel(error);
+    };
+    // @Trace()
+    Activity.prototype.onActivityReady = function () {
+    };
+    Object.defineProperty(Activity.prototype, "busy", {
+        get: function () {
+            return this._busyModel.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Activity.prototype.busyWhile = function (busyModel) {
+        this._busyModel.setDelegate(busyModel);
+    };
+    Activity.prototype.isBusy = function () {
+        return this._busyModel.value;
+    };
+    Activity.prototype.isInitialised = function () {
+        return !!this._activityContext;
     };
     __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(),
+        HostBinding('class'),
         __metadata("design:type", Object)
-    ], NumberInputComponent.prototype, "max", void 0);
-    NumberInputComponent = __decorate([
+    ], Activity.prototype, "class", void 0);
+    return Activity;
+}(DisposableComponent));
+
+var AlertDialogComponent = /** @class */ (function (_super) {
+    __extends(AlertDialogComponent, _super);
+    function AlertDialogComponent(alert) {
+        var _this = _super.call(this) || this;
+        _this.alert = alert;
+        return _this;
+    }
+    AlertDialogComponent.prototype.ngOnInit = function () {
+    };
+    AlertDialogComponent.ctorParameters = function () { return [
+        { 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);
-    return NumberInputComponent;
-}(AbstractInputComponent));
+        __param(0, Inject(ACTIVITY_DATA)),
+        __metadata("design:paramtypes", [Object])
+    ], AlertDialogComponent);
+    return AlertDialogComponent;
+}(Activity));
 
-var PasswordInputComponent = /** @class */ (function (_super) {
-    __extends(PasswordInputComponent, _super);
-    function PasswordInputComponent() {
-        return _super.call(this) || this;
+var ConfirmThenDialogComponent = /** @class */ (function (_super) {
+    __extends(ConfirmThenDialogComponent, _super);
+    function ConfirmThenDialogComponent(config) {
+        var _this = _super.call(this) || this;
+        _this.config = config;
+        assert.notNil(config);
+        return _this;
     }
-    PasswordInputComponent.prototype.ngOnInit = function () {
+    ConfirmThenDialogComponent.prototype.ngOnInit = function () {
     };
-    __decorate([
-        Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
-        __metadata("design:type", Object)
-    ], PasswordInputComponent.prototype, "valueModel", void 0);
-    PasswordInputComponent = __decorate([
+    Object.defineProperty(ConfirmThenDialogComponent.prototype, "confirm", {
+        get: function () {
+            return this.config.confirm;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ConfirmThenDialogComponent.prototype.isDestructive = function () {
+        return this.confirm.destructive && this.confirm.destructive();
+    };
+    ConfirmThenDialogComponent.prototype.onConfirm = function () {
+        var _this = this;
+        this.interactionContext.startActivity(this.config.activityType, this.config.data)
+            .then(function (result) { return _this.done(result); })
+            .catch(function (error) { return _this.cancel(error); });
+    };
+    ConfirmThenDialogComponent.ctorParameters = function () { return [
+        { 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);
-    return PasswordInputComponent;
-}(AbstractInputComponent));
+        __param(0, Inject(ACTIVITY_DATA)),
+        __metadata("design:paramtypes", [Object])
+    ], ConfirmThenDialogComponent);
+    return ConfirmThenDialogComponent;
+}(Activity));
 
-var SelectInputComponent = /** @class */ (function (_super) {
-    __extends(SelectInputComponent, _super);
-    function SelectInputComponent() {
+var ConfirmationDialogComponent = /** @class */ (function (_super) {
+    __extends(ConfirmationDialogComponent, _super);
+    function ConfirmationDialogComponent(confirm) {
         var _this = _super.call(this) || this;
-        _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+        _this.confirm = confirm;
+        assert.notNil(confirm);
         return _this;
     }
-    SelectInputComponent.prototype.ngOnInit = function () {
+    ConfirmationDialogComponent.prototype.ngOnInit = function () {
     };
-    __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-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%}"]
-        }),
-        __metadata("design:paramtypes", [])
-    ], SelectInputComponent);
-    return SelectInputComponent;
-}(AbstractInputComponent));
-
-var StringInputComponent = /** @class */ (function (_super) {
-    __extends(StringInputComponent, _super);
-    function StringInputComponent() {
-        var _this = _super.call(this) || this;
-        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        _this.clearCommand = Command.create(function () {
-            _this.valueModel.value = null;
-        });
-        _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
-        return _this;
-    }
-    StringInputComponent.prototype.ngOnInit = function () {
+    ConfirmationDialogComponent.prototype.isDestructive = function () {
+        return this.confirm.destructive && this.confirm.destructive();
     };
-    __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([
+    ConfirmationDialogComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
+    ]; };
+    ConfirmationDialogComponent = __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}"]
+            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", [])
-    ], StringInputComponent);
-    return StringInputComponent;
-}(AbstractInputComponent));
+        __param(0, Inject(ACTIVITY_DATA)),
+        __metadata("design:paramtypes", [Object])
+    ], ConfirmationDialogComponent);
+    return ConfirmationDialogComponent;
+}(Activity));
 
-var TextInputComponent = /** @class */ (function (_super) {
-    __extends(TextInputComponent, _super);
-    function TextInputComponent() {
-        var _this = _super.call(this) || this;
-        _this.rows = 2;
-        return _this;
-        // const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+var AbstractInteractionContext = /** @class */ (function () {
+    function AbstractInteractionContext() {
     }
-    TextInputComponent.prototype.ngOnInit = function () {
+    AbstractInteractionContext.prototype.startActivity = function (activityType, data) {
+        return this.createAndLaunchActivity(activityType, data, false);
     };
-    __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}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
-        }),
-        __metadata("design:paramtypes", [])
-    ], TextInputComponent);
-    return TextInputComponent;
-}(AbstractInputComponent));
-
-var NoopComponent = /** @class */ (function () {
-    function NoopComponent() {
-    }
-    NoopComponent = __decorate([
-        Component({
-            selector: 'aup-noop',
-            template: "",
-            styles: [":host{display:block}"]
-        }),
-        __metadata("design:paramtypes", [])
-    ], NoopComponent);
-    return NoopComponent;
+    AbstractInteractionContext.prototype.confirm = function (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(function () { return true; }).catch(function () { return false; });
+    };
+    AbstractInteractionContext.prototype.alert = function (alert) {
+        // TODO: Test disableClose === false
+        return this.createAndLaunchActivity(AlertDialogComponent, alert, false);
+    };
+    AbstractInteractionContext.prototype.confirmOrReject = function (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.
+     */
+    AbstractInteractionContext.prototype.confirmThen = function (confirm, activityType, data) {
+        return this.createAndLaunchActivity(ConfirmThenDialogComponent, {
+            confirm: confirm,
+            activityType: activityType,
+            data: data
+        }, true);
+    };
+    return AbstractInteractionContext;
 }());
 
-var ScrollContainerComponent = /** @class */ (function () {
-    function ScrollContainerComponent() {
+var ActivityRef = /** @class */ (function () {
+    function ActivityRef(activityClass, activityData, onComplete) {
+        this.activityClass = activityClass;
+        this.activityData = activityData;
+        this.onComplete = onComplete;
+        this._complete = false;
+        this.deferredResult = Deferred.defer();
     }
-    ScrollContainerComponent.prototype.ngOnInit = function () {
+    ActivityRef.prototype.isActivityRealised = function () {
+        return !!this._activity;
     };
-    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);
-    return ScrollContainerComponent;
+    ActivityRef.prototype.isComplete = function () {
+        return this._complete;
+    };
+    Object.defineProperty(ActivityRef.prototype, "activity", {
+        get: function () {
+            assert.isTruthy(this.isActivityRealised());
+            return this._activity;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ActivityRef.prototype.notifyActivityCreated = function (activity, nestedInteractionContext) {
+        assert.isNil(this._activity);
+        this._activity = activity;
+        var self = this;
+        this._activity.initialise(nestedInteractionContext, {
+            onDone: function (result) {
+                self.finishActivity(function (deferred) { return deferred.resolve(result); });
+            },
+            onCancel: function (error) {
+                self.finishActivity(function (deferred) { return deferred.reject(error); });
+            }
+        });
+    };
+    ActivityRef.prototype.finishActivity = function (resolveOrReject) {
+        assert.isFalsey(this.isComplete());
+        resolveOrReject(this.deferredResult);
+        this._complete = true;
+        this.onComplete(this);
+    };
+    ActivityRef.prototype.cancel = function () {
+        this.activity.cancel();
+    };
+    Object.defineProperty(ActivityRef.prototype, "activityResult", {
+        get: function () {
+            return this.deferredResult.promise;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ActivityRef;
 }());
 
-var SwitchCaseOption = /** @class */ (function () {
-    function SwitchCaseOption(templateRef) {
-        this.templateRef = templateRef;
+/**
+ * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
+ * external service.
+ */
+var ActivityOutletComponent = /** @class */ (function () {
+    function ActivityOutletComponent(componentFactoryResolver, viewContainerRef, injector) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
     }
-    Object.defineProperty(SwitchCaseOption.prototype, "name", {
+    Object.defineProperty(ActivityOutletComponent.prototype, "activityRef", {
         get: function () {
-            return this.constructor.name;
+            return this._activityRef;
+        },
+        set: function (activityRef) {
+            if (this.activityRef && !this.activityRef.isComplete()) {
+                lang$1.illegalState("changing activity before previous one has completed");
+            }
+            this._activityRef = activityRef;
+            this.loadActivity(activityRef);
         },
         enumerable: true,
         configurable: true
     });
-    return SwitchCaseOption;
-}());
-var SwitchCaseWhenDirective = /** @class */ (function (_super) {
-    __extends(SwitchCaseWhenDirective, _super);
-    function SwitchCaseWhenDirective(templateRef) {
-        var _this = _super.call(this, templateRef) || this;
-        _this.isDefault = false;
-        return _this;
-    }
-    SwitchCaseWhenDirective_1 = SwitchCaseWhenDirective;
-    SwitchCaseWhenDirective.prototype.matches = function (value) {
-        return this.aupSwitchCaseWhen === value;
+    ;
+    ActivityOutletComponent.prototype.ngOnInit = function () {
     };
-    var SwitchCaseWhenDirective_1;
-    SwitchCaseWhenDirective.ctorParameters = function () { return [
-        { type: TemplateRef }
+    ActivityOutletComponent.prototype.loadActivity = function (activityRef) {
+        var injector = Injector.create({
+            providers: [
+                { provide: ACTIVITY_DATA, useValue: activityRef.activityData }
+            ],
+            parent: this.injector
+        });
+        var 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);
+    };
+    Object.defineProperty(ActivityOutletComponent.prototype, "component", {
+        get: function () {
+            return this.activityComponentRef.instance;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ActivityOutletComponent.ctorParameters = function () { return [
+        { type: ComponentFactoryResolver },
+        { type: ViewContainerRef },
+        { type: Injector }
     ]; };
     __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);
-    return SwitchCaseWhenDirective;
-}(SwitchCaseOption));
-var SwitchCaseDefaultDirective = /** @class */ (function (_super) {
-    __extends(SwitchCaseDefaultDirective, _super);
-    function SwitchCaseDefaultDirective(templateRef) {
-        var _this = _super.call(this, templateRef) || this;
-        _this.isDefault = true;
-        return _this;
-    }
-    SwitchCaseDefaultDirective_1 = SwitchCaseDefaultDirective;
-    SwitchCaseDefaultDirective.prototype.matches = function (value) {
-        return false;
-    };
-    var SwitchCaseDefaultDirective_1;
-    SwitchCaseDefaultDirective.ctorParameters = function () { return [
-        { type: TemplateRef }
-    ]; };
-    SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
-        Directive({
-            selector: '[aupSwitchCaseDefault]',
-            providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
+    ], ActivityOutletComponent.prototype, "nestedInteractionContext", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", ActivityRef),
+        __metadata("design:paramtypes", [ActivityRef])
+    ], ActivityOutletComponent.prototype, "activityRef", null);
+    ActivityOutletComponent = __decorate([
+        Component({
+            selector: 'aup-activity-outlet',
+            template: '',
+            styles: [":host{display:block}"]
         }),
-        __metadata("design:paramtypes", [TemplateRef])
-    ], SwitchCaseDefaultDirective);
-    return SwitchCaseDefaultDirective;
-}(SwitchCaseOption));
-var SwitchCaseComponent = /** @class */ (function (_super) {
-    __extends(SwitchCaseComponent, _super);
-    function SwitchCaseComponent(cdr) {
+        __metadata("design:paramtypes", [ComponentFactoryResolver,
+            ViewContainerRef,
+            Injector])
+    ], ActivityOutletComponent);
+    return ActivityOutletComponent;
+}());
+
+var ActivityContainerComponent = /** @class */ (function (_super) {
+    __extends(ActivityContainerComponent, _super);
+    function ActivityContainerComponent() {
         var _this = _super.call(this) || this;
-        _this.cdr = cdr;
-        _this.selectedIndex = 0;
+        _this.dynamicHeight = false;
+        _this.activityTabs = [];
+        _this.garbage = new GarbageCollector();
         return _this;
     }
-    SwitchCaseComponent.prototype.ngOnInit = function () {
+    ActivityContainerComponent.prototype.ngOnInit = function () {
     };
-    SwitchCaseComponent.prototype.ngAfterContentInit = function () {
+    ActivityContainerComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
-        var subscription = this.switchCaseOptions.changes.subscribe(function (change) { return _this.updateSelection(); });
-        this.onDispose(function () { return subscription.unsubscribe(); });
-        var _a = Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
-        when.valueOf(this.switchModel).changes(function () { return _this.updateSelection(); }, { initialValue: 'triggerChange' });
-        this.cdr.detectChanges();
+        var _a = Dsl.disposeWith(this), chain = _a.chain, observe = _a.observe;
+        // using the component directly rather than (animationDone)=.. allows us
+        // to keep our callback private.
+        observe.valuesFrom(this.tabs.animationDone).subscribe(function () { return _this.onAnimationFinished(); });
     };
-    SwitchCaseComponent.prototype.updateSelection = function () {
+    ActivityContainerComponent.prototype.initialise = function (identifier, api) {
+        assert.isFalsey(this.isInitialised());
+        assert.notNil(identifier);
+        assert.notNil(api);
+        this._identifier = identifier;
+        this.interactionServiceApi = api;
+    };
+    Object.defineProperty(ActivityContainerComponent.prototype, "identifier", {
+        get: function () {
+            return this._identifier;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ActivityContainerComponent.prototype.isInitialised = function () {
+        return !!this.identifier;
+    };
+    /**
+     * Returns true if an activity is currently running.
+     */
+    ActivityContainerComponent.prototype.isActive = function () {
+        return this.getActiveActivityCount() > 0;
+    };
+    ActivityContainerComponent.prototype.registerDisposable = function (disposable) {
+        return this.garbage.registerDisposable(disposable);
+    };
+    ActivityContainerComponent.prototype.dispose = function () {
+        // TODO: think about auto cancelling any outstanding activity on dispose.
+        //       See NavigationState.Navigating for a use-case.
+        assert.isFalsey(this.isActive());
+        this.garbage.dispose();
+    };
+    ActivityContainerComponent.prototype.getActiveActivityRef = function () {
+        if (!this.isActive()) {
+            lang$1.illegalState('no activity in progress');
+        }
+        return ___default.findLast(this.activityTabs, function (tab) { return !tab.isComplete(); });
+    };
+    /**
+     * Cancels the current activity and returns true the context is no longer active, false if
+     * there is still another activity running.
+     */
+    // @Trace()
+    ActivityContainerComponent.prototype.cancelActiveActivity = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var activity;
+            return __generator(this, function (_a) {
+                activity = this.getActiveActivityRef();
+                activity.cancel();
+                if (this.isCleaningUp()) {
+                    return [2 /*return*/, this.waitForInteractionContextCleanupToFinish()];
+                }
+                else {
+                    return [2 /*return*/, !this.isActive()];
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    // TODO: this handling of multiple nested activities is only used by the activity component and is not a general case.
+    // @Trace()
+    ActivityContainerComponent.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
         var _this = this;
-        var matchingIndicies = [];
-        this.switchCaseOptions.forEach(function (option, index) {
-            if (option.matches(_this.switchModel.value)) {
-                matchingIndicies.push(index);
+        assert.isTruthy(this.isInitialised()); // make sure we've been initialised
+        var activityRef = new ActivityRef(activityType, data, function () {
+            var 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(function (option, index) {
-                matchingIndicies.push(index);
+        return activityRef.activityResult;
+    };
+    ActivityContainerComponent.prototype.getActiveActivityCount = function () {
+        return this.activityTabs.filter(function (ref) { return !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.
+     */
+    ActivityContainerComponent.prototype.isCleaningUp = function () {
+        return !!this._deferredCleanUp;
+    };
+    ActivityContainerComponent.prototype.waitForInteractionContextCleanupToFinish = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this._deferredCleanUp ?
+                        this._deferredCleanUp :
+                        true];
+            });
+        });
+    };
+    // @Trace()
+    ActivityContainerComponent.prototype.finishAndStartCleanup = function () {
+        var _this = this;
+        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 = [];
+            var promise = this.interactionServiceApi.notifyFinished(this);
+            this._deferredCleanUp = promise
+                .finally(function () {
+                _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()
+    ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
+        var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+        this.activityTabs = cleanedTabs.concat(activityRef);
+        this.synchroniseSelectedTabIndex();
+    };
+    ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
+        return index;
+    };
+    ;
+    ActivityContainerComponent.prototype.onAnimationFinished = function () {
+        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.
+     */
+    ActivityContainerComponent.prototype.synchroniseSelectedTabIndex = function () {
+        var _this = this;
+        var previousIndex = this.tabs.selectedIndex;
+        var newIndex = this.getActiveActivityCount() - 1;
+        if (previousIndex !== newIndex) {
+            this.tabs.selectedIndex = newIndex;
+            this.onAnimationFinishedJob = function () {
+                _this.getSelectedOutlet().component.onActivityReady();
+                _this.activityTabs = _this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+            };
         }
     };
-    SwitchCaseComponent.ctorParameters = function () { return [
-        { type: ChangeDetectorRef }
-    ]; };
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], SwitchCaseComponent.prototype, "switchModel", void 0);
-    __decorate([
-        Input(), StoreInValueModel('switchModel'),
-        __metadata("design:type", Object)
-    ], SwitchCaseComponent.prototype, "switch", void 0);
-    __decorate([
-        ContentChildren(SwitchCaseOption),
-        __metadata("design:type", QueryList)
-    ], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
-    SwitchCaseComponent = __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}"]
-        }),
-        __metadata("design:paramtypes", [ChangeDetectorRef])
-    ], SwitchCaseComponent);
-    return SwitchCaseComponent;
-}(DisposableComponent));
-
-var VerticalFocusContainerComponent = /** @class */ (function (_super) {
-    __extends(VerticalFocusContainerComponent, _super);
-    function VerticalFocusContainerComponent(focusManager) {
-        var _this = _super.call(this, focusManager) || this;
-        _this.focusManager = focusManager;
-        return _this;
-    }
-    VerticalFocusContainerComponent.prototype.arrowLeft = function (event) {
-        if (this.leftArrowCommand.enabled.value) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.leftArrowCommand.execute();
-        }
+    ActivityContainerComponent.prototype.getSelectedOutlet = function () {
+        return this.activityOutlets.toArray()[this.tabs.selectedIndex];
     };
-    VerticalFocusContainerComponent.prototype.arrowRight = function (event) {
-        if (this.rightArrowCommand.enabled.value) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.rightArrowCommand.execute();
+    // @Trace()
+    ActivityContainerComponent.prototype.triggerTabSynchronisation = function () {
+        var _this = this;
+        if (this.syncSelectedTabTimeout) {
+            clearTimeout(this.syncSelectedTabTimeout);
         }
+        this.syncSelectedTabTimeout = setTimeout(function () {
+            _this.syncSelectedTabTimeout = null;
+            _this.synchroniseSelectedTabIndex();
+        }, 75);
     };
-    VerticalFocusContainerComponent.prototype.arrowDown = function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.focusManager.focusNext();
-    };
-    VerticalFocusContainerComponent.prototype.arrowUp = function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.focusManager.focusPrevious();
-    };
-    VerticalFocusContainerComponent.prototype.ngOnInit = function () {
-    };
-    VerticalFocusContainerComponent.ctorParameters = function () { return [
-        { type: FocusManager, decorators: [{ type: Self }] }
-    ]; };
-    __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);
+        Input(),
+        __metadata("design:type", Object)
+    ], ActivityContainerComponent.prototype, "dynamicHeight", void 0);
     __decorate([
-        HostListener('keyup.arrowRight', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [KeyboardEvent]),
-        __metadata("design:returntype", void 0)
-    ], VerticalFocusContainerComponent.prototype, "arrowRight", null);
+        ViewChild('tabs', { static: true }),
+        __metadata("design:type", MatTabGroup)
+    ], ActivityContainerComponent.prototype, "tabs", void 0);
     __decorate([
-        HostListener('keyup.arrowDown', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [KeyboardEvent]),
-        __metadata("design:returntype", void 0)
-    ], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+        ViewChildren(ActivityOutletComponent),
+        __metadata("design:type", QueryList)
+    ], ActivityContainerComponent.prototype, "activityOutlets", void 0);
     __decorate([
-        HostListener('keyup.arrowUp', ['$event']),
+        Trace(),
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [KeyboardEvent]),
+        __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
-    ], VerticalFocusContainerComponent.prototype, "arrowUp", null);
-    VerticalFocusContainerComponent = __decorate([
+    ], ActivityContainerComponent.prototype, "dispose", null);
+    ActivityContainerComponent = __decorate([
         Component({
-            selector: 'aup-vertical-focus-container',
-            template: "<ng-content></ng-content>\n",
-            providers: [
-                { provide: FocusManager }
-            ],
-            styles: [":host{display:block}"]
+            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}"]
         }),
-        __param(0, Self()),
-        __metadata("design:paramtypes", [FocusManager])
-    ], VerticalFocusContainerComponent);
-    return VerticalFocusContainerComponent;
-}(FocusContainerComponent));
+        __metadata("design:paramtypes", [])
+    ], ActivityContainerComponent);
+    return ActivityContainerComponent;
+}(AbstractInteractionContext));
 
-/**
- * @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>
- *
- */
-var CardContainerComponent = /** @class */ (function (_super) {
-    __extends(CardContainerComponent, _super);
-    function CardContainerComponent() {
-        return _super.call(this) || this;
+var AddItemInteractionContextComponent = /** @class */ (function (_super) {
+    __extends(AddItemInteractionContextComponent, _super);
+    function AddItemInteractionContextComponent() {
+        var _this = _super.call(this) || this;
+        _this.tabindex = 0;
+        _this.clickCommand = Command.create(function (context) {
+            if (_this.activityClass) {
+                _this.startActivity(_this.activityClass, _this.activityData).catch(function (e) {
+                    //  don't care.
+                });
+            }
+            else {
+                _this.addCommand.withContext(context).execute();
+            }
+        });
+        return _this;
     }
-    CardContainerComponent.prototype.ngOnInit = function () {
+    Object.defineProperty(AddItemInteractionContextComponent.prototype, "active", {
+        get: function () {
+            return this.interactionContext ? this.interactionContext.isActive() : false;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AddItemInteractionContextComponent.prototype.startActivity = function (activityType, data) {
+        return this.interactionContext.startActivity(activityType, data);
+    };
+    AddItemInteractionContextComponent.prototype.ngOnInit = function () {
     };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], AddItemInteractionContextComponent.prototype, "label", void 0);
+    __decorate([
+        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)
-    ], CardContainerComponent.prototype, "addCardCommand", void 0);
+    ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
     __decorate([
-        ContentChild("addCardTemplate"),
-        __metadata("design:type", TemplateRef)
-    ], CardContainerComponent.prototype, "addCardTemplate", void 0);
-    CardContainerComponent = __decorate([
+        ViewChild(InPlaceInteractionContextComponent),
+        __metadata("design:type", InPlaceInteractionContextComponent)
+    ], AddItemInteractionContextComponent.prototype, "interactionContext", void 0);
+    __decorate([
+        HostBinding('class.interaction-active'),
+        __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([
         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-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", [])
-    ], CardContainerComponent);
-    return CardContainerComponent;
+    ], AddItemInteractionContextComponent);
+    return AddItemInteractionContextComponent;
 }(DisposableComponent));
 
-var ComponentsModule = /** @class */ (function () {
-    function ComponentsModule() {
+var InteractionServiceRoutingAdapter = /** @class */ (function () {
+    function InteractionServiceRoutingAdapter(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
+        this.activeInteractionContextIds = activeInteractionContextIds;
+        this.activeModalContext = activeModalContext;
+        this.createExclusiveInteractionContext = createExclusiveInteractionContext;
     }
-    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);
-    return ComponentsModule;
+    InteractionServiceRoutingAdapter.prototype.isActive = function () {
+        return this.getActiveInteractionContextIds().length > 0;
+    };
+    InteractionServiceRoutingAdapter.prototype.isModalActive = function () {
+        return !!this.activeModalContext.value;
+    };
+    // @Trace()
+    InteractionServiceRoutingAdapter.prototype.isComponentInteracting = function (component) {
+        return component.interactionContext && component.interactionContext.isActive();
+    };
+    InteractionServiceRoutingAdapter.prototype.getActiveInteractionContextIds = function () {
+        return this.activeInteractionContextIds.value;
+    };
+    // @Trace()
+    InteractionServiceRoutingAdapter.prototype.cancelCurrentModalInteraction = function () {
+        return this.activeModalContext.value.cancelActiveActivity();
+    };
+    // @Trace()
+    InteractionServiceRoutingAdapter.prototype.cancelComponentInteraction = function (component) {
+        return component.interactionContext.cancelActiveActivity();
+    };
+    return InteractionServiceRoutingAdapter;
 }());
 
-var Dimension = /** @class */ (function () {
-    function Dimension(width, height) {
-        this.width = width;
-        this.height = height;
+var ModalInteractionContextFactory = /** @class */ (function () {
+    function ModalInteractionContextFactory() {
     }
-    return Dimension;
+    return ModalInteractionContextFactory;
 }());
 
-var Point = /** @class */ (function () {
-    function Point(x, y) {
-        this.x = x;
-        this.y = y;
+var inplaceMonitorCount = 0;
+var InteractionService = /** @class */ (function () {
+    function InteractionService(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);
+        var _a = Dsl.disposeWith(this.garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        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();
     }
-    Point.from = function (data) {
-        return new Point(data.x, data.y);
+    InteractionService_1 = InteractionService;
+    InteractionService.prototype.isActive = function () {
+        return this.active.value;
     };
-    Point.prototype.translate = function (x, y) {
-        return new Point(this.x + x, this.y + y);
+    /**
+     * @deprecated use #createModalInteractionContextDisposedWith instead.
+     * @param disposable
+     */
+    InteractionService.prototype.createModalInteractionContextFor = function (disposable) {
+        return this.createModalInteractionContextDisposedWith(disposable);
     };
-    return Point;
+    /**
+     * Creates a new model interaction context that will be disposed along with the component.
+     * @param disposable
+     */
+    InteractionService.prototype.createModalInteractionContextDisposedWith = function (disposable) {
+        // TODO: look at making the registry the factory..
+        return this.modelInteractionContextFactory.createInteractionContext('modal', new InteractionService_1.ApiAdapter(this.placeRouter, this.modalInteractionRegistry));
+    };
+    InteractionService.prototype.registerInplaceInteractionContext = function (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.
+     */
+    InteractionService.prototype.registerPlaceRouter = function (router) {
+        var _this = this;
+        assert$1.isFalsey(this.placeRouter);
+        this.placeRouter = router;
+        this._navigationInProgress.setDelegate(this.placeRouter.navigationInProgress);
+        var self = this;
+        return new InteractionServiceRoutingAdapter(this.activeInteractionContextIds, this.activeModalContext, function () {
+            return self.modelInteractionContextFactory.createInteractionContext('exclusive', new InteractionService_1.ApiAdapter(_this.placeRouter, _this.exclusiveInteractionRegistry));
+        });
+    };
+    var InteractionService_1;
+    InteractionService.ctorParameters = function () { return [
+        { 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);
+    return InteractionService;
 }());
-
-var Bounds = /** @class */ (function (_super) {
-    __extends(Bounds, _super);
-    function Bounds(top, left, width, height) {
-        var _this = _super.call(this, width, height) || this;
-        _this.top = top;
-        _this.left = left;
-        _this.width = width;
-        _this.height = height;
-        return _this;
-    }
-    Bounds.prototype.relativePositionOf = function (point) {
-        if (point instanceof MouseEvent) {
-            return new Point(point.clientX - this.left, point.clientY - this.top);
+(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.
+     */
+    var ContextRegistry = /** @class */ (function (_super) {
+        __extends(ContextRegistry, _super);
+        function ContextRegistry() {
+            var _this = _super.call(this) || this;
+            _this._interactions = new MutableListModel();
+            _this._disabledDelegate = new DelegatingValueModel().withDefault(false);
+            var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.active = chain(_this._interactions).isNotEmpty();
+            _this.interactionContextIds = chain(_this._interactions).pluck("identifier");
+            return _this;
         }
-        else {
-            return new Point(point.x - this.left, point.y - this.top);
+        Object.defineProperty(ContextRegistry.prototype, "interactionContexts", {
+            get: function () {
+                return this._interactions.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ContextRegistry.prototype.start = function (context) {
+            this._interactions.push(context);
+        };
+        ContextRegistry.prototype.finish = function (context) {
+            this._interactions.remove(context);
+        };
+        ContextRegistry.prototype.isActive = function () {
+            return this.active.value;
+        };
+        ContextRegistry.prototype.disableWhen = function (disabled) {
+            this._disabledDelegate.setDelegate(disabled);
+        };
+        return ContextRegistry;
+    }(GarbageCollector));
+    InteractionService.ContextRegistry = ContextRegistry;
+    var ApiAdapter = /** @class */ (function () {
+        function ApiAdapter(placeRouter, contextRegistry) {
+            this.placeRouter = placeRouter;
+            this.contextRegistry = contextRegistry;
         }
-    };
-    return Bounds;
-}(Dimension));
-(function (Bounds) {
-    function ofElement(element) {
-        var rect = element.getBoundingClientRect();
-        return new Bounds(rect.top, rect.left, rect.width, rect.height);
-    }
-    Bounds.ofElement = ofElement;
-})(Bounds || (Bounds = {}));
+        // @Trace()
+        ApiAdapter.prototype.notifyActive = function (context) {
+            assert$1.isTruthy(context.identifier);
+            this.contextRegistry.start(context);
+            return this.isNavigationInProgress() ? Promise.resolve() : this.placeRouter.syncInteractionContextIdsWithRouter();
+        };
+        // @Trace()
+        ApiAdapter.prototype.isNavigationInProgress = function () {
+            return this.placeRouter.navigationInProgress.value;
+        };
+        // @Trace()
+        ApiAdapter.prototype.notifyFinished = function (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();
+        };
+        return ApiAdapter;
+    }());
+    InteractionService.ApiAdapter = ApiAdapter;
+})(InteractionService || (InteractionService = {}));
 
-var ResizeAwareComponent = /** @class */ (function (_super) {
-    __extends(ResizeAwareComponent, _super);
-    function ResizeAwareComponent(elementRef, ngZone) {
+var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
+    __extends(InPlaceInteractionContextComponent, _super);
+    function InPlaceInteractionContextComponent(interactionService, tabConfig) {
         var _this = _super.call(this) || this;
-        _this.elementRef = elementRef;
-        _this.ngZone = ngZone;
-        _this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+        _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;
         return _this;
     }
-    ResizeAwareComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        this.updateBounds();
-        var element = this.elementRef.nativeElement;
-        var ro = new ResizeObserver(function (entries, observer) {
-            _this.ngZone.run(function () { return _this.updateBounds(); });
-        });
-        ro.observe(element);
-        this.onDispose(function () { return ro.disconnect(); });
-    };
-    Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
+    Object.defineProperty(InPlaceInteractionContextComponent.prototype, "animationDuration", {
         get: function () {
-            return this._boundsModel.readonly;
+            var _a;
+            return this.animateFirstActivity ? (((_a = this.tabConfig) === null || _a === void 0 ? void 0 : _a.animationDuration) || '500ms') : "0ms";
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
+    InPlaceInteractionContextComponent.prototype.ngAfterViewInit = function () {
+        this.interactionService.registerInplaceInteractionContext(this);
+    };
+    InPlaceInteractionContextComponent.prototype.initialise = function (id, api) {
+        this.activityContainerComponent.initialise(id, api);
+    };
+    Object.defineProperty(InPlaceInteractionContextComponent.prototype, "identifier", {
         get: function () {
-            return this.elementRef.nativeElement;
+            return this.activityContainerComponent.identifier;
         },
         enumerable: true,
         configurable: true
     });
-    // TODO: Make this handle body scroll
-    ResizeAwareComponent.prototype.relativePositionOf = function (point) {
-        return this.bounds.relativePositionOf(point);
+    InPlaceInteractionContextComponent.prototype.alert = function (alert) {
+        return this.activityContainerComponent.alert(alert);
     };
-    Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
-        get: function () {
-            return this._boundsModel.value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ResizeAwareComponent.prototype.updateBounds = function () {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    InPlaceInteractionContextComponent.prototype.cancelActiveActivity = function () {
+        return this.activityContainerComponent.cancelActiveActivity();
     };
-    ResizeAwareComponent.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: NgZone }
+    InPlaceInteractionContextComponent.prototype.confirm = function (confirm) {
+        return this.activityContainerComponent.confirm(confirm);
+    };
+    InPlaceInteractionContextComponent.prototype.confirmOrReject = function (confirm) {
+        return this.activityContainerComponent.confirmOrReject(confirm);
+    };
+    InPlaceInteractionContextComponent.prototype.confirmThen = function (confirm, activityType, data) {
+        return this.activityContainerComponent.confirmThen(confirm, activityType);
+    };
+    InPlaceInteractionContextComponent.prototype.isActive = function () {
+        return this.activityContainerComponent.isActive();
+    };
+    InPlaceInteractionContextComponent.prototype.startActivity = function (activityType, data) {
+        return this.activityContainerComponent.startActivity(activityType, data);
+    };
+    InPlaceInteractionContextComponent.ctorParameters = function () { return [
+        { type: InteractionService },
+        { type: undefined, decorators: [{ type: Inject, args: [MAT_TABS_CONFIG,] }, { type: Optional }] }
     ]; };
-    ResizeAwareComponent = __decorate([
-        Directive(),
-        __metadata("design:paramtypes", [ElementRef, NgZone])
-    ], ResizeAwareComponent);
-    return ResizeAwareComponent;
+    __decorate([
+        ViewChild('activityContainer', { static: true }),
+        __metadata("design:type", ActivityContainerComponent)
+    ], InPlaceInteractionContextComponent.prototype, "activityContainerComponent", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], InPlaceInteractionContextComponent.prototype, "animateFirstActivity", void 0);
+    InPlaceInteractionContextComponent = __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}"]
+        }),
+        __param(1, Inject(MAT_TABS_CONFIG)), __param(1, Optional()),
+        __metadata("design:paramtypes", [InteractionService, Object])
+    ], InPlaceInteractionContextComponent);
+    return InPlaceInteractionContextComponent;
 }(DisposableComponent));
 
-/**
- * @file Automatically generated by barrelsby.
- */
-
-var ActivityActionsComponent = /** @class */ (function (_super) {
-    __extends(ActivityActionsComponent, _super);
-    function ActivityActionsComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.align = 'start';
+var PopupInteractionContextComponent = /** @class */ (function (_super) {
+    __extends(PopupInteractionContextComponent, _super);
+    function PopupInteractionContextComponent(_element, _overlay) {
+        var _this = _super.call(this) || this;
+        _this._element = _element;
+        _this._overlay = _overlay;
+        _this.outputPortal = new ComponentPortal(InPlaceInteractionContextComponent);
+        _this.anchorX = 'start';
+        _this.anchorY = 'bottom';
         return _this;
     }
-    Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
+    Object.defineProperty(PopupInteractionContextComponent.prototype, "active", {
         get: function () {
-            return this.align === 'end';
+            return this.isActive();
         },
         enumerable: true,
         configurable: true
     });
-    ActivityActionsComponent.prototype.ngOnInit = function () {
+    PopupInteractionContextComponent.prototype.startActivity = function (activityType, data) {
+        var _this = this;
+        var overlayRef = this._overlay.create({
+            hasBackdrop: false,
+            panelClass: 'aup-popup-interaction-panel',
+            positionStrategy: this._overlay.position()
+                .flexibleConnectedTo(this._element)
+                .withPositions(this.computePositions())
+                .withGrowAfterOpen(true)
+        });
+        var componentRef = overlayRef.attach(this.outputPortal);
+        this.interactionContext = componentRef.instance;
+        return new Promise(function (resolve, reject) {
+            // HACK: afterViewInit won't have been called yet.  Need to add when.valueOf(interactionContext.ready).becomesTruthy(...)
+            setTimeout(function () {
+                _this.interactionContext.startActivity(activityType, data)
+                    .then(resolve)
+                    .catch(reject)
+                    .finally(function () { return overlayRef.dispose(); });
+            });
+        });
     };
-    ActivityActionsComponent.prototype.hasConfirmText = function () {
-        return !___default.isEmpty(this.confirmText);
+    PopupInteractionContextComponent.prototype.computePositions = function () {
+        var overlayX = this.anchorX === 'start' ? 'start' : 'end';
+        var 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' }
+        ];
     };
+    PopupInteractionContextComponent.prototype.cancelActiveActivity = function () {
+        return this.interactionContext.cancelActiveActivity();
+    };
+    PopupInteractionContextComponent.prototype.isActive = function () {
+        return this.interactionContext && this.interactionContext.isActive();
+    };
+    PopupInteractionContextComponent.prototype.ngOnInit = function () {
+    };
+    PopupInteractionContextComponent.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: Overlay }
+    ]; };
     __decorate([
-        Input(),
-        TrackExternal(),
-        __metadata("design:type", Command)
-    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+        HostBinding('class.interaction-active'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], PopupInteractionContextComponent.prototype, "active", null);
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], ActivityActionsComponent.prototype, "confirmText", void 0);
-    __decorate([
-        Input(),
-        TrackExternal(),
-        __metadata("design:type", Command)
-    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    ], PopupInteractionContextComponent.prototype, "anchorX", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], ActivityActionsComponent.prototype, "align", void 0);
-    __decorate([
-        HostBinding('class.align-end'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ActivityActionsComponent.prototype, "alignEnd", null);
-    ActivityActionsComponent = __decorate([
+    ], PopupInteractionContextComponent.prototype, "anchorY", void 0);
+    PopupInteractionContextComponent = __decorate([
         Component({
-            selector: 'aup-activity-actions',
-            template: "<button mat-icon-button [pectinCommand]=\"cancelCommand\"><mat-icon>clear</mat-icon></button>\n<button *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\"><mat-icon>done</mat-icon></button>\n<button *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n",
-            styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}:host.align-end{justify-content:flex-end}"]
-        })
-    ], ActivityActionsComponent);
-    return ActivityActionsComponent;
+            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);
+    return PopupInteractionContextComponent;
 }(DisposableComponent));
 
-var ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
-var Activity = /** @class */ (function (_super) {
-    __extends(Activity, _super);
-    function Activity() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._busyModel = new DelegatingValueModel().withDefault(false);
+var InteractionContextTriggerFor = /** @class */ (function (_super) {
+    __extends(InteractionContextTriggerFor, _super);
+    function InteractionContextTriggerFor() {
+        var _this = _super.call(this) || this;
+        _this.activityDone = new EventEmitter();
+        _this.activityCancelled = new EventEmitter();
         return _this;
     }
-    Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
-        assert$1.isNil(this._activityContext);
-        this._activityContext = activityContext;
-        this._interactionContext = nestedInteractionContext;
-    };
-    Object.defineProperty(Activity.prototype, "interactionContext", {
-        get: function () {
-            assert$1.isTruthy(this.isInitialised());
-            return this._interactionContext;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Activity.prototype.done = function (result) {
-        return this._activityContext.onDone(result);
-    };
-    Activity.prototype.cancel = function (error) {
-        this._activityContext.onCancel(error);
-    };
-    // @Trace()
-    Activity.prototype.onActivityReady = function () {
-    };
-    Object.defineProperty(Activity.prototype, "busy", {
-        get: function () {
-            return this._busyModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Activity.prototype.busyWhile = function (busyModel) {
-        this._busyModel.setDelegate(busyModel);
+    InteractionContextTriggerFor.prototype.onEnter = function (event) {
+        if (!this.aupInteractionContextTriggerFor.isActive()) {
+            this.startActivity();
+        }
+        else {
+            this.aupInteractionContextTriggerFor.cancelActiveActivity();
+        }
     };
-    Activity.prototype.isBusy = function () {
-        return this._busyModel.value;
+    InteractionContextTriggerFor.prototype.onClick = function (event) {
+        if (!this.aupInteractionContextTriggerFor.isActive()) {
+            this.startActivity();
+        }
+        else {
+            this.aupInteractionContextTriggerFor.cancelActiveActivity();
+        }
     };
-    Activity.prototype.isInitialised = function () {
-        return !!this._activityContext;
+    InteractionContextTriggerFor.prototype.startActivity = function () {
+        var _this = this;
+        assert.isTruthy(this.aupInteractionContextTriggerFor);
+        assert.isFalsey(this.aupInteractionContextTriggerFor.isActive());
+        assert.isTruthy(this.activityClass);
+        this.aupInteractionContextTriggerFor.startActivity(this.activityClass, this.activityData)
+            .then(function (result) {
+            _this.activityDone.emit(result);
+        })
+            .catch(function (error) {
+            _this.activityCancelled.emit(error);
+        });
     };
-    return Activity;
-}(DisposableComponent));
-
-var AlertDialogComponent = /** @class */ (function (_super) {
-    __extends(AlertDialogComponent, _super);
-    function AlertDialogComponent(alert) {
-        var _this = _super.call(this) || this;
-        _this.alert = alert;
-        return _this;
-    }
-    AlertDialogComponent.prototype.ngOnInit = function () {
+    InteractionContextTriggerFor.prototype.prepareActivityData = function () {
+        return ___default.isFunction(this.activityDataFactory()) ? this.activityDataFactory() : this.activityData;
     };
-    AlertDialogComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
-    ]; };
-    AlertDialogComponent = __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}"]
+    __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]'
         }),
-        __param(0, Inject(ACTIVITY_DATA)),
-        __metadata("design:paramtypes", [Object])
-    ], AlertDialogComponent);
-    return AlertDialogComponent;
-}(Activity));
+        __metadata("design:paramtypes", [])
+    ], InteractionContextTriggerFor);
+    return InteractionContextTriggerFor;
+}(GarbageCollector));
 
-var ConfirmThenDialogComponent = /** @class */ (function (_super) {
-    __extends(ConfirmThenDialogComponent, _super);
-    function ConfirmThenDialogComponent(config) {
+var DialogInteractionContext = /** @class */ (function (_super) {
+    __extends(DialogInteractionContext, _super);
+    function DialogInteractionContext(identifier, api, dialogService, config) {
         var _this = _super.call(this) || this;
+        _this.identifier = identifier;
+        _this.api = api;
+        _this.dialogService = dialogService;
         _this.config = config;
-        assert.notNil(config);
+        _this.garbage = new GarbageCollector();
+        assert$1.notNil(dialogService);
         return _this;
     }
-    ConfirmThenDialogComponent.prototype.ngOnInit = function () {
+    DialogInteractionContext.prototype.cancelActiveActivity = function () {
+        return this.activityContainer.cancelActiveActivity();
     };
-    Object.defineProperty(ConfirmThenDialogComponent.prototype, "confirm", {
-        get: function () {
-            return this.config.confirm;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ConfirmThenDialogComponent.prototype.isDestructive = function () {
-        return this.confirm.destructive && this.confirm.destructive();
+    DialogInteractionContext.prototype.dispose = function () {
+        if (this.isActive()) {
+            lang.illegalState('Dispose called while active.');
+        }
+        this.garbage.dispose();
     };
-    ConfirmThenDialogComponent.prototype.onConfirm = function () {
-        var _this = this;
-        this.interactionContext.startActivity(this.config.activityType, this.config.data)
-            .then(function (result) { return _this.done(result); })
-            .catch(function (error) { return _this.cancel(error); });
+    DialogInteractionContext.prototype.registerDisposable = function (disposable) {
+        return this.garbage.registerDisposable(disposable);
     };
-    ConfirmThenDialogComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
-    ]; };
-    ConfirmThenDialogComponent = __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}"]
-        }),
-        __param(0, Inject(ACTIVITY_DATA)),
-        __metadata("design:paramtypes", [Object])
-    ], ConfirmThenDialogComponent);
-    return ConfirmThenDialogComponent;
-}(Activity));
+    DialogInteractionContext.prototype.isActive = function () {
+        return !!this.activityContainer && this.activityContainer.isActive();
+    };
+    DialogInteractionContext.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
+        var _this = this;
+        assert$1.isNil(this._currentActivityRef);
+        var config = __assign(__assign({}, this.config), {
+            disableClose: disableClose,
+            panelClass: 'dialog-interaction-context'
+        });
+        var self = this;
+        var matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
+        var activityContainer = this.activityContainer = matDialogRef.componentInstance;
+        this.activityContainer.initialise(this.identifier, this.api);
+        var activityResult = this.activityContainer.startActivity(activityType, data);
+        activityResult.finally(function () { return 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(function (promiseAlreadyFinished) {
+            if (activityContainer.isActive()) {
+                activityContainer.cancelActiveActivity();
+            }
+            _this.activityContainer = null;
+        });
+        matDialogRef.updateSize();
+        matDialogRef.afterOpened().subscribe(function (promiseAlreadyFinished) {
+            matDialogRef.updateSize();
+        });
+        return activityResult;
+    };
+    return DialogInteractionContext;
+}(AbstractInteractionContext));
 
-var ConfirmationDialogComponent = /** @class */ (function (_super) {
-    __extends(ConfirmationDialogComponent, _super);
-    function ConfirmationDialogComponent(confirm) {
+var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
+var DialogInteractionContextFactory = /** @class */ (function (_super) {
+    __extends(DialogInteractionContextFactory, _super);
+    function DialogInteractionContextFactory(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
         var _this = _super.call(this) || this;
-        _this.confirm = confirm;
-        assert.notNil(confirm);
+        _this.dialogService = dialogService;
+        _this.dialogServiceDefaults = dialogServiceDefaults;
+        _this.matDialogDefaultConfig = matDialogDefaultConfig;
+        assert$1.notNil(dialogService);
         return _this;
     }
-    ConfirmationDialogComponent.prototype.ngOnInit = function () {
+    DialogInteractionContextFactory.prototype.createInteractionContext = function (identifier, api) {
+        var config = __assign(__assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
+        return new DialogInteractionContext(identifier, api, this.dialogService, config);
     };
-    ConfirmationDialogComponent.prototype.isDestructive = function () {
-        return this.confirm.destructive && this.confirm.destructive();
+    DialogInteractionContextFactory.ctorParameters = function () { return [
+        { 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,] }] }
+    ]; };
+    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);
+    return DialogInteractionContextFactory;
+}(ModalInteractionContextFactory));
+
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+var AbstractInputActivity = /** @class */ (function (_super) {
+    __extends(AbstractInputActivity, _super);
+    function AbstractInputActivity(data) {
+        var _this = _super.call(this) || this;
+        _this.data = data;
+        _this.class = 'aup-input-activity';
+        var form = new Form();
+        _this.valueModel = form.valueModel(_this.data.initialValue);
+        _this.valueModel.validateUsing(data.validators || []);
+        _this.confirmCommand = Command.create(function () {
+            if (_this.valueModel.validate()) {
+                if (data.save) {
+                    return Promise.resolve(data.save(_this.valueModel, _this.interactionContext))
+                        .then(function () { return _this.done(); });
+                }
+                else {
+                    _this.done(_this.valueModel.value);
+                }
+            }
+        });
+        _this.cancelCommand = Command.create(function () {
+            _this.cancel();
+        });
+        return _this;
+    }
+    AbstractInputActivity.prototype.onActivityReady = function () {
+        this.valueModel.focusContext.requestFocus();
     };
-    ConfirmationDialogComponent.ctorParameters = function () { return [
+    AbstractInputActivity.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: Inject, args: [ACTIVITY_DATA,] }] }
     ]; };
-    ConfirmationDialogComponent = __decorate([
+    __decorate([
+        HostBinding('class'),
+        __metadata("design:type", Object)
+    ], AbstractInputActivity.prototype, "class", void 0);
+    AbstractInputActivity = __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}"]
+            template: ""
         }),
         __param(0, Inject(ACTIVITY_DATA)),
         __metadata("design:paramtypes", [Object])
-    ], ConfirmationDialogComponent);
-    return ConfirmationDialogComponent;
+    ], AbstractInputActivity);
+    return AbstractInputActivity;
 }(Activity));
 
-var AbstractInteractionContext = /** @class */ (function () {
-    function AbstractInteractionContext() {
+var AbstractInputComponent = /** @class */ (function (_super) {
+    __extends(AbstractInputComponent, _super);
+    function AbstractInputComponent() {
+        var _this = _super.call(this) || this;
+        /**
+         * 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';
+        var self = _this;
+        _this.errorStateMatcher = {
+            isErrorState: function (control, form) {
+                return self.hasErrors();
+            }
+        };
+        return _this;
     }
-    AbstractInteractionContext.prototype.startActivity = function (activityType, data) {
-        return this.createAndLaunchActivity(activityType, data, false);
+    AbstractInputComponent.prototype.notifyClick = function () {
+        this.safelyInvoke(this.clickCommand);
     };
-    AbstractInteractionContext.prototype.confirm = function (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(function () { return true; }).catch(function () { return false; });
+    AbstractInputComponent.prototype.notifyFocusIn = function () {
+        this.safelyInvoke(this.focusCommand);
+        this.focus.emit();
     };
-    AbstractInteractionContext.prototype.alert = function (alert) {
-        // TODO: Test disableClose === false
-        return this.createAndLaunchActivity(AlertDialogComponent, alert, false);
+    AbstractInputComponent.prototype.notifyFocusOut = function () {
+        this.safelyInvoke(this.blurCommand);
+        this.blur.emit();
     };
-    AbstractInteractionContext.prototype.confirmOrReject = function (confirm) {
-        return this.createAndLaunchActivity(ConfirmationDialogComponent, confirm, true);
+    AbstractInputComponent.prototype.notifyEnterKey = function () {
+        this.safelyInvoke(this.enterCommand);
+        this.enterKey.emit();
     };
-    /**
-     * 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.
-     */
-    AbstractInteractionContext.prototype.confirmThen = function (confirm, activityType, data) {
-        return this.createAndLaunchActivity(ConfirmThenDialogComponent, {
-            confirm: confirm,
-            activityType: activityType,
-            data: data
-        }, true);
+    AbstractInputComponent.prototype.notifyEscapeKey = function () {
+        this.safelyInvoke(this.escapeCommand);
+        this.escapeKey.emit();
     };
-    return AbstractInteractionContext;
-}());
-
-var ActivityRef = /** @class */ (function () {
-    function ActivityRef(activityClass, activityData, onComplete) {
-        this.activityClass = activityClass;
-        this.activityData = activityData;
-        this.onComplete = onComplete;
-        this._complete = false;
-        this.deferredResult = Deferred.defer();
-    }
-    ActivityRef.prototype.isActivityRealised = function () {
-        return !!this._activity;
+    AbstractInputComponent.prototype.safelyInvoke = function (command) {
+        if (command && command.enabled.value) {
+            command.execute();
+        }
     };
-    ActivityRef.prototype.isComplete = function () {
-        return this._complete;
+    AbstractInputComponent.prototype.ngOnInit = function () {
     };
-    Object.defineProperty(ActivityRef.prototype, "activity", {
+    AbstractInputComponent.prototype.isEnabled = function () {
+        return this.enabled.value;
+    };
+    Object.defineProperty(AbstractInputComponent.prototype, "enabled", {
         get: function () {
-            assert.isTruthy(this.isActivityRealised());
-            return this._activity;
+            return this.delegatingFormValueModel.enabled;
         },
         enumerable: true,
         configurable: true
     });
-    ActivityRef.prototype.notifyActivityCreated = function (activity, nestedInteractionContext) {
-        assert.isNil(this._activity);
-        this._activity = activity;
-        var self = this;
-        this._activity.initialise(nestedInteractionContext, {
-            onDone: function (result) {
-                self.finishActivity(function (deferred) { return deferred.resolve(result); });
-            },
-            onCancel: function (error) {
-                self.finishActivity(function (deferred) { return deferred.reject(error); });
-            }
-        });
-    };
-    ActivityRef.prototype.finishActivity = function (resolveOrReject) {
-        assert.isFalsey(this.isComplete());
-        resolveOrReject(this.deferredResult);
-        this._complete = true;
-        this.onComplete(this);
-    };
-    ActivityRef.prototype.cancel = function () {
-        this.activity.cancel();
+    AbstractInputComponent.prototype.hasErrors = function () {
+        return !this.errorList.query().isEmpty();
     };
-    Object.defineProperty(ActivityRef.prototype, "activityResult", {
+    Object.defineProperty(AbstractInputComponent.prototype, "errorList", {
         get: function () {
-            return this.deferredResult.promise;
+            return this.delegatingFormValueModel.errorList;
         },
         enumerable: true,
         configurable: true
     });
-    return ActivityRef;
-}());
-
-/**
- * ActivityOutletComponent creates and displays an activity and delegates the interaction context functionality to an
- * external service.
- */
-var ActivityOutletComponent = /** @class */ (function () {
-    function ActivityOutletComponent(componentFactoryResolver, viewContainerRef, injector) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.viewContainerRef = viewContainerRef;
-        this.injector = injector;
-    }
-    Object.defineProperty(ActivityOutletComponent.prototype, "activityRef", {
+    Object.defineProperty(AbstractInputComponent.prototype, "firstError", {
         get: function () {
-            return this._activityRef;
-        },
-        set: function (activityRef) {
-            if (this.activityRef && !this.activityRef.isComplete()) {
-                lang$1.illegalState("changing activity before previous one has completed");
-            }
-            this._activityRef = activityRef;
-            this.loadActivity(activityRef);
+            return this.hasErrors() ? this.errorList.value[0] : null;
         },
         enumerable: true,
         configurable: true
     });
-    ;
-    ActivityOutletComponent.prototype.ngOnInit = function () {
-    };
-    ActivityOutletComponent.prototype.loadActivity = function (activityRef) {
-        var injector = Injector.create({
-            providers: [
-                { provide: ACTIVITY_DATA, useValue: activityRef.activityData }
-            ],
-            parent: this.injector
+    __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'),
+        __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", [])
+    ], AbstractInputComponent);
+    return AbstractInputComponent;
+}(DisposableComponent));
+
+var CheckboxInputComponent = /** @class */ (function (_super) {
+    __extends(CheckboxInputComponent, _super);
+    function CheckboxInputComponent() {
+        var _this = _super.call(this) || this;
+        _this.color = 'accent';
+        _this.labelPosition = 'after';
+        return _this;
+    }
+    CheckboxInputComponent.prototype.ngOnInit = function () {
+    };
+    __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);
+    return CheckboxInputComponent;
+}(AbstractInputComponent));
+
+var NumberInputComponent = /** @class */ (function (_super) {
+    __extends(NumberInputComponent, _super);
+    function NumberInputComponent() {
+        var _this = _super.call(this) || this;
+        _this.min = Number.MIN_SAFE_INTEGER;
+        _this.max = Number.MAX_SAFE_INTEGER;
+        return _this;
+    }
+    NumberInputComponent.prototype.ngOnInit = function () {
+    };
+    __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-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}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], NumberInputComponent);
+    return NumberInputComponent;
+}(AbstractInputComponent));
+
+var PasswordInputComponent = /** @class */ (function (_super) {
+    __extends(PasswordInputComponent, _super);
+    function PasswordInputComponent() {
+        return _super.call(this) || this;
+    }
+    PasswordInputComponent.prototype.ngOnInit = function () {
+    };
+    __decorate([
+        Input(), TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+        __metadata("design:type", Object)
+    ], PasswordInputComponent.prototype, "valueModel", void 0);
+    PasswordInputComponent = __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}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], PasswordInputComponent);
+    return PasswordInputComponent;
+}(AbstractInputComponent));
+
+var SelectInputComponent = /** @class */ (function (_super) {
+    __extends(SelectInputComponent, _super);
+    function SelectInputComponent() {
+        var _this = _super.call(this) || this;
+        _this.optionLabelFormat = function (option) { return (option && _this.optionLabel) ? option[_this.optionLabel] : option; };
+        return _this;
+    }
+    SelectInputComponent.prototype.ngOnInit = function () {
+    };
+    __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-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%}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], SelectInputComponent);
+    return SelectInputComponent;
+}(AbstractInputComponent));
+
+var StringInputActivity = /** @class */ (function (_super) {
+    __extends(StringInputActivity, _super);
+    function StringInputActivity() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    StringInputActivity = __decorate([
+        Component({
+            selector: 'aup-string-input-activity',
+            template: "\n    <aup-string-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"></aup-string-input>\n    <aup-activity-actions align=\"end\"\n                          [confirmCommand]=\"confirmCommand\"\n                          [cancelCommand]=\"cancelCommand\"></aup-activity-actions>\n  "
+        })
+    ], StringInputActivity);
+    return StringInputActivity;
+}(AbstractInputActivity));
+
+var StringInputComponent = /** @class */ (function (_super) {
+    __extends(StringInputComponent, _super);
+    function StringInputComponent() {
+        var _this = _super.call(this) || this;
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        _this.clearCommand = Command.create(function () {
+            _this.valueModel.value = null;
         });
-        var 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());
+        return _this;
+    }
+    StringInputComponent.prototype.ngOnInit = function () {
     };
-    Object.defineProperty(ActivityOutletComponent.prototype, "component", {
-        get: function () {
-            return this.activityComponentRef.instance;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ActivityOutletComponent.ctorParameters = function () { return [
-        { type: ComponentFactoryResolver },
-        { type: ViewContainerRef },
-        { type: Injector }
-    ]; };
+    __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}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], StringInputComponent);
+    return StringInputComponent;
+}(AbstractInputComponent));
+
+var TextInputComponent = /** @class */ (function (_super) {
+    __extends(TextInputComponent, _super);
+    function TextInputComponent() {
+        var _this = _super.call(this) || this;
+        _this.rows = 2;
+        return _this;
+        // const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+    }
+    TextInputComponent.prototype.ngOnInit = function () {
+    };
+    __decorate([
+        Input(), TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+        __metadata("design:type", Object)
+    ], TextInputComponent.prototype, "valueModel", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], ActivityOutletComponent.prototype, "nestedInteractionContext", void 0);
+    ], TextInputComponent.prototype, "rows", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", ActivityRef),
-        __metadata("design:paramtypes", [ActivityRef])
-    ], ActivityOutletComponent.prototype, "activityRef", null);
-    ActivityOutletComponent = __decorate([
+        __metadata("design:type", Number)
+    ], TextInputComponent.prototype, "cols", void 0);
+    TextInputComponent = __decorate([
         Component({
-            selector: 'aup-activity-outlet',
-            template: '',
+            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);
+    return TextInputComponent;
+}(AbstractInputComponent));
+
+var NoopComponent = /** @class */ (function () {
+    function NoopComponent() {
+    }
+    NoopComponent = __decorate([
+        Component({
+            selector: 'aup-noop',
+            template: "",
             styles: [":host{display:block}"]
         }),
-        __metadata("design:paramtypes", [ComponentFactoryResolver,
-            ViewContainerRef,
-            Injector])
-    ], ActivityOutletComponent);
-    return ActivityOutletComponent;
+        __metadata("design:paramtypes", [])
+    ], NoopComponent);
+    return NoopComponent;
+}());
+
+var ScrollContainerComponent = /** @class */ (function () {
+    function ScrollContainerComponent() {
+    }
+    ScrollContainerComponent.prototype.ngOnInit = function () {
+    };
+    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);
+    return ScrollContainerComponent;
 }());
 
-var ActivityContainerComponent = /** @class */ (function (_super) {
-    __extends(ActivityContainerComponent, _super);
-    function ActivityContainerComponent() {
-        var _this = _super.call(this) || this;
-        _this.dynamicHeight = false;
-        _this.activityTabs = [];
-        _this.garbage = new GarbageCollector();
-        return _this;
+var SwitchCaseOption = /** @class */ (function () {
+    function SwitchCaseOption(templateRef) {
+        this.templateRef = templateRef;
     }
-    ActivityContainerComponent.prototype.ngOnInit = function () {
-    };
-    ActivityContainerComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        var _a = Dsl.disposeWith(this), chain = _a.chain, observe = _a.observe;
-        observe.valuesFrom(this.tabs.animationDone).subscribe(function () { return _this.onAnimationFinished(); });
-    };
-    ActivityContainerComponent.prototype.initialise = function (identifier, api) {
-        assert.isFalsey(this.isInitialised());
-        assert.notNil(identifier);
-        assert.notNil(api);
-        this._identifier = identifier;
-        this.interactionServiceApi = api;
-    };
-    Object.defineProperty(ActivityContainerComponent.prototype, "identifier", {
+    Object.defineProperty(SwitchCaseOption.prototype, "name", {
         get: function () {
-            return this._identifier;
+            return this.constructor.name;
         },
         enumerable: true,
         configurable: true
     });
-    ActivityContainerComponent.prototype.isInitialised = function () {
-        return !!this.identifier;
-    };
-    /**
-     * Returns true if an activity is currently running.
-     */
-    ActivityContainerComponent.prototype.isActive = function () {
-        return this.getActiveActivityCount() > 0;
-    };
-    ActivityContainerComponent.prototype.registerDisposable = function (disposable) {
-        return this.garbage.registerDisposable(disposable);
+    return SwitchCaseOption;
+}());
+var SwitchCaseWhenDirective = /** @class */ (function (_super) {
+    __extends(SwitchCaseWhenDirective, _super);
+    function SwitchCaseWhenDirective(templateRef) {
+        var _this = _super.call(this, templateRef) || this;
+        _this.isDefault = false;
+        return _this;
+    }
+    SwitchCaseWhenDirective_1 = SwitchCaseWhenDirective;
+    SwitchCaseWhenDirective.prototype.matches = function (value) {
+        return this.aupSwitchCaseWhen === value;
     };
-    ActivityContainerComponent.prototype.dispose = function () {
-        // TODO: think about auto cancelling any outstanding activity on dispose.
-        //       See NavigationState.Navigating for a use-case.
-        assert.isFalsey(this.isActive());
-        this.garbage.dispose();
+    var SwitchCaseWhenDirective_1;
+    SwitchCaseWhenDirective.ctorParameters = function () { return [
+        { 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);
+    return SwitchCaseWhenDirective;
+}(SwitchCaseOption));
+var SwitchCaseDefaultDirective = /** @class */ (function (_super) {
+    __extends(SwitchCaseDefaultDirective, _super);
+    function SwitchCaseDefaultDirective(templateRef) {
+        var _this = _super.call(this, templateRef) || this;
+        _this.isDefault = true;
+        return _this;
+    }
+    SwitchCaseDefaultDirective_1 = SwitchCaseDefaultDirective;
+    SwitchCaseDefaultDirective.prototype.matches = function (value) {
+        return false;
     };
-    ActivityContainerComponent.prototype.getActiveActivityRef = function () {
-        if (!this.isActive()) {
-            lang$1.illegalState('no activity in progress');
-        }
-        return ___default.findLast(this.activityTabs, function (tab) { return !tab.isComplete(); });
+    var SwitchCaseDefaultDirective_1;
+    SwitchCaseDefaultDirective.ctorParameters = function () { return [
+        { type: TemplateRef }
+    ]; };
+    SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
+        Directive({
+            selector: '[aupSwitchCaseDefault]',
+            providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
+        }),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], SwitchCaseDefaultDirective);
+    return SwitchCaseDefaultDirective;
+}(SwitchCaseOption));
+var SwitchCaseComponent = /** @class */ (function (_super) {
+    __extends(SwitchCaseComponent, _super);
+    function SwitchCaseComponent(cdr) {
+        var _this = _super.call(this) || this;
+        _this.cdr = cdr;
+        _this.selectedIndex = 0;
+        return _this;
+    }
+    SwitchCaseComponent.prototype.ngOnInit = function () {
     };
-    /**
-     * Cancels the current activity and returns true the context is no longer active, false if
-     * there is still another activity running.
-     */
-    // @Trace()
-    ActivityContainerComponent.prototype.cancelActiveActivity = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var activity;
-            return __generator(this, function (_a) {
-                activity = this.getActiveActivityRef();
-                activity.cancel();
-                if (this.isCleaningUp()) {
-                    return [2 /*return*/, this.waitForInteractionContextCleanupToFinish()];
-                }
-                else {
-                    return [2 /*return*/, !this.isActive()];
-                }
-                return [2 /*return*/];
-            });
-        });
+    SwitchCaseComponent.prototype.ngAfterContentInit = function () {
+        var _this = this;
+        var subscription = this.switchCaseOptions.changes.subscribe(function (change) { return _this.updateSelection(); });
+        this.onDispose(function () { return subscription.unsubscribe(); });
+        var _a = Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
+        when.valueOf(this.switchModel).changes(function () { return _this.updateSelection(); }, { initialValue: 'triggerChange' });
+        this.cdr.detectChanges();
     };
-    // TODO: this handling of multiple nested activities is only used by the activity component and is not a general case.
-    // @Trace()
-    ActivityContainerComponent.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
+    SwitchCaseComponent.prototype.updateSelection = function () {
         var _this = this;
-        assert.isTruthy(this.isInitialised()); // make sure we've been initialised
-        var activityRef = new ActivityRef(activityType, data, function () {
-            var activeActivityCount = _this.getActiveActivityCount() > 0;
-            if (activeActivityCount) {
-                _this.triggerTabSynchronisation();
-            }
-            else {
-                _this.finishAndStartCleanup();
+        var matchingIndicies = [];
+        this.switchCaseOptions.forEach(function (option, index) {
+            if (option.matches(_this.switchModel.value)) {
+                matchingIndicies.push(index);
             }
         });
-        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 > 1) {
+            console.warn("found " + matchingIndicies.length + " matching case values, displaying the first.");
         }
-        return activityRef.activityResult;
-    };
-    ActivityContainerComponent.prototype.getActiveActivityCount = function () {
-        return this.activityTabs.filter(function (ref) { return !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.
-     */
-    ActivityContainerComponent.prototype.isCleaningUp = function () {
-        return !!this._deferredCleanUp;
-    };
-    ActivityContainerComponent.prototype.waitForInteractionContextCleanupToFinish = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, this._deferredCleanUp ?
-                        this._deferredCleanUp :
-                        true];
-            });
-        });
-    };
-    // @Trace()
-    ActivityContainerComponent.prototype.finishAndStartCleanup = function () {
-        var _this = this;
-        if (!this._deferredCleanUp) {
-            var promise = this.interactionServiceApi.notifyFinished(this);
-            this._deferredCleanUp = promise
-                .finally(function () {
-                _this._deferredCleanUp = null;
+        if (matchingIndicies.length === 0) {
+            this.switchCaseOptions.forEach(function (option, index) {
+                matchingIndicies.push(index);
             });
+            if (matchingIndicies.length > 1) {
+                console.warn("found " + matchingIndicies.length + " default case values, displaying the first.");
+            }
         }
-    };
-    // @Trace()
-    ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
-        var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
-        this.activityTabs = cleanedTabs.concat(activityRef);
-        this.tabs.selectedIndex = this.activityTabs.length;
-    };
-    ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
-        return index;
-    };
-    ;
-    // @Trace()
-    ActivityContainerComponent.prototype.onAnimationFinished = function () {
-        this.getSelectedOutlet().component.onActivityReady();
-        this.activityTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
-    };
-    /**
-     * Synchronises the selected tab index.  Returns true if there was no change to the selected index.
-     */
-    // @Trace()
-    ActivityContainerComponent.prototype.synchroniseSelectedTabIndex = function () {
-        var previousIndex = this.tabs.selectedIndex;
-        var newIndex = this.getActiveActivityCount() - 1;
-        this.tabs.selectedIndex = newIndex;
-        return previousIndex === newIndex;
-    };
-    ActivityContainerComponent.prototype.getSelectedOutlet = function () {
-        return this.activityOutlets.toArray()[this.tabs.selectedIndex];
-    };
-    // @Trace()
-    ActivityContainerComponent.prototype.triggerTabSynchronisation = function () {
-        var _this = this;
-        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(function () {
-            _this.syncSelectedTabTimeout = null;
-            _this.synchroniseSelectedTabIndex();
-        }, 75);
     };
+    SwitchCaseComponent.ctorParameters = function () { return [
+        { 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);
+    ], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
+    SwitchCaseComponent = __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}"]
+        }),
+        __metadata("design:paramtypes", [ChangeDetectorRef])
+    ], SwitchCaseComponent);
+    return SwitchCaseComponent;
+}(DisposableComponent));
+
+var DefaultCellRendererComponent = /** @class */ (function () {
+    function DefaultCellRendererComponent() {
+    }
+    Object.defineProperty(DefaultCellRendererComponent.prototype, "value", {
+        get: function () {
+            return this._value;
+        },
+        set: function (value) {
+            this._value = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], ActivityContainerComponent.prototype, "dispose", null);
-    ActivityContainerComponent = __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], DefaultCellRendererComponent.prototype, "value", null);
+    DefaultCellRendererComponent = __decorate([
         Component({
-            selector: 'aup-activity-container',
-            template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"dynamicHeight\" [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-default-cell-renderer',
+            template: "{{value}}\n",
+            styles: [""]
         }),
         __metadata("design:paramtypes", [])
-    ], ActivityContainerComponent);
-    return ActivityContainerComponent;
-}(AbstractInteractionContext));
+    ], DefaultCellRendererComponent);
+    return DefaultCellRendererComponent;
+}());
 
-var InteractionServiceRoutingAdapter = /** @class */ (function () {
-    function InteractionServiceRoutingAdapter(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
-        this.activeInteractionContextIds = activeInteractionContextIds;
-        this.activeModalContext = activeModalContext;
-        this.createExclusiveInteractionContext = createExclusiveInteractionContext;
+var DefaultHeaderCellRendererComponent = /** @class */ (function () {
+    function DefaultHeaderCellRendererComponent() {
     }
-    InteractionServiceRoutingAdapter.prototype.isActive = function () {
-        return this.getActiveInteractionContextIds().length > 0;
+    __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);
+    return DefaultHeaderCellRendererComponent;
+}());
+
+// 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
+ * });
+ */
+var TableModel = /** @class */ (function () {
+    function TableModel(sourceOfTruth) {
+        this.sourceOfTruth = sourceOfTruth;
+        this._garbage = new GarbageCollector();
+        this._columns = new MutableListModel();
+        this._editorSessions = new MutableListModel();
+        this.identityOf = sourceOfTruth.identityOf;
+        var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        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);
+    }
+    TableModel_1 = TableModel;
+    TableModel.fromList = function (sourceOfTruth, builder) {
+        var model = new TableModel_1(sourceOfTruth);
+        builder(model);
+        return model;
     };
-    InteractionServiceRoutingAdapter.prototype.isModalActive = function () {
-        return !!this.activeModalContext.value;
+    Object.defineProperty(TableModel.prototype, "rowsBeingEdited", {
+        get: function () {
+            return this._rowsBeingEdited.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TableModel.prototype.getTrackByFunction = function () {
+        var _this = this;
+        return function (index, item) {
+            return _this.identityOf ? _this.identityOf(item) : index;
+        };
     };
-    // @Trace()
-    InteractionServiceRoutingAdapter.prototype.isComponentInteracting = function (component) {
-        return component.interactionContext && component.interactionContext.isActive();
+    Object.defineProperty(TableModel.prototype, "columns", {
+        get: function () {
+            return this._columns.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TableModel.prototype.pluck = function (property) {
+        return this.addColumn(new PropertyColumnModel(property, this));
     };
-    InteractionServiceRoutingAdapter.prototype.getActiveInteractionContextIds = function () {
-        return this.activeInteractionContextIds.value;
+    TableModel.prototype.addSelectionColumn = function (selectionModel) {
+        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
     };
-    // @Trace()
-    InteractionServiceRoutingAdapter.prototype.cancelCurrentModalInteraction = function () {
-        return this.activeModalContext.value.cancelActiveActivity();
+    TableModel.prototype.addEditControls = function (saveCommand) {
+        this.saveCommand = saveCommand;
+        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
     };
-    // @Trace()
-    InteractionServiceRoutingAdapter.prototype.cancelComponentInteraction = function (component) {
-        return component.interactionContext.cancelActiveActivity();
+    TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
+        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
     };
-    return InteractionServiceRoutingAdapter;
-}());
-
-var ModalInteractionContextFactory = /** @class */ (function () {
-    function ModalInteractionContextFactory() {
-    }
-    return ModalInteractionContextFactory;
-}());
-
-var inplaceMonitorCount = 0;
-var InteractionService = /** @class */ (function () {
-    function InteractionService(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);
-        var _a = Dsl.disposeWith(this.garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        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();
-    }
-    InteractionService_1 = InteractionService;
-    InteractionService.prototype.isActive = function () {
-        return this.active.value;
+    TableModel.prototype.addColumn = function (column) {
+        if (this._columnsById.get(column.columnId)) {
+            lang.illegalState("Column with id=" + column.columnId + " already exists");
+        }
+        else {
+            this._columns.push(column);
+        }
+        return column;
     };
-    /**
-     * @deprecated use #createModalInteractionContextDisposedWith instead.
-     * @param disposable
-     */
-    InteractionService.prototype.createModalInteractionContextFor = function (disposable) {
-        return this.createModalInteractionContextDisposedWith(disposable);
+    TableModel.prototype.columnTextProperties = function (columnTextProperties) {
+        this._columnTextPropertiesLookup = columnTextProperties;
     };
-    /**
-     * Creates a new model interaction context that will be disposed along with the component.
-     * @param disposable
-     */
-    InteractionService.prototype.createModalInteractionContextDisposedWith = function (disposable) {
-        // TODO: look at making the registry the factory..
-        return this.modelInteractionContextFactory.createInteractionContext('modal', new InteractionService_1.ApiAdapter(this.placeRouter, this.modalInteractionRegistry));
+    TableModel.prototype.getColumnTextProperties = function (column) {
+        var factory = this._columnTextPropertiesLookup[column.columnId];
+        return factory ? factory() : undefined;
     };
-    InteractionService.prototype.registerInplaceInteractionContext = function (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));
+    TableModel.prototype.startEditSession = function (row) {
+        var _this = this;
+        var rowId = this.identityOf(row);
+        if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+            return lang.illegalState("Row with id=" + rowId + " already being edited");
+        }
+        else {
+            var editSession_1 = new TableModel_1.EditSession(rowId, row, this.saveCommand);
+            var when = Dsl.disposeWith(editSession_1).when;
+            when.valueOf(editSession_1.rowValueModel).changes(function (editedValue) {
+                _this._rowsBeingEdited.replaceOrPush(editedValue);
+            }, { initialValue: 'triggerChangeUnlessNil' });
+            this._editorSessions.push(editSession_1);
+            editSession_1.onDispose(function () {
+                _this._rowsBeingEdited.remove(editSession_1.rowValueModel.value);
+                _this._editorSessions.remove(editSession_1);
+            });
+            return editSession_1;
+        }
     };
-    /**
-     * 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.
-     */
-    InteractionService.prototype.registerPlaceRouter = function (router) {
+    TableModel.prototype.getEditSessionFor = function (row) {
+        return this._editorSessionByRowId.get(this.identityOf(row));
+    };
+    TableModel.prototype.cancelAllEditorSessions = function () {
         var _this = this;
-        assert$1.isFalsey(this.placeRouter);
-        this.placeRouter = router;
-        this._navigationInProgress.setDelegate(this.placeRouter.navigationInProgress);
-        var self = this;
-        return new InteractionServiceRoutingAdapter(this.activeInteractionContextIds, this.activeModalContext, function () {
-            return self.modelInteractionContextFactory.createInteractionContext('exclusive', new InteractionService_1.ApiAdapter(_this.placeRouter, _this.exclusiveInteractionRegistry));
+        this._editorSessions.runInTransaction(function (draft) {
+            _this._rowsBeingEdited.runInTransaction(function () {
+                draft.value.forEach(function (session) { return session.dispose(); });
+            });
         });
     };
-    var InteractionService_1;
-    InteractionService.ctorParameters = function () { return [
-        { 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);
-    return 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.
-     */
-    var ContextRegistry = /** @class */ (function (_super) {
-        __extends(ContextRegistry, _super);
-        function ContextRegistry() {
-            var _this = _super.call(this) || this;
-            _this._interactions = new MutableListModel();
-            _this._disabledDelegate = new DelegatingValueModel().withDefault(false);
-            var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.active = chain(_this._interactions).isNotEmpty();
-            _this.interactionContextIds = chain(_this._interactions).pluck("identifier");
-            return _this;
-        }
-        Object.defineProperty(ContextRegistry.prototype, "interactionContexts", {
-            get: function () {
-                return this._interactions.readonly;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ContextRegistry.prototype.start = function (context) {
-            this._interactions.push(context);
-        };
-        ContextRegistry.prototype.finish = function (context) {
-            this._interactions.remove(context);
-        };
-        ContextRegistry.prototype.isActive = function () {
-            return this.active.value;
-        };
-        ContextRegistry.prototype.disableWhen = function (disabled) {
-            this._disabledDelegate.setDelegate(disabled);
-        };
-        return ContextRegistry;
-    }(GarbageCollector));
-    InteractionService.ContextRegistry = ContextRegistry;
-    var ApiAdapter = /** @class */ (function () {
-        function ApiAdapter(placeRouter, contextRegistry) {
-            this.placeRouter = placeRouter;
-            this.contextRegistry = contextRegistry;
-        }
-        // @Trace()
-        ApiAdapter.prototype.notifyActive = function (context) {
-            assert$1.isTruthy(context.identifier);
-            this.contextRegistry.start(context);
-            return this.isNavigationInProgress() ? Promise.resolve() : this.placeRouter.syncInteractionContextIdsWithRouter();
-        };
-        // @Trace()
-        ApiAdapter.prototype.isNavigationInProgress = function () {
-            return this.placeRouter.navigationInProgress.value;
-        };
-        // @Trace()
-        ApiAdapter.prototype.notifyFinished = function (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();
-        };
-        return ApiAdapter;
-    }());
-    InteractionService.ApiAdapter = ApiAdapter;
-})(InteractionService || (InteractionService = {}));
+    var TableModel_1;
+    TableModel.ctorParameters = function () { return [
+        { type: ListModel }
+    ]; };
+    TableModel = TableModel_1 = __decorate([
+        TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
+        __metadata("design:paramtypes", [ListModel])
+    ], TableModel);
+    return TableModel;
+}());
+(function (TableModel) {
+    var EditSession = /** @class */ (function (_super) {
+        __extends(EditSession, _super);
+        function EditSession(rowId, row, saveCommand) {
+            var _this = _super.call(this) || this;
+            _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(function () {
+                _this._editorValue.value = produce(_this._editorValue.value, function (draft) {
+                    _this.form.writeDirtyStateTo(draft);
+                });
+            });
+            return _this;
+        }
+        return EditSession;
+    }(GarbageCollector));
+    TableModel.EditSession = EditSession;
+})(TableModel || (TableModel = {}));
 
-var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
-    __extends(InPlaceInteractionContextComponent, _super);
-    function InPlaceInteractionContextComponent(interactionService, tabConfig) {
+var EditRowControls = /** @class */ (function (_super) {
+    __extends(EditRowControls, _super);
+    function EditRowControls() {
         var _this = _super.call(this) || this;
-        _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(function () {
+            _this.editSession.saveCommand.execute(_this.editSession.form)
+                .then(function (finished) {
+                if (finished) {
+                    _this.editSession.dispose();
+                }
+            });
+        });
+        _this.cancelCommand = Command.create(function () {
+            _this.editSession.dispose();
+        });
         return _this;
     }
-    Object.defineProperty(InPlaceInteractionContextComponent.prototype, "animationDuration", {
+    EditRowControls.prototype.ngOnInit = function () {
+    };
+    Object.defineProperty(EditRowControls.prototype, "form", {
         get: function () {
             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;
         },
         enumerable: true,
         configurable: true
     });
-    InPlaceInteractionContextComponent.prototype.ngAfterViewInit = function () {
-        this.interactionService.registerInplaceInteractionContext(this);
-    };
-    InPlaceInteractionContextComponent.prototype.initialise = function (id, api) {
-        this.activityContainerComponent.initialise(id, api);
-    };
-    Object.defineProperty(InPlaceInteractionContextComponent.prototype, "identifier", {
+    __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);
+    return EditRowControls;
+}(DisposableComponent));
+
+var SelectCellRendererComponent = /** @class */ (function (_super) {
+    __extends(SelectCellRendererComponent, _super);
+    function SelectCellRendererComponent() {
+        var _this = _super.call(this) || this;
+        _this.selectCommand = Command.create(function () {
+            _this.selectionModel.selectCommand.execute(_this.row);
+        });
+        return _this;
+    }
+    Object.defineProperty(SelectCellRendererComponent.prototype, "row", {
         get: function () {
-            return this.activityContainerComponent.identifier;
+            return this._row;
+        },
+        set: function (value) {
+            this._row = value;
         },
         enumerable: true,
         configurable: true
     });
-    InPlaceInteractionContextComponent.prototype.alert = function (alert) {
-        return this.activityContainerComponent.alert(alert);
-    };
-    InPlaceInteractionContextComponent.prototype.cancelActiveActivity = function () {
-        return this.activityContainerComponent.cancelActiveActivity();
-    };
-    InPlaceInteractionContextComponent.prototype.confirm = function (confirm) {
-        return this.activityContainerComponent.confirm(confirm);
-    };
-    InPlaceInteractionContextComponent.prototype.confirmOrReject = function (confirm) {
-        return this.activityContainerComponent.confirmOrReject(confirm);
+    SelectCellRendererComponent.prototype.isSelected = function () {
+        return this.selectionModel.isSelected(this.row);
     };
-    InPlaceInteractionContextComponent.prototype.confirmThen = function (confirm, activityType, data) {
-        return this.activityContainerComponent.confirmThen(confirm, activityType);
-    };
-    InPlaceInteractionContextComponent.prototype.isActive = function () {
-        return this.activityContainerComponent.isActive();
-    };
-    InPlaceInteractionContextComponent.prototype.startActivity = function (activityType, data) {
-        return this.activityContainerComponent.startActivity(activityType, data);
-    };
-    InPlaceInteractionContextComponent.ctorParameters = function () { return [
-        { type: InteractionService },
-        { type: undefined, decorators: [{ type: Inject, args: [MAT_TABS_CONFIG,] }, { type: Optional }] }
-    ]; };
     __decorate([
-        ViewChild('activityContainer', { static: true }),
-        __metadata("design:type", ActivityContainerComponent)
-    ], InPlaceInteractionContextComponent.prototype, "activityContainerComponent", void 0);
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], SelectCellRendererComponent.prototype, "row", null);
     __decorate([
         Input(),
         __metadata("design:type", Object)
-    ], InPlaceInteractionContextComponent.prototype, "animateFirstActivity", void 0);
-    InPlaceInteractionContextComponent = __decorate([
+    ], SelectCellRendererComponent.prototype, "selectionModel", void 0);
+    SelectCellRendererComponent = __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-select-cell-renderer',
+            template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n",
+            styles: [""]
         }),
-        __param(1, Inject(MAT_TABS_CONFIG)), __param(1, Optional()),
-        __metadata("design:paramtypes", [InteractionService, Object])
-    ], InPlaceInteractionContextComponent);
-    return InPlaceInteractionContextComponent;
+        __metadata("design:paramtypes", [])
+    ], SelectCellRendererComponent);
+    return SelectCellRendererComponent;
 }(DisposableComponent));
 
-var DialogInteractionContext = /** @class */ (function (_super) {
-    __extends(DialogInteractionContext, _super);
-    function DialogInteractionContext(identifier, api, dialogService, config) {
+var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
+    __extends(SelectHeaderCellRendererComponent, _super);
+    function SelectHeaderCellRendererComponent() {
         var _this = _super.call(this) || this;
-        _this.identifier = identifier;
-        _this.api = api;
-        _this.dialogService = dialogService;
-        _this.config = config;
-        _this.garbage = new GarbageCollector();
-        assert$1.notNil(dialogService);
+        _this.selectCommand = Command.create(function () {
+            _this.selectionModel.toggleAllCommand.execute();
+        });
         return _this;
     }
-    DialogInteractionContext.prototype.cancelActiveActivity = function () {
-        return this.activityContainer.cancelActiveActivity();
+    SelectHeaderCellRendererComponent.prototype.isSelected = function () {
+        return this.selectionModel.allSelected.value;
     };
-    DialogInteractionContext.prototype.dispose = function () {
-        if (this.isActive()) {
-            lang.illegalState('Dispose called while active.');
-        }
-        this.garbage.dispose();
+    SelectHeaderCellRendererComponent.prototype.isIntermediate = function () {
+        return this.selectionModel.someSelected.value;
     };
-    DialogInteractionContext.prototype.registerDisposable = function (disposable) {
-        return this.garbage.registerDisposable(disposable);
+    __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);
+    return SelectHeaderCellRendererComponent;
+}(DisposableComponent));
+
+var ColumnModel = /** @class */ (function () {
+    function ColumnModel(columnId, defaults) {
+        this.columnId = columnId;
+        this.defaults = defaults;
+        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
+            component.columnModel = column;
+        });
+    }
+    ColumnModel.prototype.getHeaderText = function () {
+        var _a;
+        return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
     };
-    DialogInteractionContext.prototype.isActive = function () {
-        return !!this.activityContainer && this.activityContainer.isActive();
+    ColumnModel.prototype.getDefaultHeaderText = function () {
+        return this.columnId;
     };
-    DialogInteractionContext.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
+    ColumnModel.prototype.getColumnTextProperties = function () {
+        return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
+    };
+    ColumnModel.prototype.textProperties = function (columnTextProperties) {
+        this._columnTextProperties = columnTextProperties;
+        return this;
+    };
+    ColumnModel.prototype.setCellRenderer = function (cellRenderer, initialiser) {
+        this._cellRendererConfig = {
+            portal: new ComponentPortal(cellRenderer),
+            pushState: initialiser
+        };
+    };
+    ColumnModel.prototype.cellHeaderRenderer = function (cellRenderer, initialiser) {
+        this._columnHeaderConfig = {
+            portal: new ComponentPortal(cellRenderer),
+            initialiseComponent: initialiser
+        };
+    };
+    ColumnModel.prototype.setCellEditor = function (cellEditor) {
+        this._cellEditorConfig = cellEditor;
+    };
+    Object.defineProperty(ColumnModel.prototype, "cellRendererPortal", {
+        get: function () {
+            return this._cellRendererConfig.portal;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnModel.prototype, "columnHeaderCellRendererPortal", {
+        get: function () {
+            return this._columnHeaderConfig.portal;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColumnModel.prototype, "cellEditorPortal", {
+        get: function () {
+            var _a;
+            return (_a = this._cellEditorConfig) === null || _a === void 0 ? void 0 : _a.portal;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ColumnModel.prototype.hasEditor = function () {
+        return !!this._cellEditorConfig;
+    };
+    ColumnModel.prototype.updateCellRenderer = function (component, row, editRowCommand, editSession) {
+        this._cellRendererConfig.pushState(component, row, editRowCommand, editSession);
+    };
+    ColumnModel.prototype.initialiseHeader = function (component) {
+        this._columnHeaderConfig.initialiseComponent(component, this);
+    };
+    ColumnModel.prototype.initialiseEditor = function (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);
+    return ColumnModel;
+}());
+var PropertyColumnModel = /** @class */ (function (_super) {
+    __extends(PropertyColumnModel, _super);
+    function PropertyColumnModel(property, defaults) {
+        var _this = _super.call(this, property.toString(), defaults) || this;
+        _this.property = property;
+        _this.cellRenderer(DefaultCellRendererComponent);
+        return _this;
+    }
+    PropertyColumnModel.prototype.cellRenderer = function (componentType) {
         var _this = this;
-        assert$1.isNil(this._currentActivityRef);
-        var config = __assign(__assign({}, this.config), {
-            disableClose: disableClose,
-            panelClass: 'dialog-interaction-context'
+        this.setCellRenderer(componentType, function (component, row) {
+            component.value = row[_this.property];
         });
-        var self = this;
-        var matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
-        var activityContainer = this.activityContainer = matDialogRef.componentInstance;
-        this.activityContainer.initialise(this.identifier, this.api);
-        var activityResult = this.activityContainer.startActivity(activityType, data);
-        activityResult.finally(function () { return 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(function (promiseAlreadyFinished) {
-            if (activityContainer.isActive()) {
-                activityContainer.cancelActiveActivity();
+    };
+    PropertyColumnModel.prototype.cellEditor = function (editor, options) {
+        var _this = this;
+        this.setCellEditor({
+            portal: new ComponentPortal(editor),
+            initialiseComponent: function (component, editSession) {
+                var 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);
+                }
             }
-            _this.activityContainer = null;
         });
-        matDialogRef.updateSize();
-        matDialogRef.afterOpened().subscribe(function (promiseAlreadyFinished) {
-            matDialogRef.updateSize();
+        return this;
+    };
+    return PropertyColumnModel;
+}(ColumnModel));
+var CustomValueColumnModel = /** @class */ (function (_super) {
+    __extends(CustomValueColumnModel, _super);
+    function CustomValueColumnModel(columnId, defaults, getValue) {
+        var _this = _super.call(this, columnId, defaults) || this;
+        _this.getValue = getValue;
+        _this.cellRenderer(DefaultCellRendererComponent);
+        return _this;
+    }
+    CustomValueColumnModel.prototype.cellRenderer = function (componentType) {
+        var _this = this;
+        this.setCellRenderer(componentType, function (component, row) {
+            component.value = _this.getValue(row);
         });
-        return activityResult;
     };
-    return DialogInteractionContext;
-}(AbstractInteractionContext));
+    return CustomValueColumnModel;
+}(ColumnModel));
+var EditorControlColumnModel = /** @class */ (function (_super) {
+    __extends(EditorControlColumnModel, _super);
+    function EditorControlColumnModel(columnId, saveCommand, defaults) {
+        var _this = _super.call(this, columnId, defaults) || this;
+        _this.cellRenderer(EditRowControls);
+        return _this;
+    }
+    EditorControlColumnModel.prototype.cellRenderer = function (componentType) {
+        this.setCellRenderer(componentType, function (component, row, editRowCommand, editSession) {
+            component.row = row;
+            component.editSession = editSession;
+            component.editRowCommand = editRowCommand;
+        });
+    };
+    EditorControlColumnModel.prototype.getDefaultHeaderText = function () {
+        return '';
+    };
+    return EditorControlColumnModel;
+}(ColumnModel));
+var CustomTemplateColumnModel = /** @class */ (function (_super) {
+    __extends(CustomTemplateColumnModel, _super);
+    function CustomTemplateColumnModel(columnId, defaults, component) {
+        return _super.call(this, columnId, defaults) || this;
+    }
+    return CustomTemplateColumnModel;
+}(ColumnModel));
+var SelectionColumnModel = /** @class */ (function (_super) {
+    __extends(SelectionColumnModel, _super);
+    function SelectionColumnModel(columnId, defaults, selectionModel) {
+        var _this = _super.call(this, columnId, defaults) || this;
+        if (selectionModel instanceof MultipleSelectionModel) {
+            _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
+                component.selectionModel = selectionModel;
+            });
+        }
+        _this.setCellRenderer(SelectCellRendererComponent, function (component, row, editRowCommand, editSession) {
+            component.row = row;
+            component.selectionModel = selectionModel;
+        });
+        return _this;
+    }
+    SelectionColumnModel.prototype.getDefaultHeaderText = function () {
+        return '';
+    };
+    return SelectionColumnModel;
+}(ColumnModel));
+
+/**
+ * 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
+ *     }
+ *   }
+ * }
+ */
+var TableComponent = /** @class */ (function (_super) {
+    __extends(TableComponent, _super);
+    function TableComponent() {
+        return _super.call(this) || this;
+    }
+    TableComponent.prototype.ngOnInit = function () {
+        var _a = Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        this.columns = chain(this.tableModel.columns);
+        this.columnIds = chain(this.columns).pluck('columnId');
+    };
+    TableComponent.prototype.isEditing = function (row) {
+        return !!this.tableModel.getEditSessionFor(row);
+    };
+    __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);
+    return TableComponent;
+}(DisposableComponent));
+
+var ColumnTemplateDirective = /** @class */ (function () {
+    function ColumnTemplateDirective(host, templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+    }
+    ColumnTemplateDirective.ctorParameters = function () { return [
+        { type: TableComponent },
+        { type: TemplateRef },
+        { type: ViewContainerRef }
+    ]; };
+    ColumnTemplateDirective = __decorate([
+        Directive({
+            selector: '[aupColumnTemplate]'
+        }),
+        __metadata("design:paramtypes", [TableComponent,
+            TemplateRef,
+            ViewContainerRef])
+    ], ColumnTemplateDirective);
+    return ColumnTemplateDirective;
+}());
+
+var TableCellRendererComponent = /** @class */ (function () {
+    function TableCellRendererComponent() {
+        var _this = this;
+        this.defaultClassNames = "aup-header-cell-renderer";
+        this.editRowCommand = Command.create(function () {
+            _this.tableModel.startEditSession(_this.row);
+        });
+    }
+    TableCellRendererComponent.prototype.initialiseRenderer = function (instance) {
+        if (this.renderer !== instance) {
+            this.renderer = instance;
+            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
+        }
+    };
+    TableCellRendererComponent.prototype.initialiseEditor = function (instance) {
+        if (this.editor !== instance) {
+            this.editor = instance;
+            this.column.initialiseEditor(this.editor, this.editSession);
+        }
+    };
+    TableCellRendererComponent.prototype.ngOnChanges = function (changes) {
+        if (this.renderer) {
+            this.column.updateCellRenderer(this.renderer, this.row, this.editRowCommand, this.editSession);
+            this.renderer.editSession = this.editSession;
+        }
+    };
+    TableCellRendererComponent.prototype.hasActiveEditor = function () {
+        return this.editSession && this.column.hasEditor();
+    };
+    __decorate([
+        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)
+    ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+    TableCellRendererComponent = __decorate([
+        Component({
+            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}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], TableCellRendererComponent);
+    return TableCellRendererComponent;
+}());
+
+var TableHeaderCellRendererComponent = /** @class */ (function () {
+    function TableHeaderCellRendererComponent() {
+        this.defaultClassNames = "aup-header-cell-renderer";
+    }
+    TableHeaderCellRendererComponent.prototype.initialiseHeader = function (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);
+    return TableHeaderCellRendererComponent;
+}());
 
-var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
-var DialogInteractionContextFactory = /** @class */ (function (_super) {
-    __extends(DialogInteractionContextFactory, _super);
-    function DialogInteractionContextFactory(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
-        var _this = _super.call(this) || this;
-        _this.dialogService = dialogService;
-        _this.dialogServiceDefaults = dialogServiceDefaults;
-        _this.matDialogDefaultConfig = matDialogDefaultConfig;
-        assert$1.notNil(dialogService);
+var VerticalFocusContainerComponent = /** @class */ (function (_super) {
+    __extends(VerticalFocusContainerComponent, _super);
+    function VerticalFocusContainerComponent(focusManager) {
+        var _this = _super.call(this, focusManager) || this;
+        _this.focusManager = focusManager;
         return _this;
     }
-    DialogInteractionContextFactory.prototype.createInteractionContext = function (identifier, api) {
-        var config = __assign(__assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
-        return new DialogInteractionContext(identifier, api, this.dialogService, config);
+    VerticalFocusContainerComponent.prototype.arrowLeft = function (event) {
+        if (this.leftArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.leftArrowCommand.execute();
+        }
     };
-    DialogInteractionContextFactory.ctorParameters = function () { return [
-        { 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.prototype.arrowRight = function (event) {
+        if (this.rightArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.rightArrowCommand.execute();
+        }
+    };
+    VerticalFocusContainerComponent.prototype.arrowDown = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusNext();
+    };
+    VerticalFocusContainerComponent.prototype.arrowUp = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusPrevious();
+    };
+    VerticalFocusContainerComponent.prototype.ngOnInit = function () {
+    };
+    VerticalFocusContainerComponent.ctorParameters = function () { return [
+        { 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);
-    return DialogInteractionContextFactory;
-}(ModalInteractionContextFactory));
+        __param(0, Self()),
+        __metadata("design:paramtypes", [FocusManager])
+    ], VerticalFocusContainerComponent);
+    return VerticalFocusContainerComponent;
+}(FocusContainerComponent));
 
 /**
  * @file Automatically generated by barrelsby.
  */
 
-var AddItemInteractionContextComponent = /** @class */ (function (_super) {
-    __extends(AddItemInteractionContextComponent, _super);
-    function AddItemInteractionContextComponent() {
-        var _this = _super.call(this) || this;
-        _this.tabindex = 0;
-        _this.clickCommand = Command.create(function (context) {
-            if (_this.activityClass) {
-                _this.startActivity(_this.activityClass, _this.activityData).catch(function (e) {
-                    //  don't care.
-                });
-            }
-            else {
-                _this.addCommand.withContext(context).execute();
-            }
-        });
+var ActivityActionsComponent = /** @class */ (function (_super) {
+    __extends(ActivityActionsComponent, _super);
+    function ActivityActionsComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.align = 'start';
         return _this;
     }
-    Object.defineProperty(AddItemInteractionContextComponent.prototype, "active", {
+    Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
         get: function () {
-            return this.interactionContext ? this.interactionContext.isActive() : false;
+            return this.align === 'end';
         },
         enumerable: true,
         configurable: true
     });
-    AddItemInteractionContextComponent.prototype.startActivity = function (activityType, data) {
-        return this.interactionContext.startActivity(activityType, data);
+    ActivityActionsComponent.prototype.ngOnInit = function () {
     };
-    AddItemInteractionContextComponent.prototype.ngOnInit = function () {
+    ActivityActionsComponent.prototype.hasConfirmText = function () {
+        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);
-    return 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);
+    return ActivityActionsComponent;
 }(DisposableComponent));
 
 var InteractionModule = /** @class */ (function () {
@@ -2301,7 +3224,9 @@ var InteractionModule = /** @class */ (function () {
                 PortalModule,
                 RouterModule,
                 MatIconModule,
-                DirectivesModule
+                DirectivesModule,
+                FlexModule,
+                GridModule
             ],
             declarations: [
                 ActivityContainerComponent,
@@ -2311,14 +3236,18 @@ var InteractionModule = /** @class */ (function () {
                 ActivityOutletComponent,
                 InPlaceInteractionContextComponent,
                 AddItemInteractionContextComponent,
-                ActivityActionsComponent
+                ActivityActionsComponent,
+                PopupInteractionContextComponent,
+                InteractionContextTriggerFor
             ],
             exports: [
                 ActivityContainerComponent,
                 ActivityOutletComponent,
                 InPlaceInteractionContextComponent,
                 AddItemInteractionContextComponent,
-                ActivityActionsComponent
+                ActivityActionsComponent,
+                PopupInteractionContextComponent,
+                InteractionContextTriggerFor
             ],
             entryComponents: [
                 ActivityContainerComponent,
@@ -2327,13 +3256,94 @@ var InteractionModule = /** @class */ (function () {
                 AlertDialogComponent
             ],
             providers: [
-                InteractionService,
+                InteractionService
+                // {
+                //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
+                // }
             ]
         })
     ], InteractionModule);
     return InteractionModule;
 }());
 
+var ComponentsModule = /** @class */ (function () {
+    function 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);
+    return ComponentsModule;
+}());
+
 var ParameterDefinition = /** @class */ (function () {
     function ParameterDefinition(propertyName, options, urlFormat) {
         this.propertyName = propertyName;
@@ -5110,5 +6120,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