@coolon/angular-ui-powerups 1.13.1 → 1.13.2

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

@@ -1,6 +1,6 @@
 import { __extends, __decorate, __metadata, __param, __awaiter, __generator, __assign, __spread } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, HostBinding, Component, 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';
@@ -1271,13 +1272,14 @@ var AddItemInteractionContextComponent = /** @class */ (function (_super) {
 
 var PopupInteractionContextComponent = /** @class */ (function (_super) {
     __extends(PopupInteractionContextComponent, _super);
-    function PopupInteractionContextComponent(_element, _overlay) {
+    function PopupInteractionContextComponent(_element, _overlay, scrollable) {
         var _this = _super.call(this) || this;
         _this._element = _element;
         _this._overlay = _overlay;
         _this.outputPortal = new ComponentPortal(InPlaceInteractionContextComponent);
         _this.anchorX = 'start';
         _this.anchorY = 'bottom';
+        _this.scrollContainers = scrollable ? [scrollable] : [];
         return _this;
     }
     Object.defineProperty(PopupInteractionContextComponent.prototype, "active", {
@@ -1289,14 +1291,21 @@ var PopupInteractionContextComponent = /** @class */ (function (_super) {
     });
     PopupInteractionContextComponent.prototype.startActivity = function (activityType, data) {
         var _this = this;
+        // console.log({ element: this._element });
+        var self = this;
         var 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.
         });
+        var subs = this.scrollContainers.map(function (sc) { return sc.elementScrolled().subscribe(function () {
+            overlayRef.updatePosition();
+        }); });
         var componentRef = overlayRef.attach(this.outputPortal);
         this.interactionContext = componentRef.instance;
         return new Promise(function (resolve, reject) {
@@ -1305,7 +1314,13 @@ var PopupInteractionContextComponent = /** @class */ (function (_super) {
                 _this.interactionContext.startActivity(activityType, data)
                     .then(resolve)
                     .catch(reject)
-                    .finally(function () { return overlayRef.dispose(); });
+                    .finally(function () {
+                    subs.forEach(function (s) { return s.unsubscribe(); });
+                    overlayRef.dispose();
+                });
+                setTimeout(function () {
+                    overlayRef.updatePosition();
+                });
             });
         });
     };
@@ -1331,7 +1346,8 @@ var PopupInteractionContextComponent = /** @class */ (function (_super) {
     };
     PopupInteractionContextComponent.ctorParameters = function () { return [
         { type: ElementRef },
-        { type: Overlay }
+        { type: Overlay },
+        { type: CdkScrollable, decorators: [{ type: Optional }, { type: SkipSelf }] }
     ]; };
     __decorate([
         HostBinding('class.interaction-active'),
@@ -1352,7 +1368,8 @@ var PopupInteractionContextComponent = /** @class */ (function (_super) {
             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);
     return PopupInteractionContextComponent;
 }(DisposableComponent));
@@ -2243,7 +2260,7 @@ var ScrollContainerComponent = /** @class */ (function () {
     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", [])
@@ -2564,400 +2581,110 @@ var SelectHeaderCellRendererComponent = /** @class */ (function (_super) {
     return SelectHeaderCellRendererComponent;
 }(DisposableComponent));
 
-// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
-// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
-/**
- * Example:
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Editable tables
- * @example
- * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
- *   if (form.validate()) {
- *     // normal form save stuff
- *     return true; // finish editing
- *   }
- *   return false; // continue editiing
- * }
- * const colorsNames: ListModel<string> = ...;
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
- *   table.pluck("lastName").cellEditor(StringInputComponent, {
- *     validators: [Validator.present("We need a last name")]
- *   });
- *   table.pluck("age").cellEditor(NumberInputComponent);
- *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
- *     initialiseComponent(component: SelectInputComponent) {
- *       selectInput.optionsModel = colorsNames; // <- initialise our component
- *     }
- *   });
- *   table.addEditControls(saveCommand); // <- required to enable editing
- * });
- *
- * Selection models
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- * });
- *
- * Custom cell renderers and editors
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("favoriteColor")
- *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
- *        // configure your component with what ever you need.
- *      });
- *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
- *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * I18n
- * @example
- * [table.yml]
- * table:
- *   columns(ColumnTextProperties[]):
- *      firstName:
- *         headerText: "First Name"
- *      fullName:
- *         headerText: "Full Name"
- *
- * const model = TableModel.fromList(heroList, table => {
- *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- *
- *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
- * });
- */
-var TableModel = /** @class */ (function () {
-    function TableModel(sourceOfTruth) {
-        this.sourceOfTruth = sourceOfTruth;
-        this._garbage = new GarbageCollector();
-        this._columns = new MutableListModel();
-        this._editorSessions = new MutableListModel();
-        this._createForm = function (row) { return new Form(); };
-        this.identityOf = sourceOfTruth.identityOf;
-        var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-        this._columnsById = chain(this._columns).indexBy('columnId');
-        this._rowsBeingEdited = new MutableListModel([], {
-            identifiedWith: this.identityOf
-        });
-        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
-        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
-        this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
+var HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
+var CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
+var CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
+var PORTAL_RENDERER_COMPONENT = Symbol('aup-cell-renderer-portal-component');
+var PORTAL_EDITOR_COMPONENT = Symbol('aup-cell-editor-portal-component');
+var noop = function () {
+};
+var ɵ0 = noop;
+var CellPortalRef = /** @class */ (function () {
+    function CellPortalRef() {
     }
-    TableModel_1 = TableModel;
-    TableModel.fromList = function (sourceOfTruth, builder) {
-        var model = new TableModel_1(sourceOfTruth);
-        builder(model);
-        return model;
-    };
-    Object.defineProperty(TableModel.prototype, "rowsBeingEdited", {
-        get: function () {
-            return this._rowsBeingEdited.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    TableModel.prototype.getTrackByFunction = function () {
-        var _this = this;
-        return function (index, item) {
-            return _this.identityOf ? _this.identityOf(item) : index;
-        };
+    return CellPortalRef;
+}());
+var CellHeaderPortalRef = /** @class */ (function (_super) {
+    __extends(CellHeaderPortalRef, _super);
+    function CellHeaderPortalRef(componentType, initialiseHeader) {
+        var _this = _super.call(this) || this;
+        _this.componentType = componentType;
+        _this.initialiseHeader = initialiseHeader;
+        return _this;
+    }
+    CellHeaderPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        assert$1.isTruthy(host);
+        host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     };
-    Object.defineProperty(TableModel.prototype, "columns", {
-        get: function () {
-            return this._columns.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    TableModel.prototype.pluck = function (property) {
-        return this.addColumn(new PropertyColumnModel(property, this));
+    CellHeaderPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        this.initialiseHeader(portalComponent, host.column);
     };
-    TableModel.prototype.pluckList = function (property) {
-        return this.addColumn(new ListPropertyColumnModel(property, this));
+    return CellHeaderPortalRef;
+}(CellPortalRef));
+var CellRendererPortalRef = /** @class */ (function (_super) {
+    __extends(CellRendererPortalRef, _super);
+    function CellRendererPortalRef() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CellRendererPortalRef;
+}(CellPortalRef));
+var ComponentCellRendererPortalRef = /** @class */ (function (_super) {
+    __extends(ComponentCellRendererPortalRef, _super);
+    function ComponentCellRendererPortalRef(componentType, updateComponent) {
+        var _this = _super.call(this) || this;
+        _this.componentType = componentType;
+        _this.updateComponent = updateComponent;
+        return _this;
+    }
+    ComponentCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
     };
-    TableModel.prototype.addSelectionColumn = function (selectionModel) {
-        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
+    ComponentCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        host[PORTAL_RENDERER_COMPONENT] = portalComponent;
+        this.updateComponent(portalComponent, host.getRowData());
     };
-    TableModel.prototype.addEditControls = function (saveCommand) {
-        this.saveCommand = saveCommand;
-        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+    ComponentCellRendererPortalRef.prototype.pushState = function (host) {
+        if (host[PORTAL_RENDERER_COMPONENT]) {
+            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+        }
     };
-    TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
-        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+    return ComponentCellRendererPortalRef;
+}(CellRendererPortalRef));
+var CellEditorPortalRef = /** @class */ (function (_super) {
+    __extends(CellEditorPortalRef, _super);
+    function CellEditorPortalRef(componentType, initialiseEditorSession) {
+        var _this = _super.call(this) || this;
+        _this.componentType = componentType;
+        _this.initialiseEditorSession = initialiseEditorSession;
+        return _this;
+    }
+    CellEditorPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        assert$1.isTruthy(host);
+        host[CELL_EDITOR_PORTAL] = new ComponentPortal(this.componentType);
     };
-    TableModel.prototype.addTemplateColumn = function (columnId) {
-        return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+    // @Trace()
+    CellEditorPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        host[PORTAL_EDITOR_COMPONENT] = portalComponent;
+        this.initialiseEditorSession(portalComponent, host.editSession);
     };
-    TableModel.prototype.useFormFactory = function (factory) {
-        this._createForm = factory;
-        return this;
+    return CellEditorPortalRef;
+}(CellPortalRef));
+var TemplateCellRendererPortalRef = /** @class */ (function (_super) {
+    __extends(TemplateCellRendererPortalRef, _super);
+    function TemplateCellRendererPortalRef() {
+        return _super.call(this) || this;
+    }
+    TemplateCellRendererPortalRef.prototype.registerPortal = function (templateRef, viewContainer, fillCell, padChild) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.fillCell = fillCell;
+        this.padChild = padChild;
     };
-    TableModel.prototype.addColumn = function (column) {
-        if (this._columnsById.get(column.columnId)) {
-            lang.illegalState("Column with id=" + column.columnId + " already exists");
-        }
-        else {
-            this._columns.push(column);
-        }
-        return column;
+    TemplateCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
+        assert$1.isTruthy(host);
     };
-    TableModel.prototype.columnTextProperties = function (columnTextProperties) {
-        this._columnTextPropertiesLookup = columnTextProperties;
+    // @Trace()
+    TemplateCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+        //  don't care
     };
-    TableModel.prototype.getColumnTextProperties = function (column) {
-        var factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-        return factory ? factory() : undefined;
+    TemplateCellRendererPortalRef.prototype.pushState = function (host) {
+        host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
+        host.fillCell = this.fillCell;
+        host.padChild = this.padChild;
     };
-    TableModel.prototype.startEditSession = function (row) {
-        var _this = this;
-        var rowId = this.identityOf(row);
-        if (this._rowsBeingEdited.query().indexOf(row) > -1) {
-            return lang.illegalState("Row with id=" + rowId + " already being edited");
-        }
-        else {
-            var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
-            var when = Dsl.disposeWith(editSession_1).when;
-            when.valueOf(editSession_1.liveRowValue).changes(function (editedValue) {
-                _this._rowsBeingEdited.replaceOrPush(editedValue);
-            }, { initialValue: 'triggerChangeUnlessNil' });
-            this._editorSessions.push(editSession_1);
-            editSession_1.onDispose(function () {
-                _this._rowsBeingEdited.remove(editSession_1.liveRowValue.value);
-                _this._editorSessions.remove(editSession_1);
-            });
-            return editSession_1;
-        }
+    TemplateCellRendererPortalRef.prototype.createPortal = function (data) {
+        return new TemplatePortal(this.templateRef, this.viewContainer, __assign(__assign({}, (data)), { $implicit: data.row }));
     };
-    TableModel.prototype.getEditSessionFor = function (row) {
-        return this._editorSessionByRowId.get(this.identityOf(row));
-    };
-    TableModel.prototype.cancelAllEditorSessions = function () {
-        var _this = this;
-        this._editorSessions.runInTransaction(function (draft) {
-            _this._rowsBeingEdited.runInTransaction(function () {
-                draft.value.forEach(function (session) { return session.dispose(); });
-            });
-        });
-    };
-    var TableModel_1;
-    TableModel.ctorParameters = function () { return [
-        { type: ListModel }
-    ]; };
-    TableModel = TableModel_1 = __decorate([
-        TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
-        __metadata("design:paramtypes", [ListModel])
-    ], TableModel);
-    return TableModel;
-}());
-
-var TableCellRendererComponent = /** @class */ (function () {
-    function TableCellRendererComponent() {
-        var _this = this;
-        this.defaultClassNames = 'aup-cell-renderer';
-        this.fillCell = false;
-        this.padChild = false;
-        this.editRowCommand = Command.create(function () {
-            _this.tableModel.startEditSession(_this.row);
-        });
-    }
-    TableCellRendererComponent.prototype.ngOnInit = function () {
-        this.column.attachCell(this);
-    };
-    TableCellRendererComponent.prototype.hasActiveEditor = function () {
-        return !!this.editSession && !!this.column.hasEditorPortal();
-    };
-    TableCellRendererComponent.prototype.initialiseRenderer = function (instance) {
-        this.column.onRendererAttached(this, instance);
-    };
-    TableCellRendererComponent.prototype.initialiseEditor = function (instance) {
-        this.column.onEditorAttached(this, instance);
-    };
-    // @Trace()
-    TableCellRendererComponent.prototype.ngOnChanges = function (changes) {
-        this.column.updatePortalContent(this);
-    };
-    TableCellRendererComponent.prototype.getRendererPortal = function () {
-        return this[CELL_RENDERER_PORTAL];
-    };
-    TableCellRendererComponent.prototype.getEditorPortal = function () {
-        return this[CELL_EDITOR_PORTAL];
-    };
-    TableCellRendererComponent.prototype.getRowData = function () {
-        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);
-    return TableCellRendererComponent;
-}());
-
-var HEADER_CELL_RENDERER_PORTAL = Symbol('aup-cell-header-renderer-component-ref');
-var CELL_RENDERER_PORTAL = Symbol('aup-cell-renderer-component-ref');
-var CELL_EDITOR_PORTAL = Symbol('aup-cell-editor-component-ref');
-var PORTAL_RENDERER_COMPONENT = Symbol('aup-cell-renderer-portal-component');
-var PORTAL_EDITOR_COMPONENT = Symbol('aup-cell-editor-portal-component');
-var noop = function () {
-};
-var ɵ0 = noop;
-var CellPortalRef = /** @class */ (function () {
-    function CellPortalRef() {
-    }
-    return CellPortalRef;
-}());
-var CellHeaderPortalRef = /** @class */ (function (_super) {
-    __extends(CellHeaderPortalRef, _super);
-    function CellHeaderPortalRef(componentType, initialiseHeader) {
-        var _this = _super.call(this) || this;
-        _this.componentType = componentType;
-        _this.initialiseHeader = initialiseHeader;
-        return _this;
-    }
-    CellHeaderPortalRef.prototype.initialiseHost = function (host, columnModel) {
-        assert$1.isTruthy(host);
-        host[HEADER_CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
-    };
-    CellHeaderPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
-        this.initialiseHeader(portalComponent, host.column);
-    };
-    return CellHeaderPortalRef;
-}(CellPortalRef));
-var CellRendererPortalRef = /** @class */ (function (_super) {
-    __extends(CellRendererPortalRef, _super);
-    function CellRendererPortalRef() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return CellRendererPortalRef;
-}(CellPortalRef));
-var ComponentCellRendererPortalRef = /** @class */ (function (_super) {
-    __extends(ComponentCellRendererPortalRef, _super);
-    function ComponentCellRendererPortalRef(componentType, updateComponent) {
-        var _this = _super.call(this) || this;
-        _this.componentType = componentType;
-        _this.updateComponent = updateComponent;
-        return _this;
-    }
-    ComponentCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
-        host[CELL_RENDERER_PORTAL] = new ComponentPortal(this.componentType);
-    };
-    ComponentCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
-        host[PORTAL_RENDERER_COMPONENT] = portalComponent;
-        this.updateComponent(portalComponent, host.getRowData());
-    };
-    ComponentCellRendererPortalRef.prototype.pushState = function (host) {
-        if (host[PORTAL_RENDERER_COMPONENT]) {
-            this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
-        }
-    };
-    return ComponentCellRendererPortalRef;
-}(CellRendererPortalRef));
-var CellEditorPortalRef = /** @class */ (function (_super) {
-    __extends(CellEditorPortalRef, _super);
-    function CellEditorPortalRef(componentType, initialiseEditorSession) {
-        var _this = _super.call(this) || this;
-        _this.componentType = componentType;
-        _this.initialiseEditorSession = initialiseEditorSession;
-        return _this;
-    }
-    CellEditorPortalRef.prototype.initialiseHost = function (host, columnModel) {
-        assert$1.isTruthy(host);
-        host[CELL_EDITOR_PORTAL] = new ComponentPortal(this.componentType);
-    };
-    CellEditorPortalRef.prototype.onPortalAttached = function (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);
-    return CellEditorPortalRef;
-}(CellPortalRef));
-var TemplateCellRendererPortalRef = /** @class */ (function (_super) {
-    __extends(TemplateCellRendererPortalRef, _super);
-    function TemplateCellRendererPortalRef() {
-        return _super.call(this) || this;
-    }
-    TemplateCellRendererPortalRef.prototype.registerPortal = function (templateRef, viewContainer, fillCell, padChild) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.fillCell = fillCell;
-        this.padChild = padChild;
-    };
-    TemplateCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
-        assert$1.isTruthy(host);
-    };
-    TemplateCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
-        //  don't care
-    };
-    TemplateCellRendererPortalRef.prototype.pushState = function (host) {
-        host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
-        host.fillCell = this.fillCell;
-        host.padChild = this.padChild;
-    };
-    TemplateCellRendererPortalRef.prototype.createPortal = function (data) {
-        return new TemplatePortal(this.templateRef, this.viewContainer, __assign(__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);
     return TemplateCellRendererPortalRef;
 }(CellRendererPortalRef));
 var ColumnModel = /** @class */ (function () {
@@ -3013,6 +2740,7 @@ var ColumnModel = /** @class */ (function () {
     ColumnModel.prototype.onRendererAttached = function (host, component) {
         this._cellRendererPortalRef.onPortalAttached(host, component);
     };
+    // @Trace()
     ColumnModel.prototype.onEditorAttached = function (host, component) {
         this._cellEditorPortalRef.onPortalAttached(host, component);
     };
@@ -3031,12 +2759,6 @@ var ColumnModel = /** @class */ (function () {
         __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);
     return ColumnModel;
 }());
 var PropertyColumnModel = /** @class */ (function (_super) {
@@ -3188,6 +2910,203 @@ var SelectionColumnModel = /** @class */ (function (_super) {
     return SelectionColumnModel;
 }(ColumnModel));
 
+// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
+// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+/**
+ * Example:
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Editable tables
+ * @example
+ * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+ *   if (form.validate()) {
+ *     // normal form save stuff
+ *     return true; // finish editing
+ *   }
+ *   return false; // continue editiing
+ * }
+ * const colorsNames: ListModel<string> = ...;
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.pluck("lastName").cellEditor(StringInputComponent, {
+ *     validators: [Validator.present("We need a last name")]
+ *   });
+ *   table.pluck("age").cellEditor(NumberInputComponent);
+ *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+ *     initialiseComponent(component: SelectInputComponent) {
+ *       selectInput.optionsModel = colorsNames; // <- initialise our component
+ *     }
+ *   });
+ *   table.addEditControls(saveCommand); // <- required to enable editing
+ * });
+ *
+ * Selection models
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ * });
+ *
+ * Custom cell renderers and editors
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor")
+ *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+ *        // configure your component with what ever you need.
+ *      });
+ *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+ *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * I18n
+ * @example
+ * [table.yml]
+ * table:
+ *   columns(ColumnTextProperties[]):
+ *      firstName:
+ *         headerText: "First Name"
+ *      fullName:
+ *         headerText: "Full Name"
+ *
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ *
+ *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+ * });
+ */
+var TableModel = /** @class */ (function () {
+    function TableModel(sourceOfTruth) {
+        this.sourceOfTruth = sourceOfTruth;
+        this._garbage = new GarbageCollector();
+        this._columns = new MutableListModel();
+        this._editorSessions = new MutableListModel();
+        this._createForm = function (row) { return new Form(); };
+        this.identityOf = sourceOfTruth.identityOf;
+        var _a = Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        this._columnsById = chain(this._columns).indexBy('columnId');
+        this._rowsBeingEdited = new MutableListModel([], {
+            identifiedWith: this.identityOf
+        });
+        this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
+        this.editing = chain(this._editorSessions).count().isGreaterThan(0);
+        this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
+        this.firstEditableColumn = chain(this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
+    }
+    TableModel_1 = TableModel;
+    TableModel.fromList = function (sourceOfTruth, builder) {
+        var model = new TableModel_1(sourceOfTruth);
+        builder(model);
+        return model;
+    };
+    Object.defineProperty(TableModel.prototype, "rowsBeingEdited", {
+        get: function () {
+            return this._rowsBeingEdited.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TableModel.prototype.getTrackByFunction = function () {
+        var _this = this;
+        return function (index, item) {
+            return _this.identityOf ? _this.identityOf(item) : index;
+        };
+    };
+    Object.defineProperty(TableModel.prototype, "columns", {
+        get: function () {
+            return this._columns.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TableModel.prototype.pluck = function (property) {
+        return this.addColumn(new PropertyColumnModel(property, this));
+    };
+    TableModel.prototype.pluckList = function (property) {
+        return this.addColumn(new ListPropertyColumnModel(property, this));
+    };
+    TableModel.prototype.addSelectionColumn = function (selectionModel) {
+        return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
+    };
+    TableModel.prototype.addEditControls = function (saveCommand) {
+        this.saveCommand = saveCommand;
+        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+    };
+    TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
+        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+    };
+    TableModel.prototype.addTemplateColumn = function (columnId) {
+        return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+    };
+    TableModel.prototype.useFormFactory = function (factory) {
+        this._createForm = factory;
+        return this;
+    };
+    TableModel.prototype.addColumn = function (column) {
+        if (this._columnsById.get(column.columnId)) {
+            lang.illegalState("Column with id=" + column.columnId + " already exists");
+        }
+        else {
+            this._columns.push(column);
+        }
+        return column;
+    };
+    TableModel.prototype.columnTextProperties = function (columnTextProperties) {
+        this._columnTextPropertiesLookup = columnTextProperties;
+    };
+    TableModel.prototype.getColumnTextProperties = function (column) {
+        var factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+        return factory ? factory() : undefined;
+    };
+    TableModel.prototype.startEditSession = function (row) {
+        var _this = this;
+        var rowId = this.identityOf(row);
+        if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+            return lang.illegalState("Row with id=" + rowId + " already being edited");
+        }
+        else {
+            var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
+            var when = Dsl.disposeWith(editSession_1).when;
+            when.valueOf(editSession_1.liveRowValue).changes(function (editedValue) {
+                _this._rowsBeingEdited.replaceOrPush(editedValue);
+            }, { initialValue: 'triggerChangeUnlessNil' });
+            this._editorSessions.push(editSession_1);
+            editSession_1.onDispose(function () {
+                _this._rowsBeingEdited.remove(editSession_1.liveRowValue.value);
+                _this._editorSessions.remove(editSession_1);
+            });
+            return editSession_1;
+        }
+    };
+    TableModel.prototype.getEditSessionFor = function (row) {
+        return this._editorSessionByRowId.get(this.identityOf(row));
+    };
+    TableModel.prototype.cancelAllEditorSessions = function () {
+        var _this = this;
+        this._editorSessions.runInTransaction(function (draft) {
+            _this._rowsBeingEdited.runInTransaction(function () {
+                draft.value.forEach(function (session) { return session.dispose(); });
+            });
+        });
+    };
+    var TableModel_1;
+    TableModel.ctorParameters = function () { return [
+        { type: ListModel }
+    ]; };
+    TableModel = TableModel_1 = __decorate([
+        TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
+        __metadata("design:paramtypes", [ListModel])
+    ], TableModel);
+    return TableModel;
+}());
+
 /**
  * Create your model:
  * @example
@@ -3296,6 +3215,103 @@ var ColumnTemplateDirective = /** @class */ (function () {
     return ColumnTemplateDirective;
 }());
 
+var TableCellRendererComponent = /** @class */ (function (_super) {
+    __extends(TableCellRendererComponent, _super);
+    function TableCellRendererComponent() {
+        var _this = _super.call(this) || this;
+        _this.defaultClassNames = 'aup-cell-renderer';
+        _this.fillCell = false;
+        _this.padChild = false;
+        _this.editRowCommand = Command.create(function () {
+            _this.tableModel.startEditSession(_this.row);
+        });
+        return _this;
+    }
+    TableCellRendererComponent.prototype.ngOnInit = function () {
+        var _a = Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        this.firstEditableColumn = chain(this.tableModel.firstEditableColumn).equals(this.column); // this would break if the column changed.
+        this.column.attachCell(this);
+    };
+    TableCellRendererComponent.prototype.hasActiveEditor = function () {
+        return !!this.editSession && !!this.column.hasEditorPortal();
+    };
+    TableCellRendererComponent.prototype.initialiseRenderer = function (instance) {
+        this.column.onRendererAttached(this, instance);
+    };
+    TableCellRendererComponent.prototype.initialiseEditor = function (instance) {
+        var _this = this;
+        this.column.onEditorAttached(this, instance);
+        if (this.firstEditableColumn.value) {
+            // @see https://github.com/angular/components/issues/12070
+            setTimeout(function () { return _this.tryAndFocusEditor(instance); });
+        }
+    };
+    TableCellRendererComponent.prototype.tryAndFocusEditor = function (editor) {
+        var _a;
+        if (editor.requestFocus) {
+            editor.requestFocus();
+        }
+        else {
+            var model = (editor['valueModel'] || editor['listModel']);
+            (_a = model === null || model === void 0 ? void 0 : model.focusContext) === null || _a === void 0 ? void 0 : _a.requestFocus();
+        }
+    };
+    // @Trace()
+    TableCellRendererComponent.prototype.ngOnChanges = function (changes) {
+        this.column.updatePortalContent(this);
+    };
+    TableCellRendererComponent.prototype.getRendererPortal = function () {
+        return this[CELL_RENDERER_PORTAL];
+    };
+    TableCellRendererComponent.prototype.getEditorPortal = function () {
+        return this[CELL_EDITOR_PORTAL];
+    };
+    TableCellRendererComponent.prototype.getRowData = function () {
+        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);
+    return TableCellRendererComponent;
+}(DisposableComponent));
+
 var TableHeaderCellRendererComponent = /** @class */ (function () {
     function TableHeaderCellRendererComponent() {
         this.defaultClassNames = 'aup-header-cell-renderer';
@@ -3517,7 +3533,8 @@ var ComponentsModule = /** @class */ (function () {
                 MatCheckboxModule,
                 InteractionModule,
                 MatTableModule,
-                PortalModule
+                PortalModule,
+                CdkScrollableModule
             ],
             exports: [
                 NumberInputComponent,
@@ -5574,9 +5591,9 @@ var PlaceOutletComponent = /** @class */ (function (_super) {
     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()),