@coolon/angular-ui-powerups 1.13.0 → 1.13.2

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@coolon/pectin'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/cdk/overlay'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('immer'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@coolon/pectin', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', 'lodash', '@coolon/typescript-utilities', '@angular/cdk/overlay', '@typescript-plus/fast-memoize-decorator/dist/src', 'immer', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.pectin, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.___default, global.typescriptUtilities, global.ng.cdk.overlay, global.src, global.produce, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, button, checkbox, icon, table, pectin, flexLayout, dialog, router, ___default, typescriptUtilities, overlay, src, produce, progressSpinner, list, tooltip, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@angular/material/table'), require('@coolon/pectin'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('lodash'), require('@coolon/typescript-utilities'), require('@angular/cdk/overlay'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('immer'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('resize-observer-polyfill'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@angular/material/table', '@coolon/pectin', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', 'lodash', '@coolon/typescript-utilities', '@angular/cdk/overlay', '@typescript-plus/fast-memoize-decorator/dist/src', 'immer', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'resize-observer-polyfill', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.ng.material.table, global.pectin, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.___default, global.typescriptUtilities, global.ng.cdk.overlay, global.src, global.produce, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.fastMemoizeDecorator, null, global.ng.animations, global.ResizeObserver, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, portal, scrolling, button, checkbox, icon, table, pectin, flexLayout, dialog, router, ___default, typescriptUtilities, overlay, src, produce, progressSpinner, list, tooltip, fastMemoizeDecorator, reflectMetadata, animations$1, ResizeObserver, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     produce = produce && Object.prototype.hasOwnProperty.call(produce, 'default') ? produce['default'] : produce;
@@ -1446,13 +1446,14 @@
 
     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 portal.ComponentPortal(InPlaceInteractionContextComponent);
             _this.anchorX = 'start';
             _this.anchorY = 'bottom';
+            _this.scrollContainers = scrollable ? [scrollable] : [];
             return _this;
         }
         Object.defineProperty(PopupInteractionContextComponent.prototype, "active", {
@@ -1464,14 +1465,21 @@
         });
         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) {
@@ -1480,7 +1488,13 @@
                     _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();
+                    });
                 });
             });
         };
@@ -1506,7 +1520,8 @@
         };
         PopupInteractionContextComponent.ctorParameters = function () { return [
             { type: core.ElementRef },
-            { type: overlay.Overlay }
+            { type: overlay.Overlay },
+            { type: overlay.CdkScrollable, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] }
         ]; };
         __decorate([
             core.HostBinding('class.interaction-active'),
@@ -1527,7 +1542,8 @@
                 template: "<ng-content></ng-content>\n",
                 styles: [":host{display:inline}:host.interaction-active{background:rgba(0,0,0,.05)}"]
             }),
-            __metadata("design:paramtypes", [core.ElementRef, overlay.Overlay])
+            __param(2, core.Optional()), __param(2, core.SkipSelf()),
+            __metadata("design:paramtypes", [core.ElementRef, overlay.Overlay, overlay.CdkScrollable])
         ], PopupInteractionContextComponent);
         return PopupInteractionContextComponent;
     }(DisposableComponent));
@@ -1984,13 +2000,6 @@
             };
             return _this;
         }
-        Object.defineProperty(AbstractInputComponent.prototype, "inputModel", {
-            get: function () {
-                return typescriptUtilities.lang.abstractMethod(this.constructor, "inputModel");
-            },
-            enumerable: true,
-            configurable: true
-        });
         AbstractInputComponent.prototype.notifyClick = function () {
             this.safelyInvoke(this.clickCommand);
         };
@@ -2425,7 +2434,7 @@
         ScrollContainerComponent = __decorate([
             core.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", [])
@@ -2746,400 +2755,110 @@
         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 pectin.GarbageCollector();
-            this._columns = new pectin.MutableListModel();
-            this._editorSessions = new pectin.MutableListModel();
-            this._createForm = function (row) { return new pectin.Form(); };
-            this.identityOf = sourceOfTruth.identityOf;
-            var _a = pectin.Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            this._columnsById = chain(this._columns).indexBy('columnId');
-            this._rowsBeingEdited = new pectin.MutableListModel([], {
-                identifiedWith: this.identityOf
-            });
-            this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
-            this.editing = chain(this._editorSessions).count().isGreaterThan(0);
-            this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
+    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;
+        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) {
+            typescriptUtilities.assert.isTruthy(host);
+            host[HEADER_CELL_RENDERER_PORTAL] = new portal.ComponentPortal(this.componentType);
         };
-        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;
-            };
+        CellHeaderPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+            this.initialiseHeader(portalComponent, host.column);
         };
-        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));
+        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 portal.ComponentPortal(this.componentType);
         };
-        TableModel.prototype.pluckList = function (property) {
-            return this.addColumn(new ListPropertyColumnModel(property, this));
+        ComponentCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+            host[PORTAL_RENDERER_COMPONENT] = portalComponent;
+            this.updateComponent(portalComponent, host.getRowData());
         };
-        TableModel.prototype.addSelectionColumn = function (selectionModel) {
-            return this.addColumn(new SelectionColumnModel('selection', this, selectionModel));
+        ComponentCellRendererPortalRef.prototype.pushState = function (host) {
+            if (host[PORTAL_RENDERER_COMPONENT]) {
+                this.updateComponent(host[PORTAL_RENDERER_COMPONENT], host.getRowData());
+            }
         };
-        TableModel.prototype.addEditControls = function (saveCommand) {
-            this.saveCommand = saveCommand;
-            return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+        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) {
+            typescriptUtilities.assert.isTruthy(host);
+            host[CELL_EDITOR_PORTAL] = new portal.ComponentPortal(this.componentType);
         };
-        TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
-            return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+        // @Trace()
+        CellEditorPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+            host[PORTAL_EDITOR_COMPONENT] = portalComponent;
+            this.initialiseEditorSession(portalComponent, host.editSession);
         };
-        TableModel.prototype.addTemplateColumn = function (columnId) {
-            return this.addColumn(new CustomTemplateColumnModel(columnId, 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.useFormFactory = function (factory) {
-            this._createForm = factory;
-            return this;
+        TemplateCellRendererPortalRef.prototype.initialiseHost = function (host, columnModel) {
+            typescriptUtilities.assert.isTruthy(host);
         };
-        TableModel.prototype.addColumn = function (column) {
-            if (this._columnsById.get(column.columnId)) {
-                pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
-            }
-            else {
-                this._columns.push(column);
-            }
-            return column;
+        // @Trace()
+        TemplateCellRendererPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
+            //  don't care
         };
-        TableModel.prototype.columnTextProperties = function (columnTextProperties) {
-            this._columnTextPropertiesLookup = columnTextProperties;
+        TemplateCellRendererPortalRef.prototype.pushState = function (host) {
+            host[CELL_RENDERER_PORTAL] = this.createPortal(host.getRowData());
+            host.fillCell = this.fillCell;
+            host.padChild = this.padChild;
         };
-        TableModel.prototype.getColumnTextProperties = function (column) {
-            var factory = this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
-            return factory ? factory() : undefined;
+        TemplateCellRendererPortalRef.prototype.createPortal = function (data) {
+            return new portal.TemplatePortal(this.templateRef, this.viewContainer, __assign(__assign({}, (data)), { $implicit: data.row }));
         };
-        TableModel.prototype.startEditSession = function (row) {
-            var _this = this;
-            var rowId = this.identityOf(row);
-            if (this._rowsBeingEdited.query().indexOf(row) > -1) {
-                return pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
-            }
-            else {
-                var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
-                var when = pectin.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: pectin.ListModel }
-        ]; };
-        TableModel = TableModel_1 = __decorate([
-            pectin.TrackExternal.Strategy(new pectin.TrackExternal.OneTimeBinding()),
-            __metadata("design:paramtypes", [pectin.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 = pectin.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([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], TableCellRendererComponent.prototype, "row", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", ColumnModel)
-        ], TableCellRendererComponent.prototype, "column", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", EditSession)
-        ], TableCellRendererComponent.prototype, "editSession", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", TableModel)
-        ], TableCellRendererComponent.prototype, "tableModel", void 0);
-        __decorate([
-            core.HostBinding('class'),
-            __metadata("design:type", Object)
-        ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
-        __decorate([
-            core.HostBinding('class.fillCell'),
-            __metadata("design:type", Object)
-        ], TableCellRendererComponent.prototype, "fillCell", void 0);
-        __decorate([
-            core.HostBinding('class.padChild'),
-            __metadata("design:type", Object)
-        ], TableCellRendererComponent.prototype, "padChild", void 0);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object]),
-            __metadata("design:returntype", void 0)
-        ], TableCellRendererComponent.prototype, "initialiseEditor", null);
-        TableCellRendererComponent = __decorate([
-            core.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) {
-            typescriptUtilities.assert.isTruthy(host);
-            host[HEADER_CELL_RENDERER_PORTAL] = new portal.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 portal.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) {
-            typescriptUtilities.assert.isTruthy(host);
-            host[CELL_EDITOR_PORTAL] = new portal.ComponentPortal(this.componentType);
-        };
-        CellEditorPortalRef.prototype.onPortalAttached = function (host, portalComponent) {
-            host[PORTAL_EDITOR_COMPONENT] = portalComponent;
-            this.initialiseEditorSession(portalComponent, host.editSession);
-        };
-        __decorate([
-            pectin.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) {
-            typescriptUtilities.assert.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 portal.TemplatePortal(this.templateRef, this.viewContainer, __assign(__assign({}, (data)), { $implicit: data.row }));
-        };
-        __decorate([
-            pectin.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 () {
@@ -3195,6 +2914,7 @@
         ColumnModel.prototype.onRendererAttached = function (host, component) {
             this._cellRendererPortalRef.onPortalAttached(host, component);
         };
+        // @Trace()
         ColumnModel.prototype.onEditorAttached = function (host, component) {
             this._cellEditorPortalRef.onPortalAttached(host, component);
         };
@@ -3213,12 +2933,6 @@
             __metadata("design:paramtypes", []),
             __metadata("design:returntype", Object)
         ], ColumnModel.prototype, "getColumnTextProperties", null);
-        __decorate([
-            pectin.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) {
@@ -3370,6 +3084,203 @@
         return SelectionColumnModel;
     }(ColumnModel));
 
+    // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
+    // export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+    /**
+     * Example:
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     * });
+     *
+     * Editable tables
+     * @example
+     * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+     *   if (form.validate()) {
+     *     // normal form save stuff
+     *     return true; // finish editing
+     *   }
+     *   return false; // continue editiing
+     * }
+     * const colorsNames: ListModel<string> = ...;
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+     *   table.pluck("lastName").cellEditor(StringInputComponent, {
+     *     validators: [Validator.present("We need a last name")]
+     *   });
+     *   table.pluck("age").cellEditor(NumberInputComponent);
+     *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+     *     initialiseComponent(component: SelectInputComponent) {
+     *       selectInput.optionsModel = colorsNames; // <- initialise our component
+     *     }
+     *   });
+     *   table.addEditControls(saveCommand); // <- required to enable editing
+     * });
+     *
+     * Selection models
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     * });
+     *
+     * Custom cell renderers and editors
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("favoriteColor")
+     *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+     *        // configure your component with what ever you need.
+     *      });
+     *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+     *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     * });
+     *
+     * I18n
+     * @example
+     * [table.yml]
+     * table:
+     *   columns(ColumnTextProperties[]):
+     *      firstName:
+     *         headerText: "First Name"
+     *      fullName:
+     *         headerText: "Full Name"
+     *
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     *
+     *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+     * });
+     */
+    var TableModel = /** @class */ (function () {
+        function TableModel(sourceOfTruth) {
+            this.sourceOfTruth = sourceOfTruth;
+            this._garbage = new pectin.GarbageCollector();
+            this._columns = new pectin.MutableListModel();
+            this._editorSessions = new pectin.MutableListModel();
+            this._createForm = function (row) { return new pectin.Form(); };
+            this.identityOf = sourceOfTruth.identityOf;
+            var _a = pectin.Dsl.disposeWith(this._garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            this._columnsById = chain(this._columns).indexBy('columnId');
+            this._rowsBeingEdited = new pectin.MutableListModel([], {
+                identifiedWith: this.identityOf
+            });
+            this._editorSessionByRowId = chain(this._editorSessions).indexBy('rowId');
+            this.editing = chain(this._editorSessions).count().isGreaterThan(0);
+            this.dataSource = chain(this.sourceOfTruth).replaceAll(this.rowsBeingEdited);
+            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)) {
+                pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
+            }
+            else {
+                this._columns.push(column);
+            }
+            return column;
+        };
+        TableModel.prototype.columnTextProperties = function (columnTextProperties) {
+            this._columnTextPropertiesLookup = columnTextProperties;
+        };
+        TableModel.prototype.getColumnTextProperties = function (column) {
+            var factory = this._columnTextPropertiesLookup ? 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 pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
+            }
+            else {
+                var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
+                var when = pectin.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: pectin.ListModel }
+        ]; };
+        TableModel = TableModel_1 = __decorate([
+            pectin.TrackExternal.Strategy(new pectin.TrackExternal.OneTimeBinding()),
+            __metadata("design:paramtypes", [pectin.ListModel])
+        ], TableModel);
+        return TableModel;
+    }());
+
     /**
      * Create your model:
      * @example
@@ -3478,6 +3389,103 @@
         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 = pectin.Command.create(function () {
+                _this.tableModel.startEditSession(_this.row);
+            });
+            return _this;
+        }
+        TableCellRendererComponent.prototype.ngOnInit = function () {
+            var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            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([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "row", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", ColumnModel)
+        ], TableCellRendererComponent.prototype, "column", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", EditSession)
+        ], TableCellRendererComponent.prototype, "editSession", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", TableModel)
+        ], TableCellRendererComponent.prototype, "tableModel", void 0);
+        __decorate([
+            core.HostBinding('class'),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "defaultClassNames", void 0);
+        __decorate([
+            core.HostBinding('class.fillCell'),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "fillCell", void 0);
+        __decorate([
+            core.HostBinding('class.padChild'),
+            __metadata("design:type", Object)
+        ], TableCellRendererComponent.prototype, "padChild", void 0);
+        TableCellRendererComponent = __decorate([
+            core.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';
@@ -3699,7 +3707,8 @@
                     checkbox.MatCheckboxModule,
                     InteractionModule,
                     table.MatTableModule,
-                    portal.PortalModule
+                    portal.PortalModule,
+                    scrolling.CdkScrollableModule
                 ],
                 exports: [
                     NumberInputComponent,
@@ -5756,9 +5765,9 @@
         PlaceOutletComponent = __decorate([
             core.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, core.Optional()), __param(2, core.Inject(AUP_PLACE_CONFIG)),
             __param(3, core.SkipSelf()), __param(3, core.Optional()),