@coolon/angular-ui-powerups 1.9.0 → 1.11.0

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

@@ -1,11 +1,12 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@angular/router'), require('lodash'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('@angular/flex-layout'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@coolon/pectin', '@angular/cdk/portal', '@angular/material/dialog', '@angular/router', 'lodash', 'resize-observer-polyfill', '@coolon/typescript-utilities', '@angular/flex-layout', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.pectin, global.ng.cdk.portal, global.ng.material.dialog, global.ng.router, global.___default, global.ResizeObserver, global.typescriptUtilities, global.ng.flexLayout, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, button, checkbox, icon, pectin, portal, dialog, router, ___default, ResizeObserver, typescriptUtilities, flexLayout, progressSpinner, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@coolon/pectin'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('lodash'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('@angular/cdk/overlay'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('immer'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@coolon/pectin', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', 'lodash', 'resize-observer-polyfill', '@coolon/typescript-utilities', '@angular/cdk/overlay', '@typescript-plus/fast-memoize-decorator/dist/src', 'immer', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.pectin, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.___default, global.ResizeObserver, global.typescriptUtilities, global.ng.cdk.overlay, global.src, global.produce, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, button, checkbox, icon, table, pectin, flexLayout, dialog, router, ___default, ResizeObserver, typescriptUtilities, overlay, src, produce, progressSpinner, list, tooltip, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && Object.prototype.hasOwnProperty.call(ResizeObserver, 'default') ? ResizeObserver['default'] : ResizeObserver;
+    produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -539,45 +540,6 @@
         return DirectivesModule;
     }());
 
-    var FocusContainerComponent = /** @class */ (function (_super) {
-        __extends(FocusContainerComponent, _super);
-        function FocusContainerComponent(focusManager) {
-            var _this = _super.call(this) || this;
-            _this.focusManager = focusManager;
-            _this.restoreFocusCommand = pectin.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: pectin.FocusManager, decorators: [{ type: core.Self }] }
-        ]; };
-        __decorate([
-            core.HostBinding('attr.tabindex'),
-            __metadata("design:type", Object)
-        ], FocusContainerComponent.prototype, "tabIndex", void 0);
-        FocusContainerComponent = __decorate([
-            core.Component({
-                selector: 'aup-focus-container',
-                template: "<ng-content></ng-content>\n",
-                providers: [
-                    { provide: pectin.FocusManager }
-                ],
-                styles: [":host{display:block}"]
-            }),
-            __param(0, core.Self()),
-            __metadata("design:paramtypes", [pectin.FocusManager])
-        ], FocusContainerComponent);
-        return FocusContainerComponent;
-    }(DisposableComponent));
-
     var FocusableComponent = /** @class */ (function (_super) {
         __extends(FocusableComponent, _super);
         function FocusableComponent(el, focusManager, focusBindingFactory) {
@@ -643,1826 +605,2785 @@
         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 pectin.DelegatingFormValueModel());
-            // TODO: fix this.
-            // tslint:disable-next-line:no-output-native
-            _this.focus = new core.EventEmitter();
-            // tslint:disable-next-line:no-output-native
-            _this.blur = new core.EventEmitter();
-            // tslint:disable-next-line:no-output-native
-            _this.enterKey = new core.EventEmitter();
-            // tslint:disable-next-line:no-output-native
-            _this.escapeKey = new core.EventEmitter();
-            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;
+    }());
+
+    exports.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;
+    })(exports.Bounds || (exports.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 pectin.MutableValueModel(new exports.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 = exports.Bounds.ofElement(this.nativeElement);
+        };
+        ResizeAwareComponent.ctorParameters = function () { return [
+            { type: core.ElementRef },
+            { type: core.NgZone }
+        ]; };
+        ResizeAwareComponent = __decorate([
+            core.Directive(),
+            __metadata("design:paramtypes", [core.ElementRef, core.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([
             core.Input(),
-            __metadata("design:type", String)
-        ], AbstractInputComponent.prototype, "label", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], AbstractInputComponent.prototype, "floatLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], AbstractInputComponent.prototype, "hint", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], AbstractInputComponent.prototype, "placeholder", void 0);
-        __decorate([
-            core.Input('command.focus'),
-            __metadata("design:type", pectin.Command)
-        ], AbstractInputComponent.prototype, "focusCommand", void 0);
-        __decorate([
-            core.Input('command.blur'),
-            __metadata("design:type", pectin.Command)
-        ], AbstractInputComponent.prototype, "blurCommand", void 0);
-        __decorate([
-            core.Input('command.enter'),
-            __metadata("design:type", pectin.Command)
-        ], AbstractInputComponent.prototype, "enterCommand", void 0);
-        __decorate([
-            core.Input('command.escape'),
-            __metadata("design:type", pectin.Command)
-        ], AbstractInputComponent.prototype, "escapeCommand", void 0);
-        __decorate([
-            core.Input('command.click'),
+            pectin.TrackExternal(),
             __metadata("design:type", pectin.Command)
-        ], AbstractInputComponent.prototype, "clickCommand", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], AbstractInputComponent.prototype, "focus", void 0);
+        ], CardContainerComponent.prototype, "addCardCommand", void 0);
         __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], AbstractInputComponent.prototype, "blur", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], AbstractInputComponent.prototype, "enterKey", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], AbstractInputComponent.prototype, "escapeKey", void 0);
-        __decorate([
-            core.HostListener('click'),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], AbstractInputComponent.prototype, "notifyClick", null);
-        __decorate([
-            core.HostListener('focusin'),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], AbstractInputComponent.prototype, "notifyFocusIn", null);
-        __decorate([
-            core.HostListener('focusout'),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], AbstractInputComponent.prototype, "notifyFocusOut", null);
-        AbstractInputComponent = __decorate([
-            core.Component({ template: '' }),
+            core.ContentChild("addCardTemplate"),
+            __metadata("design:type", core.TemplateRef)
+        ], CardContainerComponent.prototype, "addCardTemplate", void 0);
+        CardContainerComponent = __decorate([
+            core.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 = pectin.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: pectin.FocusManager, decorators: [{ type: core.Self }] }
+        ]; };
         __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            core.HostBinding('attr.tabindex'),
             __metadata("design:type", Object)
-        ], CheckboxInputComponent.prototype, "valueModel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], CheckboxInputComponent.prototype, "color", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], CheckboxInputComponent.prototype, "labelPosition", void 0);
-        CheckboxInputComponent = __decorate([
+        ], FocusContainerComponent.prototype, "tabIndex", void 0);
+        FocusContainerComponent = __decorate([
             core.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: pectin.FocusManager }
+                ],
+                styles: [":host{display:block}"]
             }),
-            __metadata("design:paramtypes", [])
-        ], CheckboxInputComponent);
-        return CheckboxInputComponent;
-    }(AbstractInputComponent));
+            __param(0, core.Self()),
+            __metadata("design:paramtypes", [pectin.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 core.InjectionToken('InteractionActivityData');
+    var Activity = /** @class */ (function (_super) {
+        __extends(Activity, _super);
+        function Activity() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this._busyModel = new pectin.DelegatingValueModel().withDefault(false);
+            _this.class = 'aup-activity';
             return _this;
         }
-        NumberInputComponent.prototype.ngOnInit = function () {
+        Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
+            typescriptUtilities.assert.isNil(this._activityContext);
+            this._activityContext = activityContext;
+            this._interactionContext = nestedInteractionContext;
+        };
+        Object.defineProperty(Activity.prototype, "interactionContext", {
+            get: function () {
+                typescriptUtilities.assert.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([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
-            __metadata("design:type", Object)
-        ], NumberInputComponent.prototype, "valueModel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], NumberInputComponent.prototype, "min", void 0);
-        __decorate([
-            core.Input(),
+            core.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: core.Inject, args: [ACTIVITY_DATA,] }] }
+        ]; };
+        AlertDialogComponent = __decorate([
             core.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, core.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;
+            pectin.assert.notNil(config);
+            return _this;
         }
-        PasswordInputComponent.prototype.ngOnInit = function () {
+        ConfirmThenDialogComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.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: core.Inject, args: [ACTIVITY_DATA,] }] }
+        ]; };
+        ConfirmThenDialogComponent = __decorate([
             core.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, core.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;
+            pectin.assert.notNil(confirm);
             return _this;
         }
-        SelectInputComponent.prototype.ngOnInit = function () {
+        ConfirmationDialogComponent.prototype.ngOnInit = function () {
         };
-        __decorate([
-            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
-            __metadata("design:type", Object)
-        ], SelectInputComponent.prototype, "valueModel", void 0);
-        __decorate([
-            core.Input(), pectin.TrackExternal(),
-            __metadata("design:type", pectin.ListModel)
-        ], SelectInputComponent.prototype, "optionsModel", void 0);
-        __decorate([
-            core.Input(), pectin.StoreInListModel('optionsModel'),
-            __metadata("design:type", Array)
-        ], SelectInputComponent.prototype, "options", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], SelectInputComponent.prototype, "optionLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Boolean)
-        ], SelectInputComponent.prototype, "allowNil", void 0);
-        __decorate([
-            core.ContentChild("optionTemplate"),
-            __metadata("design:type", core.TemplateRef)
-        ], SelectInputComponent.prototype, "optionTemplateRef", void 0);
-        __decorate([
-            core.ContentChild("nilOptionTemplate"),
-            __metadata("design:type", core.TemplateRef)
-        ], SelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], SelectInputComponent.prototype, "optionLabelFormat", void 0);
-        SelectInputComponent = __decorate([
-            core.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 = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.clearCommand = pectin.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([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
-            __metadata("design:type", Object)
-        ], StringInputComponent.prototype, "valueModel", void 0);
-        __decorate([
-            core.Input(), pectin.TrackExternal({ defaultValue: false }),
-            __metadata("design:type", pectin.ValueModel)
-        ], StringInputComponent.prototype, "enableClearModel", void 0);
-        __decorate([
-            core.Input(), pectin.StoreInValueModel('enableClearModel'),
-            __metadata("design:type", Boolean)
-        ], StringInputComponent.prototype, "enableClear", void 0);
-        StringInputComponent = __decorate([
+        ConfirmationDialogComponent.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [ACTIVITY_DATA,] }] }
+        ]; };
+        ConfirmationDialogComponent = __decorate([
             core.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, core.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([
-            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
-            __metadata("design:type", Object)
-        ], TextInputComponent.prototype, "valueModel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], TextInputComponent.prototype, "rows", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Number)
-        ], TextInputComponent.prototype, "cols", void 0);
-        TextInputComponent = __decorate([
-            core.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([
-            core.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 = pectin.Deferred.defer();
         }
-        ScrollContainerComponent.prototype.ngOnInit = function () {
+        ActivityRef.prototype.isActivityRealised = function () {
+            return !!this._activity;
         };
-        ScrollContainerComponent = __decorate([
-            core.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 () {
+                pectin.assert.isTruthy(this.isActivityRealised());
+                return this._activity;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ActivityRef.prototype.notifyActivityCreated = function (activity, nestedInteractionContext) {
+            pectin.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) {
+            pectin.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()) {
+                    typescriptUtilities.lang.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: core.TemplateRef }
+        ActivityOutletComponent.prototype.loadActivity = function (activityRef) {
+            var injector = core.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: core.ComponentFactoryResolver },
+            { type: core.ViewContainerRef },
+            { type: core.Injector }
         ]; };
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], SwitchCaseWhenDirective.prototype, "aupSwitchCaseWhen", void 0);
-        SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = __decorate([
-            core.Directive({
-                selector: '[aupSwitchCaseWhen]',
-                providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective_1 }]
-            }),
-            __metadata("design:paramtypes", [core.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: core.TemplateRef }
-        ]; };
-        SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
-            core.Directive({
-                selector: '[aupSwitchCaseDefault]',
-                providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
+        ], ActivityOutletComponent.prototype, "nestedInteractionContext", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", ActivityRef),
+            __metadata("design:paramtypes", [ActivityRef])
+        ], ActivityOutletComponent.prototype, "activityRef", null);
+        ActivityOutletComponent = __decorate([
+            core.Component({
+                selector: 'aup-activity-outlet',
+                template: '',
+                styles: [":host{display:block}"]
             }),
-            __metadata("design:paramtypes", [core.TemplateRef])
-        ], SwitchCaseDefaultDirective);
-        return SwitchCaseDefaultDirective;
-    }(SwitchCaseOption));
-    var SwitchCaseComponent = /** @class */ (function (_super) {
-        __extends(SwitchCaseComponent, _super);
-        function SwitchCaseComponent(cdr) {
+            __metadata("design:paramtypes", [core.ComponentFactoryResolver,
+                core.ViewContainerRef,
+                core.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 pectin.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 = pectin.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 = pectin.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) {
+            pectin.assert.isFalsey(this.isInitialised());
+            pectin.assert.notNil(identifier);
+            pectin.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.
+            pectin.assert.isFalsey(this.isActive());
+            this.garbage.dispose();
+        };
+        ActivityContainerComponent.prototype.getActiveActivityRef = function () {
+            if (!this.isActive()) {
+                typescriptUtilities.lang.illegalState('no activity in progress');
+            }
+            return ___default__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);
+            pectin.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: core.ChangeDetectorRef }
-        ]; };
+        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);
+            }
+            this.syncSelectedTabTimeout = setTimeout(function () {
+                _this.syncSelectedTabTimeout = null;
+                _this.synchroniseSelectedTabIndex();
+            }, 75);
+        };
         __decorate([
-            core.Input(), pectin.TrackExternal(),
-            __metadata("design:type", pectin.ValueModel)
-        ], SwitchCaseComponent.prototype, "switchModel", void 0);
-        __decorate([
-            core.Input(), pectin.StoreInValueModel('switchModel'),
+            core.Input(),
             __metadata("design:type", Object)
-        ], SwitchCaseComponent.prototype, "switch", void 0);
+        ], ActivityContainerComponent.prototype, "dynamicHeight", void 0);
         __decorate([
-            core.ContentChildren(SwitchCaseOption),
+            core.ViewChild('tabs', { static: true }),
+            __metadata("design:type", tabs.MatTabGroup)
+        ], ActivityContainerComponent.prototype, "tabs", void 0);
+        __decorate([
+            core.ViewChildren(ActivityOutletComponent),
             __metadata("design:type", core.QueryList)
-        ], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
-        SwitchCaseComponent = __decorate([
+        ], ActivityContainerComponent.prototype, "activityOutlets", void 0);
+        __decorate([
+            pectin.Trace(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], ActivityContainerComponent.prototype, "dispose", null);
+        ActivityContainerComponent = __decorate([
             core.Component({
-                selector: 'aup-switch-case',
-                template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n",
-                styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
+                selector: 'aup-activity-container',
+                template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+                styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
-            __metadata("design:paramtypes", [core.ChangeDetectorRef])
-        ], SwitchCaseComponent);
-        return SwitchCaseComponent;
-    }(DisposableComponent));
+            __metadata("design:paramtypes", [])
+        ], ActivityContainerComponent);
+        return ActivityContainerComponent;
+    }(AbstractInteractionContext));
 
-    var VerticalFocusContainerComponent = /** @class */ (function (_super) {
-        __extends(VerticalFocusContainerComponent, _super);
-        function VerticalFocusContainerComponent(focusManager) {
-            var _this = _super.call(this, focusManager) || this;
-            _this.focusManager = focusManager;
+    var AddItemInteractionContextComponent = /** @class */ (function (_super) {
+        __extends(AddItemInteractionContextComponent, _super);
+        function AddItemInteractionContextComponent() {
+            var _this = _super.call(this) || this;
+            _this.tabindex = 0;
+            _this.clickCommand = pectin.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;
         }
-        VerticalFocusContainerComponent.prototype.arrowLeft = function (event) {
-            if (this.leftArrowCommand.enabled.value) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.leftArrowCommand.execute();
-            }
-        };
-        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();
+        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);
         };
-        VerticalFocusContainerComponent.prototype.ngOnInit = function () {
+        AddItemInteractionContextComponent.prototype.ngOnInit = function () {
         };
-        VerticalFocusContainerComponent.ctorParameters = function () { return [
-            { type: pectin.FocusManager, decorators: [{ type: core.Self }] }
-        ]; };
-        __decorate([
-            core.Input('command.arrowRight'),
-            pectin.TrackExternal(),
-            __metadata("design:type", pectin.Command)
-        ], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
-        __decorate([
-            core.Input('command.arrowLeft'),
-            pectin.TrackExternal(),
-            __metadata("design:type", pectin.Command)
-        ], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
-        __decorate([
-            core.HostListener('keyup.arrowLeft', ['$event']),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [KeyboardEvent]),
-            __metadata("design:returntype", void 0)
-        ], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
         __decorate([
-            core.HostListener('keyup.arrowRight', ['$event']),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [KeyboardEvent]),
-            __metadata("design:returntype", void 0)
-        ], VerticalFocusContainerComponent.prototype, "arrowRight", null);
+            core.Input(),
+            __metadata("design:type", String)
+        ], AddItemInteractionContextComponent.prototype, "label", void 0);
         __decorate([
-            core.HostListener('keyup.arrowDown', ['$event']),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [KeyboardEvent]),
-            __metadata("design:returntype", void 0)
-        ], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
         __decorate([
-            core.HostListener('keyup.arrowUp', ['$event']),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [KeyboardEvent]),
-            __metadata("design:returntype", void 0)
-        ], VerticalFocusContainerComponent.prototype, "arrowUp", null);
-        VerticalFocusContainerComponent = __decorate([
-            core.Component({
-                selector: 'aup-vertical-focus-container',
-                template: "<ng-content></ng-content>\n",
-                providers: [
-                    { provide: pectin.FocusManager }
-                ],
-                styles: [":host{display:block}"]
-            }),
-            __param(0, core.Self()),
-            __metadata("design:paramtypes", [pectin.FocusManager])
-        ], VerticalFocusContainerComponent);
-        return VerticalFocusContainerComponent;
-    }(FocusContainerComponent));
-
-    /**
-     * @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 () {
-        };
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "activityData", void 0);
         __decorate([
             core.Input(),
             pectin.TrackExternal(),
             __metadata("design:type", pectin.Command)
-        ], CardContainerComponent.prototype, "addCardCommand", void 0);
+        ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
         __decorate([
-            core.ContentChild("addCardTemplate"),
-            __metadata("design:type", core.TemplateRef)
-        ], CardContainerComponent.prototype, "addCardTemplate", void 0);
-        CardContainerComponent = __decorate([
+            core.ViewChild(InPlaceInteractionContextComponent),
+            __metadata("design:type", InPlaceInteractionContextComponent)
+        ], AddItemInteractionContextComponent.prototype, "interactionContext", void 0);
+        __decorate([
+            core.HostBinding('class.interaction-active'),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], AddItemInteractionContextComponent.prototype, "active", null);
+        __decorate([
+            core.HostBinding('tabindex'),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "tabindex", void 0);
+        AddItemInteractionContextComponent = __decorate([
             core.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([
-            core.NgModule({
-                declarations: [
-                    NumberInputComponent,
-                    StringInputComponent,
-                    TextInputComponent,
-                    PasswordInputComponent,
-                    SelectInputComponent,
-                    CheckboxInputComponent,
-                    ScrollContainerComponent,
-                    NoopComponent,
-                    AbstractInputComponent,
-                    SwitchCaseComponent,
-                    SwitchCaseWhenDirective,
-                    SwitchCaseDefaultDirective,
-                    FocusContainerComponent,
-                    VerticalFocusContainerComponent,
-                    FocusableComponent,
-                    CardContainerComponent
-                ],
-                imports: [
-                    common.CommonModule,
-                    animations.BrowserAnimationsModule,
-                    forms.FormsModule,
-                    input.MatInputModule,
-                    formField.MatFormFieldModule,
-                    select.MatSelectModule,
-                    tabs.MatTabsModule,
-                    DirectivesModule,
-                    icon.MatIconModule,
-                    button.MatButtonModule,
-                    checkbox.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;
+    exports.ɵbw = /** @class */ (function () {
+        function InteractionService(modelInteractionContextFactory) {
+            this.modelInteractionContextFactory = modelInteractionContextFactory;
+            this.garbage = new pectin.GarbageCollector();
+            // private readonly _activeModalContext = new MutableValueModel<InteractionContext>();
+            // private readonly _activeInlineContext = new MutableValueModel<InteractionContext>();
+            // private readonly _activeContext: ValueModelChain<InteractionContext>;
+            this._navigationInProgress = new pectin.DelegatingValueModel().withDefault(false);
+            var _a = pectin.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;
+            typescriptUtilities.assert.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 = core.ɵɵdefineInjectable({ factory: function InteractionService_Factory() { return new InteractionService(core.ɵɵinject(ModalInteractionContextFactory)); }, token: InteractionService, providedIn: "root" });
+        InteractionService = InteractionService_1 = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            }),
+            __metadata("design:paramtypes", [ModalInteractionContextFactory])
+        ], InteractionService);
+        return InteractionService;
     }());
-
-    exports.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 pectin.MutableListModel();
+                _this._disabledDelegate = new pectin.DelegatingValueModel().withDefault(false);
+                var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+                _this.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;
+        }(pectin.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;
-    })(exports.Bounds || (exports.Bounds = {}));
+            // @Trace()
+            ApiAdapter.prototype.notifyActive = function (context) {
+                typescriptUtilities.assert.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;
+    })(exports.ɵbw || (exports.ɵbw = {}));
 
-    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 pectin.MutableValueModel(new exports.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 = exports.Bounds.ofElement(this.nativeElement);
+        InPlaceInteractionContextComponent.prototype.cancelActiveActivity = function () {
+            return this.activityContainerComponent.cancelActiveActivity();
         };
-        ResizeAwareComponent.ctorParameters = function () { return [
-            { type: core.ElementRef },
-            { type: core.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: exports.ɵbw },
+            { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
         ]; };
-        ResizeAwareComponent = __decorate([
-            core.Directive(),
-            __metadata("design:paramtypes", [core.ElementRef, core.NgZone])
-        ], ResizeAwareComponent);
-        return ResizeAwareComponent;
+        __decorate([
+            core.ViewChild('activityContainer', { static: true }),
+            __metadata("design:type", ActivityContainerComponent)
+        ], InPlaceInteractionContextComponent.prototype, "activityContainerComponent", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InPlaceInteractionContextComponent.prototype, "animateFirstActivity", void 0);
+        InPlaceInteractionContextComponent = __decorate([
+            core.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, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
+            __metadata("design:paramtypes", [exports.ɵbw, 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 portal.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__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: core.ElementRef },
+            { type: overlay.Overlay }
+        ]; };
         __decorate([
-            core.Input(),
-            pectin.TrackExternal(),
-            __metadata("design:type", pectin.Command)
-        ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+            core.HostBinding('class.interaction-active'),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], PopupInteractionContextComponent.prototype, "active", null);
         __decorate([
             core.Input(),
             __metadata("design:type", String)
-        ], ActivityActionsComponent.prototype, "confirmText", void 0);
-        __decorate([
-            core.Input(),
-            pectin.TrackExternal(),
-            __metadata("design:type", pectin.Command)
-        ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+        ], PopupInteractionContextComponent.prototype, "anchorX", void 0);
         __decorate([
             core.Input(),
             __metadata("design:type", String)
-        ], ActivityActionsComponent.prototype, "align", void 0);
-        __decorate([
-            core.HostBinding('class.align-end'),
-            __metadata("design:type", Boolean),
-            __metadata("design:paramtypes", [])
-        ], ActivityActionsComponent.prototype, "alignEnd", null);
-        ActivityActionsComponent = __decorate([
+        ], PopupInteractionContextComponent.prototype, "anchorY", void 0);
+        PopupInteractionContextComponent = __decorate([
             core.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", [core.ElementRef, overlay.Overlay])
+        ], PopupInteractionContextComponent);
+        return PopupInteractionContextComponent;
     }(DisposableComponent));
 
-    var ACTIVITY_DATA = new core.InjectionToken('InteractionActivityData');
-    var Activity = /** @class */ (function (_super) {
-        __extends(Activity, _super);
-        function Activity() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this._busyModel = new pectin.DelegatingValueModel().withDefault(false);
+    var InteractionContextTriggerFor = /** @class */ (function (_super) {
+        __extends(InteractionContextTriggerFor, _super);
+        function InteractionContextTriggerFor() {
+            var _this = _super.call(this) || this;
+            _this.activityDone = new core.EventEmitter();
+            _this.activityCancelled = new core.EventEmitter();
             return _this;
         }
-        Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
-            typescriptUtilities.assert.isNil(this._activityContext);
-            this._activityContext = activityContext;
-            this._interactionContext = nestedInteractionContext;
-        };
-        Object.defineProperty(Activity.prototype, "interactionContext", {
-            get: function () {
-                typescriptUtilities.assert.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;
+            pectin.assert.isTruthy(this.aupInteractionContextTriggerFor);
+            pectin.assert.isFalsey(this.aupInteractionContextTriggerFor.isActive());
+            pectin.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__default.isFunction(this.activityDataFactory()) ? this.activityDataFactory() : this.activityData;
         };
-        AlertDialogComponent.ctorParameters = function () { return [
-            { type: undefined, decorators: [{ type: core.Inject, args: [ACTIVITY_DATA,] }] }
-        ]; };
-        AlertDialogComponent = __decorate([
-            core.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([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InteractionContextTriggerFor.prototype, "aupInteractionContextTriggerFor", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InteractionContextTriggerFor.prototype, "activityClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], InteractionContextTriggerFor.prototype, "activityData", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], InteractionContextTriggerFor.prototype, "activityDataFactory", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], InteractionContextTriggerFor.prototype, "activityDone", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], InteractionContextTriggerFor.prototype, "activityCancelled", void 0);
+        __decorate([
+            core.HostListener('keyup.enter'),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], InteractionContextTriggerFor.prototype, "onEnter", null);
+        __decorate([
+            core.HostListener('click'),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [MouseEvent]),
+            __metadata("design:returntype", void 0)
+        ], InteractionContextTriggerFor.prototype, "onClick", null);
+        InteractionContextTriggerFor = __decorate([
+            core.Directive({
+                selector: '[aupInteractionContextTriggerFor]'
             }),
-            __param(0, core.Inject(ACTIVITY_DATA)),
-            __metadata("design:paramtypes", [Object])
-        ], AlertDialogComponent);
-        return AlertDialogComponent;
-    }(Activity));
+            __metadata("design:paramtypes", [])
+        ], InteractionContextTriggerFor);
+        return InteractionContextTriggerFor;
+    }(pectin.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;
-            pectin.assert.notNil(config);
+            _this.garbage = new pectin.GarbageCollector();
+            typescriptUtilities.assert.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()) {
+                pectin.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: core.Inject, args: [ACTIVITY_DATA,] }] }
-        ]; };
-        ConfirmThenDialogComponent = __decorate([
-            core.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, core.Inject(ACTIVITY_DATA)),
-            __metadata("design:paramtypes", [Object])
-        ], ConfirmThenDialogComponent);
-        return ConfirmThenDialogComponent;
-    }(Activity));
-
-    var ConfirmationDialogComponent = /** @class */ (function (_super) {
-        __extends(ConfirmationDialogComponent, _super);
-        function ConfirmationDialogComponent(confirm) {
+        DialogInteractionContext.prototype.isActive = function () {
+            return !!this.activityContainer && this.activityContainer.isActive();
+        };
+        DialogInteractionContext.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
+            var _this = this;
+            typescriptUtilities.assert.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 DIALOG_INTERACTION_SERVICE_DEFAULTS = new core.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;
-            pectin.assert.notNil(confirm);
+            _this.dialogService = dialogService;
+            _this.dialogServiceDefaults = dialogServiceDefaults;
+            _this.matDialogDefaultConfig = matDialogDefaultConfig;
+            typescriptUtilities.assert.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: dialog.MatDialog },
+            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
+            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.MAT_DIALOG_DEFAULT_OPTIONS,] }] }
+        ]; };
+        DialogInteractionContextFactory.ɵprov = core.ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
+        DialogInteractionContextFactory = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            }),
+            __param(1, core.Optional()), __param(1, core.Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
+            __param(2, core.Optional()), __param(2, core.Inject(dialog.MAT_DIALOG_DEFAULT_OPTIONS)),
+            __metadata("design:paramtypes", [dialog.MatDialog,
+                dialog.MatDialogConfig,
+                dialog.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 pectin.Form();
+            _this.valueModel = form.valueModel(_this.data.initialValue);
+            _this.valueModel.validateUsing(data.validators || []);
+            _this.confirmCommand = pectin.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 = pectin.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: core.Inject, args: [ACTIVITY_DATA,] }] }
         ]; };
-        ConfirmationDialogComponent = __decorate([
+        __decorate([
+            core.HostBinding('class'),
+            __metadata("design:type", Object)
+        ], AbstractInputActivity.prototype, "class", void 0);
+        AbstractInputActivity = __decorate([
             core.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, core.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 pectin.DelegatingFormValueModel());
+            // TODO: fix this.
+            // tslint:disable-next-line:no-output-native
+            _this.focus = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
+            _this.blur = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
+            _this.enterKey = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
+            _this.escapeKey = new core.EventEmitter();
+            _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 = pectin.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 () {
-                pectin.assert.isTruthy(this.isActivityRealised());
-                return this._activity;
+                return this.delegatingFormValueModel.enabled;
             },
             enumerable: true,
             configurable: true
         });
-        ActivityRef.prototype.notifyActivityCreated = function (activity, nestedInteractionContext) {
-            pectin.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) {
-            pectin.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()) {
-                    typescriptUtilities.lang.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 = core.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);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractInputComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractInputComponent.prototype, "floatLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractInputComponent.prototype, "hint", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AbstractInputComponent.prototype, "placeholder", void 0);
+        __decorate([
+            core.Input('command.focus'),
+            __metadata("design:type", pectin.Command)
+        ], AbstractInputComponent.prototype, "focusCommand", void 0);
+        __decorate([
+            core.Input('command.blur'),
+            __metadata("design:type", pectin.Command)
+        ], AbstractInputComponent.prototype, "blurCommand", void 0);
+        __decorate([
+            core.Input('command.enter'),
+            __metadata("design:type", pectin.Command)
+        ], AbstractInputComponent.prototype, "enterCommand", void 0);
+        __decorate([
+            core.Input('command.escape'),
+            __metadata("design:type", pectin.Command)
+        ], AbstractInputComponent.prototype, "escapeCommand", void 0);
+        __decorate([
+            core.Input('command.click'),
+            __metadata("design:type", pectin.Command)
+        ], AbstractInputComponent.prototype, "clickCommand", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], AbstractInputComponent.prototype, "focus", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], AbstractInputComponent.prototype, "blur", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], AbstractInputComponent.prototype, "enterKey", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], AbstractInputComponent.prototype, "escapeKey", void 0);
+        __decorate([
+            core.HostBinding('class'),
+            __metadata("design:type", Object)
+        ], AbstractInputComponent.prototype, "baseClassName", void 0);
+        __decorate([
+            core.HostListener('click'),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], AbstractInputComponent.prototype, "notifyClick", null);
+        __decorate([
+            core.HostListener('focusin'),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], AbstractInputComponent.prototype, "notifyFocusIn", null);
+        __decorate([
+            core.HostListener('focusout'),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], AbstractInputComponent.prototype, "notifyFocusOut", null);
+        AbstractInputComponent = __decorate([
+            core.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 () {
         };
-        Object.defineProperty(ActivityOutletComponent.prototype, "component", {
-            get: function () {
-                return this.activityComponentRef.instance;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ActivityOutletComponent.ctorParameters = function () { return [
-            { type: core.ComponentFactoryResolver },
-            { type: core.ViewContainerRef },
-            { type: core.Injector }
-        ]; };
+        __decorate([
+            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            __metadata("design:type", Object)
+        ], CheckboxInputComponent.prototype, "valueModel", void 0);
         __decorate([
             core.Input(),
+            __metadata("design:type", String)
+        ], CheckboxInputComponent.prototype, "color", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], CheckboxInputComponent.prototype, "labelPosition", void 0);
+        CheckboxInputComponent = __decorate([
+            core.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([
+            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
             __metadata("design:type", Object)
-        ], ActivityOutletComponent.prototype, "nestedInteractionContext", void 0);
+        ], NumberInputComponent.prototype, "valueModel", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", ActivityRef),
-            __metadata("design:paramtypes", [ActivityRef])
-        ], ActivityOutletComponent.prototype, "activityRef", null);
-        ActivityOutletComponent = __decorate([
+            __metadata("design:type", Object)
+        ], NumberInputComponent.prototype, "min", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], NumberInputComponent.prototype, "max", void 0);
+        NumberInputComponent = __decorate([
             core.Component({
-                selector: 'aup-activity-outlet',
-                template: '',
+                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([
+            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+            __metadata("design:type", Object)
+        ], PasswordInputComponent.prototype, "valueModel", void 0);
+        PasswordInputComponent = __decorate([
+            core.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([
+            core.Input(), pectin.TrackExternal({ delegateTo: "delegatingFormValueModel" }),
+            __metadata("design:type", Object)
+        ], SelectInputComponent.prototype, "valueModel", void 0);
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ListModel)
+        ], SelectInputComponent.prototype, "optionsModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInListModel('optionsModel'),
+            __metadata("design:type", Array)
+        ], SelectInputComponent.prototype, "options", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], SelectInputComponent.prototype, "optionLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], SelectInputComponent.prototype, "allowNil", void 0);
+        __decorate([
+            core.ContentChild("optionTemplate"),
+            __metadata("design:type", core.TemplateRef)
+        ], SelectInputComponent.prototype, "optionTemplateRef", void 0);
+        __decorate([
+            core.ContentChild("nilOptionTemplate"),
+            __metadata("design:type", core.TemplateRef)
+        ], SelectInputComponent.prototype, "nilOptionTemplateRef", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], SelectInputComponent.prototype, "optionLabelFormat", void 0);
+        SelectInputComponent = __decorate([
+            core.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([
+            core.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 = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.clearCommand = pectin.Command.create(function () {
+                _this.valueModel.value = null;
+            });
+            _this.clearCommand.disableWhile(chain.stringValue(_this.valueModel).isBlank());
+            return _this;
+        }
+        StringInputComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            __metadata("design:type", Object)
+        ], StringInputComponent.prototype, "valueModel", void 0);
+        __decorate([
+            core.Input(), pectin.TrackExternal({ defaultValue: false }),
+            __metadata("design:type", pectin.ValueModel)
+        ], StringInputComponent.prototype, "enableClearModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('enableClearModel'),
+            __metadata("design:type", Boolean)
+        ], StringInputComponent.prototype, "enableClear", void 0);
+        StringInputComponent = __decorate([
+            core.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([
+            core.Input(), pectin.TrackExternal({ delegateTo: 'delegatingFormValueModel' }),
+            __metadata("design:type", Object)
+        ], TextInputComponent.prototype, "valueModel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], TextInputComponent.prototype, "rows", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number)
+        ], TextInputComponent.prototype, "cols", void 0);
+        TextInputComponent = __decorate([
+            core.Component({
+                selector: 'aup-text-input',
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"valueModel.value\"\n            [disabled]=\"!enabled.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"delegatingFormValueModel.focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n",
+                styles: [":host{display:block}input,mat-form-field{width:100%}input mat-hint.faux-error,mat-form-field mat-hint.faux-error{color:#f44336}:host-context(aup-table-cell-renderer) mat-form-field div.mat-form-field-infix{width:auto}button[disabled]{visibility:hidden}textarea{overflow:auto}"]
+            }),
+            __metadata("design:paramtypes", [])
+        ], TextInputComponent);
+        return TextInputComponent;
+    }(AbstractInputComponent));
+
+    var NoopComponent = /** @class */ (function () {
+        function NoopComponent() {
+        }
+        NoopComponent = __decorate([
+            core.Component({
+                selector: 'aup-noop',
+                template: "",
                 styles: [":host{display:block}"]
             }),
-            __metadata("design:paramtypes", [core.ComponentFactoryResolver,
-                core.ViewContainerRef,
-                core.Injector])
-        ], ActivityOutletComponent);
-        return ActivityOutletComponent;
+            __metadata("design:paramtypes", [])
+        ], NoopComponent);
+        return NoopComponent;
+    }());
+
+    var ScrollContainerComponent = /** @class */ (function () {
+        function ScrollContainerComponent() {
+        }
+        ScrollContainerComponent.prototype.ngOnInit = function () {
+        };
+        ScrollContainerComponent = __decorate([
+            core.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 pectin.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 = pectin.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) {
-            pectin.assert.isFalsey(this.isInitialised());
-            pectin.assert.notNil(identifier);
-            pectin.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.
-            pectin.assert.isFalsey(this.isActive());
-            this.garbage.dispose();
+        var SwitchCaseWhenDirective_1;
+        SwitchCaseWhenDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], SwitchCaseWhenDirective.prototype, "aupSwitchCaseWhen", void 0);
+        SwitchCaseWhenDirective = SwitchCaseWhenDirective_1 = __decorate([
+            core.Directive({
+                selector: '[aupSwitchCaseWhen]',
+                providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective_1 }]
+            }),
+            __metadata("design:paramtypes", [core.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()) {
-                typescriptUtilities.lang.illegalState('no activity in progress');
-            }
-            return ___default__default.findLast(this.activityTabs, function (tab) { return !tab.isComplete(); });
+        var SwitchCaseDefaultDirective_1;
+        SwitchCaseDefaultDirective.ctorParameters = function () { return [
+            { type: core.TemplateRef }
+        ]; };
+        SwitchCaseDefaultDirective = SwitchCaseDefaultDirective_1 = __decorate([
+            core.Directive({
+                selector: '[aupSwitchCaseDefault]',
+                providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective_1 }]
+            }),
+            __metadata("design:paramtypes", [core.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 = pectin.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;
-            pectin.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: core.ChangeDetectorRef }
+        ]; };
         __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], ActivityContainerComponent.prototype, "dynamicHeight", void 0);
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], SwitchCaseComponent.prototype, "switchModel", void 0);
         __decorate([
-            core.ViewChild('tabs', { static: true }),
-            __metadata("design:type", tabs.MatTabGroup)
-        ], ActivityContainerComponent.prototype, "tabs", void 0);
+            core.Input(), pectin.StoreInValueModel('switchModel'),
+            __metadata("design:type", Object)
+        ], SwitchCaseComponent.prototype, "switch", void 0);
         __decorate([
-            core.ViewChildren(ActivityOutletComponent),
+            core.ContentChildren(SwitchCaseOption),
             __metadata("design:type", core.QueryList)
-        ], ActivityContainerComponent.prototype, "activityOutlets", void 0);
+        ], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
+        SwitchCaseComponent = __decorate([
+            core.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", [core.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([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], ActivityContainerComponent.prototype, "dispose", null);
-        ActivityContainerComponent = __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], DefaultCellRendererComponent.prototype, "value", null);
+        DefaultCellRendererComponent = __decorate([
             core.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;
-        };
-        InteractionServiceRoutingAdapter.prototype.isModalActive = function () {
-            return !!this.activeModalContext.value;
+        __decorate([
+            core.Input(),
+            __metadata("design:type", ColumnModel)
+        ], DefaultHeaderCellRendererComponent.prototype, "columnModel", void 0);
+        DefaultHeaderCellRendererComponent = __decorate([
+            core.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
+     * });
+     */
+    exports.TableModel = /** @class */ (function () {
+        function TableModel(sourceOfTruth) {
+            this.sourceOfTruth = sourceOfTruth;
+            this._garbage = new pectin.GarbageCollector();
+            this._columns = new pectin.MutableListModel();
+            this._editorSessions = new pectin.MutableListModel();
+            this.identityOf = sourceOfTruth.identityOf;
+            var _a = pectin.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 pectin.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;
         };
-        // @Trace()
-        InteractionServiceRoutingAdapter.prototype.isComponentInteracting = function (component) {
-            return component.interactionContext && component.interactionContext.isActive();
+        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;
+            };
         };
-        InteractionServiceRoutingAdapter.prototype.getActiveInteractionContextIds = function () {
-            return this.activeInteractionContextIds.value;
+        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));
         };
-        // @Trace()
-        InteractionServiceRoutingAdapter.prototype.cancelCurrentModalInteraction = function () {
-            return this.activeModalContext.value.cancelActiveActivity();
+        TableModel.prototype.addSelectionColumn = function (selectionModel) {
+            return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
         };
-        // @Trace()
-        InteractionServiceRoutingAdapter.prototype.cancelComponentInteraction = function (component) {
-            return component.interactionContext.cancelActiveActivity();
+        TableModel.prototype.addEditControls = function (saveCommand) {
+            this.saveCommand = saveCommand;
+            return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
         };
-        return InteractionServiceRoutingAdapter;
-    }());
-
-    var ModalInteractionContextFactory = /** @class */ (function () {
-        function ModalInteractionContextFactory() {
-        }
-        return ModalInteractionContextFactory;
-    }());
-
-    var inplaceMonitorCount = 0;
-    exports.ɵbg = /** @class */ (function () {
-        function InteractionService(modelInteractionContextFactory) {
-            this.modelInteractionContextFactory = modelInteractionContextFactory;
-            this.garbage = new pectin.GarbageCollector();
-            // private readonly _activeModalContext = new MutableValueModel<InteractionContext>();
-            // private readonly _activeInlineContext = new MutableValueModel<InteractionContext>();
-            // private readonly _activeContext: ValueModelChain<InteractionContext>;
-            this._navigationInProgress = new pectin.DelegatingValueModel().withDefault(false);
-            var _a = pectin.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.addCustomColumn = function (columnId, dataAccessor) {
+            return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
         };
-        /**
-         * @deprecated use #createModalInteractionContextDisposedWith instead.
-         * @param disposable
-         */
-        InteractionService.prototype.createModalInteractionContextFor = function (disposable) {
-            return this.createModalInteractionContextDisposedWith(disposable);
+        TableModel.prototype.addColumn = function (column) {
+            if (this._columnsById.get(column.columnId)) {
+                pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
+            }
+            else {
+                this._columns.push(column);
+            }
+            return column;
         };
-        /**
-         * 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.columnTextProperties = function (columnTextProperties) {
+            this._columnTextPropertiesLookup = columnTextProperties;
         };
-        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.getColumnTextProperties = function (column) {
+            var factory = this._columnTextPropertiesLookup[column.columnId];
+            return factory ? factory() : undefined;
         };
-        /**
-         * 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.startEditSession = function (row) {
             var _this = this;
-            typescriptUtilities.assert.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 = core.ɵɵdefineInjectable({ factory: function InteractionService_Factory() { return new InteractionService(core.ɵɵinject(ModalInteractionContextFactory)); }, token: InteractionService, providedIn: "root" });
-        InteractionService = InteractionService_1 = __decorate([
-            core.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 pectin.MutableListModel();
-                _this._disabledDelegate = new pectin.DelegatingValueModel().withDefault(false);
-                var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-                _this.active = chain(_this._interactions).isNotEmpty();
-                _this.interactionContextIds = chain(_this._interactions).pluck("identifier");
-                return _this;
+            var rowId = this.identityOf(row);
+            if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+                return pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
             }
-            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;
-        }(pectin.GarbageCollector));
-        InteractionService.ContextRegistry = ContextRegistry;
-        var ApiAdapter = /** @class */ (function () {
-            function ApiAdapter(placeRouter, contextRegistry) {
-                this.placeRouter = placeRouter;
-                this.contextRegistry = contextRegistry;
+            else {
+                var editSession_1 = new TableModel_1.EditSession(rowId, row, this.saveCommand);
+                var when = pectin.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;
             }
-            // @Trace()
-            ApiAdapter.prototype.notifyActive = function (context) {
-                typescriptUtilities.assert.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;
-    })(exports.ɵbg || (exports.ɵbg = {}));
+        };
+        TableModel.prototype.getEditSessionFor = function (row) {
+            return this._editorSessionByRowId.get(this.identityOf(row));
+        };
+        TableModel.prototype.cancelAllEditorSessions = function () {
+            var _this = this;
+            this._editorSessions.runInTransaction(function (draft) {
+                _this._rowsBeingEdited.runInTransaction(function () {
+                    draft.value.forEach(function (session) { return session.dispose(); });
+                });
+            });
+        };
+        var TableModel_1;
+        TableModel.ctorParameters = function () { return [
+            { type: pectin.ListModel }
+        ]; };
+        TableModel = TableModel_1 = __decorate([
+            pectin.TrackExternal.Strategy(new pectin.TrackExternal.OneTimeBinding()),
+            __metadata("design:paramtypes", [pectin.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 pectin.MutableValueModel();
+                _this.rowValueModel = _this._editorValue.readonly;
+                _this.form = new pectin.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;
+        }(pectin.GarbageCollector));
+        TableModel.EditSession = EditSession;
+    })(exports.TableModel || (exports.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 = pectin.Command.create(function () {
+                _this.editSession.saveCommand.execute(_this.editSession.form)
+                    .then(function (finished) {
+                    if (finished) {
+                        _this.editSession.dispose();
+                    }
+                });
+            });
+            _this.cancelCommand = pectin.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([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], EditRowControls.prototype, "row", void 0);
+        __decorate([
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], EditRowControls.prototype, "editRowCommand", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", exports.TableModel.EditSession)
+        ], EditRowControls.prototype, "editSession", void 0);
+        EditRowControls = __decorate([
+            core.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 = pectin.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);
-        };
-        InPlaceInteractionContextComponent.prototype.confirmThen = function (confirm, activityType, data) {
-            return this.activityContainerComponent.confirmThen(confirm, activityType);
-        };
-        InPlaceInteractionContextComponent.prototype.isActive = function () {
-            return this.activityContainerComponent.isActive();
+        SelectCellRendererComponent.prototype.isSelected = function () {
+            return this.selectionModel.isSelected(this.row);
         };
-        InPlaceInteractionContextComponent.prototype.startActivity = function (activityType, data) {
-            return this.activityContainerComponent.startActivity(activityType, data);
-        };
-        InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbg },
-            { type: undefined, decorators: [{ type: core.Inject, args: [tabs.MAT_TABS_CONFIG,] }, { type: core.Optional }] }
-        ]; };
         __decorate([
-            core.ViewChild('activityContainer', { static: true }),
-            __metadata("design:type", ActivityContainerComponent)
-        ], InPlaceInteractionContextComponent.prototype, "activityContainerComponent", void 0);
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], SelectCellRendererComponent.prototype, "row", null);
         __decorate([
             core.Input(),
             __metadata("design:type", Object)
-        ], InPlaceInteractionContextComponent.prototype, "animateFirstActivity", void 0);
-        InPlaceInteractionContextComponent = __decorate([
+        ], SelectCellRendererComponent.prototype, "selectionModel", void 0);
+        SelectCellRendererComponent = __decorate([
             core.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, core.Inject(tabs.MAT_TABS_CONFIG)), __param(1, core.Optional()),
-            __metadata("design:paramtypes", [exports.ɵbg, 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 pectin.GarbageCollector();
-            typescriptUtilities.assert.notNil(dialogService);
+            _this.selectCommand = pectin.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()) {
-                pectin.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([
+            core.Input(),
+            __metadata("design:type", pectin.MultipleSelectionModel)
+        ], SelectHeaderCellRendererComponent.prototype, "selectionModel", void 0);
+        SelectHeaderCellRendererComponent = __decorate([
+            core.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 portal.ComponentPortal(cellRenderer),
+                pushState: initialiser
+            };
+        };
+        ColumnModel.prototype.cellHeaderRenderer = function (cellRenderer, initialiser) {
+            this._columnHeaderConfig = {
+                portal: new portal.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([
+            src.Memoize(),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", String)
+        ], ColumnModel.prototype, "getHeaderText", null);
+        __decorate([
+            src.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;
-            typescriptUtilities.assert.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 portal.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 pectin.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 = pectin.Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            this.columns = chain(this.tableModel.columns);
+            this.columnIds = chain(this.columns).pluck('columnId');
+        };
+        TableComponent.prototype.isEditing = function (row) {
+            return !!this.tableModel.getEditSessionFor(row);
+        };
+        __decorate([
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", exports.TableModel)
+        ], TableComponent.prototype, "tableModel", void 0);
+        TableComponent = __decorate([
+            core.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: core.TemplateRef },
+            { type: core.ViewContainerRef }
+        ]; };
+        ColumnTemplateDirective = __decorate([
+            core.Directive({
+                selector: '[aupColumnTemplate]'
+            }),
+            __metadata("design:paramtypes", [TableComponent,
+                core.TemplateRef,
+                core.ViewContainerRef])
+        ], ColumnTemplateDirective);
+        return ColumnTemplateDirective;
+    }());
+
+    var TableCellRendererComponent = /** @class */ (function () {
+        function TableCellRendererComponent() {
+            var _this = this;
+            this.defaultClassNames = "aup-header-cell-renderer";
+            this.editRowCommand = pectin.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([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "row", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", ColumnModel)
+        ], TableCellRendererComponent.prototype, "column", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", exports.TableModel.EditSession)
+        ], TableCellRendererComponent.prototype, "editSession", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", exports.TableModel)
+        ], TableCellRendererComponent.prototype, "tableModel", void 0);
+        __decorate([
+            core.HostBinding('class'),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+        TableCellRendererComponent = __decorate([
+            core.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([
+            core.Input(),
+            __metadata("design:type", ColumnModel)
+        ], TableHeaderCellRendererComponent.prototype, "column", void 0);
+        __decorate([
+            core.HostBinding('class'),
+            __metadata("design:type", Object)
+        ], TableHeaderCellRendererComponent.prototype, "defaultClassNames", void 0);
+        TableHeaderCellRendererComponent = __decorate([
+            core.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 core.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;
-            typescriptUtilities.assert.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: dialog.MatDialog },
-            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [DIALOG_INTERACTION_SERVICE_DEFAULTS,] }] },
-            { type: dialog.MatDialogConfig, decorators: [{ type: core.Optional }, { type: core.Inject, args: [dialog.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: pectin.FocusManager, decorators: [{ type: core.Self }] }
         ]; };
-        DialogInteractionContextFactory.ɵprov = core.ɵɵdefineInjectable({ factory: function DialogInteractionContextFactory_Factory() { return new DialogInteractionContextFactory(core.ɵɵinject(dialog.MatDialog), core.ɵɵinject(DIALOG_INTERACTION_SERVICE_DEFAULTS, 8), core.ɵɵinject(dialog.MAT_DIALOG_DEFAULT_OPTIONS, 8)); }, token: DialogInteractionContextFactory, providedIn: "root" });
-        DialogInteractionContextFactory = __decorate([
-            core.Injectable({
-                providedIn: 'root'
+        __decorate([
+            core.Input('command.arrowRight'),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
+        __decorate([
+            core.Input('command.arrowLeft'),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
+        __decorate([
+            core.HostListener('keyup.arrowLeft', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
+        __decorate([
+            core.HostListener('keyup.arrowRight', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowRight", null);
+        __decorate([
+            core.HostListener('keyup.arrowDown', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+        __decorate([
+            core.HostListener('keyup.arrowUp', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowUp", null);
+        VerticalFocusContainerComponent = __decorate([
+            core.Component({
+                selector: 'aup-vertical-focus-container',
+                template: "<ng-content></ng-content>\n",
+                providers: [
+                    { provide: pectin.FocusManager }
+                ],
+                styles: [":host{display:block}"]
             }),
-            __param(1, core.Optional()), __param(1, core.Inject(DIALOG_INTERACTION_SERVICE_DEFAULTS)),
-            __param(2, core.Optional()), __param(2, core.Inject(dialog.MAT_DIALOG_DEFAULT_OPTIONS)),
-            __metadata("design:paramtypes", [dialog.MatDialog,
-                dialog.MatDialogConfig,
-                dialog.MatDialogConfig])
-        ], DialogInteractionContextFactory);
-        return DialogInteractionContextFactory;
-    }(ModalInteractionContextFactory));
+            __param(0, core.Self()),
+            __metadata("design:paramtypes", [pectin.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 = pectin.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__default.isEmpty(this.confirmText);
         };
         __decorate([
             core.Input(),
-            __metadata("design:type", String)
-        ], AddItemInteractionContextComponent.prototype, "label", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", Object)
-        ], AddItemInteractionContextComponent.prototype, "activityData", void 0);
+            __metadata("design:type", String)
+        ], ActivityActionsComponent.prototype, "confirmText", void 0);
         __decorate([
             core.Input(),
             pectin.TrackExternal(),
             __metadata("design:type", pectin.Command)
-        ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
+        ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
         __decorate([
-            core.ViewChild(InPlaceInteractionContextComponent),
-            __metadata("design:type", InPlaceInteractionContextComponent)
-        ], AddItemInteractionContextComponent.prototype, "interactionContext", void 0);
+            core.Input(),
+            __metadata("design:type", String)
+        ], ActivityActionsComponent.prototype, "align", void 0);
         __decorate([
-            core.HostBinding('class.interaction-active'),
+            core.HostBinding('class.align-end'),
             __metadata("design:type", Boolean),
             __metadata("design:paramtypes", [])
-        ], AddItemInteractionContextComponent.prototype, "active", null);
-        __decorate([
-            core.HostBinding('tabindex'),
-            __metadata("design:type", Object)
-        ], AddItemInteractionContextComponent.prototype, "tabindex", void 0);
-        AddItemInteractionContextComponent = __decorate([
+        ], ActivityActionsComponent.prototype, "alignEnd", null);
+        ActivityActionsComponent = __decorate([
             core.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 () {
@@ -2478,7 +3399,9 @@
                     portal.PortalModule,
                     router.RouterModule,
                     icon.MatIconModule,
-                    DirectivesModule
+                    DirectivesModule,
+                    flexLayout.FlexModule,
+                    flexLayout.GridModule
                 ],
                 declarations: [
                     ActivityContainerComponent,
@@ -2488,14 +3411,18 @@
                     ActivityOutletComponent,
                     InPlaceInteractionContextComponent,
                     AddItemInteractionContextComponent,
-                    ActivityActionsComponent
+                    ActivityActionsComponent,
+                    PopupInteractionContextComponent,
+                    InteractionContextTriggerFor
                 ],
                 exports: [
                     ActivityContainerComponent,
                     ActivityOutletComponent,
                     InPlaceInteractionContextComponent,
                     AddItemInteractionContextComponent,
-                    ActivityActionsComponent
+                    ActivityActionsComponent,
+                    PopupInteractionContextComponent,
+                    InteractionContextTriggerFor
                 ],
                 entryComponents: [
                     ActivityContainerComponent,
@@ -2504,13 +3431,94 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbg,
+                    exports.ɵbw
+                    // {
+                    //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
+                    // }
                 ]
             })
         ], InteractionModule);
         return InteractionModule;
     }());
 
+    var ComponentsModule = /** @class */ (function () {
+        function ComponentsModule() {
+        }
+        ComponentsModule = __decorate([
+            core.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: [
+                    common.CommonModule,
+                    animations.BrowserAnimationsModule,
+                    forms.FormsModule,
+                    input.MatInputModule,
+                    formField.MatFormFieldModule,
+                    select.MatSelectModule,
+                    tabs.MatTabsModule,
+                    DirectivesModule,
+                    icon.MatIconModule,
+                    button.MatButtonModule,
+                    checkbox.MatCheckboxModule,
+                    InteractionModule,
+                    table.MatTableModule,
+                    portal.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;
+    }());
+
     exports.ParameterDefinition = /** @class */ (function () {
         function ParameterDefinition(propertyName, options, urlFormat) {
             this.propertyName = propertyName;
@@ -3623,7 +4631,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵbj = /** @class */ (function () {
+    exports.ɵco = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -3760,7 +4768,7 @@
         //   }
         //
         // }
-    })(exports.ɵbj || (exports.ɵbj = {}));
+    })(exports.ɵco || (exports.ɵco = {}));
 
     exports.UrlSnapshot = /** @class */ (function () {
         // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
@@ -4283,11 +5291,11 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbg },
+            { type: exports.ɵbw },
             { type: UrlService },
-            { type: exports.ɵbj }
+            { type: exports.ɵco }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbg), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbj)); }, token: PlaceRouter, providedIn: "root" });
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbw), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵco)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
             pectin.Trace(),
             __metadata("design:type", Function),
@@ -4300,9 +5308,9 @@
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbg,
+                exports.ɵbw,
                 UrlService,
-                exports.ɵbj])
+                exports.ɵco])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -5281,6 +6289,7 @@
 
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
+    exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
@@ -5296,18 +6305,26 @@
     exports.BusyOverlayComponent = BusyOverlayComponent;
     exports.CardContainerComponent = CardContainerComponent;
     exports.CheckboxInputComponent = CheckboxInputComponent;
+    exports.ColumnModel = ColumnModel;
+    exports.ColumnTemplateDirective = ColumnTemplateDirective;
     exports.CommandDirective = CommandDirective;
     exports.ComponentsModule = ComponentsModule;
     exports.ConfirmThenDialogComponent = ConfirmThenDialogComponent;
     exports.ConfirmationDialogComponent = ConfirmationDialogComponent;
     exports.ConsolidatedParameterMap = ConsolidatedParameterMap;
+    exports.CustomTemplateColumnModel = CustomTemplateColumnModel;
+    exports.CustomValueColumnModel = CustomValueColumnModel;
     exports.DEFINITION_META_DATA_KEY = DEFINITION_META_DATA_KEY;
     exports.DIALOG_INTERACTION_SERVICE_DEFAULTS = DIALOG_INTERACTION_SERVICE_DEFAULTS;
+    exports.DefaultCellRendererComponent = DefaultCellRendererComponent;
+    exports.DefaultHeaderCellRendererComponent = DefaultHeaderCellRendererComponent;
     exports.DialogInteractionContext = DialogInteractionContext;
     exports.DialogInteractionContextFactory = DialogInteractionContextFactory;
     exports.Dimension = Dimension;
     exports.DirectivesModule = DirectivesModule;
     exports.DisposableComponent = DisposableComponent;
+    exports.EditRowControls = EditRowControls;
+    exports.EditorControlColumnModel = EditorControlColumnModel;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.EventCleanUpSession = EventCleanUpSession;
     exports.FocusBinding = FocusBinding;
@@ -5316,8 +6333,9 @@
     exports.FocusContainerComponent = FocusContainerComponent;
     exports.FocusableComponent = FocusableComponent;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
+    exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbg;
+    exports.InteractionService = exports.ɵbw;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -5333,20 +6351,26 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵbj;
+    exports.PlaceHistory = exports.ɵco;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
     exports.Point = Point;
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     exports.PopStateNavigation = PopStateNavigation;
+    exports.PopupInteractionContextComponent = PopupInteractionContextComponent;
+    exports.PropertyColumnModel = PropertyColumnModel;
     exports.ROUTE_PARAMETER_LIST_KEY = ROUTE_PARAMETER_LIST_KEY;
     exports.RemoveLastInteractionFromUrlNavigationSession = RemoveLastInteractionFromUrlNavigationSession;
     exports.ResizeAwareComponent = ResizeAwareComponent;
     exports.RouteId = RouteId;
     exports.ScrollContainerComponent = ScrollContainerComponent;
+    exports.SelectCellRendererComponent = SelectCellRendererComponent;
+    exports.SelectHeaderCellRendererComponent = SelectHeaderCellRendererComponent;
     exports.SelectInputComponent = SelectInputComponent;
+    exports.SelectionColumnModel = SelectionColumnModel;
     exports.SidePlaceNavigationComponent = SidePlaceNavigationComponent;
+    exports.StringInputActivity = StringInputActivity;
     exports.StringInputComponent = StringInputComponent;
     exports.SwitchCaseComponent = SwitchCaseComponent;
     exports.SwitchCaseDefaultDirective = SwitchCaseDefaultDirective;
@@ -5354,6 +6378,9 @@
     exports.SwitchCaseWhenDirective = SwitchCaseWhenDirective;
     exports.SynchroniseInteractionContextIdsWithRoute = SynchroniseInteractionContextIdsWithRoute;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
+    exports.TableCellRendererComponent = TableCellRendererComponent;
+    exports.TableComponent = TableComponent;
+    exports.TableHeaderCellRendererComponent = TableHeaderCellRendererComponent;
     exports.TextInputComponent = TextInputComponent;
     exports.UrlService = UrlService;
     exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
@@ -5369,55 +6396,70 @@
     exports.slideRightOnEnterAnimation = slideRightOnEnterAnimation;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = PlaceOutletComponent;
-    exports.ɵbb = leftRightPlaceAnimation;
-    exports.ɵbc = LEFT_RIGHT_PLACE_ANIMATION;
-    exports.ɵbd = AUP_PLACE_CONFIG;
-    exports.ɵbf = PlaceRouter;
-    exports.ɵbh = ModalInteractionContextFactory;
-    exports.ɵbi = UrlService;
-    exports.ɵbk = TabbedPlaceNavigationComponent;
-    exports.ɵbl = AbstractPlaceNavigationComponent;
-    exports.ɵbm = ListPlaceNavComponent;
-    exports.ɵbn = SidePlaceNavigationComponent;
-    exports.ɵbo = InteractionModule;
-    exports.ɵbp = ActivityContainerComponent;
-    exports.ɵbq = AbstractInteractionContext;
-    exports.ɵbr = ActivityOutletComponent;
-    exports.ɵbs = ConfirmationDialogComponent;
-    exports.ɵbt = ACTIVITY_DATA;
-    exports.ɵbu = Activity;
-    exports.ɵbw = ConfirmThenDialogComponent;
-    exports.ɵbx = AlertDialogComponent;
-    exports.ɵbz = InPlaceInteractionContextComponent;
+    exports.ɵba = CardContainerComponent;
+    exports.ɵbb = TableComponent;
+    exports.ɵbc = EditRowControls;
+    exports.ɵbd = ColumnTemplateDirective;
+    exports.ɵbe = DefaultCellRendererComponent;
+    exports.ɵbf = TableCellRendererComponent;
+    exports.ɵbg = SelectCellRendererComponent;
+    exports.ɵbh = SelectHeaderCellRendererComponent;
+    exports.ɵbi = DefaultHeaderCellRendererComponent;
+    exports.ɵbj = TableHeaderCellRendererComponent;
+    exports.ɵbk = InteractionModule;
+    exports.ɵbl = ActivityContainerComponent;
+    exports.ɵbm = AbstractInteractionContext;
+    exports.ɵbn = ActivityOutletComponent;
+    exports.ɵbo = ConfirmationDialogComponent;
+    exports.ɵbp = ACTIVITY_DATA;
+    exports.ɵbq = Activity;
+    exports.ɵbs = ConfirmThenDialogComponent;
+    exports.ɵbt = AlertDialogComponent;
+    exports.ɵbv = InPlaceInteractionContextComponent;
+    exports.ɵbx = ModalInteractionContextFactory;
+    exports.ɵby = AddItemInteractionContextComponent;
+    exports.ɵbz = DisposableComponent;
     exports.ɵc = FocusBindingDirective;
-    exports.ɵca = AddItemInteractionContextComponent;
-    exports.ɵcb = DisposableComponent;
-    exports.ɵcc = InPlaceInteractionContextComponent;
-    exports.ɵcd = ActivityActionsComponent;
+    exports.ɵca = InPlaceInteractionContextComponent;
+    exports.ɵcb = ActivityActionsComponent;
+    exports.ɵcc = PopupInteractionContextComponent;
+    exports.ɵcd = InteractionContextTriggerFor;
+    exports.ɵce = PlaceModule;
+    exports.ɵcf = EmptyStateComponent;
+    exports.ɵcg = BusyOverlayComponent;
+    exports.ɵch = PlaceOutletComponent;
+    exports.ɵci = leftRightPlaceAnimation;
+    exports.ɵcj = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵck = AUP_PLACE_CONFIG;
+    exports.ɵcm = PlaceRouter;
+    exports.ɵcn = UrlService;
+    exports.ɵcp = TabbedPlaceNavigationComponent;
+    exports.ɵcq = AbstractPlaceNavigationComponent;
+    exports.ɵcr = ListPlaceNavComponent;
+    exports.ɵcs = SidePlaceNavigationComponent;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;
-    exports.ɵg = NumberInputComponent;
-    exports.ɵh = AbstractInputComponent;
-    exports.ɵi = StringInputComponent;
-    exports.ɵj = TextInputComponent;
-    exports.ɵk = PasswordInputComponent;
-    exports.ɵl = SelectInputComponent;
-    exports.ɵm = CheckboxInputComponent;
-    exports.ɵn = ScrollContainerComponent;
-    exports.ɵo = NoopComponent;
-    exports.ɵp = SwitchCaseOption;
-    exports.ɵq = SwitchCaseWhenDirective;
-    exports.ɵr = SwitchCaseDefaultDirective;
-    exports.ɵs = SwitchCaseComponent;
-    exports.ɵt = FocusContainerComponent;
-    exports.ɵu = VerticalFocusContainerComponent;
-    exports.ɵv = FocusableComponent;
-    exports.ɵw = CardContainerComponent;
-    exports.ɵx = PlaceModule;
-    exports.ɵy = EmptyStateComponent;
-    exports.ɵz = BusyOverlayComponent;
+    exports.ɵg = AbstractInputComponent;
+    exports.ɵh = AbstractInputActivity;
+    exports.ɵi = Activity;
+    exports.ɵj = ACTIVITY_DATA;
+    exports.ɵk = NumberInputComponent;
+    exports.ɵl = StringInputComponent;
+    exports.ɵm = StringInputActivity;
+    exports.ɵn = TextInputComponent;
+    exports.ɵo = PasswordInputComponent;
+    exports.ɵp = SelectInputComponent;
+    exports.ɵq = CheckboxInputComponent;
+    exports.ɵr = ScrollContainerComponent;
+    exports.ɵs = NoopComponent;
+    exports.ɵt = SwitchCaseOption;
+    exports.ɵu = SwitchCaseWhenDirective;
+    exports.ɵv = SwitchCaseDefaultDirective;
+    exports.ɵw = SwitchCaseComponent;
+    exports.ɵx = FocusContainerComponent;
+    exports.ɵy = VerticalFocusContainerComponent;
+    exports.ɵz = FocusableComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });