@coolon/angular-ui-powerups 12.0.0 → 12.0.1

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

@@ -28,8 +28,8 @@ import * as _ from 'lodash';
 import ___default from 'lodash';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import { Enum } from 'typescript-string-enums';
+import { assert as assert$1, Stringy, lang as lang$1, Mixin, Opts, Klass } from '@coolon/typescript-utilities';
 import ResizeObserver from 'resize-observer-polyfill';
-import { assert as assert$1, Stringy, Mixin, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import produce from 'immer';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import * as i1$1 from '@angular/material/dialog';
@@ -2578,6 +2578,193 @@ class SelectionColumnModel extends ColumnModel {
     }
 }
 
+/**
+ * Create your model:
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Create your table
+ * @example
+ * <aup-table [tableModel]="heroTableModel"></aup-table>
+ *
+ * Column templates
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addTemplateColumn("specialColumn");
+ * });
+ * <aup-table [tableModel]="heroTableModel">
+ *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+ *     {{hero.name}}
+ *   </div>
+ * </aup-table>
+ *
+ * Styling
+ * @example
+ *  // global settings
+ * :root {
+ *   --aup-table-column-gap: 10px; // defaults to 24px
+ *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+ *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+ * }
+ *
+ * // per table settings.
+ * aup-table {
+ *   --column-gap: 10px; // defaults to 24px
+ *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --first-column-padding-left: 18px // defaults to --column-gap
+ *   --last-column-padding-right: 18px // defaults to --column-gap
+ *
+ *   aup-table-header-cell-renderer,
+ *   aup-table-cell-renderer {
+ *     &.aup-col-my-dasherised-column-id {
+ *       // do stuff
+ *     }
+ *     &.first-visible-column {
+ *       // do stuff
+ *     }
+ *     &.last-visible-column {
+ *       // do stuff
+ *     }
+ *   }
+ * }
+ */
+class AbstractTableComponent extends ResizeAwareComponent {
+    constructor(elementRef, ngZone) {
+        super(elementRef, ngZone);
+        /**
+         * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
+         * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
+         * containment area.
+         */
+        this.enableScrolling = false;
+        // TODO: support user defined header and row heights via css vars.
+        this.headerHeight = new MutableValueModel(56);
+        this.rowHeight = new MutableValueModel(48);
+        this.baseCssClass = 'aup-table-component';
+        const { chain, when } = Dsl.disposeWith(this);
+        const actualHeaderHeight = chain(this.showHeaderModel).map(show => {
+            return show ? this.headerHeight.value : 0;
+        }, { dependsOn: this.headerHeight });
+        this.visibleRowCount = chain(this.boundsModel).map(bounds => {
+            // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.
+            const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;
+            return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
+        }, {
+            dependsOn: [actualHeaderHeight, this.rowHeight],
+            postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)
+        });
+    }
+    get hideHeader() {
+        return !this.showHeader;
+    }
+    getModel() {
+        return lang$1.abstractMethod(this.constructor);
+    }
+    ngOnInit() {
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.columns = chain(this.getModel().columns);
+        this.columnIds = chain(this.columns).pluck('columnId');
+        this.columnsById = chain(this.columns).indexBy('columnId');
+    }
+    isEditing(row) {
+        return !!this.getModel().getEditSessionFor(row);
+    }
+    registerColumnTemplate(columnId, templateRef, viewContainer, fillCell, padChild) {
+        const column = this.columnsById.get(columnId);
+        if (column instanceof CustomTemplateColumnModel) {
+            column.setTemplate(templateRef, viewContainer, fillCell, padChild);
+        }
+    }
+    notifyCellClicked(columnModel, row) {
+        this.getModel()._notifyCellClicked(columnModel, row);
+    }
+    // @Trace()
+    isFirstVisibleColumn(columnId) {
+        var _a;
+        return ((_a = this.getModel().firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+    }
+    // @Trace()
+    isLastVisibleColumn(columnId) {
+        var _a;
+        return ((_a = this.getModel().lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+    }
+    getColumnClasses(columnId) {
+        const classes = [`aup-col-${this.columnsById.get(columnId).dasherisedColumnId}`];
+        if (this.isFirstVisibleColumn(columnId)) {
+            classes.push('first-visible-column');
+        }
+        if (this.isLastVisibleColumn(columnId)) {
+            classes.push('last-visible-column');
+        }
+        return classes;
+    }
+}
+AbstractTableComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-abstract-table',
+                template: ''
+            },] }
+];
+AbstractTableComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgZone }
+];
+AbstractTableComponent.propDecorators = {
+    showHeaderModel: [{ type: Input }],
+    showHeader: [{ type: Input }],
+    enableScrolling: [{ type: Input }, { type: HostBinding, args: ['class.enable-scrolling',] }],
+    baseCssClass: [{ type: HostBinding, args: ['class',] }],
+    hideHeader: [{ type: HostBinding, args: ['class.hide-header',] }]
+};
+__decorate([
+    TrackExternal({ defaultValue: true }),
+    __metadata("design:type", ValueModel)
+], AbstractTableComponent.prototype, "showHeaderModel", void 0);
+__decorate([
+    StoreInValueModel('showHeaderModel'),
+    __metadata("design:type", Boolean)
+], AbstractTableComponent.prototype, "showHeader", void 0);
+
+class ColumnTemplateDirective {
+    constructor(host, templateRef, viewContainer) {
+        this.host = host;
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+        this.aupColumnTemplateFillCell = false;
+        this.aupColumnTemplateAutoPadChild = undefined;
+    }
+    ngOnInit() {
+        var _a;
+        assert.isTruthy(this.aupColumnTemplateColumnId);
+        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, (_a = this.aupColumnTemplateAutoPadChild) !== null && _a !== void 0 ? _a : this.aupColumnTemplateFillCell);
+    }
+}
+ColumnTemplateDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[aupColumnTemplate]'
+            },] }
+];
+ColumnTemplateDirective.ctorParameters = () => [
+    { type: AbstractTableComponent },
+    { type: TemplateRef },
+    { type: ViewContainerRef }
+];
+ColumnTemplateDirective.propDecorators = {
+    aupColumnTemplate: [{ type: Input }],
+    aupColumnTemplateColumnId: [{ type: Input }],
+    aupColumnTemplateFillCell: [{ type: Input }],
+    aupColumnTemplateAutoPadChild: [{ type: Input }]
+};
+
 // 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];
 class RowClass {
@@ -2741,220 +2928,30 @@ class AbstractTableModel extends GarbageCollector {
         return this.hasSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
     }
     hasSelectionModel() {
-        var _a;
-        return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
-    }
-    isHoverEnabled() {
-        return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
-    }
-    isCursorEnabled(column) {
-        return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
-    }
-    selectRow(row) {
-        var _a;
-        (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
-    }
-    onRowClicked(callback) {
-        return this.rowClickListeners.add(callback);
-    }
-    _notifyCellClicked(columnModel, row) {
-        if (this.isRowSelectionEnabledFor(columnModel)) {
-            this.selectRow(row);
-        }
-        this.rowClickListeners.fire(l => l(row));
-    }
-}
-TrackExternal.oneTimeBinding(AbstractTableModel);
-
-/**
- * Create your model:
- * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
- * });
- *
- * Create your table
- * @example
- * <aup-table [tableModel]="heroTableModel"></aup-table>
- *
- * Column templates
- * @example
- * this.heroTableModel = TableModel.fromList(heroList, table => {
- *   table.pluck("firstName");
- *   table.pluck("lastName");
- *   table.addTemplateColumn("specialColumn");
- * });
- * <aup-table [tableModel]="heroTableModel">
- *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
- *     {{hero.name}}
- *   </div>
- * </aup-table>
- *
- * Styling
- * @example
- *  // global settings
- * :root {
- *   --aup-table-column-gap: 10px; // defaults to 24px
- *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
- *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
- *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
- *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
- * }
- *
- * // per table settings.
- * aup-table {
- *   --column-gap: 10px; // defaults to 24px
- *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
- *   --row-selected-background-color: rebeccapurple; // defaults to transparent
- *   --first-column-padding-left: 18px // defaults to --column-gap
- *   --last-column-padding-right: 18px // defaults to --column-gap
- *
- *   aup-table-header-cell-renderer,
- *   aup-table-cell-renderer {
- *     &.aup-col-my-dasherised-column-id {
- *       // do stuff
- *     }
- *     &.first-visible-column {
- *       // do stuff
- *     }
- *     &.last-visible-column {
- *       // do stuff
- *     }
- *   }
- * }
- */
-class TableComponent extends ResizeAwareComponent {
-    constructor(elementRef, ngZone) {
-        super(elementRef, ngZone);
-        /**
-         * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
-         * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
-         * containment area.
-         */
-        this.enableScrolling = false;
-        // TODO: support user defined header and row heights via css vars.
-        this.headerHeight = new MutableValueModel(56);
-        this.rowHeight = new MutableValueModel(48);
-        const { chain, when } = Dsl.disposeWith(this);
-        const actualHeaderHeight = chain(this.showHeaderModel).map(show => {
-            return show ? this.headerHeight.value : 0;
-        }, { dependsOn: this.headerHeight });
-        this.visibleRowCount = chain(this.boundsModel).map(bounds => {
-            // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.
-            const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;
-            const rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
-            // console.log({rowCount})
-            return rowCount;
-        }, {
-            dependsOn: [actualHeaderHeight, this.rowHeight],
-            postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)
-        });
-    }
-    get hideHeader() {
-        return !this.showHeader;
-    }
-    ngOnInit() {
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.columns = chain(this.tableModel.columns);
-        this.columnIds = chain(this.columns).pluck('columnId');
-        this.columnsById = chain(this.columns).indexBy('columnId');
-    }
-    isEditing(row) {
-        return !!this.tableModel.getEditSessionFor(row);
-    }
-    registerColumnTemplate(columnId, templateRef, viewContainer, fillCell, padChild) {
-        const column = this.columnsById.get(columnId);
-        if (column instanceof CustomTemplateColumnModel) {
-            column.setTemplate(templateRef, viewContainer, fillCell, padChild);
-        }
-    }
-    notifyCellClicked(columnModel, row) {
-        this.tableModel._notifyCellClicked(columnModel, row);
-    }
-    // @Trace()
-    isFirstVisibleColumn(columnId) {
-        var _a;
-        return ((_a = this.tableModel.firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
-    }
-    // @Trace()
-    isLastVisibleColumn(columnId) {
-        var _a;
-        return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
-    }
-    getColumnClasses(columnId) {
-        const classes = [`aup-col-${this.columnsById.get(columnId).dasherisedColumnId}`];
-        if (this.isFirstVisibleColumn(columnId)) {
-            classes.push('first-visible-column');
-        }
-        if (this.isLastVisibleColumn(columnId)) {
-            classes.push('last-visible-column');
-        }
-        return classes;
+        var _a;
+        return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
     }
-}
-TableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-table',
-                template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
-                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}"]
-            },] }
-];
-TableComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone }
-];
-TableComponent.propDecorators = {
-    tableModel: [{ type: Input }],
-    showHeaderModel: [{ type: Input }],
-    showHeader: [{ type: Input }],
-    enableScrolling: [{ type: Input }, { type: HostBinding, args: ['class.enable-scrolling',] }],
-    hideHeader: [{ type: HostBinding, args: ['class.hide-header',] }]
-};
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", AbstractTableModel)
-], TableComponent.prototype, "tableModel", void 0);
-__decorate([
-    TrackExternal({ defaultValue: true }),
-    __metadata("design:type", ValueModel)
-], TableComponent.prototype, "showHeaderModel", void 0);
-__decorate([
-    StoreInValueModel('showHeaderModel'),
-    __metadata("design:type", Boolean)
-], TableComponent.prototype, "showHeader", void 0);
-
-class ColumnTemplateDirective {
-    constructor(host, templateRef, viewContainer) {
-        this.host = host;
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-        this.aupColumnTemplateFillCell = false;
-        this.aupColumnTemplateAutoPadChild = undefined;
+    isHoverEnabled() {
+        return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
     }
-    ngOnInit() {
+    isCursorEnabled(column) {
+        return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
+    }
+    selectRow(row) {
         var _a;
-        assert.isTruthy(this.aupColumnTemplateColumnId);
-        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, (_a = this.aupColumnTemplateAutoPadChild) !== null && _a !== void 0 ? _a : this.aupColumnTemplateFillCell);
+        (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
+    }
+    onRowClicked(callback) {
+        return this.rowClickListeners.add(callback);
+    }
+    _notifyCellClicked(columnModel, row) {
+        if (this.isRowSelectionEnabledFor(columnModel)) {
+            this.selectRow(row);
+        }
+        this.rowClickListeners.fire(l => l(row));
     }
 }
-ColumnTemplateDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[aupColumnTemplate]'
-            },] }
-];
-ColumnTemplateDirective.ctorParameters = () => [
-    { type: TableComponent },
-    { type: TemplateRef },
-    { type: ViewContainerRef }
-];
-ColumnTemplateDirective.propDecorators = {
-    aupColumnTemplate: [{ type: Input }],
-    aupColumnTemplateColumnId: [{ type: Input }],
-    aupColumnTemplateFillCell: [{ type: Input }],
-    aupColumnTemplateAutoPadChild: [{ type: Input }]
-};
+TrackExternal.oneTimeBinding(AbstractTableModel);
 
 class TableCellRendererComponent extends DisposableComponent {
     constructor() {
@@ -3121,6 +3118,95 @@ TableRowMenuComponent.propDecorators = {
     menu: [{ type: ViewChild, args: [MatMenuTrigger,] }]
 };
 
+/**
+ * Create your model:
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Create your table
+ * @example
+ * <aup-table [tableModel]="heroTableModel"></aup-table>
+ *
+ * Column templates
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addTemplateColumn("specialColumn");
+ * });
+ * <aup-table [tableModel]="heroTableModel">
+ *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+ *     {{hero.name}}
+ *   </div>
+ * </aup-table>
+ *
+ * Styling
+ * @example
+ *  // global settings
+ * :root {
+ *   --aup-table-column-gap: 10px; // defaults to 24px
+ *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+ *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+ * }
+ *
+ * // per table settings.
+ * aup-table {
+ *   --column-gap: 10px; // defaults to 24px
+ *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --first-column-padding-left: 18px // defaults to --column-gap
+ *   --last-column-padding-right: 18px // defaults to --column-gap
+ *
+ *   aup-table-header-cell-renderer,
+ *   aup-table-cell-renderer {
+ *     &.aup-col-my-dasherised-column-id {
+ *       // do stuff
+ *     }
+ *     &.first-visible-column {
+ *       // do stuff
+ *     }
+ *     &.last-visible-column {
+ *       // do stuff
+ *     }
+ *   }
+ * }
+ */
+class TableComponent extends AbstractTableComponent {
+    constructor(elementRef, ngZone) {
+        super(elementRef, ngZone);
+    }
+    getModel() {
+        return this.tableModel;
+    }
+}
+TableComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-table',
+                template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.trackBy]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                providers: [
+                    { provide: AbstractTableComponent, useExisting: TableComponent }
+                ],
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}"]
+            },] }
+];
+TableComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgZone }
+];
+TableComponent.propDecorators = {
+    tableModel: [{ type: Input }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", AbstractTableModel)
+], TableComponent.prototype, "tableModel", void 0);
+
 const SVG_HEIGHT = 60;
 class TreeInheritanceIconComponent {
     constructor() {
@@ -3537,7 +3623,7 @@ class TreeToListModel extends ComputedListModel {
     }
 }
 
-// import {T } from '@client/api/light-architect/model/area/area.class';
+// import { SelfAndDescendantsVisitor } from '@client/api/light-architect/model/area/visitable.class';
 // TODO:
 //    Selection Models:
 //      - as simple navigation tree
@@ -3600,23 +3686,29 @@ class TreeTableModel extends AbstractTableModel {
         return this._addSelectionColumn(selectionModel, showSelectionColumn);
     }
 }
-class FlattenStrategy extends SelfAndDescendantsVisitor {
-    constructor(collapsedIds) {
-        super();
-        this.collapsedIds = collapsedIds;
-        this._areas = [];
-        this._collapsed = new Set(collapsedIds);
-    }
-    onVisit(it) {
-        this._areas.push(it);
-    }
-    shouldVisitChildrenOf(it) {
-        return !this._collapsed.has(it);
-    }
-    get flattenedAreas() {
-        return this._areas;
-    }
-}
+// export class FlattenStrategy<T extends VisitableTree<any>> extends SelfAndDescendantsVisitor<T> {
+//
+//   private _areas: T[] = [];
+//   private _collapsed: Set<T>;
+//
+//   constructor(private collapsedIds: T[]) {
+//     super();
+//     this._collapsed = new Set<T>(collapsedIds);
+//   }
+//
+//   protected onVisit(it: T) {
+//     this._areas.push(it);
+//   }
+//
+//   protected shouldVisitChildrenOf(it: T): boolean {
+//     return !this._collapsed.has(it);
+//   }
+//
+//   get flattenedAreas(): T[] {
+//     return this._areas;
+//   }
+//
+// }
 // class DecoratorCache {
 //
 //     private map = new Map<number, T>();
@@ -3640,80 +3732,95 @@ class FlattenStrategy extends SelfAndDescendantsVisitor {
 //
 // }
 
-//
-// const template = `
-// <table-component list-model="zoneTreeController.visibleAreas"
-//                  selection-model="zoneTreeController.selectionModel"
-//                  selection-command="zoneTreeController.selectionCommand"
-//                  hover-model="zoneTreeController.decoratedHoverModel"
-//                  no-hover="zoneTreeController.noHover"
-//                  no-lines="true" no-scroll>
-//
-//     <row-attr name="parent-id" value="{{item.parent.id}}"></row-attr>
-//     <row-attr name="area-id" value="{{item.id}}"></row-attr>
-//     <row-attr name="area-name" value="{{item.name}}"></row-attr>
-//     <row-attr name="area-depth" value="{{item.depthFromZone()}}"></row-attr>
-//     <row-attr name="collapsed" value="{{zoneTreeController.isCollapsed(item)}}"></row-attr>
-//
-//     <column class="area" ng-class="{root: item.isZone(), parent: item.isGroup()}" class="allow-squish">
-//         <!--<label>Rooms in {{zoneTreeController.zoneModel.value.name}}</label>-->
-//         <label>Rooms</label>
-//         <div layout="row" layout-align="start center">
-//             <tree-icons tree-item="item"></tree-icons>
-//             <area-icon area="item"></area-icon>
-//             <span ng-if="item.isZone()">Zone ({{item.name}})</span>
-//             <span ng-if="!item.isZone()">{{item.name}}</span>
-//         </div>
-//     </column>
-//     <column class="expand-collapse" ng-class="{collapsed: zoneTreeController.isCollapsed(item)}">
-//         <md-button class="md-icon-button"
-//             ng-if="zoneTreeController.canCollapse(item)"
-//             ng-click="zoneTreeController.toggleCollapse(item)">
-//             <md-icon>keyboard_arrow_up</md-icon>
-//         </md-button>
-//     </column>
-//
-// </table-component>
-// `;
-class TreeTableComponent extends DisposableComponent {
-    constructor() {
-        super();
-        /**
-         * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
-         * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
-         * containment area.
-         */
-        this.enableScrolling = false;
+/**
+ * Create your model:
+ * @example
+ * this.heroTableModel = TableTreeModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ *   table.addTemplateColumn("specialColumn");
+ * });
+ *
+ * Create your table
+ * @example
+ * <aup-tree-table [treeTableModel]="heroTableModel"></aup-table>
+ *
+ * Column templates
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addTemplateColumn("specialColumn");
+ * });
+ * <aup-table [tableModel]="heroTableModel">
+ *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+ *     {{hero.name}}
+ *   </div>
+ * </aup-table>
+ *
+ * Styling
+ * @example
+ *  // global settings
+ * :root {
+ *   --aup-table-column-gap: 10px; // defaults to 24px
+ *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+ *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+ * }
+ *
+ * // per table settings.
+ * aup-table {
+ *   --column-gap: 10px; // defaults to 24px
+ *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
+ *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+ *   --first-column-padding-left: 18px // defaults to --column-gap
+ *   --last-column-padding-right: 18px // defaults to --column-gap
+ *
+ *   aup-table-header-cell-renderer,
+ *   aup-table-cell-renderer {
+ *     &.aup-col-my-dasherised-column-id {
+ *       // do stuff
+ *     }
+ *     &.first-visible-column {
+ *       // do stuff
+ *     }
+ *     &.last-visible-column {
+ *       // do stuff
+ *     }
+ *   }
+ * }
+ */
+class TreeTableComponent extends AbstractTableComponent {
+    constructor(elementRef, ngZone) {
+        super(elementRef, ngZone);
+    }
+    getModel() {
+        return this.treeTableModel;
     }
 }
 TreeTableComponent.decorators = [
     { type: Component, args: [{
-                selector: "aup-tree-table",
-                template: "<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n",
-                encapsulation: ViewEncapsulation.None // allow us to target nested table styles
-                ,
-                styles: ["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
+                selector: 'aup-tree-table',
+                template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.trackBy]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                providers: [
+                    { provide: AbstractTableComponent, useExisting: TreeTableComponent }
+                ],
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
             },] }
 ];
-TreeTableComponent.ctorParameters = () => [];
+TreeTableComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgZone }
+];
 TreeTableComponent.propDecorators = {
-    treeTableModel: [{ type: Input }],
-    showHeaderModel: [{ type: Input }],
-    showHeader: [{ type: Input }],
-    enableScrolling: [{ type: Input }, { type: HostBinding, args: ['class.enable-scrolling',] }]
+    treeTableModel: [{ type: Input }]
 };
 __decorate([
     TrackExternal(),
     __metadata("design:type", TreeTableModel)
 ], TreeTableComponent.prototype, "treeTableModel", void 0);
-__decorate([
-    TrackExternal({ defaultValue: true }),
-    __metadata("design:type", ValueModel)
-], TreeTableComponent.prototype, "showHeaderModel", void 0);
-__decorate([
-    StoreInValueModel('showHeaderModel'),
-    __metadata("design:type", Boolean)
-], TreeTableComponent.prototype, "showHeader", void 0);
 
 class VerticalFocusContainerComponent extends FocusContainerComponent {
     constructor(focusManager) {
@@ -3867,6 +3974,7 @@ ComponentsModule.decorators = [
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
+                    AbstractTableComponent
                 ],
                 imports: [
                     CommonModule,
@@ -8275,5 +8383,5 @@ VisibilityService.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenStrategy, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, TreeToListModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, TreeToListModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map