@coolon/angular-ui-powerups 1.11.3 → 1.12.0

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

@@ -1,6 +1,6 @@
 import { __extends, __decorate, __metadata, __param, __awaiter, __generator, __assign, __spread } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, HostBinding, Component, ContentChild, TemplateRef, Self, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, QueryList, Optional, EventEmitter, Output, ChangeDetectorRef, ContentChildren, SkipSelf } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, HostBinding, Component, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, QueryList, Optional, EventEmitter, Output, ContentChild, TemplateRef, Self, ChangeDetectorRef, ContentChildren, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -12,12 +12,11 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, FocusManager, MutableValueModel, TrackExternal, Command, Deferred, Trace, MutableListModel, Form, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, TrackExternal, Command, Deferred, Trace, MutableListModel, FocusManager, Form, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { FlexModule, GridModule } from '@angular/flex-layout';
-import { MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
+import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
 import ___default, { isEqual, isNil } from 'lodash';
-import ResizeObserver from 'resize-observer-polyfill';
 import { assert as assert$1, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
 import { Overlay } from '@angular/cdk/overlay';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
@@ -28,6 +27,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
+import ResizeObserver from 'resize-observer-polyfill';
 import { Observable } from 'rxjs';
 
 var CommandDirective = /** @class */ (function (_super) {
@@ -365,360 +365,155 @@ var DirectivesModule = /** @class */ (function () {
     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 = 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.isEmpty(this.confirmText);
     };
-    Object.defineProperty(FocusableComponent.prototype, "focusContext", {
-        get: function () {
-            return this._focusContext;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    FocusableComponent.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: FocusManager },
-        { type: FocusBindingFactory }
-    ]; };
     __decorate([
-        HostBinding('attr.tabindex'),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [])
-    ], FocusableComponent.prototype, "focusable", null);
+        Input(),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
     __decorate([
-        HostListener('focus'),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], FocusableComponent.prototype, "onFocus", null);
+        Input(),
+        __metadata("design:type", String)
+    ], ActivityActionsComponent.prototype, "confirmText", void 0);
     __decorate([
-        HostListener('blur'),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], FocusableComponent.prototype, "onBlur", null);
-    FocusableComponent = __decorate([
-        Component({ template: '' }),
-        __metadata("design:paramtypes", [ElementRef, FocusManager, FocusBindingFactory])
-    ], FocusableComponent);
-    return FocusableComponent;
+        Input(),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ActivityActionsComponent.prototype, "align", void 0);
+    __decorate([
+        HostBinding('class.align-end'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], ActivityActionsComponent.prototype, "alignEnd", null);
+    ActivityActionsComponent = __decorate([
+        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;
-}());
-
-var Bounds = /** @class */ (function (_super) {
-    __extends(Bounds, _super);
-    function Bounds(top, left, width, height) {
-        var _this = _super.call(this, width, height) || this;
-        _this.top = top;
-        _this.left = left;
-        _this.width = width;
-        _this.height = height;
-        return _this;
-    }
-    Bounds.prototype.relativePositionOf = function (point) {
-        if (point instanceof MouseEvent) {
-            return new Point(point.clientX - this.left, point.clientY - this.top);
-        }
-        else {
-            return new Point(point.x - this.left, point.y - this.top);
-        }
-    };
-    return Bounds;
-}(Dimension));
-(function (Bounds) {
-    function ofElement(element) {
-        var rect = element.getBoundingClientRect();
-        return new Bounds(rect.top, rect.left, rect.width, rect.height);
-    }
-    Bounds.ofElement = ofElement;
-})(Bounds || (Bounds = {}));
-
-var ResizeAwareComponent = /** @class */ (function (_super) {
-    __extends(ResizeAwareComponent, _super);
-    function ResizeAwareComponent(elementRef, ngZone) {
-        var _this = _super.call(this) || this;
-        _this.elementRef = elementRef;
-        _this.ngZone = ngZone;
-        _this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+var ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
+var Activity = /** @class */ (function (_super) {
+    __extends(Activity, _super);
+    function Activity() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._busyModel = new DelegatingValueModel().withDefault(false);
+        _this.class = 'aup-activity';
         return _this;
     }
-    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) {
+        assert$1.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;
+            assert$1.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([
+        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: Inject, args: [ACTIVITY_DATA,] }] }
+    ]; };
+    AlertDialogComponent = __decorate([
+        Component({
+            selector: 'aup-alert-dialog',
+            template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
+            styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
+        }),
+        __param(0, 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;
+        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 = Bounds.ofElement(this.nativeElement);
-    };
-    ResizeAwareComponent.ctorParameters = function () { return [
-        { type: ElementRef },
-        { type: NgZone }
-    ]; };
-    ResizeAwareComponent = __decorate([
-        Directive(),
-        __metadata("design:paramtypes", [ElementRef, NgZone])
-    ], ResizeAwareComponent);
-    return ResizeAwareComponent;
-}(DisposableComponent));
-
-/**
- * @example
- * // CSS Vars
- * aup-card-container {
- *   --card-gap: var(--card-gap, 16px);
- *   --card-width: var(--card-width, 300px);
- *   --card-height: var(--card-height, auto);
- *   --card-min-height: var(--card-min-height, auto);
- *   --card-background: var(--card-background, #fcfcfb);
- * }
- *
- * // Content Templates:
- * #addCardTemplate
- * <ng-template #addCardTemplate>
- *  This is a new card template, it will the the size of the other cards.
- * </nav-template>
- *
- */
-var CardContainerComponent = /** @class */ (function (_super) {
-    __extends(CardContainerComponent, _super);
-    function CardContainerComponent() {
-        return _super.call(this) || this;
-    }
-    CardContainerComponent.prototype.ngOnInit = function () {
-    };
-    __decorate([
-        Input(),
-        TrackExternal(),
-        __metadata("design:type", Command)
-    ], CardContainerComponent.prototype, "addCardCommand", void 0);
-    __decorate([
-        ContentChild("addCardTemplate"),
-        __metadata("design:type", TemplateRef)
-    ], CardContainerComponent.prototype, "addCardTemplate", void 0);
-    CardContainerComponent = __decorate([
-        Component({
-            selector: 'aup-card-container',
-            template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <mat-icon>add</mat-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-            styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px)}aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
-        }),
-        __metadata("design:paramtypes", [])
-    ], CardContainerComponent);
-    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 = Command.create(function () {
-            _this.restoreFocus();
-        });
-        _this.tabIndex = -1;
-        return _this;
-    }
-    FocusContainerComponent.prototype.ngOnInit = function () {
-    };
-    // @Trace()
-    FocusContainerComponent.prototype.restoreFocus = function () {
-        this.focusManager.restoreFocus();
-    };
-    FocusContainerComponent.ctorParameters = function () { return [
-        { type: FocusManager, decorators: [{ type: Self }] }
-    ]; };
-    __decorate([
-        HostBinding('attr.tabindex'),
-        __metadata("design:type", Object)
-    ], FocusContainerComponent.prototype, "tabIndex", void 0);
-    FocusContainerComponent = __decorate([
-        Component({
-            selector: 'aup-focus-container',
-            template: "<ng-content></ng-content>\n",
-            providers: [
-                { provide: FocusManager }
-            ],
-            styles: [":host{display:block}"]
-        }),
-        __param(0, Self()),
-        __metadata("design:paramtypes", [FocusManager])
-    ], FocusContainerComponent);
-    return FocusContainerComponent;
-}(DisposableComponent));
-
-var ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
-var Activity = /** @class */ (function (_super) {
-    __extends(Activity, _super);
-    function Activity() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._busyModel = new DelegatingValueModel().withDefault(false);
-        _this.class = 'aup-activity';
-        return _this;
-    }
-    Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
-        assert$1.isNil(this._activityContext);
-        this._activityContext = activityContext;
-        this._interactionContext = nestedInteractionContext;
-    };
-    Object.defineProperty(Activity.prototype, "interactionContext", {
-        get: function () {
-            assert$1.isTruthy(this.isInitialised());
-            return this._interactionContext;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Activity.prototype.done = function (result) {
-        return this._activityContext.onDone(result);
-    };
-    Activity.prototype.cancel = function (error) {
-        this._activityContext.onCancel(error);
-    };
-    // @Trace()
-    Activity.prototype.onActivityReady = function () {
-    };
-    Object.defineProperty(Activity.prototype, "busy", {
-        get: function () {
-            return this._busyModel.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Activity.prototype.busyWhile = function (busyModel) {
-        this._busyModel.setDelegate(busyModel);
-    };
-    Activity.prototype.isBusy = function () {
-        return this._busyModel.value;
-    };
-    Activity.prototype.isInitialised = function () {
-        return !!this._activityContext;
-    };
-    __decorate([
-        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: Inject, args: [ACTIVITY_DATA,] }] }
-    ]; };
-    AlertDialogComponent = __decorate([
-        Component({
-            selector: 'aup-alert-dialog',
-            template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
-            styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}"]
-        }),
-        __param(0, 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;
-        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;
@@ -1647,78 +1442,282 @@ var InteractionContextTriggerFor = /** @class */ (function (_super) {
     return InteractionContextTriggerFor;
 }(GarbageCollector));
 
-var DialogInteractionContext = /** @class */ (function (_super) {
-    __extends(DialogInteractionContext, _super);
-    function DialogInteractionContext(identifier, api, dialogService, config) {
-        var _this = _super.call(this) || this;
-        _this.identifier = identifier;
-        _this.api = api;
-        _this.dialogService = dialogService;
-        _this.config = config;
-        _this.garbage = new GarbageCollector();
-        assert$1.notNil(dialogService);
-        return _this;
-    }
-    DialogInteractionContext.prototype.cancelActiveActivity = function () {
-        return this.activityContainer.cancelActiveActivity();
-    };
-    DialogInteractionContext.prototype.dispose = function () {
-        if (this.isActive()) {
-            lang.illegalState('Dispose called while active.');
-        }
-        this.garbage.dispose();
-    };
-    DialogInteractionContext.prototype.registerDisposable = function (disposable) {
-        return this.garbage.registerDisposable(disposable);
-    };
-    DialogInteractionContext.prototype.isActive = function () {
-        return !!this.activityContainer && this.activityContainer.isActive();
-    };
-    DialogInteractionContext.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
-        var _this = this;
-        assert$1.isNil(this._currentActivityRef);
-        var config = __assign(__assign({}, this.config), {
-            disableClose: disableClose,
-            panelClass: 'dialog-interaction-context'
-        });
-        var self = this;
-        var matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
-        var activityContainer = this.activityContainer = matDialogRef.componentInstance;
-        this.activityContainer.initialise(this.identifier, this.api);
-        var activityResult = this.activityContainer.startActivity(activityType, data);
-        activityResult.finally(function () { return matDialogRef.close(); });
-        // we need to check if our onDone/onCancel methods above we called or if we were
-        // closed by the user clicking the backdrop.  If the later then we need to cancel our
-        // activity.
-        matDialogRef.afterClosed().subscribe(function (promiseAlreadyFinished) {
-            if (activityContainer.isActive()) {
-                activityContainer.cancelActiveActivity();
-            }
-            _this.activityContainer = null;
-        });
-        matDialogRef.updateSize();
-        matDialogRef.afterOpened().subscribe(function (promiseAlreadyFinished) {
-            matDialogRef.updateSize();
-        });
-        return activityResult;
-    };
-    return DialogInteractionContext;
-}(AbstractInteractionContext));
-
-var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
-var DialogInteractionContextFactory = /** @class */ (function (_super) {
-    __extends(DialogInteractionContextFactory, _super);
-    function DialogInteractionContextFactory(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
-        var _this = _super.call(this) || this;
-        _this.dialogService = dialogService;
-        _this.dialogServiceDefaults = dialogServiceDefaults;
-        _this.matDialogDefaultConfig = matDialogDefaultConfig;
-        assert$1.notNil(dialogService);
-        return _this;
+var InteractionModule = /** @class */ (function () {
+    function InteractionModule() {
     }
-    DialogInteractionContextFactory.prototype.createInteractionContext = function (identifier, api) {
-        var config = __assign(__assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
-        return new DialogInteractionContext(identifier, api, this.dialogService, config);
+    InteractionModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule,
+                MatButtonModule,
+                MatDialogModule,
+                MatTabsModule,
+                PortalModule,
+                RouterModule,
+                MatIconModule,
+                DirectivesModule,
+                FlexModule,
+                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: [
+                InteractionService
+                // {
+                //   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([
+        Input(),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], CardContainerComponent.prototype, "addCardCommand", void 0);
+    __decorate([
+        ContentChild("addCardTemplate"),
+        __metadata("design:type", TemplateRef)
+    ], CardContainerComponent.prototype, "addCardTemplate", void 0);
+    CardContainerComponent = __decorate([
+        Component({
+            selector: 'aup-card-container',
+            template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <mat-icon>add</mat-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
+            styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px)}aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], CardContainerComponent);
+    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 = Command.create(function () {
+            _this.restoreFocus();
+        });
+        _this.tabIndex = -1;
+        return _this;
+    }
+    FocusContainerComponent.prototype.ngOnInit = function () {
+    };
+    // @Trace()
+    FocusContainerComponent.prototype.restoreFocus = function () {
+        this.focusManager.restoreFocus();
+    };
+    FocusContainerComponent.ctorParameters = function () { return [
+        { type: FocusManager, decorators: [{ type: Self }] }
+    ]; };
+    __decorate([
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Object)
+    ], FocusContainerComponent.prototype, "tabIndex", void 0);
+    FocusContainerComponent = __decorate([
+        Component({
+            selector: 'aup-focus-container',
+            template: "<ng-content></ng-content>\n",
+            providers: [
+                { provide: FocusManager }
+            ],
+            styles: [":host{display:block}"]
+        }),
+        __param(0, Self()),
+        __metadata("design:paramtypes", [FocusManager])
+    ], FocusContainerComponent);
+    return FocusContainerComponent;
+}(DisposableComponent));
+
+var FocusableComponent = /** @class */ (function (_super) {
+    __extends(FocusableComponent, _super);
+    function FocusableComponent(el, focusManager, focusBindingFactory) {
+        var _this = _super.call(this) || this;
+        _this.el = el;
+        _this.focusManager = focusManager;
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        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: ElementRef },
+        { type: FocusManager },
+        { type: FocusBindingFactory }
+    ]; };
+    __decorate([
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], FocusableComponent.prototype, "focusable", null);
+    __decorate([
+        HostListener('focus'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FocusableComponent.prototype, "onFocus", null);
+    __decorate([
+        HostListener('blur'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FocusableComponent.prototype, "onBlur", null);
+    FocusableComponent = __decorate([
+        Component({ template: '' }),
+        __metadata("design:paramtypes", [ElementRef, FocusManager, FocusBindingFactory])
+    ], FocusableComponent);
+    return FocusableComponent;
+}(DisposableComponent));
+
+var DialogInteractionContext = /** @class */ (function (_super) {
+    __extends(DialogInteractionContext, _super);
+    function DialogInteractionContext(identifier, api, dialogService, config) {
+        var _this = _super.call(this) || this;
+        _this.identifier = identifier;
+        _this.api = api;
+        _this.dialogService = dialogService;
+        _this.config = config;
+        _this.garbage = new GarbageCollector();
+        assert$1.notNil(dialogService);
+        return _this;
+    }
+    DialogInteractionContext.prototype.cancelActiveActivity = function () {
+        return this.activityContainer.cancelActiveActivity();
+    };
+    DialogInteractionContext.prototype.dispose = function () {
+        if (this.isActive()) {
+            lang.illegalState('Dispose called while active.');
+        }
+        this.garbage.dispose();
+    };
+    DialogInteractionContext.prototype.registerDisposable = function (disposable) {
+        return this.garbage.registerDisposable(disposable);
+    };
+    DialogInteractionContext.prototype.isActive = function () {
+        return !!this.activityContainer && this.activityContainer.isActive();
+    };
+    DialogInteractionContext.prototype.createAndLaunchActivity = function (activityType, data, disableClose) {
+        var _this = this;
+        assert$1.isNil(this._currentActivityRef);
+        var config = __assign(__assign({}, this.config), {
+            disableClose: disableClose,
+            panelClass: 'dialog-interaction-context'
+        });
+        var self = this;
+        var matDialogRef = this.dialogService.open(ActivityContainerComponent, config);
+        var activityContainer = this.activityContainer = matDialogRef.componentInstance;
+        this.activityContainer.initialise(this.identifier, this.api);
+        var activityResult = this.activityContainer.startActivity(activityType, data);
+        activityResult.finally(function () { return matDialogRef.close(); });
+        // we need to check if our onDone/onCancel methods above we called or if we were
+        // closed by the user clicking the backdrop.  If the later then we need to cancel our
+        // activity.
+        matDialogRef.afterClosed().subscribe(function (promiseAlreadyFinished) {
+            if (activityContainer.isActive()) {
+                activityContainer.cancelActiveActivity();
+            }
+            _this.activityContainer = null;
+        });
+        matDialogRef.updateSize();
+        matDialogRef.afterOpened().subscribe(function (promiseAlreadyFinished) {
+            matDialogRef.updateSize();
+        });
+        return activityResult;
+    };
+    return DialogInteractionContext;
+}(AbstractInteractionContext));
+
+var DIALOG_INTERACTION_SERVICE_DEFAULTS = new InjectionToken('DIALOG_INTERACTION_SERVICE_DEFAULTS');
+var DialogInteractionContextFactory = /** @class */ (function (_super) {
+    __extends(DialogInteractionContextFactory, _super);
+    function DialogInteractionContextFactory(dialogService, dialogServiceDefaults, matDialogDefaultConfig) {
+        var _this = _super.call(this) || this;
+        _this.dialogService = dialogService;
+        _this.dialogServiceDefaults = dialogServiceDefaults;
+        _this.matDialogDefaultConfig = matDialogDefaultConfig;
+        assert$1.notNil(dialogService);
+        return _this;
+    }
+    DialogInteractionContextFactory.prototype.createInteractionContext = function (identifier, api) {
+        var config = __assign(__assign({ autoFocus: false, hasBackdrop: true, closeOnNavigation: false }, this.matDialogDefaultConfig), this.dialogServiceDefaults);
+        return new DialogInteractionContext(identifier, api, this.dialogService, config);
     };
     DialogInteractionContextFactory.ctorParameters = function () { return [
         { type: MatDialog },
@@ -2322,283 +2321,96 @@ var SwitchCaseComponent = /** @class */ (function (_super) {
     SwitchCaseComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef }
     ]; };
-    __decorate([
-        Input(), TrackExternal(),
-        __metadata("design:type", ValueModel)
-    ], SwitchCaseComponent.prototype, "switchModel", void 0);
-    __decorate([
-        Input(), StoreInValueModel('switchModel'),
-        __metadata("design:type", Object)
-    ], SwitchCaseComponent.prototype, "switch", void 0);
-    __decorate([
-        ContentChildren(SwitchCaseOption),
-        __metadata("design:type", QueryList)
-    ], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
-    SwitchCaseComponent = __decorate([
-        Component({
-            selector: 'aup-switch-case',
-            template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n",
-            styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
-        }),
-        __metadata("design:paramtypes", [ChangeDetectorRef])
-    ], SwitchCaseComponent);
-    return SwitchCaseComponent;
-}(DisposableComponent));
-
-var 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([
-        Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], DefaultCellRendererComponent.prototype, "value", null);
-    DefaultCellRendererComponent = __decorate([
-        Component({
-            selector: 'aup-default-cell-renderer',
-            template: "{{value}}\n",
-            styles: [""]
-        }),
-        __metadata("design:paramtypes", [])
-    ], DefaultCellRendererComponent);
-    return DefaultCellRendererComponent;
-}());
-
-var DefaultHeaderCellRendererComponent = /** @class */ (function () {
-    function DefaultHeaderCellRendererComponent() {
-    }
-    __decorate([
-        Input(),
-        __metadata("design:type", ColumnModel)
-    ], DefaultHeaderCellRendererComponent.prototype, "columnModel", void 0);
-    DefaultHeaderCellRendererComponent = __decorate([
-        Component({
-            selector: 'aup-default-header-renderer',
-            template: "{{columnModel.getHeaderText()}}\n",
-            styles: [""]
-        }),
-        __metadata("design:paramtypes", [])
-    ], DefaultHeaderCellRendererComponent);
-    return DefaultHeaderCellRendererComponent;
-}());
-
-// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
-// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
-/**
- * Example:
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Editable tables
- * @example
- * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
- *   if (form.validate()) {
- *     // normal form save stuff
- *     return true; // finish editing
- *   }
- *   return false; // continue editiing
- * }
- * const colorsNames: ListModel<string> = ...;
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
- *   table.pluck("lastName").cellEditor(StringInputComponent, {
- *     validators: [Validator.present("We need a last name")]
- *   });
- *   table.pluck("age").cellEditor(NumberInputComponent);
- *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
- *     initialiseComponent(component: SelectInputComponent) {
- *       selectInput.optionsModel = colorsNames; // <- initialise our component
- *     }
- *   });
- *   table.addEditControls(saveCommand); // <- required to enable editing
- * });
- *
- * Selection models
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- * });
- *
- * Custom cell renderers and editors
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("favoriteColor")
- *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
- *        // configure your component with what ever you need.
- *      });
- *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
- *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * I18n
- * @example
- * [table.yml]
- * table:
- *   columns(ColumnTextProperties[]):
- *      firstName:
- *         headerText: "First Name"
- *      fullName:
- *         headerText: "Full Name"
- *
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- *
- *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
- * });
- */
-var TableModel = /** @class */ (function () {
-    function TableModel(sourceOfTruth) {
-        this.sourceOfTruth = sourceOfTruth;
-        this._garbage = new GarbageCollector();
-        this._columns = new MutableListModel();
-        this._editorSessions = new MutableListModel();
-        this.identityOf = sourceOfTruth.identityOf;
-        var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        this._columnsById = chain(this._columns).indexBy('columnId');
-        this._rowsBeingEdited = new MutableListModel([], {
-            identifiedWith: this.identityOf
-        });
-        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
-        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
-        this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
-    }
-    TableModel_1 = TableModel;
-    TableModel.fromList = function (sourceOfTruth, builder) {
-        var model = new TableModel_1(sourceOfTruth);
-        builder(model);
-        return model;
-    };
-    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)) {
-            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 lang.illegalState("Row with id=" + rowId + " already being edited");
-        }
-        else {
-            var editSession_1 = new TableModel_1.EditSession(rowId, row, this.saveCommand);
-            var when = Dsl.disposeWith(editSession_1).when;
-            when.valueOf(editSession_1.rowValueModel).changes(function (editedValue) {
-                _this._rowsBeingEdited.replaceOrPush(editedValue);
-            }, { initialValue: 'triggerChangeUnlessNil' });
-            this._editorSessions.push(editSession_1);
-            editSession_1.onDispose(function () {
-                _this._rowsBeingEdited.remove(editSession_1.rowValueModel.value);
-                _this._editorSessions.remove(editSession_1);
-            });
-            return editSession_1;
-        }
-    };
-    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: ListModel }
-    ]; };
-    TableModel = TableModel_1 = __decorate([
-        TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
-        __metadata("design:paramtypes", [ListModel])
-    ], TableModel);
-    return TableModel;
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ValueModel)
+    ], SwitchCaseComponent.prototype, "switchModel", void 0);
+    __decorate([
+        Input(), StoreInValueModel('switchModel'),
+        __metadata("design:type", Object)
+    ], SwitchCaseComponent.prototype, "switch", void 0);
+    __decorate([
+        ContentChildren(SwitchCaseOption),
+        __metadata("design:type", QueryList)
+    ], SwitchCaseComponent.prototype, "switchCaseOptions", void 0);
+    SwitchCaseComponent = __decorate([
+        Component({
+            selector: 'aup-switch-case',
+            template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n",
+            styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}"]
+        }),
+        __metadata("design:paramtypes", [ChangeDetectorRef])
+    ], SwitchCaseComponent);
+    return SwitchCaseComponent;
+}(DisposableComponent));
+
+var 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([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], DefaultCellRendererComponent.prototype, "value", null);
+    DefaultCellRendererComponent = __decorate([
+        Component({
+            selector: 'aup-default-cell-renderer',
+            template: "{{value}}\n",
+            styles: [""]
+        }),
+        __metadata("design:paramtypes", [])
+    ], DefaultCellRendererComponent);
+    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 MutableValueModel();
-            _this.rowValueModel = _this._editorValue.readonly;
-            _this.form = new Form();
-            _this.form.load(row);
-            _this._editorValue.value = row;
-            _this.form.onEdit(function () {
-                _this._editorValue.value = produce(_this._editorValue.value, function (draft) {
-                    _this.form.writeDirtyStateTo(draft);
-                });
+
+var DefaultHeaderCellRendererComponent = /** @class */ (function () {
+    function DefaultHeaderCellRendererComponent() {
+    }
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], DefaultHeaderCellRendererComponent.prototype, "headerText", void 0);
+    DefaultHeaderCellRendererComponent = __decorate([
+        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 MutableValueModel();
+        _this.rowValueModel = _this._editorValue.readonly;
+        _this.form = new Form();
+        _this.form.load(row);
+        _this._editorValue.value = row;
+        _this.form.onEdit(function () {
+            _this._editorValue.value = produce(_this._editorValue.value, function (draft) {
+                _this.form.writeDirtyStateTo(draft);
             });
-            return _this;
-        }
-        return EditSession;
-    }(GarbageCollector));
-    TableModel.EditSession = EditSession;
-})(TableModel || (TableModel = {}));
+        });
+        return _this;
+    }
+    return EditSession;
+}(GarbageCollector));
 
 var EditRowControls = /** @class */ (function (_super) {
     __extends(EditRowControls, _super);
@@ -2638,7 +2450,7 @@ var EditRowControls = /** @class */ (function (_super) {
     ], EditRowControls.prototype, "editRowCommand", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", TableModel.EditSession)
+        __metadata("design:type", EditSession)
     ], EditRowControls.prototype, "editSession", void 0);
     EditRowControls = __decorate([
         Component({
@@ -2728,7 +2540,7 @@ var ColumnModel = /** @class */ (function () {
         this.columnId = columnId;
         this.defaults = defaults;
         this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
-            component.columnModel = column;
+            component.headerText = column.getHeaderText();
         });
     }
     ColumnModel.prototype.getHeaderText = function () {
@@ -2756,6 +2568,7 @@ var ColumnModel = /** @class */ (function () {
             portal: new ComponentPortal(cellRenderer),
             initialiseComponent: initialiser
         };
+        return this;
     };
     ColumnModel.prototype.setCellEditor = function (cellEditor) {
         this._cellEditorConfig = cellEditor;
@@ -2813,14 +2626,16 @@ var PropertyColumnModel = /** @class */ (function (_super) {
     function PropertyColumnModel(property, defaults) {
         var _this = _super.call(this, property.toString(), defaults) || this;
         _this.property = property;
+        _this._format = function (value) { return value; };
         _this.cellRenderer(DefaultCellRendererComponent);
         return _this;
     }
     PropertyColumnModel.prototype.cellRenderer = function (componentType) {
         var _this = this;
         this.setCellRenderer(componentType, function (component, row) {
-            component.value = row[_this.property];
+            component.value = _this._format(row[_this.property]);
         });
+        return this;
     };
     PropertyColumnModel.prototype.cellEditor = function (editor, options) {
         var _this = this;
@@ -2839,6 +2654,11 @@ var PropertyColumnModel = /** @class */ (function (_super) {
         });
         return this;
     };
+    PropertyColumnModel.prototype.format = function (formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
+    };
     return PropertyColumnModel;
 }(ColumnModel));
 var CustomValueColumnModel = /** @class */ (function (_super) {
@@ -2854,6 +2674,7 @@ var CustomValueColumnModel = /** @class */ (function (_super) {
         this.setCellRenderer(componentType, function (component, row) {
             component.value = _this.getValue(row);
         });
+        return this;
     };
     return CustomValueColumnModel;
 }(ColumnModel));
@@ -2870,6 +2691,7 @@ var EditorControlColumnModel = /** @class */ (function (_super) {
             component.editSession = editSession;
             component.editRowCommand = editRowCommand;
         });
+        return this;
     };
     EditorControlColumnModel.prototype.getDefaultHeaderText = function () {
         return '';
@@ -2892,17 +2714,202 @@ var SelectionColumnModel = /** @class */ (function (_super) {
                 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 GarbageCollector();
+        this._columns = new MutableListModel();
+        this._editorSessions = new MutableListModel();
+        this.identityOf = sourceOfTruth.identityOf;
+        var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        this._columnsById = chain(this._columns).indexBy('columnId');
+        this._rowsBeingEdited = new MutableListModel([], {
+            identifiedWith: this.identityOf
+        });
+        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
+        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
+        this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
+    }
+    TableModel_1 = TableModel;
+    TableModel.fromList = function (sourceOfTruth, builder) {
+        var model = new TableModel_1(sourceOfTruth);
+        builder(model);
+        return model;
+    };
+    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)) {
+            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 ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+        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 lang.illegalState("Row with id=" + rowId + " already being edited");
+        }
+        else {
+            var editSession_1 = new EditSession(rowId, row, this.saveCommand);
+            var when = Dsl.disposeWith(editSession_1).when;
+            when.valueOf(editSession_1.rowValueModel).changes(function (editedValue) {
+                _this._rowsBeingEdited.replaceOrPush(editedValue);
+            }, { initialValue: 'triggerChangeUnlessNil' });
+            this._editorSessions.push(editSession_1);
+            editSession_1.onDispose(function () {
+                _this._rowsBeingEdited.remove(editSession_1.rowValueModel.value);
+                _this._editorSessions.remove(editSession_1);
+            });
+            return editSession_1;
+        }
+    };
+    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: ListModel }
+    ]; };
+    TableModel = TableModel_1 = __decorate([
+        TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
+        __metadata("design:paramtypes", [ListModel])
+    ], TableModel);
+    return TableModel;
+}());
 
 /**
  * Create your model:
@@ -3020,7 +3027,7 @@ var TableCellRendererComponent = /** @class */ (function () {
     ], TableCellRendererComponent.prototype, "column", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", TableModel.EditSession)
+        __metadata("design:type", EditSession)
     ], TableCellRendererComponent.prototype, "editSession", void 0);
     __decorate([
         Input(),
@@ -3155,117 +3162,6 @@ var VerticalFocusContainerComponent = /** @class */ (function (_super) {
     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.isEmpty(this.confirmText);
-    };
-    __decorate([
-        Input(),
-        TrackExternal(),
-        __metadata("design:type", Command)
-    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ActivityActionsComponent.prototype, "confirmText", void 0);
-    __decorate([
-        Input(),
-        TrackExternal(),
-        __metadata("design:type", Command)
-    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ActivityActionsComponent.prototype, "align", void 0);
-    __decorate([
-        HostBinding('class.align-end'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ActivityActionsComponent.prototype, "alignEnd", null);
-    ActivityActionsComponent = __decorate([
-        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([
-        NgModule({
-            imports: [
-                CommonModule,
-                MatButtonModule,
-                MatDialogModule,
-                MatTabsModule,
-                PortalModule,
-                RouterModule,
-                MatIconModule,
-                DirectivesModule,
-                FlexModule,
-                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: [
-                InteractionService
-                // {
-                //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
-                // }
-            ]
-        })
-    ], InteractionModule);
-    return InteractionModule;
-}());
-
 var ComponentsModule = /** @class */ (function () {
     function ComponentsModule() {
     }
@@ -5705,6 +5601,118 @@ var slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
     transition(':leave', [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;
+}());
+
+var Bounds = /** @class */ (function (_super) {
+    __extends(Bounds, _super);
+    function Bounds(top, left, width, height) {
+        var _this = _super.call(this, width, height) || this;
+        _this.top = top;
+        _this.left = left;
+        _this.width = width;
+        _this.height = height;
+        return _this;
+    }
+    Bounds.prototype.relativePositionOf = function (point) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
+        }
+        else {
+            return new Point(point.x - this.left, point.y - this.top);
+        }
+    };
+    return Bounds;
+}(Dimension));
+(function (Bounds) {
+    function ofElement(element) {
+        var rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
+    }
+    Bounds.ofElement = ofElement;
+})(Bounds || (Bounds = {}));
+
+var ResizeAwareComponent = /** @class */ (function (_super) {
+    __extends(ResizeAwareComponent, _super);
+    function ResizeAwareComponent(elementRef, ngZone) {
+        var _this = _super.call(this) || this;
+        _this.elementRef = elementRef;
+        _this.ngZone = ngZone;
+        _this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+        return _this;
+    }
+    ResizeAwareComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        this.updateBounds();
+        var element = this.elementRef.nativeElement;
+        var ro = new ResizeObserver(function (entries, observer) {
+            _this.ngZone.run(function () { return _this.updateBounds(); });
+        });
+        ro.observe(element);
+        this.onDispose(function () { return ro.disconnect(); });
+    };
+    Object.defineProperty(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 = Bounds.ofElement(this.nativeElement);
+    };
+    ResizeAwareComponent.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: NgZone }
+    ]; };
+    ResizeAwareComponent = __decorate([
+        Directive(),
+        __metadata("design:paramtypes", [ElementRef, NgZone])
+    ], ResizeAwareComponent);
+    return ResizeAwareComponent;
+}(DisposableComponent));
+
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -6120,5 +6128,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, InteractionModule as ɵbk, ActivityContainerComponent as ɵbl, AbstractInteractionContext as ɵbm, ActivityOutletComponent as ɵbn, ConfirmationDialogComponent as ɵbo, ACTIVITY_DATA as ɵbp, Activity as ɵbq, ConfirmThenDialogComponent as ɵbs, AlertDialogComponent as ɵbt, InPlaceInteractionContextComponent as ɵbv, InteractionService as ɵbw, ModalInteractionContextFactory as ɵbx, AddItemInteractionContextComponent as ɵby, ActivityActionsComponent as ɵbz, FocusBindingDirective as ɵc, DisposableComponent as ɵca, PopupInteractionContextComponent as ɵcb, InteractionContextTriggerFor as ɵcc, PlaceModule as ɵcd, EmptyStateComponent as ɵce, BusyOverlayComponent as ɵcf, PlaceOutletComponent as ɵcg, leftRightPlaceAnimation as ɵch, LEFT_RIGHT_PLACE_ANIMATION as ɵci, AUP_PLACE_CONFIG as ɵcj, PlaceRouter as ɵcl, UrlService as ɵcm, PlaceHistory as ɵcn, TabbedPlaceNavigationComponent as ɵco, AbstractPlaceNavigationComponent as ɵcp, ListPlaceNavComponent as ɵcq, SidePlaceNavigationComponent as ɵcr, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractInputActivity as ɵh, Activity as ɵi, ACTIVITY_DATA as ɵj, NumberInputComponent as ɵk, StringInputComponent as ɵl, StringInputActivity as ɵm, TextInputComponent as ɵn, PasswordInputComponent as ɵo, SelectInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CardContainerComponent, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupInteractionContextComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputComponent, SelectionColumnModel, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TextInputComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, CardContainerComponent as ɵba, TableComponent as ɵbb, EditRowControls as ɵbc, ColumnTemplateDirective as ɵbd, DefaultCellRendererComponent as ɵbe, TableCellRendererComponent as ɵbf, SelectCellRendererComponent as ɵbg, SelectHeaderCellRendererComponent as ɵbh, DefaultHeaderCellRendererComponent as ɵbi, TableHeaderCellRendererComponent as ɵbj, InteractionModule as ɵbk, ActivityContainerComponent as ɵbl, AbstractInteractionContext as ɵbm, ActivityOutletComponent as ɵbn, ConfirmationDialogComponent as ɵbo, ACTIVITY_DATA as ɵbp, Activity as ɵbq, ConfirmThenDialogComponent as ɵbs, AlertDialogComponent as ɵbt, InPlaceInteractionContextComponent as ɵbv, InteractionService as ɵbw, ModalInteractionContextFactory as ɵbx, AddItemInteractionContextComponent as ɵby, ActivityActionsComponent as ɵbz, FocusBindingDirective as ɵc, PopupInteractionContextComponent as ɵca, InteractionContextTriggerFor as ɵcb, PlaceModule as ɵcc, EmptyStateComponent as ɵcd, BusyOverlayComponent as ɵce, PlaceOutletComponent as ɵcf, leftRightPlaceAnimation as ɵcg, LEFT_RIGHT_PLACE_ANIMATION as ɵch, AUP_PLACE_CONFIG as ɵci, PlaceRouter as ɵck, UrlService as ɵcl, PlaceHistory as ɵcm, TabbedPlaceNavigationComponent as ɵcn, AbstractPlaceNavigationComponent as ɵco, ListPlaceNavComponent as ɵcp, SidePlaceNavigationComponent as ɵcq, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, AbstractInputComponent as ɵg, AbstractInputActivity as ɵh, Activity as ɵi, ACTIVITY_DATA as ɵj, NumberInputComponent as ɵk, StringInputComponent as ɵl, StringInputActivity as ɵm, TextInputComponent as ɵn, PasswordInputComponent as ɵo, SelectInputComponent as ɵp, CheckboxInputComponent as ɵq, ScrollContainerComponent as ɵr, NoopComponent as ɵs, SwitchCaseOption as ɵt, SwitchCaseWhenDirective as ɵu, SwitchCaseDefaultDirective as ɵv, SwitchCaseComponent as ɵw, FocusContainerComponent as ɵx, VerticalFocusContainerComponent as ɵy, FocusableComponent as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map