@coolon/angular-ui-powerups 12.0.0-alpha.3 → 12.0.1

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/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
-    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/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', 'resize-observer-polyfill', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : 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.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.src, global.typescriptStringEnums, global.ResizeObserver, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
-}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, src, typescriptStringEnums, ResizeObserver, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { '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/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('resize-observer-polyfill'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
+    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/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', '@coolon/typescript-utilities', 'resize-observer-polyfill', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : 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.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.src, global.typescriptStringEnums, global.typescriptUtilities, global.ResizeObserver, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
+}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, src, typescriptStringEnums, typescriptUtilities, ResizeObserver, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1047,7 +1047,7 @@
                     selector: 'aup-command-face',
                     template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}"]
+                    styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}"]
                 },] }
     ];
     CommandFaceComponent.ctorParameters = function () { return []; };
@@ -1064,6 +1064,12 @@
         __metadata("design:type", Array)
     ], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
+    var HorizontalAlignment = typescriptStringEnums.Enum({
+        START: 'start',
+        CENTER: 'center',
+        END: 'end'
+    });
+
     var PopupAwareComponent = /** @class */ (function (_super) {
         __extends(PopupAwareComponent, _super);
         function PopupAwareComponent(element, parent) {
@@ -1106,6 +1112,7 @@
         function CommandComponent(element, parent) {
             var _this = _super.call(this, element, parent) || this;
             _this.CommandFace = exports.CommandFace;
+            _this.alignFace = HorizontalAlignment.CENTER;
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
             _this.faces = chain(_this.command.busy).mapToList(function (busy) {
                 return busy ?
@@ -1138,8 +1145,8 @@
     CommandComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-command',
-                    template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\" [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
-                    styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
+                    template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
+                    styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}"]
                 },] }
     ];
     CommandComponent.ctorParameters = function () { return [
@@ -1151,7 +1158,8 @@
         faceModel: [{ type: i0.Input }],
         face: [{ type: i0.Input }],
         busyFaceModel: [{ type: i0.Input }],
-        busyFace: [{ type: i0.Input }]
+        busyFace: [{ type: i0.Input }],
+        alignFace: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class",] }]
     };
     __decorate([
         pectin.TrackExternal(),
@@ -1306,7 +1314,7 @@
     MoreMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-more-menu',
-                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                     providers: [
                         { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
                     ]
@@ -1545,7 +1553,7 @@
     PopupMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-popup-menu',
-                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                     providers: [
                         { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
                     ]
@@ -2832,9 +2840,10 @@
         function ColumnModel(columnId, textPropertiesProvider) {
             this.columnId = columnId;
             this.textPropertiesProvider = textPropertiesProvider;
-            this._selectRowOnClick = undefined;
+            this._enableRowSelection = true;
             this._flex = false;
-            this._visibleModel = new pectin.DelegatingValueModel().withDefault(true);
+            this._defaultVisibility = new pectin.DelegatingValueModel().withDefault(true);
+            this._visible = new pectin.DelegatingValueModel().withDefault(this._defaultVisibility);
             this.installHeaderRenderer();
             this.dasherisedColumnId = typescriptUtilities.Stringy.from(columnId).dasherize().toString();
         }
@@ -2852,15 +2861,18 @@
         };
         Object.defineProperty(ColumnModel.prototype, "visible", {
             get: function () {
-                return this._visibleModel.readonly;
+                return this._visible.readonly;
             },
             enumerable: false,
             configurable: true
         });
         ColumnModel.prototype.visibleWhile = function (visible) {
-            this._visibleModel.setDelegate(visible);
+            this._visible.setDelegate(visible);
             return this;
         };
+        ColumnModel.prototype.setDefaultVisibility = function (visible) {
+            this._defaultVisibility.setDelegate(visible);
+        };
         ColumnModel.prototype.getDefaultHeaderText = function () {
             return this.columnId;
         };
@@ -2923,18 +2935,12 @@
         ColumnModel.prototype.updatePortalContent = function (host) {
             this._cellRendererPortalRef.pushState(host);
         };
-        ColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            this._selectRowOnClick = selectOnRowClick;
+        ColumnModel.prototype._selectRowOnClick = function (selectRowOnClick) {
+            this._enableRowSelection = selectRowOnClick;
             return this;
         };
         ColumnModel.prototype.isRowSelectionEnabled = function () {
-            return this._selectRowOnClick;
-        };
-        ColumnModel.prototype.isRowSelectionExplicitlyEnabled = function () {
-            return this._selectRowOnClick === true;
-        };
-        ColumnModel.prototype.isRowSelectionExplicitlyDisabled = function () {
-            return this._selectRowOnClick === false;
+            return this._enableRowSelection;
         };
         return ColumnModel;
     }());
@@ -3038,7 +3044,7 @@
             return this;
         };
         PropertyColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+            return this._selectRowOnClick(selectOnRowClick);
         };
         return PropertyColumnModel;
     }(ColumnModel));
@@ -3079,8 +3085,8 @@
             this._format = formatter;
             return this;
         };
-        ListPropertyColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        ListPropertyColumnModel.prototype.selectRowOnClick = function (selectRowOnClick) {
+            return this._selectRowOnClick(selectRowOnClick);
         };
         return ListPropertyColumnModel;
     }(ColumnModel));
@@ -3113,7 +3119,7 @@
             return this;
         };
         CustomValueColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+            return this._selectRowOnClick(selectOnRowClick);
         };
         return CustomValueColumnModel;
     }(ColumnModel));
@@ -3149,7 +3155,7 @@
             this.config.registerPortal(templateRef, viewContainer, fillCell, padChild);
         };
         CustomTemplateColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+            return this._selectRowOnClick(selectOnRowClick);
         };
         return CustomTemplateColumnModel;
     }(ColumnModel));
@@ -3159,8 +3165,7 @@
             var _this = _super.call(this, columnId, defaults) || this;
             _this._enableHeaderControls = true;
             _this.selectionModel = pectin.DelegatingSelectionModel.createDelegate();
-            _this.hasSelectionModel = new pectin.MutableValueModel(false);
-            _this.selectOnRowClick(false);
+            _this._selectRowOnClick(false);
             _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
                 component.selectionModel = _this.selectionModel;
                 component.enableHeaderControls = _this._enableHeaderControls;
@@ -3170,24 +3175,15 @@
                 component.selectionModel = _this.selectionModel;
             }));
             _this.setSelectionModel(selectionModel);
-            _this.visibleWhile(_this.hasSelectionModel);
             return _this;
         }
         SelectionColumnModel.prototype.setSelectionModel = function (selectionModel) {
             this.selectionModel.setDelegate(selectionModel);
-            this.hasSelectionModel.value = !!selectionModel;
+            this.setDefaultVisibility(selectionModel instanceof pectin.MultipleSelectionModel ? pectin.ValueModel.TRUE : pectin.ValueModel.FALSE);
         };
         SelectionColumnModel.prototype.getDefaultHeaderText = function () {
             return '';
         };
-        SelectionColumnModel.prototype.isRowSelectionEnabledByDefault = function () {
-            return this.isRowSelectionExplicitlyEnabled();
-        };
-        SelectionColumnModel.prototype.selectOnRowClick = function (selectOnRowClick) {
-            // note we're using different method name as the selection column treats this
-            // state as the default for all columns.
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
-        };
         SelectionColumnModel.prototype.enableHeaderControls = function (enable) {
             this._enableHeaderControls = enable;
             return this;
@@ -3201,243 +3197,6 @@
         return SelectionColumnModel;
     }(ColumnModel));
 
-    var EditSession = /** @class */ (function (_super) {
-        __extends(EditSession, _super);
-        function EditSession(rowId, row, form, saveCommand) {
-            var _this = _super.call(this) || this;
-            _this.rowId = rowId;
-            _this.form = form;
-            _this.saveCommand = saveCommand;
-            _this._liveRowValue = new pectin.MutableValueModel();
-            _this.liveRowValue = _this._liveRowValue.readonly;
-            _this.form.load(row);
-            _this._liveRowValue.value = row;
-            _this.form.onEdit(function () {
-                // if (!this._liveRowValue.value[immerable]) {
-                //   console.warn()
-                // }
-                _this._liveRowValue.value = produce__default['default'](_this._liveRowValue.value, function (draft) {
-                    _this.form.writeDirtyStateTo(draft);
-                });
-            });
-            return _this;
-        }
-        return EditSession;
-    }(pectin.GarbageCollector));
-
-    // 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];
-    var RowClass = /** @class */ (function () {
-        function RowClass(className, matches) {
-            this.className = className;
-            this.matches = matches;
-        }
-        return RowClass;
-    }());
-    var VisibleColumnListModel = /** @class */ (function (_super) {
-        __extends(VisibleColumnListModel, _super);
-        function VisibleColumnListModel() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.columns = [];
-            return _this;
-        }
-        VisibleColumnListModel.prototype.addColumn = function (column) {
-            var _this = this;
-            this.runInTransaction(function () {
-                _this.columns.push(column);
-                _this.trackSource(column.visible);
-            });
-        };
-        VisibleColumnListModel.prototype.doComputeValue = function () {
-            return this.columns.filter(function (c) { return c.visible.value; });
-        };
-        return VisibleColumnListModel;
-    }(pectin.AbstractComputedListModel));
-    var AbstractTableModel = /** @class */ (function (_super) {
-        __extends(AbstractTableModel, _super);
-        function AbstractTableModel(sourceOfTruth) {
-            var _this = _super.call(this) || this;
-            _this.sourceOfTruth = sourceOfTruth;
-            _this._columns = new pectin.MutableListModel();
-            _this._visibleColumnTracker = new VisibleColumnListModel();
-            _this._editorSessions = new pectin.MutableListModel();
-            _this.rowClassNamePredicates = [];
-            _this.rowClickListeners = new pectin.EventListenerList();
-            _this._createForm = function (row) { return new pectin.DirtyTrackingForm(); };
-            _this.trackBy = function (index, item) {
-                return _this.identityOf ? _this.identityOf(item) : index;
-            };
-            _this.identityOf = sourceOfTruth.identityOf;
-            var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.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();
-            _this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(_this._columns).findIndex(function (column) { return column.isRowSelectionExplicitlyEnabled(); }).isGreaterThanOrEqualTo(0);
-            _this.firstVisibleColumn = chain(_this._visibleColumnTracker).first();
-            _this.lastVisibleColumn = chain(_this._visibleColumnTracker).last();
-            return _this;
-        }
-        Object.defineProperty(AbstractTableModel.prototype, "rowsBeingEdited", {
-            get: function () {
-                return this._rowsBeingEdited.readonly;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractTableModel.prototype, "columns", {
-            get: function () {
-                return this._columns.readonly;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractTableModel.prototype, "visibleColumns", {
-            get: function () {
-                return this._visibleColumnTracker.readonly;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AbstractTableModel.prototype.pluck = function (property, options) {
-            var _this = this;
-            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
-            return this.addColumn(new PropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype.pluckList = function (property, options) {
-            var _this = this;
-            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
-            return this.addColumn(new ListPropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype._addSelectionColumn = function (selectionModel) {
-            var _this = this;
-            pectin.assert.isNil(this.selectionColumnModel);
-            var columnId = 'selection-column';
-            this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
-            this.addRowClass('aup-row-selected', function (row) { return _this.selectionColumnModel.isSelected(row); });
-            return this.addColumn(this.selectionColumnModel);
-        };
-        AbstractTableModel.prototype.addEditControls = function (saveCommand) {
-            var _this = this;
-            this.saveCommand = saveCommand;
-            var columnId = 'editControls';
-            return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
-            var _this = this;
-            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, dataAccessor));
-        };
-        AbstractTableModel.prototype.addComponentColumn = function (columnId, component, onComponentInitOrOptions) {
-            var _this = this;
-            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, function (row) { return row; })).cellRenderer(component, onComponentInitOrOptions);
-        };
-        AbstractTableModel.prototype.addTemplateColumn = function (columnId) {
-            var _this = this;
-            return this.addColumn(new CustomTemplateColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype.addRowClass = function (className, predicate) {
-            this.rowClassNamePredicates.push(new RowClass(className, predicate));
-        };
-        AbstractTableModel.prototype.getRowClasses = function (row) {
-            var classNames = [];
-            this.rowClassNamePredicates.forEach(function (i) {
-                if (i.matches(row)) {
-                    classNames.push(i.className);
-                }
-            });
-            return classNames;
-        };
-        AbstractTableModel.prototype.useFormFactory = function (factory) {
-            this._createForm = factory;
-            return this;
-        };
-        AbstractTableModel.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);
-                this._visibleColumnTracker.addColumn(column);
-            }
-            return column;
-        };
-        // removeColumn(column: ColumnModel<Row>) {
-        //
-        // }
-        AbstractTableModel.prototype.columnTextProperties = function (columnTextProperties) {
-            this._columnTextPropertiesLookup = columnTextProperties;
-        };
-        AbstractTableModel.prototype.getColumnTextProperties = function (columnId) {
-            return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[columnId] : undefined;
-        };
-        AbstractTableModel.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(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;
-            }
-        };
-        AbstractTableModel.prototype.getEditSessionFor = function (row) {
-            return this._editorSessionByRowId.get(this.identityOf(row));
-        };
-        AbstractTableModel.prototype.cancelAllEditorSessions = function () {
-            var _this = this;
-            this._editorSessions.runInTransaction(function (draft) {
-                _this._rowsBeingEdited.runInTransaction(function () {
-                    draft.value.forEach(function (session) { return session.dispose(); });
-                });
-            });
-        };
-        AbstractTableModel.prototype.isRowSelectionEnabledFor = function (column) {
-            var _a;
-            return this.selectionColumnModel && ((_a = column.isRowSelectionEnabled()) !== null && _a !== void 0 ? _a : this.isRowSelectionEnabledByDefault());
-        };
-        AbstractTableModel.prototype.isRowSelectionEnabledByDefault = function () {
-            return this.selectionColumnModel && this.selectionColumnModel.isRowSelectionEnabledByDefault();
-        };
-        AbstractTableModel.prototype.isRowSelectionEnabled = function () {
-            return this.hasColumnsWithRowSelectionExplicitlyEnabled.value || this.isRowSelectionEnabledByDefault();
-        };
-        AbstractTableModel.prototype.isHoverEnabled = function () {
-            return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
-        };
-        AbstractTableModel.prototype.isCursorEnabled = function (column) {
-            return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
-        };
-        AbstractTableModel.prototype.selectRow = function (row) {
-            var _a;
-            (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
-        };
-        AbstractTableModel.prototype.onRowClicked = function (callback) {
-            return this.rowClickListeners.add(callback);
-        };
-        AbstractTableModel.prototype._notifyCellClicked = function (columnModel, row) {
-            if (this.isRowSelectionEnabledFor(columnModel)) {
-                this.selectRow(row);
-            }
-            this.rowClickListeners.fire(function (l) { return l(row); });
-        };
-        return AbstractTableModel;
-    }(pectin.GarbageCollector));
-    pectin.TrackExternal.oneTimeBinding(AbstractTableModel);
-
     /**
      * Create your model:
      * @example
@@ -3497,9 +3256,9 @@
      *   }
      * }
      */
-    var TableComponent = /** @class */ (function (_super) {
-        __extends(TableComponent, _super);
-        function TableComponent(elementRef, ngZone) {
+    var AbstractTableComponent = /** @class */ (function (_super) {
+        __extends(AbstractTableComponent, _super);
+        function AbstractTableComponent(elementRef, ngZone) {
             var _this = _super.call(this, elementRef, ngZone) || this;
             /**
              * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
@@ -3510,6 +3269,7 @@
             // TODO: support user defined header and row heights via css vars.
             _this.headerHeight = new pectin.MutableValueModel(56);
             _this.rowHeight = new pectin.MutableValueModel(48);
+            _this.baseCssClass = 'aup-table-component';
             var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, when = _b.when;
             var actualHeaderHeight = chain(_this.showHeaderModel).map(function (show) {
                 return show ? _this.headerHeight.value : 0;
@@ -3517,51 +3277,52 @@
             _this.visibleRowCount = chain(_this.boundsModel).map(function (bounds) {
                 // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.
                 var rawRowCount = (bounds.height - actualHeaderHeight.value) / _this.rowHeight.value;
-                var rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
-                // console.log({rowCount})
-                return rowCount;
+                return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
             }, {
                 dependsOn: [actualHeaderHeight, _this.rowHeight],
                 postponeWhile: chain(_this.boundsModel).pluckNumeric('height').isLessThan(1)
             });
             return _this;
         }
-        Object.defineProperty(TableComponent.prototype, "hideHeader", {
+        Object.defineProperty(AbstractTableComponent.prototype, "hideHeader", {
             get: function () {
                 return !this.showHeader;
             },
             enumerable: false,
             configurable: true
         });
-        TableComponent.prototype.ngOnInit = function () {
+        AbstractTableComponent.prototype.getModel = function () {
+            return typescriptUtilities.lang.abstractMethod(this.constructor);
+        };
+        AbstractTableComponent.prototype.ngOnInit = function () {
             var _b = pectin.Dsl.disposeWith(this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.switchOn;
-            this.columns = chain(this.tableModel.columns);
+            this.columns = chain(this.getModel().columns);
             this.columnIds = chain(this.columns).pluck('columnId');
             this.columnsById = chain(this.columns).indexBy('columnId');
         };
-        TableComponent.prototype.isEditing = function (row) {
-            return !!this.tableModel.getEditSessionFor(row);
+        AbstractTableComponent.prototype.isEditing = function (row) {
+            return !!this.getModel().getEditSessionFor(row);
         };
-        TableComponent.prototype.registerColumnTemplate = function (columnId, templateRef, viewContainer, fillCell, padChild) {
+        AbstractTableComponent.prototype.registerColumnTemplate = function (columnId, templateRef, viewContainer, fillCell, padChild) {
             var column = this.columnsById.get(columnId);
             if (column instanceof CustomTemplateColumnModel) {
                 column.setTemplate(templateRef, viewContainer, fillCell, padChild);
             }
         };
-        TableComponent.prototype.notifyCellClicked = function (columnModel, row) {
-            this.tableModel._notifyCellClicked(columnModel, row);
+        AbstractTableComponent.prototype.notifyCellClicked = function (columnModel, row) {
+            this.getModel()._notifyCellClicked(columnModel, row);
         };
         // @Trace()
-        TableComponent.prototype.isFirstVisibleColumn = function (columnId) {
+        AbstractTableComponent.prototype.isFirstVisibleColumn = function (columnId) {
             var _a;
-            return ((_a = this.tableModel.firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+            return ((_a = this.getModel().firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
         // @Trace()
-        TableComponent.prototype.isLastVisibleColumn = function (columnId) {
+        AbstractTableComponent.prototype.isLastVisibleColumn = function (columnId) {
             var _a;
-            return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+            return ((_a = this.getModel().lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
-        TableComponent.prototype.getColumnClasses = function (columnId) {
+        AbstractTableComponent.prototype.getColumnClasses = function (columnId) {
             var classes = ["aup-col-" + this.columnsById.get(columnId).dasherisedColumnId];
             if (this.isFirstVisibleColumn(columnId)) {
                 classes.push('first-visible-column');
@@ -3571,38 +3332,33 @@
             }
             return classes;
         };
-        return TableComponent;
+        return AbstractTableComponent;
     }(ResizeAwareComponent));
-    TableComponent.decorators = [
+    AbstractTableComponent.decorators = [
         { type: i0.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}"]
+                    selector: 'aup-abstract-table',
+                    template: ''
                 },] }
     ];
-    TableComponent.ctorParameters = function () { return [
+    AbstractTableComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
         { type: i0.NgZone }
     ]; };
-    TableComponent.propDecorators = {
-        tableModel: [{ type: i0.Input }],
+    AbstractTableComponent.propDecorators = {
         showHeaderModel: [{ type: i0.Input }],
         showHeader: [{ type: i0.Input }],
         enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }],
+        baseCssClass: [{ type: i0.HostBinding, args: ['class',] }],
         hideHeader: [{ type: i0.HostBinding, args: ['class.hide-header',] }]
     };
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", AbstractTableModel)
-    ], TableComponent.prototype, "tableModel", void 0);
     __decorate([
         pectin.TrackExternal({ defaultValue: true }),
         __metadata("design:type", pectin.ValueModel)
-    ], TableComponent.prototype, "showHeaderModel", void 0);
+    ], AbstractTableComponent.prototype, "showHeaderModel", void 0);
     __decorate([
         pectin.StoreInValueModel('showHeaderModel'),
         __metadata("design:type", Boolean)
-    ], TableComponent.prototype, "showHeader", void 0);
+    ], AbstractTableComponent.prototype, "showHeader", void 0);
 
     var ColumnTemplateDirective = /** @class */ (function () {
         function ColumnTemplateDirective(host, templateRef, viewContainer) {
@@ -3625,7 +3381,7 @@
                 },] }
     ];
     ColumnTemplateDirective.ctorParameters = function () { return [
-        { type: TableComponent },
+        { type: AbstractTableComponent },
         { type: i0.TemplateRef },
         { type: i0.ViewContainerRef }
     ]; };
@@ -3796,8 +3552,340 @@
         menu: [{ type: i0.ViewChild, args: [menu.MatMenuTrigger,] }]
     };
 
-    var SVG_HEIGHT = 60;
-    exports.TreeInheritanceIconComponent = /** @class */ (function () {
+    var EditSession = /** @class */ (function (_super) {
+        __extends(EditSession, _super);
+        function EditSession(rowId, row, form, saveCommand) {
+            var _this = _super.call(this) || this;
+            _this.rowId = rowId;
+            _this.form = form;
+            _this.saveCommand = saveCommand;
+            _this._liveRowValue = new pectin.MutableValueModel();
+            _this.liveRowValue = _this._liveRowValue.readonly;
+            _this.form.load(row);
+            _this._liveRowValue.value = row;
+            _this.form.onEdit(function () {
+                // if (!this._liveRowValue.value[immerable]) {
+                //   console.warn()
+                // }
+                _this._liveRowValue.value = produce__default['default'](_this._liveRowValue.value, function (draft) {
+                    _this.form.writeDirtyStateTo(draft);
+                });
+            });
+            return _this;
+        }
+        return EditSession;
+    }(pectin.GarbageCollector));
+
+    // 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];
+    var RowClass = /** @class */ (function () {
+        function RowClass(className, matches) {
+            this.className = className;
+            this.matches = matches;
+        }
+        return RowClass;
+    }());
+    var VisibleColumnListModel = /** @class */ (function (_super) {
+        __extends(VisibleColumnListModel, _super);
+        function VisibleColumnListModel() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.columns = [];
+            return _this;
+        }
+        VisibleColumnListModel.prototype.addColumn = function (column) {
+            var _this = this;
+            this.runInTransaction(function () {
+                _this.columns.push(column);
+                _this.trackSource(column.visible);
+            });
+        };
+        VisibleColumnListModel.prototype.doComputeValue = function () {
+            return this.columns.filter(function (c) { return c.visible.value; });
+        };
+        return VisibleColumnListModel;
+    }(pectin.AbstractComputedListModel));
+    var AbstractTableModel = /** @class */ (function (_super) {
+        __extends(AbstractTableModel, _super);
+        function AbstractTableModel(sourceOfTruth) {
+            var _this = _super.call(this) || this;
+            _this.sourceOfTruth = sourceOfTruth;
+            _this._columns = new pectin.MutableListModel();
+            _this._visibleColumnTracker = new VisibleColumnListModel();
+            _this._editorSessions = new pectin.MutableListModel();
+            _this.rowClassNamePredicates = [];
+            _this.rowClickListeners = new pectin.EventListenerList();
+            _this._createForm = function (row) { return new pectin.DirtyTrackingForm(); };
+            _this.trackBy = function (index, item) {
+                return _this.identityOf ? _this.identityOf(item) : index;
+            };
+            _this.identityOf = sourceOfTruth.identityOf;
+            var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.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();
+            _this.firstVisibleColumn = chain(_this._visibleColumnTracker).first();
+            _this.lastVisibleColumn = chain(_this._visibleColumnTracker).last();
+            _this.rowSelectionDisabledOnAllColumns = chain(_this._visibleColumnTracker).select(function (column) { return column.isRowSelectionEnabled(); }).count().equals(0);
+            return _this;
+        }
+        Object.defineProperty(AbstractTableModel.prototype, "rowsBeingEdited", {
+            get: function () {
+                return this._rowsBeingEdited.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractTableModel.prototype, "columns", {
+            get: function () {
+                return this._columns.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractTableModel.prototype, "visibleColumns", {
+            get: function () {
+                return this._visibleColumnTracker.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AbstractTableModel.prototype.pluck = function (property, options) {
+            var _this = this;
+            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
+            return this.addColumn(new PropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype.pluckList = function (property, options) {
+            var _this = this;
+            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
+            return this.addColumn(new ListPropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype._addSelectionColumn = function (selectionModel, visible) {
+            var _this = this;
+            pectin.assert.isNil(this.selectionColumnModel);
+            var columnId = 'selection-column';
+            this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
+            this.addRowClass('aup-row-selected', function (row) { return _this.selectionColumnModel.isSelected(row); });
+            var selectionColumnModel = this.addColumn(this.selectionColumnModel);
+            if (!___namespace.isNil(visible)) {
+                selectionColumnModel.visibleWhile(visible instanceof pectin.ValueModel ? visible : pectin.ValueModel.constant(visible));
+            }
+            return selectionColumnModel;
+        };
+        AbstractTableModel.prototype.addEditControls = function (saveCommand) {
+            var _this = this;
+            this.saveCommand = saveCommand;
+            var columnId = 'editControls';
+            return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
+            var _this = this;
+            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, dataAccessor));
+        };
+        AbstractTableModel.prototype.addComponentColumn = function (columnId, component, onComponentInitOrOptions) {
+            var _this = this;
+            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, function (row) { return row; })).cellRenderer(component, onComponentInitOrOptions);
+        };
+        AbstractTableModel.prototype.addTemplateColumn = function (columnId) {
+            var _this = this;
+            return this.addColumn(new CustomTemplateColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype.addRowClass = function (className, predicate) {
+            this.rowClassNamePredicates.push(new RowClass(className, predicate));
+        };
+        AbstractTableModel.prototype.getRowClasses = function (row) {
+            var classNames = [];
+            this.rowClassNamePredicates.forEach(function (i) {
+                if (i.matches(row)) {
+                    classNames.push(i.className);
+                }
+            });
+            return classNames;
+        };
+        AbstractTableModel.prototype.useFormFactory = function (factory) {
+            this._createForm = factory;
+            return this;
+        };
+        AbstractTableModel.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);
+                this._visibleColumnTracker.addColumn(column);
+            }
+            return column;
+        };
+        // removeColumn(column: ColumnModel<Row>) {
+        //
+        // }
+        AbstractTableModel.prototype.columnTextProperties = function (columnTextProperties) {
+            this._columnTextPropertiesLookup = columnTextProperties;
+        };
+        AbstractTableModel.prototype.getColumnTextProperties = function (columnId) {
+            return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[columnId] : undefined;
+        };
+        AbstractTableModel.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(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;
+            }
+        };
+        AbstractTableModel.prototype.getEditSessionFor = function (row) {
+            return this._editorSessionByRowId.get(this.identityOf(row));
+        };
+        AbstractTableModel.prototype.cancelAllEditorSessions = function () {
+            var _this = this;
+            this._editorSessions.runInTransaction(function (draft) {
+                _this._rowsBeingEdited.runInTransaction(function () {
+                    draft.value.forEach(function (session) { return session.dispose(); });
+                });
+            });
+        };
+        AbstractTableModel.prototype.isRowSelectionEnabledFor = function (column) {
+            return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
+        };
+        AbstractTableModel.prototype.isRowSelectionEnabled = function () {
+            return this.hasSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
+        };
+        AbstractTableModel.prototype.hasSelectionModel = function () {
+            var _a;
+            return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
+        };
+        AbstractTableModel.prototype.isHoverEnabled = function () {
+            return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
+        };
+        AbstractTableModel.prototype.isCursorEnabled = function (column) {
+            return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
+        };
+        AbstractTableModel.prototype.selectRow = function (row) {
+            var _a;
+            (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
+        };
+        AbstractTableModel.prototype.onRowClicked = function (callback) {
+            return this.rowClickListeners.add(callback);
+        };
+        AbstractTableModel.prototype._notifyCellClicked = function (columnModel, row) {
+            if (this.isRowSelectionEnabledFor(columnModel)) {
+                this.selectRow(row);
+            }
+            this.rowClickListeners.fire(function (l) { return l(row); });
+        };
+        return AbstractTableModel;
+    }(pectin.GarbageCollector));
+    pectin.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
+     *     }
+     *   }
+     * }
+     */
+    var TableComponent = /** @class */ (function (_super) {
+        __extends(TableComponent, _super);
+        function TableComponent(elementRef, ngZone) {
+            return _super.call(this, elementRef, ngZone) || this;
+        }
+        TableComponent.prototype.getModel = function () {
+            return this.tableModel;
+        };
+        return TableComponent;
+    }(AbstractTableComponent));
+    TableComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    TableComponent.propDecorators = {
+        tableModel: [{ type: i0.Input }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", AbstractTableModel)
+    ], TableComponent.prototype, "tableModel", void 0);
+
+    var SVG_HEIGHT = 60;
+    exports.TreeInheritanceIconComponent = /** @class */ (function () {
         function TreeInheritanceIconComponent() {
             this.pixelWidth = 24;
             this.pixelHeight = 48;
@@ -4009,7 +4097,7 @@
         function TreeLabelColumnModel(columnId, textPropertiesProvider, expansionModel) {
             var _this = _super.call(this, columnId, textPropertiesProvider) || this;
             _this.expansionModel = expansionModel;
-            _this.iconFactory = function (node, expanded) { return expanded ? 'mat:folder_open' : 'mat:folder'; };
+            _this.iconFactory = function (node, expanded) { return expanded ? 'mat:expand_more' : 'mat:chevron_right'; };
             _this.cellRenderer(TreeLabelCellRendererComponent);
             return _this;
         }
@@ -4031,8 +4119,8 @@
             }));
             return this;
         };
-        TreeLabelColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
-            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        TreeLabelColumnModel.prototype._selectRowOnClick = function (selectOnRowClick) {
+            return _super.prototype._selectRowOnClick.call(this, selectOnRowClick);
         };
         return TreeLabelColumnModel;
     }(ColumnModel));
@@ -4345,32 +4433,34 @@
         TreeTableModel.prototype.ensureAncestorsAndSelfVisible = function (node) {
             this.treeExpansionModel.ensureAncestorsAndSelfVisible(node);
         };
+        TreeTableModel.prototype.addSelectionColumn = function (selectionModel, showSelectionColumn) {
+            return this._addSelectionColumn(selectionModel, showSelectionColumn);
+        };
         return TreeTableModel;
     }(AbstractTableModel));
-    var FlattenStrategy = /** @class */ (function (_super) {
-        __extends(FlattenStrategy, _super);
-        function FlattenStrategy(collapsedIds) {
-            var _this = _super.call(this) || this;
-            _this.collapsedIds = collapsedIds;
-            _this._areas = [];
-            _this._collapsed = new Set(collapsedIds);
-            return _this;
-        }
-        FlattenStrategy.prototype.onVisit = function (it) {
-            this._areas.push(it);
-        };
-        FlattenStrategy.prototype.shouldVisitChildrenOf = function (it) {
-            return !this._collapsed.has(it);
-        };
-        Object.defineProperty(FlattenStrategy.prototype, "flattenedAreas", {
-            get: function () {
-                return this._areas;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return FlattenStrategy;
-    }(exports.SelfAndDescendantsVisitor));
+    // 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>();
@@ -4394,83 +4484,97 @@
     //
     // }
 
-    //
-    // 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>
-    // `;
+    /**
+     * 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
+     *     }
+     *   }
+     * }
+     */
     var TreeTableComponent = /** @class */ (function (_super) {
         __extends(TreeTableComponent, _super);
-        function TreeTableComponent() {
-            var _this = _super.call(this) || this;
-            /**
-             * 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;
-            return _this;
+        function TreeTableComponent(elementRef, ngZone) {
+            return _super.call(this, elementRef, ngZone) || this;
         }
+        TreeTableComponent.prototype.getModel = function () {
+            return this.treeTableModel;
+        };
         return TreeTableComponent;
-    }(DisposableComponent));
+    }(AbstractTableComponent));
     TreeTableComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "aup-tree-table",
-                    template: "<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n",
-                    encapsulation: i0.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 = function () { return []; };
+    TreeTableComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
     TreeTableComponent.propDecorators = {
-        treeTableModel: [{ type: i0.Input }],
-        showHeaderModel: [{ type: i0.Input }],
-        showHeader: [{ type: i0.Input }],
-        enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }]
+        treeTableModel: [{ type: i0.Input }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", TreeTableModel)
     ], TreeTableComponent.prototype, "treeTableModel", void 0);
-    __decorate([
-        pectin.TrackExternal({ defaultValue: true }),
-        __metadata("design:type", pectin.ValueModel)
-    ], TreeTableComponent.prototype, "showHeaderModel", void 0);
-    __decorate([
-        pectin.StoreInValueModel('showHeaderModel'),
-        __metadata("design:type", Boolean)
-    ], TreeTableComponent.prototype, "showHeader", void 0);
 
     var VerticalFocusContainerComponent = /** @class */ (function (_super) {
         __extends(VerticalFocusContainerComponent, _super);
@@ -4646,6 +4750,7 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
+                        AbstractTableComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -5503,6 +5608,81 @@
         color: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.color',] }]
     };
 
+    var AbstractActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(AbstractActivityTriggerComponent, _super);
+        function AbstractActivityTriggerComponent() {
+            var _this = _super.call(this) || this;
+            _this.alignFace = HorizontalAlignment.CENTER;
+            _this.confirmEvent = new i0.EventEmitter();
+            _this.cancelEvent = new i0.EventEmitter();
+            _this.startActivityCommand = pectin.Command.create(function () {
+                pectin.assert.notNil(_this.activityClass);
+                pectin.assert.notNil(_this.interactionContext);
+                _this.interactionContext.startActivity(_this.activityClass, _this.activityData)
+                    .then(function (result) {
+                    _this.confirmEvent.emit(result);
+                }).catch(function (error) {
+                    _this.cancelEvent.emit(error);
+                });
+            });
+            return _this;
+        }
+        AbstractActivityTriggerComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(AbstractActivityTriggerComponent.prototype, "isActive", {
+            get: function () {
+                var _a;
+                return (_a = this.interactionContext) === null || _a === void 0 ? void 0 : _a.isActive();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return AbstractActivityTriggerComponent;
+    }(DisposableComponent));
+    AbstractActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-abstract-activity-trigger',
+                    template: ''
+                },] }
+    ];
+    AbstractActivityTriggerComponent.ctorParameters = function () { return []; };
+    AbstractActivityTriggerComponent.propDecorators = {
+        activityClass: [{ type: i0.Input }],
+        activityClassModel: [{ type: i0.Input }],
+        activityData: [{ type: i0.Input }],
+        activityDataModel: [{ type: i0.Input }],
+        face: [{ type: i0.Input }],
+        faceModel: [{ type: i0.Input }],
+        alignFace: [{ type: i0.Input }],
+        confirmEvent: [{ type: i0.Output }],
+        cancelEvent: [{ type: i0.Output }],
+        isActive: [{ type: i0.HostBinding, args: ['class.active',] }]
+    };
+    __decorate([
+        pectin.StoreInValueModel('activityClassModel'),
+        __metadata("design:type", Object)
+    ], AbstractActivityTriggerComponent.prototype, "activityClass", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], AbstractActivityTriggerComponent.prototype, "activityClassModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('activityDataModel'),
+        __metadata("design:type", Object)
+    ], AbstractActivityTriggerComponent.prototype, "activityData", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], AbstractActivityTriggerComponent.prototype, "activityDataModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], AbstractActivityTriggerComponent.prototype, "face", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], AbstractActivityTriggerComponent.prototype, "faceModel", void 0);
+
     var InteractionServiceRoutingAdapter = /** @class */ (function () {
         function InteractionServiceRoutingAdapter(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
             this.activeInteractionContextIds = activeInteractionContextIds;
@@ -5684,10 +5864,29 @@
         InteractionService.ApiAdapter = ApiAdapter;
     })(exports.InteractionService || (exports.InteractionService = {}));
 
+    var ModalActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(ModalActivityTriggerComponent, _super);
+        function ModalActivityTriggerComponent(interactionService) {
+            var _this = _super.call(this) || this;
+            _this.interactionContext = interactionService.createModalInteractionContextDisposedWith(_this);
+            return _this;
+        }
+        return ModalActivityTriggerComponent;
+    }(AbstractActivityTriggerComponent));
+    ModalActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-modal-activity-trigger',
+                    template: "<aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n",
+                    styles: [":host{display:inline-block}"]
+                },] }
+    ];
+    ModalActivityTriggerComponent.ctorParameters = function () { return [
+        { type: exports.InteractionService }
+    ]; };
+
     /**
      * @example
      *   <aup-in-place-interaction-context #inPlaceInteractionContext>
-     *
      *   </aup-in-place-interaction-context>
      *
      *   in your component
@@ -5833,6 +6032,35 @@
         __metadata("design:type", pectin.Command)
     ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
 
+    var InlineActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(InlineActivityTriggerComponent, _super);
+        function InlineActivityTriggerComponent() {
+            return _super.call(this) || this;
+        }
+        return InlineActivityTriggerComponent;
+    }(AbstractActivityTriggerComponent));
+    InlineActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-inline-activity-trigger',
+                    template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n",
+                    styles: [":host{display:inline-block}"]
+                },] }
+    ];
+    InlineActivityTriggerComponent.ctorParameters = function () { return []; };
+    InlineActivityTriggerComponent.propDecorators = {
+        interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent, { static: true },] }]
+    };
+
+    /**
+     * <aup-popup-interaction-context #ctx></aup-popup-interaction-context>
+     *
+     * in your component
+     * @ViewChild('inPlaceInteractionContext', { static: true })
+     * interactionContext: InteractionContext;
+     * or
+     * @ViewChild('ctx', { static: true })
+     * interactionContext: InteractionContext;
+     */
     var PopupInteractionContextComponent = /** @class */ (function (_super) {
         __extends(PopupInteractionContextComponent, _super);
         function PopupInteractionContextComponent(_element, _overlay, scrollable) {
@@ -5913,7 +6141,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-popup-interaction-context',
                     template: "<ng-content></ng-content>\n",
-                    styles: [":host{display:inline}:host.interaction-active{background:rgba(0,0,0,.05)}"]
+                    styles: [":host{display:inline-block}:host.interaction-active{background:rgba(0,0,0,.05)}"]
                 },] }
     ];
     PopupInteractionContextComponent.ctorParameters = function () { return [
@@ -6171,8 +6399,8 @@
                 builder(model);
             return model;
         };
-        TableModel.prototype.addSelectionColumn = function (selectionModel) {
-            return this._addSelectionColumn(selectionModel);
+        TableModel.prototype.addSelectionColumn = function (selectionModel, showSelectionColumn) {
+            return this._addSelectionColumn(selectionModel, showSelectionColumn);
         };
         return TableModel;
     }(AbstractTableModel));
@@ -6181,6 +6409,30 @@
      * @file Automatically generated by barrelsby.
      */
 
+    var PopupActivityTriggerComponent = /** @class */ (function (_super) {
+        __extends(PopupActivityTriggerComponent, _super);
+        function PopupActivityTriggerComponent() {
+            var _this = _super.call(this) || this;
+            _this.anchorX = 'start';
+            _this.anchorY = 'bottom';
+            return _this;
+        }
+        return PopupActivityTriggerComponent;
+    }(AbstractActivityTriggerComponent));
+    PopupActivityTriggerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-popup-activity-trigger',
+                    template: "<aup-popup-interaction-context [anchorX]=\"anchorX\" [anchorY]=\"anchorY\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-popup-interaction-context>\n",
+                    styles: [":host{display:inline-block}"]
+                },] }
+    ];
+    PopupActivityTriggerComponent.ctorParameters = function () { return []; };
+    PopupActivityTriggerComponent.propDecorators = {
+        anchorX: [{ type: i0.Input }],
+        anchorY: [{ type: i0.Input }],
+        interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
+    };
+
     var InteractionModule = /** @class */ (function () {
         function InteractionModule() {
         }
@@ -6218,7 +6470,11 @@
                         Activity,
                         ActivityTitleComponent,
                         ActivityBodyComponent,
-                        ActivityActionsComponent
+                        ActivityActionsComponent,
+                        AbstractActivityTriggerComponent,
+                        PopupActivityTriggerComponent,
+                        InlineActivityTriggerComponent,
+                        ModalActivityTriggerComponent
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -6231,7 +6487,10 @@
                         InteractionContextTriggerFor,
                         StringInputActivity,
                         SelectInputActivity,
-                        ActivityBodyComponent
+                        ActivityBodyComponent,
+                        PopupActivityTriggerComponent,
+                        InlineActivityTriggerComponent,
+                        ModalActivityTriggerComponent
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
@@ -9414,6 +9673,7 @@
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
+    exports.AbstractActivityTriggerComponent = AbstractActivityTriggerComponent;
     exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
@@ -9421,6 +9681,7 @@
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
     exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
+    exports.AbstractTableComponent = AbstractTableComponent;
     exports.AbstractTableModel = AbstractTableModel;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
@@ -9469,7 +9730,6 @@
     exports.EditorControlColumnModel = EditorControlColumnModel;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.EventCleanUpSession = EventCleanUpSession;
-    exports.FlattenStrategy = FlattenStrategy;
     exports.FlexComponent = FlexComponent;
     exports.FocusBinding = FocusBinding;
     exports.FocusBindingDirective = FocusBindingDirective;
@@ -9479,13 +9739,16 @@
     exports.HEADER_CELL_RENDERER_PORTAL = HEADER_CELL_RENDERER_PORTAL;
     exports.HighlightPipe = HighlightPipe;
     exports.HighlightTextModelDirective = HighlightTextModelDirective;
+    exports.HorizontalAlignment = HorizontalAlignment;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
+    exports.InlineActivityTriggerComponent = InlineActivityTriggerComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
+    exports.ModalActivityTriggerComponent = ModalActivityTriggerComponent;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
     exports.MoreMenuComponent = MoreMenuComponent;
     exports.MultipleSelectInputComponent = MultipleSelectInputComponent;
@@ -9510,6 +9773,7 @@
     exports.Point = Point;
     exports.PopStateDuringInteractionNavigation = PopStateDuringInteractionNavigation;
     exports.PopStateNavigation = PopStateNavigation;
+    exports.PopupActivityTriggerComponent = PopupActivityTriggerComponent;
     exports.PopupAwareComponent = PopupAwareComponent;
     exports.PopupInteractionContextComponent = PopupInteractionContextComponent;
     exports.PopupMenuComponent = PopupMenuComponent;