@coolon/angular-ui-powerups 1.13.0 → 1.13.2

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, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, QueryList, Optional, EventEmitter, Output, ContentChild, TemplateRef, Self, 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, SkipSelf, EventEmitter, Output, ContentChild, TemplateRef, Self, ChangeDetectorRef, ContentChildren } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -8,6 +8,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule, MatTabGroup, MAT_TABS_CONFIG } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
@@ -18,7 +19,7 @@ import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
 import ___default, { isEqual, isNil } from 'lodash';
 import { assert as assert$1, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
-import { Overlay } from '@angular/cdk/overlay';
+import { Overlay, CdkScrollable } from '@angular/cdk/overlay';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import produce from 'immer';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -1129,26 +1130,34 @@ AddItemInteractionContextComponent = __decorate([
 ], AddItemInteractionContextComponent);
 
 let PopupInteractionContextComponent = class PopupInteractionContextComponent extends DisposableComponent {
-    constructor(_element, _overlay) {
+    constructor(_element, _overlay, scrollable) {
         super();
         this._element = _element;
         this._overlay = _overlay;
         this.outputPortal = new ComponentPortal(InPlaceInteractionContextComponent);
         this.anchorX = 'start';
         this.anchorY = 'bottom';
+        this.scrollContainers = scrollable ? [scrollable] : [];
     }
     get active() {
         return this.isActive();
     }
     startActivity(activityType, data) {
+        // console.log({ element: this._element });
+        const self = this;
         const overlayRef = this._overlay.create({
             hasBackdrop: false,
             panelClass: 'aup-popup-interaction-panel',
             positionStrategy: this._overlay.position()
                 .flexibleConnectedTo(this._element)
+                .withPush(true)
                 .withPositions(this.computePositions())
                 .withGrowAfterOpen(true)
+                .withScrollableContainers(self.scrollContainers) // this isn't working. sigh.
         });
+        const subs = this.scrollContainers.map(sc => sc.elementScrolled().subscribe(() => {
+            overlayRef.updatePosition();
+        }));
         const componentRef = overlayRef.attach(this.outputPortal);
         this.interactionContext = componentRef.instance;
         return new Promise((resolve, reject) => {
@@ -1157,7 +1166,13 @@ let PopupInteractionContextComponent = class PopupInteractionContextComponent ex
                 this.interactionContext.startActivity(activityType, data)
                     .then(resolve)
                     .catch(reject)
-                    .finally(() => overlayRef.dispose());
+                    .finally(() => {
+                    subs.forEach(s => s.unsubscribe());
+                    overlayRef.dispose();
+                });
+                setTimeout(() => {
+                    overlayRef.updatePosition();
+                });
             });
         });
     }
@@ -1184,7 +1199,8 @@ let PopupInteractionContextComponent = class PopupInteractionContextComponent ex
 };
 PopupInteractionContextComponent.ctorParameters = () => [
     { type: ElementRef },
-    { type: Overlay }
+    { type: Overlay },
+    { type: CdkScrollable, decorators: [{ type: Optional }, { type: SkipSelf }] }
 ];
 __decorate([
     HostBinding('class.interaction-active'),
@@ -1205,7 +1221,8 @@ PopupInteractionContextComponent = __decorate([
         template: "<ng-content></ng-content>\n",
         styles: [":host{display:inline}:host.interaction-active{background:rgba(0,0,0,.05)}"]
     }),
-    __metadata("design:paramtypes", [ElementRef, Overlay])
+    __param(2, Optional()), __param(2, SkipSelf()),
+    __metadata("design:paramtypes", [ElementRef, Overlay, CdkScrollable])
 ], PopupInteractionContextComponent);
 
 let InteractionContextTriggerFor = class InteractionContextTriggerFor extends GarbageCollector {
@@ -1625,9 +1642,6 @@ let AbstractInputComponent = class AbstractInputComponent extends DisposableComp
             }
         };
     }
-    get inputModel() {
-        return lang$1.abstractMethod(this.constructor, "inputModel");
-    }
     notifyClick() {
         this.safelyInvoke(this.clickCommand);
     }
@@ -2025,7 +2039,7 @@ let ScrollContainerComponent = class ScrollContainerComponent {
 ScrollContainerComponent = __decorate([
     Component({
         selector: 'aup-scroll-container',
-        template: "<div class=\"container\">\n    <ng-content></ng-content>\n</div>\n",
+        template: "<div class=\"container\" cdkScrollable>\n    <ng-content></ng-content>\n</div>\n",
         styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}"]
     }),
     __metadata("design:paramtypes", [])
@@ -2303,376 +2317,101 @@ SelectHeaderCellRendererComponent = __decorate([
     __metadata("design:paramtypes", [])
 ], SelectHeaderCellRendererComponent);
 
-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._createForm = (row) => new Form();
-        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;
+const HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
+const CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
+const CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
+const PORTAL_RENDERER_COMPONENT = Symbol('aup-cell-renderer-portal-component');
+const PORTAL_EDITOR_COMPONENT = Symbol('aup-cell-editor-portal-component');
+const noop = () => {
+};
+const ɵ0 = noop;
+class CellPortalRef {
+    constructor() {
     }
-    get rowsBeingEdited() {
-        return this._rowsBeingEdited.readonly;
+}
+class CellHeaderPortalRef extends CellPortalRef {
+    constructor(componentType, initialiseHeader) {
+        super();
+        this.componentType = componentType;
+        this.initialiseHeader = initialiseHeader;
     }
-    getTrackByFunction() {
-        return (index, item) => {
-            return this.identityOf ? this.identityOf(item) : index;
-        };
+    initialiseHost(host, columnModel) {
+        assert$1.isTruthy(host);
+        host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     }
-    get columns() {
-        return this._columns.readonly;
+    onPortalAttached(host, portalComponent) {
+        this.initialiseHeader(portalComponent, host.column);
     }
-    pluck(property) {
-        return this.addColumn(new PropertyColumnModel(property, this));
+}
+class CellRendererPortalRef extends CellPortalRef {
+}
+class ComponentCellRendererPortalRef extends CellRendererPortalRef {
+    constructor(componentType, updateComponent) {
+        super();
+        this.componentType = componentType;
+        this.updateComponent = updateComponent;
     }
-    pluckList(property) {
-        return this.addColumn(new ListPropertyColumnModel(property, this));
+    initialiseHost(host, columnModel) {
+        host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     }
-    addSelectionColumn(selectionModel) {
-        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
+    onPortalAttached(host, portalComponent) {
+        host[PORTAL_RENDERER_COMPONENT] = portalComponent;
+        this.updateComponent(portalComponent, host.getRowData());
     }
-    addEditControls(saveCommand) {
-        this.saveCommand = saveCommand;
-        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+    pushState(host) {
+        if (host[PORTAL_RENDERER_COMPONENT]) {
+            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+        }
     }
-    addCustomColumn(columnId, dataAccessor) {
-        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+}
+class CellEditorPortalRef extends CellPortalRef {
+    constructor(componentType, initialiseEditorSession) {
+        super();
+        this.componentType = componentType;
+        this.initialiseEditorSession = initialiseEditorSession;
     }
-    addTemplateColumn(columnId) {
-        return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+    initialiseHost(host, columnModel) {
+        assert$1.isTruthy(host);
+        host[CELL_EDITOR_PORTAL] = new ComponentPortal(this.componentType);
     }
-    useFormFactory(factory) {
-        this._createForm = factory;
-        return this;
+    // @Trace()
+    onPortalAttached(host, portalComponent) {
+        host[PORTAL_EDITOR_COMPONENT] = portalComponent;
+        this.initialiseEditorSession(portalComponent, host.editSession);
     }
-    addColumn(column) {
-        if (this._columnsById.get(column.columnId)) {
-            lang.illegalState(`Column with id=${column.columnId} already exists`);
-        }
-        else {
-            this._columns.push(column);
-        }
-        return column;
+}
+class TemplateCellRendererPortalRef extends CellRendererPortalRef {
+    constructor() {
+        super();
     }
-    columnTextProperties(columnTextProperties) {
-        this._columnTextPropertiesLookup = columnTextProperties;
+    registerPortal(templateRef, viewContainer, fillCell, padChild) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.fillCell = fillCell;
+        this.padChild = padChild;
     }
-    getColumnTextProperties(column) {
-        const factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-        return factory ? factory() : undefined;
+    initialiseHost(host, columnModel) {
+        assert$1.isTruthy(host);
     }
-    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._createForm(row), this.saveCommand);
-            const { when } = Dsl.disposeWith(editSession);
-            when.valueOf(editSession.liveRowValue).changes((editedValue) => {
-                this._rowsBeingEdited.replaceOrPush(editedValue);
-            }, { initialValue: 'triggerChangeUnlessNil' });
-            this._editorSessions.push(editSession);
-            editSession.onDispose(() => {
-                this._rowsBeingEdited.remove(editSession.liveRowValue.value);
-                this._editorSessions.remove(editSession);
-            });
-            return editSession;
-        }
+    // @Trace()
+    onPortalAttached(host, portalComponent) {
+        //  don't care
     }
-    getEditSessionFor(row) {
-        return this._editorSessionByRowId.get(this.identityOf(row));
+    pushState(host) {
+        host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
+        host.fillCell = this.fillCell;
+        host.padChild = this.padChild;
     }
-    cancelAllEditorSessions() {
-        this._editorSessions.runInTransaction((draft) => {
-            this._rowsBeingEdited.runInTransaction(() => {
-                draft.value.forEach(session => session.dispose());
-            });
-        });
+    createPortal(data) {
+        return new TemplatePortal(this.templateRef, this.viewContainer, Object.assign(Object.assign({}, (data)), { $implicit: data.row }));
     }
-};
-TableModel.ctorParameters = () => [
-    { type: ListModel }
-];
-TableModel = TableModel_1 = __decorate([
-    TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
-    __metadata("design:paramtypes", [ListModel])
-], TableModel);
-
-let TableCellRendererComponent = class TableCellRendererComponent {
-    constructor() {
-        this.defaultClassNames = 'aup-cell-renderer';
-        this.fillCell = false;
-        this.padChild = false;
-        this.editRowCommand = Command.create(() => {
-            this.tableModel.startEditSession(this.row);
-        });
-    }
-    ngOnInit() {
-        this.column.attachCell(this);
-    }
-    hasActiveEditor() {
-        return !!this.editSession && !!this.column.hasEditorPortal();
-    }
-    initialiseRenderer(instance) {
-        this.column.onRendererAttached(this, instance);
-    }
-    initialiseEditor(instance) {
-        this.column.onEditorAttached(this, instance);
-    }
-    // @Trace()
-    ngOnChanges(changes) {
-        this.column.updatePortalContent(this);
-    }
-    getRendererPortal() {
-        return this[CELL_RENDERER_PORTAL];
-    }
-    getEditorPortal() {
-        return this[CELL_EDITOR_PORTAL];
-    }
-    getRowData() {
-        return {
-            row: this.row,
-            editSession: this.editSession,
-            editRowCommand: this.editRowCommand
-        };
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], TableCellRendererComponent.prototype, "row", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", ColumnModel)
-], TableCellRendererComponent.prototype, "column", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", EditSession)
-], TableCellRendererComponent.prototype, "editSession", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TableModel)
-], TableCellRendererComponent.prototype, "tableModel", void 0);
-__decorate([
-    HostBinding('class'),
-    __metadata("design:type", Object)
-], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
-__decorate([
-    HostBinding('class.fillCell'),
-    __metadata("design:type", Object)
-], TableCellRendererComponent.prototype, "fillCell", void 0);
-__decorate([
-    HostBinding('class.padChild'),
-    __metadata("design:type", Object)
-], TableCellRendererComponent.prototype, "padChild", void 0);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], TableCellRendererComponent.prototype, "initialiseEditor", null);
-TableCellRendererComponent = __decorate([
-    Component({
-        selector: 'aup-table-cell-renderer',
-        template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
-        styles: [""]
-    }),
-    __metadata("design:paramtypes", [])
-], TableCellRendererComponent);
-
-const HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
-const CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
-const CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
-const PORTAL_RENDERER_COMPONENT = Symbol('aup-cell-renderer-portal-component');
-const PORTAL_EDITOR_COMPONENT = Symbol('aup-cell-editor-portal-component');
-const noop = () => {
-};
-const ɵ0 = noop;
-class CellPortalRef {
-    constructor() {
-    }
-}
-class CellHeaderPortalRef extends CellPortalRef {
-    constructor(componentType, initialiseHeader) {
-        super();
-        this.componentType = componentType;
-        this.initialiseHeader = initialiseHeader;
-    }
-    initialiseHost(host, columnModel) {
-        assert$1.isTruthy(host);
-        host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
-    }
-    onPortalAttached(host, portalComponent) {
-        this.initialiseHeader(portalComponent, host.column);
-    }
-}
-class CellRendererPortalRef extends CellPortalRef {
-}
-class ComponentCellRendererPortalRef extends CellRendererPortalRef {
-    constructor(componentType, updateComponent) {
-        super();
-        this.componentType = componentType;
-        this.updateComponent = updateComponent;
-    }
-    initialiseHost(host, columnModel) {
-        host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
-    }
-    onPortalAttached(host, portalComponent) {
-        host[PORTAL_RENDERER_COMPONENT] = portalComponent;
-        this.updateComponent(portalComponent, host.getRowData());
-    }
-    pushState(host) {
-        if (host[PORTAL_RENDERER_COMPONENT]) {
-            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
-        }
-    }
-}
-class CellEditorPortalRef extends CellPortalRef {
-    constructor(componentType, initialiseEditorSession) {
-        super();
-        this.componentType = componentType;
-        this.initialiseEditorSession = initialiseEditorSession;
-    }
-    initialiseHost(host, columnModel) {
-        assert$1.isTruthy(host);
-        host[CELL_EDITOR_PORTAL] = new ComponentPortal(this.componentType);
-    }
-    onPortalAttached(host, portalComponent) {
-        host[PORTAL_EDITOR_COMPONENT] = portalComponent;
-        this.initialiseEditorSession(portalComponent, host.editSession);
-    }
-}
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [TableCellRendererComponent, Object]),
-    __metadata("design:returntype", void 0)
-], CellEditorPortalRef.prototype, "onPortalAttached", null);
-class TemplateCellRendererPortalRef extends CellRendererPortalRef {
-    constructor() {
-        super();
-    }
-    registerPortal(templateRef, viewContainer, fillCell, padChild) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.fillCell = fillCell;
-        this.padChild = padChild;
-    }
-    initialiseHost(host, columnModel) {
-        assert$1.isTruthy(host);
-    }
-    onPortalAttached(host, portalComponent) {
-        //  don't care
-    }
-    pushState(host) {
-        host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
-        host.fillCell = this.fillCell;
-        host.padChild = this.padChild;
-    }
-    createPortal(data) {
-        return new TemplatePortal(this.templateRef, this.viewContainer, Object.assign(Object.assign({}, (data)), { $implicit: data.row }));
-    }
-}
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [TableCellRendererComponent, void 0]),
-    __metadata("design:returntype", void 0)
-], TemplateCellRendererPortalRef.prototype, "onPortalAttached", null);
-class ColumnModel {
-    constructor(columnId, defaults) {
-        this.columnId = columnId;
-        this.defaults = defaults;
-        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
-            component.headerText = column.getHeaderText();
+}
+class ColumnModel {
+    constructor(columnId, defaults) {
+        this.columnId = columnId;
+        this.defaults = defaults;
+        this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
+            component.headerText = column.getHeaderText();
         });
     }
     getHeaderText() {
@@ -2720,6 +2459,7 @@ class ColumnModel {
     onRendererAttached(host, component) {
         this._cellRendererPortalRef.onPortalAttached(host, component);
     }
+    // @Trace()
     onEditorAttached(host, component) {
         this._cellEditorPortalRef.onPortalAttached(host, component);
     }
@@ -2739,12 +2479,6 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Object)
 ], ColumnModel.prototype, "getColumnTextProperties", null);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [TableCellRendererComponent, Object]),
-    __metadata("design:returntype", void 0)
-], ColumnModel.prototype, "onEditorAttached", null);
 class PropertyColumnModel extends ColumnModel {
     constructor(property, defaults) {
         super(property.toString(), defaults);
@@ -2871,6 +2605,190 @@ class SelectionColumnModel extends ColumnModel {
     }
 }
 
+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._createForm = (row) => new Form();
+        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);
+        this.firstEditableColumn = chain(this.columns).select(c => c.hasEditorPortal()).first();
+    }
+    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));
+    }
+    pluckList(property) {
+        return this.addColumn(new ListPropertyColumnModel(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));
+    }
+    addTemplateColumn(columnId) {
+        return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+    }
+    useFormFactory(factory) {
+        this._createForm = factory;
+        return this;
+    }
+    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 ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+        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 EditSession(rowId, row, this._createForm(row), this.saveCommand);
+            const { when } = Dsl.disposeWith(editSession);
+            when.valueOf(editSession.liveRowValue).changes((editedValue) => {
+                this._rowsBeingEdited.replaceOrPush(editedValue);
+            }, { initialValue: 'triggerChangeUnlessNil' });
+            this._editorSessions.push(editSession);
+            editSession.onDispose(() => {
+                this._rowsBeingEdited.remove(editSession.liveRowValue.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());
+            });
+        });
+    }
+};
+TableModel.ctorParameters = () => [
+    { type: ListModel }
+];
+TableModel = TableModel_1 = __decorate([
+    TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
+    __metadata("design:paramtypes", [ListModel])
+], TableModel);
+
 /**
  * Create your model:
  * @example
@@ -2976,6 +2894,99 @@ ColumnTemplateDirective = __decorate([
         ViewContainerRef])
 ], ColumnTemplateDirective);
 
+let TableCellRendererComponent = class TableCellRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.defaultClassNames = 'aup-cell-renderer';
+        this.fillCell = false;
+        this.padChild = false;
+        this.editRowCommand = Command.create(() => {
+            this.tableModel.startEditSession(this.row);
+        });
+    }
+    ngOnInit() {
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.firstEditableColumn = chain(this.tableModel.firstEditableColumn).equals(this.column); // this would break if the column changed.
+        this.column.attachCell(this);
+    }
+    hasActiveEditor() {
+        return !!this.editSession && !!this.column.hasEditorPortal();
+    }
+    initialiseRenderer(instance) {
+        this.column.onRendererAttached(this, instance);
+    }
+    initialiseEditor(instance) {
+        this.column.onEditorAttached(this, instance);
+        if (this.firstEditableColumn.value) {
+            // @see https://github.com/angular/components/issues/12070
+            setTimeout(() => this.tryAndFocusEditor(instance));
+        }
+    }
+    tryAndFocusEditor(editor) {
+        var _a;
+        if (editor.requestFocus) {
+            editor.requestFocus();
+        }
+        else {
+            const model = (editor['valueModel'] || editor['listModel']);
+            (_a = model === null || model === void 0 ? void 0 : model.focusContext) === null || _a === void 0 ? void 0 : _a.requestFocus();
+        }
+    }
+    // @Trace()
+    ngOnChanges(changes) {
+        this.column.updatePortalContent(this);
+    }
+    getRendererPortal() {
+        return this[CELL_RENDERER_PORTAL];
+    }
+    getEditorPortal() {
+        return this[CELL_EDITOR_PORTAL];
+    }
+    getRowData() {
+        return {
+            row: this.row,
+            editSession: this.editSession,
+            editRowCommand: this.editRowCommand
+        };
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "row", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", ColumnModel)
+], TableCellRendererComponent.prototype, "column", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", EditSession)
+], TableCellRendererComponent.prototype, "editSession", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TableModel)
+], TableCellRendererComponent.prototype, "tableModel", void 0);
+__decorate([
+    HostBinding('class'),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+__decorate([
+    HostBinding('class.fillCell'),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "fillCell", void 0);
+__decorate([
+    HostBinding('class.padChild'),
+    __metadata("design:type", Object)
+], TableCellRendererComponent.prototype, "padChild", void 0);
+TableCellRendererComponent = __decorate([
+    Component({
+        selector: 'aup-table-cell-renderer',
+        template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
+        styles: [""]
+    }),
+    __metadata("design:paramtypes", [])
+], TableCellRendererComponent);
+
 let TableHeaderCellRendererComponent = class TableHeaderCellRendererComponent {
     constructor() {
         this.defaultClassNames = 'aup-header-cell-renderer';
@@ -3189,7 +3200,8 @@ ComponentsModule = __decorate([
             MatCheckboxModule,
             InteractionModule,
             MatTableModule,
-            PortalModule
+            PortalModule,
+            CdkScrollableModule
         ],
         exports: [
             NumberInputComponent,
@@ -5044,9 +5056,9 @@ __decorate([
 PlaceOutletComponent = __decorate([
     Component({
         selector: 'aup-place-outlet',
-        template: "<ng-container *ngIf=\"animateModel.value\">\n  <div class=\"router-outlet-container\"\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animateModel.value\">\n  <div class=\"router-outlet-container\">\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n",
+        template: "<ng-container *ngIf=\"animateModel.value\">\n  <div class=\"router-outlet-container\" cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animateModel.value\">\n  <div class=\"router-outlet-container\" cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n",
         animations: [LEFT_RIGHT_PLACE_ANIMATION],
-        styles: [":host{display:flex;flex-direction:column;min-height:0;overflow-x:hidden}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
+        styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:scroll}router-outlet{display:none}"]
     }),
     __param(2, Optional()), __param(2, Inject(AUP_PLACE_CONFIG)),
     __param(3, SkipSelf()), __param(3, Optional()),