@coolon/angular-ui-powerups 1.11.3 → 1.12.0

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __awaiter } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, 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 { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, FocusManager, MutableValueModel, TrackExternal, Command, Deferred, Trace, MutableListModel, Form, DelegatingFormValueModel, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MultipleSelectionModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, 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';
 
 let CommandDirective = class CommandDirective extends GarbageCollector {
@@ -328,225 +328,50 @@ DirectivesModule = __decorate([
     })
 ], DirectivesModule);
 
-let FocusableComponent = class FocusableComponent extends DisposableComponent {
-    constructor(el, focusManager, focusBindingFactory) {
-        super();
-        this.el = el;
-        this.focusManager = focusManager;
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        if (this.focusManager) {
-            this._focusContext = this.focusManager.registerFocusable(this);
-            this.registerDisposable(this._focusContext);
-            this.registerDisposable(focusBindingFactory.createBinding(el.nativeElement, this.focusContext));
-        }
-    }
-    get focusable() {
-        return !!this.focusContext ? 0 : undefined;
+let ActivityActionsComponent = class ActivityActionsComponent extends DisposableComponent {
+    constructor() {
+        super(...arguments);
+        this.align = 'start';
     }
-    onFocus() {
-        var _a;
-        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusIn();
+    get alignEnd() {
+        return this.align === 'end';
     }
-    onBlur() {
-        var _a;
-        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusOut();
+    ngOnInit() {
     }
-    get focusContext() {
-        return this._focusContext;
+    hasConfirmText() {
+        return !___default.isEmpty(this.confirmText);
     }
 };
-FocusableComponent.ctorParameters = () => [
-    { 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);
+    Input(),
+    TrackExternal(),
+    __metadata("design:type", Command)
+], ActivityActionsComponent.prototype, "confirmCommand", 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);
-
-class Dimension {
-    constructor(width, height) {
-        this.width = width;
-        this.height = height;
-    }
-}
-
-class Point {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    static from(data) {
-        return new Point(data.x, data.y);
-    }
-    translate(x, y) {
-        return new Point(this.x + x, this.y + y);
-    }
-}
-
-class Bounds extends Dimension {
-    constructor(top, left, width, height) {
-        super(width, height);
-        this.top = top;
-        this.left = left;
-        this.width = width;
-        this.height = height;
-    }
-    relativePositionOf(point) {
-        if (point instanceof MouseEvent) {
-            return new Point(point.clientX - this.left, point.clientY - this.top);
-        }
-        else {
-            return new Point(point.x - this.left, point.y - this.top);
-        }
-    }
-}
-(function (Bounds) {
-    function ofElement(element) {
-        const rect = element.getBoundingClientRect();
-        return new Bounds(rect.top, rect.left, rect.width, rect.height);
-    }
-    Bounds.ofElement = ofElement;
-})(Bounds || (Bounds = {}));
-
-let ResizeAwareComponent = class ResizeAwareComponent extends DisposableComponent {
-    constructor(elementRef, ngZone) {
-        super();
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
-    }
-    ngAfterViewInit() {
-        this.updateBounds();
-        const element = this.elementRef.nativeElement;
-        const ro = new ResizeObserver((entries, observer) => {
-            this.ngZone.run(() => this.updateBounds());
-        });
-        ro.observe(element);
-        this.onDispose(() => ro.disconnect());
-    }
-    get boundsModel() {
-        return this._boundsModel.readonly;
-    }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    // TODO: Make this handle body scroll
-    relativePositionOf(point) {
-        return this.bounds.relativePositionOf(point);
-    }
-    get bounds() {
-        return this._boundsModel.value;
-    }
-    updateBounds() {
-        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
-    }
-};
-ResizeAwareComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone }
-];
-ResizeAwareComponent = __decorate([
-    Directive(),
-    __metadata("design:paramtypes", [ElementRef, NgZone])
-], ResizeAwareComponent);
-
-/**
- * @example
- * // CSS Vars
- * aup-card-container {
- *   --card-gap: var(--card-gap, 16px);
- *   --card-width: var(--card-width, 300px);
- *   --card-height: var(--card-height, auto);
- *   --card-min-height: var(--card-min-height, auto);
- *   --card-background: var(--card-background, #fcfcfb);
- * }
- *
- * // Content Templates:
- * #addCardTemplate
- * <ng-template #addCardTemplate>
- *  This is a new card template, it will the the size of the other cards.
- * </nav-template>
- *
- */
-let CardContainerComponent = class CardContainerComponent extends DisposableComponent {
-    constructor() {
-        super();
-    }
-    ngOnInit() {
-    }
-};
+    Input(),
+    __metadata("design:type", String)
+], ActivityActionsComponent.prototype, "confirmText", void 0);
 __decorate([
     Input(),
     TrackExternal(),
     __metadata("design:type", Command)
-], CardContainerComponent.prototype, "addCardCommand", void 0);
+], ActivityActionsComponent.prototype, "cancelCommand", 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);
-
-let FocusContainerComponent = class FocusContainerComponent extends DisposableComponent {
-    constructor(focusManager) {
-        super();
-        this.focusManager = focusManager;
-        this.restoreFocusCommand = Command.create(() => {
-            this.restoreFocus();
-        });
-        this.tabIndex = -1;
-    }
-    ngOnInit() {
-    }
-    // @Trace()
-    restoreFocus() {
-        this.focusManager.restoreFocus();
-    }
-};
-FocusContainerComponent.ctorParameters = () => [
-    { type: FocusManager, decorators: [{ type: Self }] }
-];
+    Input(),
+    __metadata("design:type", String)
+], ActivityActionsComponent.prototype, "align", void 0);
 __decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", Object)
-], FocusContainerComponent.prototype, "tabIndex", void 0);
-FocusContainerComponent = __decorate([
+    HostBinding('class.align-end'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ActivityActionsComponent.prototype, "alignEnd", null);
+ActivityActionsComponent = __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);
+        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);
 
 const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
 class Activity extends DisposableComponent {
@@ -1464,25 +1289,210 @@ InteractionContextTriggerFor = __decorate([
     __metadata("design:paramtypes", [])
 ], InteractionContextTriggerFor);
 
-class DialogInteractionContext extends AbstractInteractionContext {
-    constructor(identifier, api, dialogService, config) {
-        super();
-        this.identifier = identifier;
-        this.api = api;
-        this.dialogService = dialogService;
-        this.config = config;
-        this.garbage = new GarbageCollector();
-        assert$1.notNil(dialogService);
-    }
-    cancelActiveActivity() {
-        return this.activityContainer.cancelActiveActivity();
-    }
-    dispose() {
-        if (this.isActive()) {
-            lang.illegalState('Dispose called while active.');
-        }
-        this.garbage.dispose();
-    }
+let InteractionModule = class 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);
+
+/**
+ * @example
+ * // CSS Vars
+ * aup-card-container {
+ *   --card-gap: var(--card-gap, 16px);
+ *   --card-width: var(--card-width, 300px);
+ *   --card-height: var(--card-height, auto);
+ *   --card-min-height: var(--card-min-height, auto);
+ *   --card-background: var(--card-background, #fcfcfb);
+ * }
+ *
+ * // Content Templates:
+ * #addCardTemplate
+ * <ng-template #addCardTemplate>
+ *  This is a new card template, it will the the size of the other cards.
+ * </nav-template>
+ *
+ */
+let CardContainerComponent = class CardContainerComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+};
+__decorate([
+    Input(),
+    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);
+
+let FocusContainerComponent = class FocusContainerComponent extends DisposableComponent {
+    constructor(focusManager) {
+        super();
+        this.focusManager = focusManager;
+        this.restoreFocusCommand = Command.create(() => {
+            this.restoreFocus();
+        });
+        this.tabIndex = -1;
+    }
+    ngOnInit() {
+    }
+    // @Trace()
+    restoreFocus() {
+        this.focusManager.restoreFocus();
+    }
+};
+FocusContainerComponent.ctorParameters = () => [
+    { type: FocusManager, decorators: [{ type: Self }] }
+];
+__decorate([
+    HostBinding('attr.tabindex'),
+    __metadata("design:type", Object)
+], FocusContainerComponent.prototype, "tabIndex", void 0);
+FocusContainerComponent = __decorate([
+    Component({
+        selector: 'aup-focus-container',
+        template: "<ng-content></ng-content>\n",
+        providers: [
+            { provide: FocusManager }
+        ],
+        styles: [":host{display:block}"]
+    }),
+    __param(0, Self()),
+    __metadata("design:paramtypes", [FocusManager])
+], FocusContainerComponent);
+
+let FocusableComponent = class FocusableComponent extends DisposableComponent {
+    constructor(el, focusManager, focusBindingFactory) {
+        super();
+        this.el = el;
+        this.focusManager = focusManager;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        if (this.focusManager) {
+            this._focusContext = this.focusManager.registerFocusable(this);
+            this.registerDisposable(this._focusContext);
+            this.registerDisposable(focusBindingFactory.createBinding(el.nativeElement, this.focusContext));
+        }
+    }
+    get focusable() {
+        return !!this.focusContext ? 0 : undefined;
+    }
+    onFocus() {
+        var _a;
+        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusIn();
+    }
+    onBlur() {
+        var _a;
+        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusOut();
+    }
+    get focusContext() {
+        return this._focusContext;
+    }
+};
+FocusableComponent.ctorParameters = () => [
+    { 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);
+
+class DialogInteractionContext extends AbstractInteractionContext {
+    constructor(identifier, api, dialogService, config) {
+        super();
+        this.identifier = identifier;
+        this.api = api;
+        this.dialogService = dialogService;
+        this.config = config;
+        this.garbage = new GarbageCollector();
+        assert$1.notNil(dialogService);
+    }
+    cancelActiveActivity() {
+        return this.activityContainer.cancelActiveActivity();
+    }
+    dispose() {
+        if (this.isActive()) {
+            lang.illegalState('Dispose called while active.');
+        }
+        this.garbage.dispose();
+    }
     registerDisposable(disposable) {
         return this.garbage.registerDisposable(disposable);
     }
@@ -2132,208 +2142,34 @@ let DefaultHeaderCellRendererComponent = class DefaultHeaderCellRendererComponen
 };
 __decorate([
     Input(),
-    __metadata("design:type", ColumnModel)
-], DefaultHeaderCellRendererComponent.prototype, "columnModel", void 0);
+    __metadata("design:type", String)
+], DefaultHeaderCellRendererComponent.prototype, "headerText", void 0);
 DefaultHeaderCellRendererComponent = __decorate([
     Component({
         selector: 'aup-default-header-renderer',
-        template: "{{columnModel.getHeaderText()}}\n",
+        template: "{{headerText}}\n",
         styles: [""]
     }),
     __metadata("design:paramtypes", [])
 ], DefaultHeaderCellRendererComponent);
 
-var TableModel_1;
-// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
-// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
-/**
- * Example:
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Editable tables
- * @example
- * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
- *   if (form.validate()) {
- *     // normal form save stuff
- *     return true; // finish editing
- *   }
- *   return false; // continue editiing
- * }
- * const colorsNames: ListModel<string> = ...;
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
- *   table.pluck("lastName").cellEditor(StringInputComponent, {
- *     validators: [Validator.present("We need a last name")]
- *   });
- *   table.pluck("age").cellEditor(NumberInputComponent);
- *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
- *     initialiseComponent(component: SelectInputComponent) {
- *       selectInput.optionsModel = colorsNames; // <- initialise our component
- *     }
- *   });
- *   table.addEditControls(saveCommand); // <- required to enable editing
- * });
- *
- * Selection models
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- * });
- *
- * Custom cell renderers and editors
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("favoriteColor")
- *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
- *        // configure your component with what ever you need.
- *      });
- *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
- *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * I18n
- * @example
- * [table.yml]
- * table:
- *   columns(ColumnTextProperties[]):
- *      firstName:
- *         headerText: "First Name"
- *      fullName:
- *         headerText: "Full Name"
- *
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- *
- *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
- * });
- */
-let TableModel = TableModel_1 = class TableModel {
-    constructor(sourceOfTruth) {
-        this.sourceOfTruth = sourceOfTruth;
-        this._garbage = new GarbageCollector();
-        this._columns = new MutableListModel();
-        this._editorSessions = new MutableListModel();
-        this.identityOf = sourceOfTruth.identityOf;
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this._garbage);
-        this._columnsById = chain(this._columns).indexBy('columnId');
-        this._rowsBeingEdited = new MutableListModel([], {
-            identifiedWith: this.identityOf
-        });
-        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
-        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
-        this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
-    }
-    static fromList(sourceOfTruth, builder) {
-        const model = new TableModel_1(sourceOfTruth);
-        builder(model);
-        return model;
-    }
-    get rowsBeingEdited() {
-        return this._rowsBeingEdited.readonly;
-    }
-    getTrackByFunction() {
-        return (index, item) => {
-            return this.identityOf ? this.identityOf(item) : index;
-        };
-    }
-    get columns() {
-        return this._columns.readonly;
-    }
-    pluck(property) {
-        return this.addColumn(new PropertyColumnModel(property, this));
-    }
-    addSelectionColumn(selectionModel) {
-        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
-    }
-    addEditControls(saveCommand) {
+class EditSession extends GarbageCollector {
+    constructor(rowId, row, saveCommand) {
+        super();
+        this.rowId = rowId;
         this.saveCommand = saveCommand;
-        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
-    }
-    addCustomColumn(columnId, dataAccessor) {
-        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
-    }
-    addColumn(column) {
-        if (this._columnsById.get(column.columnId)) {
-            lang.illegalState(`Column with id=${column.columnId} already exists`);
-        }
-        else {
-            this._columns.push(column);
-        }
-        return column;
-    }
-    columnTextProperties(columnTextProperties) {
-        this._columnTextPropertiesLookup = columnTextProperties;
-    }
-    getColumnTextProperties(column) {
-        const factory = this._columnTextPropertiesLookup[column.columnId];
-        return factory ? factory() : undefined;
-    }
-    startEditSession(row) {
-        const rowId = this.identityOf(row);
-        if (this._rowsBeingEdited.query().indexOf(row) > -1) {
-            return lang.illegalState(`Row with id=${rowId} already being edited`);
-        }
-        else {
-            const editSession = new TableModel_1.EditSession(rowId, row, this.saveCommand);
-            const { when } = Dsl.disposeWith(editSession);
-            when.valueOf(editSession.rowValueModel).changes((editedValue) => {
-                this._rowsBeingEdited.replaceOrPush(editedValue);
-            }, { initialValue: 'triggerChangeUnlessNil' });
-            this._editorSessions.push(editSession);
-            editSession.onDispose(() => {
-                this._rowsBeingEdited.remove(editSession.rowValueModel.value);
-                this._editorSessions.remove(editSession);
-            });
-            return editSession;
-        }
-    }
-    getEditSessionFor(row) {
-        return this._editorSessionByRowId.get(this.identityOf(row));
-    }
-    cancelAllEditorSessions() {
-        this._editorSessions.runInTransaction((draft) => {
-            this._rowsBeingEdited.runInTransaction(() => {
-                draft.value.forEach(session => session.dispose());
+        this._editorValue = new MutableValueModel();
+        this.rowValueModel = this._editorValue.readonly;
+        this.form = new Form();
+        this.form.load(row);
+        this._editorValue.value = row;
+        this.form.onEdit(() => {
+            this._editorValue.value = produce(this._editorValue.value, draft => {
+                this.form.writeDirtyStateTo(draft);
             });
         });
     }
-};
-TableModel.ctorParameters = () => [
-    { type: ListModel }
-];
-TableModel = TableModel_1 = __decorate([
-    TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
-    __metadata("design:paramtypes", [ListModel])
-], TableModel);
-(function (TableModel) {
-    class EditSession extends GarbageCollector {
-        constructor(rowId, row, saveCommand) {
-            super();
-            this.rowId = rowId;
-            this.saveCommand = saveCommand;
-            this._editorValue = new MutableValueModel();
-            this.rowValueModel = this._editorValue.readonly;
-            this.form = new Form();
-            this.form.load(row);
-            this._editorValue.value = row;
-            this.form.onEdit(() => {
-                this._editorValue.value = produce(this._editorValue.value, draft => {
-                    this.form.writeDirtyStateTo(draft);
-                });
-            });
-        }
-    }
-    TableModel.EditSession = EditSession;
-})(TableModel || (TableModel = {}));
+}
 
 let EditRowControls = class EditRowControls extends DisposableComponent {
     constructor() {
@@ -2368,7 +2204,7 @@ __decorate([
 ], EditRowControls.prototype, "editRowCommand", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", TableModel.EditSession)
+    __metadata("design:type", EditSession)
 ], EditRowControls.prototype, "editSession", void 0);
 EditRowControls = __decorate([
     Component({
@@ -2446,7 +2282,7 @@ class ColumnModel {
         this.columnId = columnId;
         this.defaults = defaults;
         this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
-            component.columnModel = column;
+            component.headerText = column.getHeaderText();
         });
     }
     getHeaderText() {
@@ -2474,6 +2310,7 @@ class ColumnModel {
             portal: new ComponentPortal(cellRenderer),
             initialiseComponent: initialiser
         };
+        return this;
     }
     setCellEditor(cellEditor) {
         this._cellEditorConfig = cellEditor;
@@ -2517,12 +2354,14 @@ class PropertyColumnModel extends ColumnModel {
     constructor(property, defaults) {
         super(property.toString(), defaults);
         this.property = property;
+        this._format = (value) => value;
         this.cellRenderer(DefaultCellRendererComponent);
     }
     cellRenderer(componentType) {
         this.setCellRenderer(componentType, (component, row) => {
-            component.value = row[this.property];
+            component.value = this._format(row[this.property]);
         });
+        return this;
     }
     cellEditor(editor, options) {
         this.setCellEditor({
@@ -2540,6 +2379,11 @@ class PropertyColumnModel extends ColumnModel {
         });
         return this;
     }
+    format(formatter) {
+        assert$1.isFunction(formatter);
+        this._format = formatter;
+        return this;
+    }
 }
 class CustomValueColumnModel extends ColumnModel {
     constructor(columnId, defaults, getValue) {
@@ -2551,6 +2395,7 @@ class CustomValueColumnModel extends ColumnModel {
         this.setCellRenderer(componentType, (component, row) => {
             component.value = this.getValue(row);
         });
+        return this;
     }
 }
 class EditorControlColumnModel extends ColumnModel {
@@ -2564,33 +2409,206 @@ class EditorControlColumnModel extends ColumnModel {
             component.editSession = editSession;
             component.editRowCommand = editRowCommand;
         });
+        return this;
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+class CustomTemplateColumnModel extends ColumnModel {
+    constructor(columnId, defaults, component) {
+        super(columnId, defaults);
+    }
+}
+class SelectionColumnModel extends ColumnModel {
+    constructor(columnId, defaults, selectionModel) {
+        super(columnId, defaults);
+        if (selectionModel instanceof MultipleSelectionModel) {
+            this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
+                component.selectionModel = selectionModel;
+            });
+        }
+        this.setCellRenderer(SelectCellRendererComponent, (component, row, editRowCommand, editSession) => {
+            component.row = row;
+            component.selectionModel = selectionModel;
+        });
+    }
+    getDefaultHeaderText() {
+        return '';
+    }
+}
+
+var TableModel_1;
+// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
+// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+/**
+ * Example:
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Editable tables
+ * @example
+ * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+ *   if (form.validate()) {
+ *     // normal form save stuff
+ *     return true; // finish editing
+ *   }
+ *   return false; // continue editiing
+ * }
+ * const colorsNames: ListModel<string> = ...;
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.pluck("lastName").cellEditor(StringInputComponent, {
+ *     validators: [Validator.present("We need a last name")]
+ *   });
+ *   table.pluck("age").cellEditor(NumberInputComponent);
+ *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+ *     initialiseComponent(component: SelectInputComponent) {
+ *       selectInput.optionsModel = colorsNames; // <- initialise our component
+ *     }
+ *   });
+ *   table.addEditControls(saveCommand); // <- required to enable editing
+ * });
+ *
+ * Selection models
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ * });
+ *
+ * Custom cell renderers and editors
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor")
+ *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+ *        // configure your component with what ever you need.
+ *      });
+ *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+ *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * I18n
+ * @example
+ * [table.yml]
+ * table:
+ *   columns(ColumnTextProperties[]):
+ *      firstName:
+ *         headerText: "First Name"
+ *      fullName:
+ *         headerText: "Full Name"
+ *
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ *
+ *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+ * });
+ */
+let TableModel = TableModel_1 = class TableModel {
+    constructor(sourceOfTruth) {
+        this.sourceOfTruth = sourceOfTruth;
+        this._garbage = new GarbageCollector();
+        this._columns = new MutableListModel();
+        this._editorSessions = new MutableListModel();
+        this.identityOf = sourceOfTruth.identityOf;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this._garbage);
+        this._columnsById = chain(this._columns).indexBy('columnId');
+        this._rowsBeingEdited = new MutableListModel([], {
+            identifiedWith: this.identityOf
+        });
+        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
+        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
+        this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
+    }
+    static fromList(sourceOfTruth, builder) {
+        const model = new TableModel_1(sourceOfTruth);
+        builder(model);
+        return model;
+    }
+    get rowsBeingEdited() {
+        return this._rowsBeingEdited.readonly;
+    }
+    getTrackByFunction() {
+        return (index, item) => {
+            return this.identityOf ? this.identityOf(item) : index;
+        };
+    }
+    get columns() {
+        return this._columns.readonly;
+    }
+    pluck(property) {
+        return this.addColumn(new PropertyColumnModel(property, this));
+    }
+    addSelectionColumn(selectionModel) {
+        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
+    }
+    addEditControls(saveCommand) {
+        this.saveCommand = saveCommand;
+        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+    }
+    addCustomColumn(columnId, dataAccessor) {
+        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+    }
+    addColumn(column) {
+        if (this._columnsById.get(column.columnId)) {
+            lang.illegalState(`Column with id=${column.columnId} already exists`);
+        }
+        else {
+            this._columns.push(column);
+        }
+        return column;
     }
-    getDefaultHeaderText() {
-        return '';
+    columnTextProperties(columnTextProperties) {
+        this._columnTextPropertiesLookup = columnTextProperties;
     }
-}
-class CustomTemplateColumnModel extends ColumnModel {
-    constructor(columnId, defaults, component) {
-        super(columnId, defaults);
+    getColumnTextProperties(column) {
+        const factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+        return factory ? factory() : undefined;
     }
-}
-class SelectionColumnModel extends ColumnModel {
-    constructor(columnId, defaults, selectionModel) {
-        super(columnId, defaults);
-        if (selectionModel instanceof MultipleSelectionModel) {
-            this.cellHeaderRenderer(SelectHeaderCellRendererComponent, (component) => {
-                component.selectionModel = selectionModel;
+    startEditSession(row) {
+        const rowId = this.identityOf(row);
+        if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+            return lang.illegalState(`Row with id=${rowId} already being edited`);
+        }
+        else {
+            const editSession = new EditSession(rowId, row, this.saveCommand);
+            const { when } = Dsl.disposeWith(editSession);
+            when.valueOf(editSession.rowValueModel).changes((editedValue) => {
+                this._rowsBeingEdited.replaceOrPush(editedValue);
+            }, { initialValue: 'triggerChangeUnlessNil' });
+            this._editorSessions.push(editSession);
+            editSession.onDispose(() => {
+                this._rowsBeingEdited.remove(editSession.rowValueModel.value);
+                this._editorSessions.remove(editSession);
             });
+            return editSession;
         }
-        this.setCellRenderer(SelectCellRendererComponent, (component, row, editRowCommand, editSession) => {
-            component.row = row;
-            component.selectionModel = selectionModel;
-        });
     }
-    getDefaultHeaderText() {
-        return '';
+    getEditSessionFor(row) {
+        return this._editorSessionByRowId.get(this.identityOf(row));
     }
-}
+    cancelAllEditorSessions() {
+        this._editorSessions.runInTransaction((draft) => {
+            this._rowsBeingEdited.runInTransaction(() => {
+                draft.value.forEach(session => session.dispose());
+            });
+        });
+    }
+};
+TableModel.ctorParameters = () => [
+    { type: ListModel }
+];
+TableModel = TableModel_1 = __decorate([
+    TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
+    __metadata("design:paramtypes", [ListModel])
+], TableModel);
 
 /**
  * Create your model:
@@ -2705,7 +2723,7 @@ __decorate([
 ], TableCellRendererComponent.prototype, "column", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", TableModel.EditSession)
+    __metadata("design:type", EditSession)
 ], TableCellRendererComponent.prototype, "editSession", void 0);
 __decorate([
     Input(),
@@ -2834,107 +2852,6 @@ VerticalFocusContainerComponent = __decorate([
     __metadata("design:paramtypes", [FocusManager])
 ], VerticalFocusContainerComponent);
 
-/**
- * @file Automatically generated by barrelsby.
- */
-
-let ActivityActionsComponent = class ActivityActionsComponent extends DisposableComponent {
-    constructor() {
-        super(...arguments);
-        this.align = 'start';
-    }
-    get alignEnd() {
-        return this.align === 'end';
-    }
-    ngOnInit() {
-    }
-    hasConfirmText() {
-        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);
-
-let InteractionModule = class 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);
-
 let ComponentsModule = class ComponentsModule {
 };
 ComponentsModule = __decorate([
@@ -5155,6 +5072,97 @@ const slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
     transition(':leave', [animate('{{duration}}', slideLeftOnEnterDef)], { params: { duration: '100ms' } })
 ]);
 
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+class Dimension {
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+}
+
+class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    static from(data) {
+        return new Point(data.x, data.y);
+    }
+    translate(x, y) {
+        return new Point(this.x + x, this.y + y);
+    }
+}
+
+class Bounds extends Dimension {
+    constructor(top, left, width, height) {
+        super(width, height);
+        this.top = top;
+        this.left = left;
+        this.width = width;
+        this.height = height;
+    }
+    relativePositionOf(point) {
+        if (point instanceof MouseEvent) {
+            return new Point(point.clientX - this.left, point.clientY - this.top);
+        }
+        else {
+            return new Point(point.x - this.left, point.y - this.top);
+        }
+    }
+}
+(function (Bounds) {
+    function ofElement(element) {
+        const rect = element.getBoundingClientRect();
+        return new Bounds(rect.top, rect.left, rect.width, rect.height);
+    }
+    Bounds.ofElement = ofElement;
+})(Bounds || (Bounds = {}));
+
+let ResizeAwareComponent = class ResizeAwareComponent extends DisposableComponent {
+    constructor(elementRef, ngZone) {
+        super();
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
+    }
+    ngAfterViewInit() {
+        this.updateBounds();
+        const element = this.elementRef.nativeElement;
+        const ro = new ResizeObserver((entries, observer) => {
+            this.ngZone.run(() => this.updateBounds());
+        });
+        ro.observe(element);
+        this.onDispose(() => ro.disconnect());
+    }
+    get boundsModel() {
+        return this._boundsModel.readonly;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    // TODO: Make this handle body scroll
+    relativePositionOf(point) {
+        return this.bounds.relativePositionOf(point);
+    }
+    get bounds() {
+        return this._boundsModel.value;
+    }
+    updateBounds() {
+        this._boundsModel.value = Bounds.ofElement(this.nativeElement);
+    }
+};
+ResizeAwareComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgZone }
+];
+ResizeAwareComponent = __decorate([
+    Directive(),
+    __metadata("design:paramtypes", [ElementRef, NgZone])
+], ResizeAwareComponent);
+
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -5483,5 +5491,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