@coolon/angular-ui-powerups 1.11.2 → 1.11.4

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

@@ -1,12 +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/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';
+    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('@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('resize-observer-polyfill'), 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', '@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', 'resize-observer-polyfill', '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.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.ResizeObserver, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, button, checkbox, icon, table, pectin, flexLayout, dialog, router, ___default, typescriptUtilities, overlay, src, produce, progressSpinner, list, tooltip, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, 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;
+    ResizeObserver = ResizeObserver && Object.prototype.hasOwnProperty.call(ResizeObserver, 'default') ? ResizeObserver['default'] : ResizeObserver;
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation. All rights reserved.
@@ -540,360 +540,155 @@
         return DirectivesModule;
     }());
 
-    var FocusableComponent = /** @class */ (function (_super) {
-        __extends(FocusableComponent, _super);
-        function FocusableComponent(el, focusManager, focusBindingFactory) {
-            var _this = _super.call(this) || this;
-            _this.el = el;
-            _this.focusManager = focusManager;
-            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;
-            if (_this.focusManager) {
-                _this._focusContext = _this.focusManager.registerFocusable(_this);
-                _this.registerDisposable(_this._focusContext);
-                _this.registerDisposable(focusBindingFactory.createBinding(el.nativeElement, _this.focusContext));
-            }
+    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(FocusableComponent.prototype, "focusable", {
+        Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
             get: function () {
-                return !!this.focusContext ? 0 : undefined;
+                return this.align === 'end';
             },
             enumerable: true,
             configurable: true
         });
-        FocusableComponent.prototype.onFocus = function () {
-            var _a;
-            (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusIn();
+        ActivityActionsComponent.prototype.ngOnInit = function () {
         };
-        FocusableComponent.prototype.onBlur = function () {
-            var _a;
-            (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusOut();
+        ActivityActionsComponent.prototype.hasConfirmText = function () {
+            return !___default__default.isEmpty(this.confirmText);
         };
-        Object.defineProperty(FocusableComponent.prototype, "focusContext", {
-            get: function () {
-                return this._focusContext;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        FocusableComponent.ctorParameters = function () { return [
-            { type: core.ElementRef },
-            { type: pectin.FocusManager },
-            { type: FocusBindingFactory }
-        ]; };
         __decorate([
-            core.HostBinding('attr.tabindex'),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [])
-        ], FocusableComponent.prototype, "focusable", null);
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
         __decorate([
-            core.HostListener('focus'),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], FocusableComponent.prototype, "onFocus", null);
+            core.Input(),
+            __metadata("design:type", String)
+        ], ActivityActionsComponent.prototype, "confirmText", void 0);
         __decorate([
-            core.HostListener('blur'),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], FocusableComponent.prototype, "onBlur", null);
-        FocusableComponent = __decorate([
-            core.Component({ template: '' }),
-            __metadata("design:paramtypes", [core.ElementRef, pectin.FocusManager, FocusBindingFactory])
-        ], FocusableComponent);
-        return FocusableComponent;
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], ActivityActionsComponent.prototype, "cancelCommand", 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([
+            core.Component({
+                selector: 'aup-activity-actions',
+                template: "<button class=\"cancel\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <mat-icon>clear</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <mat-icon>done</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
+                styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}"]
+            })
+        ], ActivityActionsComponent);
+        return ActivityActionsComponent;
     }(DisposableComponent));
 
-    var Dimension = /** @class */ (function () {
-        function Dimension(width, height) {
-            this.width = width;
-            this.height = height;
-        }
-        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);
-        };
-        Point.prototype.translate = function (x, y) {
-            return new Point(this.x + x, this.y + y);
-        };
-        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);
-            }
-        };
-        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));
+    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;
         }
-        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(); });
+        Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
+            typescriptUtilities.assert.isNil(this._activityContext);
+            this._activityContext = activityContext;
+            this._interactionContext = nestedInteractionContext;
         };
-        Object.defineProperty(ResizeAwareComponent.prototype, "boundsModel", {
+        Object.defineProperty(Activity.prototype, "interactionContext", {
             get: function () {
-                return this._boundsModel.readonly;
+                typescriptUtilities.assert.isTruthy(this.isInitialised());
+                return this._interactionContext;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
+        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.elementRef.nativeElement;
+                return this._busyModel.readonly;
             },
             enumerable: true,
             configurable: true
         });
-        // TODO: Make this handle body scroll
-        ResizeAwareComponent.prototype.relativePositionOf = function (point) {
-            return this.bounds.relativePositionOf(point);
+        Activity.prototype.busyWhile = function (busyModel) {
+            this._busyModel.setDelegate(busyModel);
         };
-        Object.defineProperty(ResizeAwareComponent.prototype, "bounds", {
+        Activity.prototype.isBusy = function () {
+            return this._busyModel.value;
+        };
+        Activity.prototype.isInitialised = function () {
+            return !!this._activityContext;
+        };
+        __decorate([
+            core.HostBinding('class'),
+            __metadata("design:type", Object)
+        ], 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-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}"]
+            }),
+            __param(0, core.Inject(ACTIVITY_DATA)),
+            __metadata("design:paramtypes", [Object])
+        ], AlertDialogComponent);
+        return AlertDialogComponent;
+    }(Activity));
+
+    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;
+        }
+        ConfirmThenDialogComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(ConfirmThenDialogComponent.prototype, "confirm", {
             get: function () {
-                return this._boundsModel.value;
+                return this.config.confirm;
             },
             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(),
-            pectin.TrackExternal(),
-            __metadata("design:type", pectin.Command)
-        ], CardContainerComponent.prototype, "addCardCommand", void 0);
-        __decorate([
-            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", [])
-        ], CardContainerComponent);
-        return CardContainerComponent;
-    }(DisposableComponent));
-
-    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 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;
-        }
-        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.HostBinding('class'),
-            __metadata("design:type", Object)
-        ], 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-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}"]
-            }),
-            __param(0, core.Inject(ACTIVITY_DATA)),
-            __metadata("design:paramtypes", [Object])
-        ], AlertDialogComponent);
-        return AlertDialogComponent;
-    }(Activity));
-
-    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;
-        }
-        ConfirmThenDialogComponent.prototype.ngOnInit = function () {
-        };
-        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.isDestructive = function () {
+            return this.confirm.destructive && this.confirm.destructive();
         };
         ConfirmThenDialogComponent.prototype.onConfirm = function () {
             var _this = this;
@@ -1316,76 +1111,6 @@
         return ActivityContainerComponent;
     }(AbstractInteractionContext));
 
-    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;
-        }
-        Object.defineProperty(AddItemInteractionContextComponent.prototype, "active", {
-            get: function () {
-                return this.interactionContext ? this.interactionContext.isActive() : false;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        AddItemInteractionContextComponent.prototype.startActivity = function (activityType, data) {
-            return this.interactionContext.startActivity(activityType, data);
-        };
-        AddItemInteractionContextComponent.prototype.ngOnInit = function () {
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", String)
-        ], AddItemInteractionContextComponent.prototype, "label", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], AddItemInteractionContextComponent.prototype, "activityData", void 0);
-        __decorate([
-            core.Input(),
-            pectin.TrackExternal(),
-            __metadata("design:type", pectin.Command)
-        ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
-        __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-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;
-    }(DisposableComponent));
-
     var InteractionServiceRoutingAdapter = /** @class */ (function () {
         function InteractionServiceRoutingAdapter(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
             this.activeInteractionContextIds = activeInteractionContextIds;
@@ -1649,9 +1374,79 @@
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
 
-    var PopupInteractionContextComponent = /** @class */ (function (_super) {
-        __extends(PopupInteractionContextComponent, _super);
-        function PopupInteractionContextComponent(_element, _overlay) {
+    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;
+        }
+        Object.defineProperty(AddItemInteractionContextComponent.prototype, "active", {
+            get: function () {
+                return this.interactionContext ? this.interactionContext.isActive() : false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        AddItemInteractionContextComponent.prototype.startActivity = function (activityType, data) {
+            return this.interactionContext.startActivity(activityType, data);
+        };
+        AddItemInteractionContextComponent.prototype.ngOnInit = function () {
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], AddItemInteractionContextComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "activityClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], AddItemInteractionContextComponent.prototype, "activityData", void 0);
+        __decorate([
+            core.Input(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
+        __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-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;
+    }(DisposableComponent));
+
+    var PopupInteractionContextComponent = /** @class */ (function (_super) {
+        __extends(PopupInteractionContextComponent, _super);
+        function PopupInteractionContextComponent(_element, _overlay) {
             var _this = _super.call(this) || this;
             _this._element = _element;
             _this._overlay = _overlay;
@@ -1822,6 +1617,210 @@
         return InteractionContextTriggerFor;
     }(pectin.GarbageCollector));
 
+    var InteractionModule = /** @class */ (function () {
+        function InteractionModule() {
+        }
+        InteractionModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    button.MatButtonModule,
+                    dialog.MatDialogModule,
+                    tabs.MatTabsModule,
+                    portal.PortalModule,
+                    router.RouterModule,
+                    icon.MatIconModule,
+                    DirectivesModule,
+                    flexLayout.FlexModule,
+                    flexLayout.GridModule
+                ],
+                declarations: [
+                    ActivityContainerComponent,
+                    ConfirmationDialogComponent,
+                    ConfirmThenDialogComponent,
+                    AlertDialogComponent,
+                    ActivityOutletComponent,
+                    InPlaceInteractionContextComponent,
+                    AddItemInteractionContextComponent,
+                    ActivityActionsComponent,
+                    PopupInteractionContextComponent,
+                    InteractionContextTriggerFor
+                ],
+                exports: [
+                    ActivityContainerComponent,
+                    ActivityOutletComponent,
+                    InPlaceInteractionContextComponent,
+                    AddItemInteractionContextComponent,
+                    ActivityActionsComponent,
+                    PopupInteractionContextComponent,
+                    InteractionContextTriggerFor
+                ],
+                entryComponents: [
+                    ActivityContainerComponent,
+                    ConfirmationDialogComponent,
+                    ConfirmThenDialogComponent,
+                    AlertDialogComponent
+                ],
+                providers: [
+                    exports.ɵbw
+                    // {
+                    //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
+                    // }
+                ]
+            })
+        ], InteractionModule);
+        return InteractionModule;
+    }());
+
+    /**
+     * @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(),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], CardContainerComponent.prototype, "addCardCommand", void 0);
+        __decorate([
+            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", [])
+        ], CardContainerComponent);
+        return CardContainerComponent;
+    }(DisposableComponent));
+
+    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) {
+            var _this = _super.call(this) || this;
+            _this.el = el;
+            _this.focusManager = focusManager;
+            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;
+            if (_this.focusManager) {
+                _this._focusContext = _this.focusManager.registerFocusable(_this);
+                _this.registerDisposable(_this._focusContext);
+                _this.registerDisposable(focusBindingFactory.createBinding(el.nativeElement, _this.focusContext));
+            }
+            return _this;
+        }
+        Object.defineProperty(FocusableComponent.prototype, "focusable", {
+            get: function () {
+                return !!this.focusContext ? 0 : undefined;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FocusableComponent.prototype.onFocus = function () {
+            var _a;
+            (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusIn();
+        };
+        FocusableComponent.prototype.onBlur = function () {
+            var _a;
+            (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusOut();
+        };
+        Object.defineProperty(FocusableComponent.prototype, "focusContext", {
+            get: function () {
+                return this._focusContext;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        FocusableComponent.ctorParameters = function () { return [
+            { type: core.ElementRef },
+            { type: pectin.FocusManager },
+            { type: FocusBindingFactory }
+        ]; };
+        __decorate([
+            core.HostBinding('attr.tabindex'),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [])
+        ], FocusableComponent.prototype, "focusable", null);
+        __decorate([
+            core.HostListener('focus'),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], FocusableComponent.prototype, "onFocus", null);
+        __decorate([
+            core.HostListener('blur'),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], FocusableComponent.prototype, "onBlur", null);
+        FocusableComponent = __decorate([
+            core.Component({ template: '' }),
+            __metadata("design:paramtypes", [core.ElementRef, pectin.FocusManager, FocusBindingFactory])
+        ], FocusableComponent);
+        return FocusableComponent;
+    }(DisposableComponent));
+
     var DialogInteractionContext = /** @class */ (function (_super) {
         __extends(DialogInteractionContext, _super);
         function DialogInteractionContext(identifier, api, dialogService, config) {
@@ -2492,288 +2491,101 @@
             else {
                 console.warn("found no matching or default case values.");
                 this.selectedIndex = -1;
-            }
-        };
-        SwitchCaseComponent.ctorParameters = function () { return [
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input(), pectin.TrackExternal(),
-            __metadata("design:type", pectin.ValueModel)
-        ], SwitchCaseComponent.prototype, "switchModel", void 0);
-        __decorate([
-            core.Input(), pectin.StoreInValueModel('switchModel'),
-            __metadata("design:type", Object)
-        ], SwitchCaseComponent.prototype, "switch", void 0);
-        __decorate([
-            core.ContentChildren(SwitchCaseOption),
-            __metadata("design:type", core.QueryList)
-        ], 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([
-            core.Input(),
-            __metadata("design:type", Object),
-            __metadata("design:paramtypes", [Object])
-        ], DefaultCellRendererComponent.prototype, "value", null);
-        DefaultCellRendererComponent = __decorate([
-            core.Component({
-                selector: 'aup-default-cell-renderer',
-                template: "{{value}}\n",
-                styles: [""]
-            }),
-            __metadata("design:paramtypes", [])
-        ], DefaultCellRendererComponent);
-        return DefaultCellRendererComponent;
-    }());
-
-    var DefaultHeaderCellRendererComponent = /** @class */ (function () {
-        function DefaultHeaderCellRendererComponent() {
-        }
-        __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;
-        };
-        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;
-            };
-        };
-        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));
-        };
-        TableModel.prototype.addSelectionColumn = function (selectionModel) {
-            return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
-        };
-        TableModel.prototype.addEditControls = function (saveCommand) {
-            this.saveCommand = saveCommand;
-            return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
-        };
-        TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
-            return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
-        };
-        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;
-        };
-        TableModel.prototype.columnTextProperties = function (columnTextProperties) {
-            this._columnTextPropertiesLookup = columnTextProperties;
-        };
-        TableModel.prototype.getColumnTextProperties = function (column) {
-            var factory = this._columnTextPropertiesLookup[column.columnId];
-            return factory ? factory() : undefined;
-        };
-        TableModel.prototype.startEditSession = function (row) {
-            var _this = this;
-            var rowId = this.identityOf(row);
-            if (this._rowsBeingEdited.query().indexOf(row) > -1) {
-                return pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
-            }
-            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;
-            }
-        };
-        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 }
+        SwitchCaseComponent.ctorParameters = function () { return [
+            { type: core.ChangeDetectorRef }
         ]; };
-        TableModel = TableModel_1 = __decorate([
-            pectin.TrackExternal.Strategy(new pectin.TrackExternal.OneTimeBinding()),
-            __metadata("design:paramtypes", [pectin.ListModel])
-        ], TableModel);
-        return TableModel;
+        __decorate([
+            core.Input(), pectin.TrackExternal(),
+            __metadata("design:type", pectin.ValueModel)
+        ], SwitchCaseComponent.prototype, "switchModel", void 0);
+        __decorate([
+            core.Input(), pectin.StoreInValueModel('switchModel'),
+            __metadata("design:type", Object)
+        ], SwitchCaseComponent.prototype, "switch", void 0);
+        __decorate([
+            core.ContentChildren(SwitchCaseOption),
+            __metadata("design:type", core.QueryList)
+        ], 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([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], DefaultCellRendererComponent.prototype, "value", null);
+        DefaultCellRendererComponent = __decorate([
+            core.Component({
+                selector: 'aup-default-cell-renderer',
+                template: "{{value}}\n",
+                styles: [""]
+            }),
+            __metadata("design:paramtypes", [])
+        ], DefaultCellRendererComponent);
+        return DefaultCellRendererComponent;
     }());
-    (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);
-                    });
+
+    var DefaultHeaderCellRendererComponent = /** @class */ (function () {
+        function DefaultHeaderCellRendererComponent() {
+        }
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], DefaultHeaderCellRendererComponent.prototype, "headerText", void 0);
+        DefaultHeaderCellRendererComponent = __decorate([
+            core.Component({
+                selector: 'aup-default-header-renderer',
+                template: "{{headerText}}\n",
+                styles: [""]
+            }),
+            __metadata("design:paramtypes", [])
+        ], DefaultHeaderCellRendererComponent);
+        return DefaultHeaderCellRendererComponent;
+    }());
+
+    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 = {}));
+            });
+            return _this;
+        }
+        return EditSession;
+    }(pectin.GarbageCollector));
 
     var EditRowControls = /** @class */ (function (_super) {
         __extends(EditRowControls, _super);
@@ -2813,7 +2625,7 @@
         ], EditRowControls.prototype, "editRowCommand", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", exports.TableModel.EditSession)
+            __metadata("design:type", EditSession)
         ], EditRowControls.prototype, "editSession", void 0);
         EditRowControls = __decorate([
             core.Component({
@@ -2903,7 +2715,7 @@
             this.columnId = columnId;
             this.defaults = defaults;
             this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
-                component.columnModel = column;
+                component.headerText = column.getHeaderText();
             });
         }
         ColumnModel.prototype.getHeaderText = function () {
@@ -3067,17 +2879,202 @@
                     component.selectionModel = selectionModel;
                 });
             }
-            _this.setCellRenderer(SelectCellRendererComponent, function (component, row, editRowCommand, editSession) {
-                component.row = row;
-                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));
+
+    // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
+    // export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+    /**
+     * Example:
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     * });
+     *
+     * Editable tables
+     * @example
+     * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+     *   if (form.validate()) {
+     *     // normal form save stuff
+     *     return true; // finish editing
+     *   }
+     *   return false; // continue editiing
+     * }
+     * const colorsNames: ListModel<string> = ...;
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+     *   table.pluck("lastName").cellEditor(StringInputComponent, {
+     *     validators: [Validator.present("We need a last name")]
+     *   });
+     *   table.pluck("age").cellEditor(NumberInputComponent);
+     *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+     *     initialiseComponent(component: SelectInputComponent) {
+     *       selectInput.optionsModel = colorsNames; // <- initialise our component
+     *     }
+     *   });
+     *   table.addEditControls(saveCommand); // <- required to enable editing
+     * });
+     *
+     * Selection models
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     * });
+     *
+     * Custom cell renderers and editors
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("favoriteColor")
+     *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+     *        // configure your component with what ever you need.
+     *      });
+     *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+     *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     * });
+     *
+     * I18n
+     * @example
+     * [table.yml]
+     * table:
+     *   columns(ColumnTextProperties[]):
+     *      firstName:
+     *         headerText: "First Name"
+     *      fullName:
+     *         headerText: "Full Name"
+     *
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     *
+     *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+     * });
+     */
+    var TableModel = /** @class */ (function () {
+        function TableModel(sourceOfTruth) {
+            this.sourceOfTruth = sourceOfTruth;
+            this._garbage = new 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;
+        };
+        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;
+            };
+        };
+        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));
+        };
+        TableModel.prototype.addSelectionColumn = function (selectionModel) {
+            return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
+        };
+        TableModel.prototype.addEditControls = function (saveCommand) {
+            this.saveCommand = saveCommand;
+            return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+        };
+        TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
+            return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+        };
+        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;
+        };
+        TableModel.prototype.columnTextProperties = function (columnTextProperties) {
+            this._columnTextPropertiesLookup = columnTextProperties;
+        };
+        TableModel.prototype.getColumnTextProperties = function (column) {
+            var factory = this._columnTextPropertiesLookup[column.columnId];
+            return factory ? factory() : undefined;
+        };
+        TableModel.prototype.startEditSession = function (row) {
+            var _this = this;
+            var rowId = this.identityOf(row);
+            if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+                return pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
+            }
+            else {
+                var editSession_1 = new 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;
+            }
+        };
+        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(); });
+                });
             });
-            return _this;
-        }
-        SelectionColumnModel.prototype.getDefaultHeaderText = function () {
-            return '';
         };
-        return SelectionColumnModel;
-    }(ColumnModel));
+        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;
+    }());
 
     /**
      * Create your model:
@@ -3122,7 +3119,7 @@
         __decorate([
             core.Input(),
             pectin.TrackExternal(),
-            __metadata("design:type", exports.TableModel)
+            __metadata("design:type", TableModel)
         ], TableComponent.prototype, "tableModel", void 0);
         TableComponent = __decorate([
             core.Component({
@@ -3195,11 +3192,11 @@
         ], TableCellRendererComponent.prototype, "column", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", exports.TableModel.EditSession)
+            __metadata("design:type", EditSession)
         ], TableCellRendererComponent.prototype, "editSession", void 0);
         __decorate([
             core.Input(),
-            __metadata("design:type", exports.TableModel)
+            __metadata("design:type", TableModel)
         ], TableCellRendererComponent.prototype, "tableModel", void 0);
         __decorate([
             core.HostBinding('class'),
@@ -3330,117 +3327,6 @@
         return VerticalFocusContainerComponent;
     }(FocusContainerComponent));
 
-    /**
-     * @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';
-            return _this;
-        }
-        Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
-            get: function () {
-                return this.align === 'end';
-            },
-            enumerable: true,
-            configurable: true
-        });
-        ActivityActionsComponent.prototype.ngOnInit = function () {
-        };
-        ActivityActionsComponent.prototype.hasConfirmText = function () {
-            return !___default__default.isEmpty(this.confirmText);
-        };
-        __decorate([
-            core.Input(),
-            pectin.TrackExternal(),
-            __metadata("design:type", pectin.Command)
-        ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
-        __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);
-        __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([
-            core.Component({
-                selector: 'aup-activity-actions',
-                template: "<button class=\"cancel\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <mat-icon>clear</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <mat-icon>done</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
-                styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}"]
-            })
-        ], ActivityActionsComponent);
-        return ActivityActionsComponent;
-    }(DisposableComponent));
-
-    var InteractionModule = /** @class */ (function () {
-        function InteractionModule() {
-        }
-        InteractionModule = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    button.MatButtonModule,
-                    dialog.MatDialogModule,
-                    tabs.MatTabsModule,
-                    portal.PortalModule,
-                    router.RouterModule,
-                    icon.MatIconModule,
-                    DirectivesModule,
-                    flexLayout.FlexModule,
-                    flexLayout.GridModule
-                ],
-                declarations: [
-                    ActivityContainerComponent,
-                    ConfirmationDialogComponent,
-                    ConfirmThenDialogComponent,
-                    AlertDialogComponent,
-                    ActivityOutletComponent,
-                    InPlaceInteractionContextComponent,
-                    AddItemInteractionContextComponent,
-                    ActivityActionsComponent,
-                    PopupInteractionContextComponent,
-                    InteractionContextTriggerFor
-                ],
-                exports: [
-                    ActivityContainerComponent,
-                    ActivityOutletComponent,
-                    InPlaceInteractionContextComponent,
-                    AddItemInteractionContextComponent,
-                    ActivityActionsComponent,
-                    PopupInteractionContextComponent,
-                    InteractionContextTriggerFor
-                ],
-                entryComponents: [
-                    ActivityContainerComponent,
-                    ConfirmationDialogComponent,
-                    ConfirmThenDialogComponent,
-                    AlertDialogComponent
-                ],
-                providers: [
-                    exports.ɵbw
-                    // {
-                    //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
-                    // }
-                ]
-            })
-        ], InteractionModule);
-        return InteractionModule;
-    }());
-
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
@@ -4631,7 +4517,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵco = /** @class */ (function () {
+    exports.ɵcm = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -4768,7 +4654,7 @@
         //   }
         //
         // }
-    })(exports.ɵco || (exports.ɵco = {}));
+    })(exports.ɵcm || (exports.ɵcm = {}));
 
     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.
@@ -5293,9 +5179,9 @@
             { type: common.Location },
             { type: exports.ɵbw },
             { type: UrlService },
-            { type: exports.ɵco }
+            { type: exports.ɵcm }
         ]; };
-        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" });
+        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.ɵcm)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
             pectin.Trace(),
             __metadata("design:type", Function),
@@ -5310,7 +5196,7 @@
                 common.Location,
                 exports.ɵbw,
                 UrlService,
-                exports.ɵco])
+                exports.ɵcm])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -5880,6 +5766,118 @@
         animations$1.transition(':leave', [animations$1.animate('{{duration}}', slideLeftOnEnterDef)], { params: { duration: '100ms' } })
     ]);
 
+    /**
+     * @file Automatically generated by barrelsby.
+     */
+
+    var Dimension = /** @class */ (function () {
+        function Dimension(width, height) {
+            this.width = width;
+            this.height = height;
+        }
+        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);
+        };
+        Point.prototype.translate = function (x, y) {
+            return new Point(this.x + x, this.y + y);
+        };
+        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);
+            }
+        };
+        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(ResizeAwareComponent.prototype, "boundsModel", {
+            get: function () {
+                return this._boundsModel.readonly;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ResizeAwareComponent.prototype, "nativeElement", {
+            get: function () {
+                return this.elementRef.nativeElement;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        // 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._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));
+
     /**
      * @file Automatically generated by barrelsby.
      */
@@ -6324,6 +6322,7 @@
     exports.DirectivesModule = DirectivesModule;
     exports.DisposableComponent = DisposableComponent;
     exports.EditRowControls = EditRowControls;
+    exports.EditSession = EditSession;
     exports.EditorControlColumnModel = EditorControlColumnModel;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.EventCleanUpSession = EventCleanUpSession;
@@ -6351,7 +6350,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵco;
+    exports.PlaceHistory = exports.ɵcm;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -6381,6 +6380,7 @@
     exports.TableCellRendererComponent = TableCellRendererComponent;
     exports.TableComponent = TableComponent;
     exports.TableHeaderCellRendererComponent = TableHeaderCellRendererComponent;
+    exports.TableModel = TableModel;
     exports.TextInputComponent = TextInputComponent;
     exports.UrlService = UrlService;
     exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
@@ -6418,25 +6418,23 @@
     exports.ɵbv = InPlaceInteractionContextComponent;
     exports.ɵbx = ModalInteractionContextFactory;
     exports.ɵby = AddItemInteractionContextComponent;
-    exports.ɵbz = DisposableComponent;
+    exports.ɵbz = ActivityActionsComponent;
     exports.ɵc = FocusBindingDirective;
-    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.ɵca = PopupInteractionContextComponent;
+    exports.ɵcb = InteractionContextTriggerFor;
+    exports.ɵcc = PlaceModule;
+    exports.ɵcd = EmptyStateComponent;
+    exports.ɵce = BusyOverlayComponent;
+    exports.ɵcf = PlaceOutletComponent;
+    exports.ɵcg = leftRightPlaceAnimation;
+    exports.ɵch = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵci = AUP_PLACE_CONFIG;
+    exports.ɵck = PlaceRouter;
+    exports.ɵcl = UrlService;
+    exports.ɵcn = TabbedPlaceNavigationComponent;
+    exports.ɵco = AbstractPlaceNavigationComponent;
+    exports.ɵcp = ListPlaceNavComponent;
+    exports.ɵcq = SidePlaceNavigationComponent;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
     exports.ɵf = ComponentsModule;