@coolon/angular-ui-powerups 3.8.0 → 3.10.0

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

@@ -699,7 +699,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-card-container',
                     template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                    styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
+                    styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
                 },] }
     ];
     CardContainerComponent.ctorParameters = function () { return []; };
@@ -713,10 +713,6 @@
         __metadata("design:type", pectin.Command)
     ], CardContainerComponent.prototype, "addCardCommand", void 0);
 
-    (function (TrackBy) {
-        TrackBy.byIndex = function (data, index) { return index; };
-    })(exports.TrackBy || (exports.TrackBy = {}));
-
     (function (CommandFace) {
         var Position;
         (function (Position) {
@@ -857,6 +853,80 @@
         CommandFace.Adapter = Adapter;
     })(exports.CommandFace || (exports.CommandFace = {}));
 
+    /**
+     * Custom CSS:
+     * @example
+     * root: { // globally
+     *   --aup-command-face-icon-gap: 8px;
+     * }
+     * aup-command-face { // per instance
+     *   --icon-gap: 4px;
+     * }
+     */
+    var CommandFaceComponent = /** @class */ (function (_super) {
+        __extends(CommandFaceComponent, _super);
+        function CommandFaceComponent() {
+            var _this = _super.call(this) || this;
+            _this.facesModel = new pectin.MutableListModel();
+            _this.ignoreIcon = false;
+            _this.ignoreText = false;
+            _this.includeMissingIconInLayout = false;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.faceAdapters = chain(_this.facesModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
+            var activeFace = _this.faceAdapters.first();
+            _this.activeIcon = activeFace.pluck("icon");
+            _this.activeColor = activeFace.pluck("color");
+            return _this;
+        }
+        Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
+            get: function () {
+                return this.includeMissingIconInLayout && !this.activeIcon.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommandFaceComponent.prototype.ngOnInit = function () {
+        };
+        CommandFaceComponent.prototype.shouldIncludeIcon = function (face) {
+            return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
+        };
+        CommandFaceComponent.prototype.hasIconStart = function (face) {
+            return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === exports.CommandFace.Position.START);
+        };
+        CommandFaceComponent.prototype.hasIconEnd = function (face) {
+            return this.shouldIncludeIcon(face) && face.iconPosition === exports.CommandFace.Position.END;
+        };
+        Object.defineProperty(CommandFaceComponent.prototype, "color", {
+            get: function () {
+                return this.activeColor.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return CommandFaceComponent;
+    }(DisposableComponent));
+    CommandFaceComponent.decorators = [
+        { type: i0.Component, args: [{
+                    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:-ms-inline-grid;display:inline-grid}aup-command-face>.face-container{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:inline-flex;flex-direction:row;grid-column:1;grid-row:1}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}"]
+                },] }
+    ];
+    CommandFaceComponent.ctorParameters = function () { return []; };
+    CommandFaceComponent.propDecorators = {
+        _rawFaces: [{ type: i0.Input, args: ['faces',] }],
+        ignoreIcon: [{ type: i0.Input }],
+        ignoreText: [{ type: i0.Input }],
+        includeMissingIconInLayout: [{ type: i0.Input }],
+        requiresMissingIconInLayout: [{ type: i0.HostBinding, args: ['class.hide-icon',] }],
+        color: [{ type: i0.HostBinding, args: ['attr.color',] }]
+    };
+    __decorate([
+        pectin.StoreInListModel('facesModel'),
+        __metadata("design:type", Array)
+    ], CommandFaceComponent.prototype, "_rawFaces", void 0);
+
     var PopupAwareComponent = /** @class */ (function (_super) {
         __extends(PopupAwareComponent, _super);
         function PopupAwareComponent(element, parent) {
@@ -963,6 +1033,150 @@
         __metadata("design:type", Object)
     ], CommandComponent.prototype, "busyFace", void 0);
 
+    /**
+     *
+     */
+    var FlexComponent = /** @class */ (function (_super) {
+        __extends(FlexComponent, _super);
+        function FlexComponent() {
+            return _super.call(this) || this;
+        }
+        FlexComponent.prototype.ngOnInit = function () {
+        };
+        return FlexComponent;
+    }(DisposableComponent));
+    FlexComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-flex',
+                    template: ""
+                },] }
+    ];
+    FlexComponent.ctorParameters = function () { return []; };
+
+    /**
+     *
+     */
+    var AbstractPopupMenuComponent = /** @class */ (function (_super) {
+        __extends(AbstractPopupMenuComponent, _super);
+        function AbstractPopupMenuComponent(element, parent) {
+            var _this = _super.call(this, element, parent) || this;
+            _this._unorderedChildren = new pectin.MutableListModel();
+            _this.faceModelDelegate = new pectin.DelegatingValueModel();
+            _this.xPosition = 'after';
+            _this.yPosition = 'below';
+            var _c = pectin.Dsl.disposeWith(_this), chain = _c.chain, valueOf = _c.valueOf, before = _c.before, when = _c.when, after = _c.after, observe = _c.observe, switchOn = _c.switchOn;
+            // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
+            _this.faceAdapterModel = chain(_this.faceModelDelegate).map(function (f) { return new exports.CommandFace.Adapter(f); });
+            _this.children = chain(_this._unorderedChildren).sortBy('componentIndex');
+            return _this;
+        }
+        AbstractPopupMenuComponent.prototype.ngAfterContentChecked = function () {
+            // force the list to re-order as the child indicies may have changed.
+            this._unorderedChildren.value = __spread(this._unorderedChildren.value);
+        };
+        Object.defineProperty(AbstractPopupMenuComponent.prototype, "faceAdapter", {
+            get: function () {
+                var _a, _b;
+                if (!this.faceAdapterModel) {
+                    console.error("Somehow faceAdapterModel is nil -- set a break point here and let me know what's going on");
+                }
+                return (_b = (_a = this.faceAdapterModel) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : new exports.CommandFace.Adapter(undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AbstractPopupMenuComponent.prototype.isRoot = function () {
+            return !this.parent;
+        };
+        // @Trace()
+        AbstractPopupMenuComponent.prototype.register = function (component) {
+            var _this = this;
+            this._unorderedChildren.push(component);
+            return pectin.Disposable.disposableThatRuns(function () {
+                _this._unorderedChildren.remove(component);
+            });
+        };
+        AbstractPopupMenuComponent.prototype.onCommandFired = function () {
+            this.triggers.forEach(function (trigger) {
+                if (trigger.menuOpen) {
+                    trigger.closeMenu();
+                }
+            });
+        };
+        AbstractPopupMenuComponent.prototype.getFace = function () {
+            return this.faceAdapter.face;
+        };
+        return AbstractPopupMenuComponent;
+    }(PopupAwareComponent));
+    AbstractPopupMenuComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-abstract-popup-menu',
+                    template: ''
+                },] }
+    ];
+    AbstractPopupMenuComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }] }
+    ]; };
+    AbstractPopupMenuComponent.propDecorators = {
+        xPosition: [{ type: i0.Input }],
+        yPosition: [{ type: i0.Input }],
+        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
+    };
+
+    /**
+     *
+     */
+    var MoreMenuComponent = /** @class */ (function (_super) {
+        __extends(MoreMenuComponent, _super);
+        function MoreMenuComponent(element, parent) {
+            var _this = _super.call(this, element, parent) || this;
+            _this.tooltipModel = new pectin.MutableValueModel();
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            _this.faceModelDelegate.setDelegate(chain(_this.tooltipModel).map(function (tooltip) {
+                return {
+                    icon: function () { return 'mat:more_vert'; },
+                    tooltip: function () {
+                        return tooltip;
+                    }
+                };
+            }, { allowNil: true }));
+            return _this;
+        }
+        Object.defineProperty(MoreMenuComponent.prototype, "face", {
+            get: function () {
+                return this.faceModelDelegate.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return MoreMenuComponent;
+    }(AbstractPopupMenuComponent));
+    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              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              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              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    >\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 }
+                    ]
+                },] }
+    ];
+    MoreMenuComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }, { type: i0.Optional }, { type: i0.SkipSelf }] }
+    ]; };
+    MoreMenuComponent.propDecorators = {
+        tooltip: [{ type: i0.Input }]
+    };
+    __decorate([
+        pectin.StoreInValueModel('tooltipModel'),
+        __metadata("design:type", String)
+    ], MoreMenuComponent.prototype, "tooltip", void 0);
+
+    (function (TrackBy) {
+        TrackBy.byIndex = function (data, index) { return index; };
+    })(exports.TrackBy || (exports.TrackBy = {}));
+
     exports.CommandContainer = /** @class */ (function (_super) {
         __extends(CommandContainer, _super);
         function CommandContainer(parent) {
@@ -1064,94 +1278,23 @@
         isHorizontalContainer: [{ type: i0.HostBinding, args: ['class.horizontal-container',] }]
     };
 
-    /**
-     *
-     */
-    var AbstractPopupMenuComponent = /** @class */ (function (_super) {
-        __extends(AbstractPopupMenuComponent, _super);
-        function AbstractPopupMenuComponent(element, parent) {
-            var _this = _super.call(this, element, parent) || this;
-            _this._unorderedChildren = new pectin.MutableListModel();
-            _this.faceModelDelegate = new pectin.DelegatingValueModel();
-            _this.xPosition = 'after';
-            _this.yPosition = 'below';
-            var _c = pectin.Dsl.disposeWith(_this), chain = _c.chain, valueOf = _c.valueOf, before = _c.before, when = _c.when, after = _c.after, observe = _c.observe, switchOn = _c.switchOn;
-            // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
-            _this.faceAdapterModel = chain(_this.faceModelDelegate).map(function (f) { return new exports.CommandFace.Adapter(f); });
-            _this.children = chain(_this._unorderedChildren).sortBy('componentIndex');
-            return _this;
-        }
-        AbstractPopupMenuComponent.prototype.ngAfterContentChecked = function () {
-            // force the list to re-order as the child indicies may have changed.
-            this._unorderedChildren.value = __spread(this._unorderedChildren.value);
-        };
-        Object.defineProperty(AbstractPopupMenuComponent.prototype, "faceAdapter", {
-            get: function () {
-                var _a, _b;
-                if (!this.faceAdapterModel) {
-                    console.error("Somehow faceAdapterModel is nil -- set a break point here and let me know what's going on");
-                }
-                return (_b = (_a = this.faceAdapterModel) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : new exports.CommandFace.Adapter(undefined);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AbstractPopupMenuComponent.prototype.isRoot = function () {
-            return !this.parent;
-        };
-        // @Trace()
-        AbstractPopupMenuComponent.prototype.register = function (component) {
-            var _this = this;
-            this._unorderedChildren.push(component);
-            return pectin.Disposable.disposableThatRuns(function () {
-                _this._unorderedChildren.remove(component);
-            });
-        };
-        AbstractPopupMenuComponent.prototype.onCommandFired = function () {
-            this.triggers.forEach(function (trigger) {
-                if (trigger.menuOpen) {
-                    trigger.closeMenu();
-                }
-            });
-        };
-        AbstractPopupMenuComponent.prototype.getFace = function () {
-            return this.faceAdapter.face;
-        };
-        return AbstractPopupMenuComponent;
-    }(PopupAwareComponent));
-    AbstractPopupMenuComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-abstract-popup-menu',
-                    template: ''
-                },] }
-    ];
-    AbstractPopupMenuComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }] }
-    ]; };
-    AbstractPopupMenuComponent.propDecorators = {
-        xPosition: [{ type: i0.Input }],
-        yPosition: [{ type: i0.Input }],
-        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
-    };
-
-    var PopupMenuRendererComponent = /** @class */ (function (_super) {
-        __extends(PopupMenuRendererComponent, _super);
-        function PopupMenuRendererComponent() {
-            var _this = _super.call(this) || this;
-            _this._childList = new pectin.DelegatingListModel();
-            _this.commandFired = new i0.EventEmitter();
-            _this.TrackBy = exports.TrackBy;
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            // this.children = chain(this.groupViewDataModel).pluckList('children');
-            // this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
-            var faces = chain(_this._childList).map(function (child) {
-                return child.getFace();
-            }).rejectNil();
-            var icons = faces.select(function (face) { return !!exports.CommandFace.getIconOf(face); });
-            var iconCount = icons.count();
-            var totalFaces = faces.count();
-            _this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), totalFaces.doesNotEqual(iconCount)).areTruthy();
+    var PopupMenuRendererComponent = /** @class */ (function (_super) {
+        __extends(PopupMenuRendererComponent, _super);
+        function PopupMenuRendererComponent() {
+            var _this = _super.call(this) || this;
+            _this._childList = new pectin.DelegatingListModel();
+            _this.commandFired = new i0.EventEmitter();
+            _this.TrackBy = exports.TrackBy;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            // this.children = chain(this.groupViewDataModel).pluckList('children');
+            // this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
+            var faces = chain(_this._childList).map(function (child) {
+                return child.getFace();
+            }).rejectNil();
+            var icons = faces.select(function (face) { return !!exports.CommandFace.getIconOf(face); });
+            var iconCount = icons.count();
+            var totalFaces = faces.count();
+            _this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), totalFaces.doesNotEqual(iconCount)).areTruthy();
             return _this;
         }
         Object.defineProperty(PopupMenuRendererComponent.prototype, "parent", {
@@ -1227,149 +1370,6 @@
         triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
     };
 
-    /**
-     * Custom CSS:
-     * @example
-     * root: { // globally
-     *   --aup-command-face-icon-gap: 8px;
-     * }
-     * aup-command-face { // per instance
-     *   --icon-gap: 4px;
-     * }
-     */
-    var CommandFaceComponent = /** @class */ (function (_super) {
-        __extends(CommandFaceComponent, _super);
-        function CommandFaceComponent() {
-            var _this = _super.call(this) || this;
-            _this.facesModel = new pectin.MutableListModel();
-            _this.ignoreIcon = false;
-            _this.ignoreText = false;
-            _this.includeMissingIconInLayout = false;
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.faceAdapters = chain(_this.facesModel).map(function (face) { return new exports.CommandFace.Adapter(face); });
-            var activeFace = _this.faceAdapters.first();
-            _this.activeIcon = activeFace.pluck("icon");
-            _this.activeColor = activeFace.pluck("color");
-            return _this;
-        }
-        Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
-            get: function () {
-                return this.includeMissingIconInLayout && !this.activeIcon.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CommandFaceComponent.prototype.ngOnInit = function () {
-        };
-        CommandFaceComponent.prototype.shouldIncludeIcon = function (face) {
-            return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
-        };
-        CommandFaceComponent.prototype.hasIconStart = function (face) {
-            return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === exports.CommandFace.Position.START);
-        };
-        CommandFaceComponent.prototype.hasIconEnd = function (face) {
-            return this.shouldIncludeIcon(face) && face.iconPosition === exports.CommandFace.Position.END;
-        };
-        Object.defineProperty(CommandFaceComponent.prototype, "color", {
-            get: function () {
-                return this.activeColor.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return CommandFaceComponent;
-    }(DisposableComponent));
-    CommandFaceComponent.decorators = [
-        { type: i0.Component, args: [{
-                    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:-ms-inline-grid;display:inline-grid}aup-command-face>.face-container{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:inline-flex;flex-direction:row;grid-column:1;grid-row:1}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}"]
-                },] }
-    ];
-    CommandFaceComponent.ctorParameters = function () { return []; };
-    CommandFaceComponent.propDecorators = {
-        _rawFaces: [{ type: i0.Input, args: ['faces',] }],
-        ignoreIcon: [{ type: i0.Input }],
-        ignoreText: [{ type: i0.Input }],
-        includeMissingIconInLayout: [{ type: i0.Input }],
-        requiresMissingIconInLayout: [{ type: i0.HostBinding, args: ['class.hide-icon',] }],
-        color: [{ type: i0.HostBinding, args: ['attr.color',] }]
-    };
-    __decorate([
-        pectin.StoreInListModel('facesModel'),
-        __metadata("design:type", Array)
-    ], CommandFaceComponent.prototype, "_rawFaces", void 0);
-
-    /**
-     *
-     */
-    var FlexComponent = /** @class */ (function (_super) {
-        __extends(FlexComponent, _super);
-        function FlexComponent() {
-            return _super.call(this) || this;
-        }
-        FlexComponent.prototype.ngOnInit = function () {
-        };
-        return FlexComponent;
-    }(DisposableComponent));
-    FlexComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-flex',
-                    template: ""
-                },] }
-    ];
-    FlexComponent.ctorParameters = function () { return []; };
-
-    /**
-     *
-     */
-    var MoreMenuComponent = /** @class */ (function (_super) {
-        __extends(MoreMenuComponent, _super);
-        function MoreMenuComponent(element, parent) {
-            var _this = _super.call(this, element, parent) || this;
-            _this.tooltipModel = new pectin.MutableValueModel();
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
-            _this.faceModelDelegate.setDelegate(chain(_this.tooltipModel).map(function (tooltip) {
-                return {
-                    icon: function () { return 'mat:more_vert'; },
-                    tooltip: function () {
-                        return tooltip;
-                    }
-                };
-            }, { allowNil: true }));
-            return _this;
-        }
-        Object.defineProperty(MoreMenuComponent.prototype, "face", {
-            get: function () {
-                return this.faceModelDelegate.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return MoreMenuComponent;
-    }(AbstractPopupMenuComponent));
-    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              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              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              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    >\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 }
-                    ]
-                },] }
-    ];
-    MoreMenuComponent.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [POPUP_CONTAINER,] }, { type: i0.Optional }, { type: i0.SkipSelf }] }
-    ]; };
-    MoreMenuComponent.propDecorators = {
-        tooltip: [{ type: i0.Input }]
-    };
-    __decorate([
-        pectin.StoreInValueModel('tooltipModel'),
-        __metadata("design:type", String)
-    ], MoreMenuComponent.prototype, "tooltip", void 0);
-
     /**
      *
      */
@@ -2538,14 +2538,17 @@
     var ɵ0 = noop;
     var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
     var ColumnModel = /** @class */ (function () {
-        function ColumnModel(columnId, defaults) {
+        function ColumnModel(columnId, textPropertiesProvider) {
             this.columnId = columnId;
-            this.defaults = defaults;
+            this.textPropertiesProvider = textPropertiesProvider;
             this._selectRowOnClick = undefined;
+            this.installHeaderRenderer();
+        }
+        ColumnModel.prototype.installHeaderRenderer = function () {
             this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
                 component.headerText = column.getHeaderText();
             });
-        }
+        };
         ColumnModel.prototype.getHeaderText = function () {
             var _a;
             return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
@@ -2554,7 +2557,7 @@
             return this.columnId;
         };
         ColumnModel.prototype.getColumnTextProperties = function () {
-            return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
+            return this._columnTextProperties || this.textPropertiesProvider();
         };
         ColumnModel.prototype.textProperties = function (columnTextProperties) {
             this._columnTextProperties = columnTextProperties;
@@ -2892,7 +2895,6 @@
         return EditSession;
     }(pectin.GarbageCollector));
 
-    var TableModel_1;
     // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
     // export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
     var RowClass = /** @class */ (function () {
@@ -2902,148 +2904,85 @@
         }
         return RowClass;
     }());
-    /**
-     * Example:
-     * @example
-     * const model = TableModel.fromList(heroList, table => {
-     *   table.pluck("firstName");
-     *   table.pluck("lastName");
-     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
-     * });
-     *
-     * Editable tables
-     * @example
-     * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
-     *   if (form.validate()) {
-     *     // normal form save stuff
-     *     return true; // finish editing
-     *   }
-     *   return false; // continue editiing
-     * }
-     * const colorsNames: ListModel<string> = ...;
-     * const model = TableModel.fromList(heroList, table => {
-     *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
-     *   table.pluck("lastName").cellEditor(StringInputComponent, {
-     *     validators: [Validator.present("We need a last name")]
-     *   });
-     *   table.pluck("age").cellEditor(NumberInputComponent);
-     *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
-     *     initialiseComponent(component: SelectInputComponent) {
-     *       selectInput.optionsModel = colorsNames; // <- initialise our component
-     *     }
-     *   });
-     *   table.addEditControls(saveCommand); // <- required to enable editing
-     * });
-     *
-     * Selection models
-     * @example
-     * const model = TableModel.fromList(heroList, table => {
-     *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
-     *   table.pluck("firstName");
-     *   table.pluck("lastName");
-     * });
-     *
-     * Custom cell renderers and editors
-     * @example
-     * const model = TableModel.fromList(heroList, table => {
-     *   table.pluck("favoriteColor")
-     *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
-     *        // configure your component with what ever you need.
-     *      });
-     *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
-     *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
-     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
-     * });
-     *
-     * I18n
-     * @example
-     * [table.yml]
-     * table:
-     *   columns(ColumnTextProperties[]):
-     *      firstName:
-     *         headerText: "First Name"
-     *      fullName:
-     *         headerText: "Full Name"
-     *
-     * const model = TableModel.fromList(heroList, table => {
-     *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
-     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
-     *
-     *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
-     * });
-     */
-    exports.TableModel = TableModel_1 = /** @class */ (function () {
-        function TableModel(sourceOfTruth) {
-            var _this = this;
-            this.sourceOfTruth = sourceOfTruth;
-            this._garbage = new pectin.GarbageCollector();
-            this._columns = new pectin.MutableListModel();
-            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) {
+    exports.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._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._garbage), 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.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._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);
+            return _this;
         }
-        TableModel.fromList = function (sourceOfTruth, builder) {
-            var model = new TableModel_1(sourceOfTruth);
-            builder(model);
-            return model;
-        };
-        Object.defineProperty(TableModel.prototype, "rowsBeingEdited", {
+        Object.defineProperty(AbstractTableModel.prototype, "rowsBeingEdited", {
             get: function () {
                 return this._rowsBeingEdited.readonly;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TableModel.prototype, "columns", {
+        Object.defineProperty(AbstractTableModel.prototype, "columns", {
             get: function () {
                 return this._columns.readonly;
             },
             enumerable: false,
             configurable: true
         });
-        TableModel.prototype.pluck = function (property, options) {
-            return this.addColumn(new PropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
+        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); }));
         };
-        TableModel.prototype.pluckList = function (property, options) {
-            return this.addColumn(new ListPropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
+        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); }));
         };
-        TableModel.prototype.addSelectionColumn = function (selectionModel) {
+        AbstractTableModel.prototype._addSelectionColumn = function (selectionModel) {
+            var _this = this;
             pectin.assert.isNil(this.selectionColumnModel);
-            this.selectionColumnModel = new SelectionColumnModel('selection', this, selectionModel);
+            var columnId = 'selection-column';
+            this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
             return this.addColumn(this.selectionColumnModel);
         };
-        TableModel.prototype.addEditControls = function (saveCommand) {
+        AbstractTableModel.prototype.addEditControls = function (saveCommand) {
+            var _this = this;
             this.saveCommand = saveCommand;
-            return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+            var columnId = 'editControls';
+            return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, function () { return _this.getColumnTextProperties(columnId); }));
         };
-        TableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
-            return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+        AbstractTableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
+            var _this = this;
+            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, dataAccessor));
         };
-        TableModel.prototype.addComponentColumn = function (columnId, component, onComponentInitOrOptions) {
-            return this.addColumn(new CustomValueColumnModel(columnId, this, function (row) { return row; })).cellRenderer(component, onComponentInitOrOptions);
+        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);
         };
-        TableModel.prototype.addTemplateColumn = function (columnId) {
-            return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+        AbstractTableModel.prototype.addTemplateColumn = function (columnId) {
+            var _this = this;
+            return this.addColumn(new CustomTemplateColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }));
         };
-        TableModel.prototype.addRowClass = function (className, predicate) {
+        AbstractTableModel.prototype.addRowClass = function (className, predicate) {
             this.rowClassNamePredicates.push(new RowClass(className, predicate));
         };
-        TableModel.prototype.getRowClasses = function (row) {
+        AbstractTableModel.prototype.getRowClasses = function (row) {
             var classNames = [];
             this.rowClassNamePredicates.forEach(function (i) {
                 if (i.matches(row)) {
@@ -3052,11 +2991,11 @@
             });
             return classNames;
         };
-        TableModel.prototype.useFormFactory = function (factory) {
+        AbstractTableModel.prototype.useFormFactory = function (factory) {
             this._createForm = factory;
             return this;
         };
-        TableModel.prototype.addColumn = function (column) {
+        AbstractTableModel.prototype.addColumn = function (column) {
             if (this._columnsById.get(column.columnId)) {
                 pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
             }
@@ -3065,16 +3004,24 @@
             }
             return column;
         };
+        Object.defineProperty(AbstractTableModel.prototype, "selectionModel", {
+            get: function () {
+                var _a;
+                return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
+            },
+            enumerable: false,
+            configurable: true
+        });
         // removeColumn(column: ColumnModel<Row>) {
         //
         // }
-        TableModel.prototype.columnTextProperties = function (columnTextProperties) {
+        AbstractTableModel.prototype.columnTextProperties = function (columnTextProperties) {
             this._columnTextPropertiesLookup = columnTextProperties;
         };
-        TableModel.prototype.getColumnTextProperties = function (column) {
-            return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+        AbstractTableModel.prototype.getColumnTextProperties = function (columnId) {
+            return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[columnId] : undefined;
         };
-        TableModel.prototype.startEditSession = function (row) {
+        AbstractTableModel.prototype.startEditSession = function (row) {
             var _this = this;
             var rowId = this.identityOf(row);
             if (this._rowsBeingEdited.query().indexOf(row) > -1) {
@@ -3094,10 +3041,10 @@
                 return editSession_1;
             }
         };
-        TableModel.prototype.getEditSessionFor = function (row) {
+        AbstractTableModel.prototype.getEditSessionFor = function (row) {
             return this._editorSessionByRowId.get(this.identityOf(row));
         };
-        TableModel.prototype.cancelAllEditorSessions = function () {
+        AbstractTableModel.prototype.cancelAllEditorSessions = function () {
             var _this = this;
             this._editorSessions.runInTransaction(function (draft) {
                 _this._rowsBeingEdited.runInTransaction(function () {
@@ -3105,47 +3052,41 @@
                 });
             });
         };
-        TableModel.prototype.isRowSelectionEnabledFor = function (column) {
+        AbstractTableModel.prototype.isRowSelectionEnabledFor = function (column) {
             var _a;
             return this.selectionColumnModel && ((_a = column.isRowSelectionEnabled()) !== null && _a !== void 0 ? _a : this.isRowSelectionEnabledByDefault());
         };
-        TableModel.prototype.isRowSelectionEnabledByDefault = function () {
+        AbstractTableModel.prototype.isRowSelectionEnabledByDefault = function () {
             return this.selectionColumnModel && this.selectionColumnModel.isRowSelectionEnabledByDefault();
         };
-        TableModel.prototype.isRowSelectionEnabled = function () {
+        AbstractTableModel.prototype.isRowSelectionEnabled = function () {
             return this.hasColumnsWithRowSelectionExplicitlyEnabled.value || this.isRowSelectionEnabledByDefault();
         };
-        TableModel.prototype.isHoverEnabled = function () {
+        AbstractTableModel.prototype.isHoverEnabled = function () {
             return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
         };
-        TableModel.prototype.isCursorEnabled = function (column) {
-            // console.log({
-            //   column: column.columnId,
-            //   rowSelectionEnabled: this.isRowSelectionEnabledFor(column),
-            //   hasRowListeners: this.rowClickListeners.listenerCount > 0
-            // });
+        AbstractTableModel.prototype.isCursorEnabled = function (column) {
             return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
         };
-        TableModel.prototype.selectRow = function (row) {
+        AbstractTableModel.prototype.selectRow = function (row) {
             var _a;
             (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
         };
-        TableModel.prototype.onRowClicked = function (callback) {
+        AbstractTableModel.prototype.onRowClicked = function (callback) {
             return this.rowClickListeners.add(callback);
         };
-        // @Trace()
-        TableModel.prototype._notifyCellClicked = function (columnModel, row) {
+        AbstractTableModel.prototype._notifyCellClicked = function (columnModel, row) {
             if (this.isRowSelectionEnabledFor(columnModel)) {
                 this.selectRow(row);
             }
             this.rowClickListeners.fire(function (l) { return l(row); });
         };
-        return TableModel;
-    }());
-    exports.TableModel = TableModel_1 = __decorate([
+        return AbstractTableModel;
+    }(pectin.GarbageCollector));
+    exports.AbstractTableModel = __decorate([
         pectin.TrackExternal.Strategy(new pectin.TrackExternal.OneTimeBinding()),
         __metadata("design:paramtypes", [pectin.ListModel])
-    ], exports.TableModel);
+    ], exports.AbstractTableModel);
 
     /**
      * Create your model:
@@ -3203,7 +3144,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-table',
                     template: "<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\" matColumnDef=\"{{column.columnId}}\">\n    <th mat-header-cell *matHeaderCellDef>\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\n      ></aup-table-header-cell-renderer>\n    </th>\n    <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\" [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\">\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.first-column]=\"first\"\n                               [class.last-column]=\"last\"\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()\" [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n  ></tr>\n\n</table>\n",
-                    styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{flex:1;width:100%}"]
+                    styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{flex:1;width:100%}.mat-column-selection-column{width:1px!important}"]
                 },] }
     ];
     TableComponent.ctorParameters = function () { return []; };
@@ -3212,7 +3153,7 @@
     };
     __decorate([
         pectin.TrackExternal(),
-        __metadata("design:type", exports.TableModel)
+        __metadata("design:type", exports.AbstractTableModel)
     ], TableComponent.prototype, "tableModel", void 0);
 
     var ColumnTemplateDirective = /** @class */ (function () {
@@ -3264,148 +3205,792 @@
             this.firstEditableColumn = chain(this.tableModel.firstEditableColumn).equals(this.column); // this would break if the column changed.
             this.column.attachCell(this);
         };
-        TableCellRendererComponent.prototype.hasActiveEditor = function () {
-            return !!this.editSession && !!this.column.hasEditorPortal();
+        TableCellRendererComponent.prototype.hasActiveEditor = function () {
+            return !!this.editSession && !!this.column.hasEditorPortal();
+        };
+        TableCellRendererComponent.prototype.initialiseRenderer = function (instance) {
+            this.column.onRendererAttached(this, instance);
+        };
+        TableCellRendererComponent.prototype.initialiseEditor = function (instance) {
+            var _this = this;
+            this.column.onEditorAttached(this, instance);
+            if (this.firstEditableColumn.value) {
+                // @see https://github.com/angular/components/issues/12070
+                setTimeout(function () { return _this.tryAndFocusEditor(instance); });
+            }
+        };
+        TableCellRendererComponent.prototype.tryAndFocusEditor = function (editor) {
+            var _a;
+            if (editor.requestFocus) {
+                editor.requestFocus();
+            }
+            else {
+                var model = (editor['valueModel'] || editor['listModel']);
+                (_a = model === null || model === void 0 ? void 0 : model.focusContext) === null || _a === void 0 ? void 0 : _a.requestFocus();
+            }
+        };
+        // @Trace()
+        TableCellRendererComponent.prototype.ngOnChanges = function (changes) {
+            this.column.updatePortalContent(this);
+        };
+        TableCellRendererComponent.prototype.getRendererPortal = function () {
+            return this[CELL_RENDERER_PORTAL];
+        };
+        TableCellRendererComponent.prototype.getEditorPortal = function () {
+            return this[CELL_EDITOR_PORTAL];
+        };
+        TableCellRendererComponent.prototype.getRowData = function () {
+            return {
+                row: this.row,
+                editSession: this.editSession,
+                editRowCommand: this.editRowCommand
+            };
+        };
+        return TableCellRendererComponent;
+    }(DisposableComponent));
+    TableCellRendererComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-table-cell-renderer',
+                    template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
+                    styles: [""]
+                },] }
+    ];
+    TableCellRendererComponent.ctorParameters = function () { return []; };
+    TableCellRendererComponent.propDecorators = {
+        row: [{ type: i0.Input }],
+        column: [{ type: i0.Input }],
+        editSession: [{ type: i0.Input }],
+        tableModel: [{ type: i0.Input }],
+        defaultClassNames: [{ type: i0.HostBinding, args: ['class',] }],
+        fillCell: [{ type: i0.HostBinding, args: ['class.fillCell',] }],
+        padChild: [{ type: i0.HostBinding, args: ['class.padChild',] }]
+    };
+
+    var TableHeaderCellRendererComponent = /** @class */ (function () {
+        function TableHeaderCellRendererComponent() {
+            this.defaultClassNames = 'aup-header-cell-renderer';
+        }
+        TableHeaderCellRendererComponent.prototype.ngOnInit = function () {
+            this.column.attachHeaderCell(this);
+        };
+        // @Trace()
+        TableHeaderCellRendererComponent.prototype.initialiseHeader = function (instance) {
+            this.column.onHeaderAttached(this, instance);
+        };
+        TableHeaderCellRendererComponent.prototype.getPortal = function () {
+            return this[HEADER_CELL_RENDERER_PORTAL];
+        };
+        return TableHeaderCellRendererComponent;
+    }());
+    TableHeaderCellRendererComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-table-header-cell-renderer',
+                    template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
+                    styles: [":host{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center}"]
+                },] }
+    ];
+    TableHeaderCellRendererComponent.ctorParameters = function () { return []; };
+    TableHeaderCellRendererComponent.propDecorators = {
+        column: [{ type: i0.Input }],
+        defaultClassNames: [{ type: i0.HostBinding, args: ['class',] }]
+    };
+
+    var MenuItemData = /** @class */ (function () {
+        function MenuItemData(factory, face) {
+            this.factory = factory;
+            this.face = face;
+        }
+        return MenuItemData;
+    }());
+    /**
+     *
+     */
+    var TableRowMenuComponent = /** @class */ (function (_super) {
+        __extends(TableRowMenuComponent, _super);
+        function TableRowMenuComponent() {
+            var _this = _super.call(this) || this;
+            _this.actions = [];
+            _this.moreActions = [];
+            return _this;
+        }
+        TableRowMenuComponent.prototype.registerAction = function (commandFactory, properties) {
+            this.actions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.registerMoreAction = function (commandFactory, properties) {
+            this.moreActions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.ngOnInit = function () {
+        };
+        TableRowMenuComponent.prototype.createMoreMenuCommand = function (item, value) {
+            var _this = this;
+            var when = pectin.Dsl.disposeWith(this).when;
+            var command = item.factory.create(value);
+            when(command.busy).becomesFalsey(function () {
+                _this.closeMoreMenu();
+            });
+            return command;
+        };
+        TableRowMenuComponent.prototype.closeMoreMenu = function () {
+            this.menu.closeMenu();
+        };
+        return TableRowMenuComponent;
+    }(DisposableComponent));
+    TableRowMenuComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-table-row-menu',
+                    template: "\n      <aup-tool-bar>\n          <aup-command *ngFor=\"let action of actions\" [command]=\"action.factory.create(value)\"\n                       [face]=\"action.face\"></aup-command>\n      </aup-tool-bar>\n      <ng-container *ngIf=\"moreActions.length > 0\">\n          <aup-more-menu>\n              <aup-command *ngFor=\"let action of moreActions\" [command]=\"action.factory.create(value)\"\n                           [face]=\"action.face\"></aup-command>\n          </aup-more-menu>\n      </ng-container>\n  ",
+                    styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+                },] }
+    ];
+    TableRowMenuComponent.ctorParameters = function () { return []; };
+    TableRowMenuComponent.propDecorators = {
+        value: [{ type: i0.Input }],
+        menu: [{ type: i0.ViewChild, args: [menu.MatMenuTrigger,] }]
+    };
+
+    var SVG_HEIGHT = 60;
+    exports.TreeInheritanceIconComponent = /** @class */ (function () {
+        function TreeInheritanceIconComponent() {
+            this.pixelWidth = 24;
+            this.pixelHeight = 48;
+        }
+        Object.defineProperty(TreeInheritanceIconComponent.prototype, "heightOffset", {
+            get: function () {
+                return SVG_HEIGHT - this.pixelHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TreeInheritanceIconComponent.prototype, "viewBox", {
+            get: function () {
+                return 0 + " " + this.heightOffset + " " + this.pixelWidth + " " + (this.pixelHeight - this.heightOffset);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TreeInheritanceIconComponent.prototype.hasHead = function () {
+            return TreeInheritanceIconComponent.HAS_HEAD.includes(this.type);
+        };
+        TreeInheritanceIconComponent.prototype.hasTerminal = function () {
+            return TreeInheritanceIconComponent.HAS_TERMINAL.includes(this.type);
+        };
+        TreeInheritanceIconComponent.prototype.hasLeadIn = function () {
+            return TreeInheritanceIconComponent.HAS_LEAD_IN.includes(this.type);
+        };
+        TreeInheritanceIconComponent.prototype.hasTail = function () {
+            return TreeInheritanceIconComponent.HAS_TAIL.includes(this.type);
+        };
+        return TreeInheritanceIconComponent;
+    }());
+    exports.TreeInheritanceIconComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-tree-inheritance-icon',
+                    template: "<svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"pixelWidth\" [attr.height]=\"pixelHeight\" [attr.viewBox]=\"viewBox\">\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect *ngIf=\"hasHead()\"  width=\"1\" height=\"32.5\" x=\"11.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTail()\" width=\"1\" height=\"32.5\" x=\"11.5\" y=\"31.5\" fill=\"currentColor\"/>\n\n    <rect *ngIf=\"hasLeadIn()\" width=\"12\" height=\"1\" y=\"31.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTerminal()\" width=\"12\" height=\"1\" x=\"12\" y=\"31.5\" fill=\"currentColor\"/>\n  </g>\n</svg>\n",
+                    styles: [":host{color:inherit;position:relative}svg{color:var(--line-color);display:block}"]
+                },] }
+    ];
+    exports.TreeInheritanceIconComponent.ctorParameters = function () { return []; };
+    exports.TreeInheritanceIconComponent.propDecorators = {
+        type: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class",] }],
+        pixelWidth: [{ type: i0.Input }],
+        pixelHeight: [{ type: i0.Input }]
+    };
+    (function (TreeInheritanceIconComponent) {
+        TreeInheritanceIconComponent.Type = typescriptStringEnums.Enum({
+            ICON_BLANK: 'blank',
+            ICON_PARENT: 'parent',
+            ICON_INHERITED_TERMINAL: 'inherited_terminal',
+            ICON_INHERITED_THROUGH_TERMINAL: 'inherited_through_terminal',
+            ICON_THROUGH: 'through' // |
+        });
+        TreeInheritanceIconComponent.HAS_LEAD_IN = [
+            TreeInheritanceIconComponent.Type.ICON_PARENT
+        ];
+        TreeInheritanceIconComponent.HAS_TERMINAL = [
+            TreeInheritanceIconComponent.Type.ICON_INHERITED_TERMINAL,
+            TreeInheritanceIconComponent.Type.ICON_INHERITED_THROUGH_TERMINAL,
+            TreeInheritanceIconComponent.Type.ICON_PARENT
+        ];
+        TreeInheritanceIconComponent.HAS_HEAD = [
+            TreeInheritanceIconComponent.Type.ICON_THROUGH,
+            TreeInheritanceIconComponent.Type.ICON_INHERITED_TERMINAL,
+            TreeInheritanceIconComponent.Type.ICON_INHERITED_THROUGH_TERMINAL
+        ];
+        TreeInheritanceIconComponent.HAS_TAIL = [
+            TreeInheritanceIconComponent.Type.ICON_PARENT,
+            TreeInheritanceIconComponent.Type.ICON_THROUGH,
+            TreeInheritanceIconComponent.Type.ICON_INHERITED_THROUGH_TERMINAL
+        ];
+    })(exports.TreeInheritanceIconComponent || (exports.TreeInheritanceIconComponent = {}));
+
+    var TreeLabelCellRendererComponent = /** @class */ (function (_super) {
+        __extends(TreeLabelCellRendererComponent, _super);
+        function TreeLabelCellRendererComponent() {
+            var _this = _super.call(this) || this;
+            _this.iconTypes = [];
+            _this.nodeModel = new pectin.MutableValueModel();
+            var chain = pectin.Dsl.disposeWith(_this).chain;
+            _this.iconList = chain(_this.nodeModel).mapToList(function (node) {
+                var icons = node.ancestors().slice(1).map(function (ancestor) {
+                    return ancestor.isLastChild() ? exports.TreeInheritanceIconComponent.Type.ICON_BLANK : exports.TreeInheritanceIconComponent.Type.ICON_THROUGH;
+                });
+                if (!node.isRoot()) {
+                    icons.push(node.isLastChild() ? exports.TreeInheritanceIconComponent.Type.ICON_INHERITED_TERMINAL : exports.TreeInheritanceIconComponent.Type.ICON_INHERITED_THROUGH_TERMINAL);
+                }
+                return icons;
+            });
+            return _this;
+        }
+        TreeLabelCellRendererComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var chain = pectin.Dsl.disposeWith(this).chain;
+            this.canExpand = chain(this.nodeModel).map(function (node) {
+                return node.hasChildren() && _this.expansionModel.isCollapsed(node);
+            }, { dependsOn: this.expansionModel.isExpandedPredicate });
+            this.canCollapse = chain(this.nodeModel).map(function (node) {
+                return node.hasChildren() && !_this.expansionModel.isCollapsed(node);
+            }, { dependsOn: this.expansionModel.isExpandedPredicate });
+            this.iconModel = chain(this.nodeModel).map(function (node) {
+                return _this.node.isLeaf() ? undefined : _this.iconFactory(node, _this.expansionModel.isExpanded(_this.node));
+            }, { dependsOn: this.expansionModel.isExpandedPredicate });
+        };
+        Object.defineProperty(TreeLabelCellRendererComponent.prototype, "isRoot", {
+            get: function () {
+                return this.node.isRoot();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TreeLabelCellRendererComponent.prototype, "isLeaf", {
+            get: function () {
+                return this.node.isLeaf();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TreeLabelCellRendererComponent.prototype, "node", {
+            get: function () {
+                return this.nodeModel.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // @Trace()
+        TreeLabelCellRendererComponent.prototype.expandOrCollapse = function (node) {
+            this.expansionModel.isCollapsed(node) ? this.expansionModel.expand(node) : this.expansionModel.collapse(node);
+        };
+        return TreeLabelCellRendererComponent;
+    }(DisposableComponent));
+    TreeLabelCellRendererComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-tree-label-cell-renderer',
+                    template: "<div class=\"tree-icons\">\n  <aup-tree-inheritance-icon *ngFor=\"let iconClass of iconList.value\" [type]=\"iconClass\"></aup-tree-inheritance-icon>\n  <aup-icon *ngIf=\"iconModel.value\"\n            [icon]=\"iconModel.value\"\n            [class.clickable]=\"canExpand.value || canCollapse.value\"\n            (click)=\"expandOrCollapse(node)\" ></aup-icon>\n</div>\n<div class=\"label\">{{label}}</div>\n",
+                    styles: [":host{--line-color:#ddd;--node-color:#999;align-items:stretch;display:inline-flex;flex-direction:row}:host div.label{align-items:center;display:flex;flex-direction:row;padding-left:6px;white-space:nowrap}:host div.tree-icons{-ms-grid-rows:1fr;align-items:stretch;display:-ms-grid;display:grid;grid-auto-columns:auto;grid-auto-flow:column;grid-template-rows:1fr;justify-content:stretch}:host div.tree-icons aup-icon{-ms-grid-row-align:center;align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-icon,:host div.tree-icons aup-tree-inheritance-icon{margin-left:4px}"]
+                },] }
+    ];
+    TreeLabelCellRendererComponent.ctorParameters = function () { return []; };
+    TreeLabelCellRendererComponent.propDecorators = {
+        value: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        iconFactory: [{ type: i0.Input }],
+        expansionModel: [{ type: i0.Input }],
+        isRoot: [{ type: i0.HostBinding, args: ['class.root',] }],
+        isLeaf: [{ type: i0.HostBinding, args: ['class.leaf',] }]
+    };
+    __decorate([
+        pectin.StoreInValueModel('nodeModel'),
+        __metadata("design:type", Object)
+    ], TreeLabelCellRendererComponent.prototype, "value", void 0);
+
+    var TreeExpansionModel = /** @class */ (function () {
+        function TreeExpansionModel(identityOf) {
+            this.identityOf = identityOf;
+            this.collapsedIds = new Set();
+            this._isExpandedPredicate = new pectin.MutableValueModel(function () { return true; });
+            this.updatePredicate();
+        }
+        Object.defineProperty(TreeExpansionModel.prototype, "isExpandedPredicate", {
+            get: function () {
+                return this._isExpandedPredicate.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // @Trace()
+        TreeExpansionModel.prototype.expand = function (node) {
+            if (this.isCollapsed(node)) {
+                this.collapsedIds.delete(this.identityOf(node.node));
+                this.updatePredicate();
+            }
+        };
+        // @Trace()
+        TreeExpansionModel.prototype.collapse = function (node) {
+            if (!this.isCollapsed(node)) {
+                this.collapsedIds.add(this.identityOf(node.node));
+                this.updatePredicate();
+            }
+        };
+        TreeExpansionModel.prototype.canExpand = function (node) {
+            return node.hasChildren() && this.isCollapsed(node);
+        };
+        TreeExpansionModel.prototype.canCollapse = function (node) {
+            return node.hasChildren() && !this.isCollapsed(node);
+        };
+        TreeExpansionModel.prototype.isCollapsed = function (node) {
+            return this.collapsedIds.has(this.identityOf(node.node));
+        };
+        TreeExpansionModel.prototype.isExpanded = function (node) {
+            return !this.isCollapsed(node);
+        };
+        TreeExpansionModel.prototype.ensureAncestorsAndSelfVisible = function (node) {
+            var _this = this;
+            node.ancestors()
+                .map(function (a) { return _this.identityOf(node.node); })
+                .forEach(function (id) { return _this.collapsedIds.delete(id); });
+            this.updatePredicate();
+        };
+        TreeExpansionModel.prototype.updatePredicate = function () {
+            var _this = this;
+            this._isExpandedPredicate.value = function (node) { return !_this.collapsedIds.has(_this.identityOf(node.node)); };
+        };
+        return TreeExpansionModel;
+    }());
+
+    var TreeLabelColumnModel = /** @class */ (function (_super) {
+        __extends(TreeLabelColumnModel, _super);
+        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.cellRenderer(TreeLabelCellRendererComponent);
+            return _this;
+        }
+        TreeLabelColumnModel.prototype.pluck = function (property) {
+            this.labelProperty = property;
+        };
+        TreeLabelColumnModel.prototype.addIcon = function (factory) {
+            this.iconFactory = factory;
+        };
+        TreeLabelColumnModel.prototype.cellRenderer = function (componentType) {
+            var _this = this;
+            this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, function (component, rowData, firstTime) {
+                if (firstTime) {
+                    component.expansionModel = _this.expansionModel;
+                }
+                component.value = rowData.row;
+                component.label = ___default['default'].isNil(_this.labelProperty) ? undefined : rowData.row[_this.labelProperty];
+                component.iconFactory = _this.iconFactory;
+            }));
+            return this;
+        };
+        TreeLabelColumnModel.prototype.selectRowOnClick = function (selectOnRowClick) {
+            return _super.prototype.selectRowOnClick.call(this, selectOnRowClick);
+        };
+        return TreeLabelColumnModel;
+    }(ColumnModel));
+
+    exports.SelfAndDescendantsVisitor = /** @class */ (function () {
+        function SelfAndDescendantsVisitor() {
+        }
+        SelfAndDescendantsVisitor.prototype.visit = function (it) {
+            this.onVisit(it);
+            if (this.shouldVisitChildrenOf(it)) {
+                it.visitChildren(this);
+            }
+        };
+        SelfAndDescendantsVisitor.prototype.shouldVisitChildrenOf = function (it) {
+            return true;
+        };
+        return SelfAndDescendantsVisitor;
+    }());
+    (function (SelfAndDescendantsVisitor) {
+        var Each = /** @class */ (function (_super) {
+            __extends(Each, _super);
+            function Each(callback) {
+                var _this = _super.call(this) || this;
+                _this.callback = callback;
+                return _this;
+            }
+            Each.prototype.onVisit = function (it) {
+                this.callback(it);
+            };
+            return Each;
+        }(SelfAndDescendantsVisitor));
+        SelfAndDescendantsVisitor.Each = Each;
+    })(exports.SelfAndDescendantsVisitor || (exports.SelfAndDescendantsVisitor = {}));
+
+    var DecoratedTreeNodeMixin = /** @class */ (function () {
+        function DecoratedTreeNodeMixin(parent, node) {
+            this.parent = parent;
+            this.node = node;
+        }
+        Object.defineProperty(DecoratedTreeNodeMixin.prototype, "decoratedSelf", {
+            get: function () {
+                var _this = this;
+                return this.memoize("decoratedSelf", function () {
+                    return _this.parent ? _this.parent.children.find(function (child) { return child.node === _this.node; }) : exports.DecoratedTreeNode.createRoot(_this.node);
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DecoratedTreeNodeMixin.prototype, "children", {
+            get: function () {
+                var _this = this;
+                return this.memoize("children", function () {
+                    return _this.node.children ? _this.node.children.map(function (child) {
+                        return typescriptUtilities.Mixin.createProxy(child, new DecoratedTreeNodeMixin(_this.decoratedSelf, child));
+                    }) : [];
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DecoratedTreeNodeMixin.prototype.descendants = function () {
+            var _this = this;
+            return this.memoize("descendants", function () {
+                var result = [];
+                _this.visitDescendants(function (child) { return result.push(child); });
+                return result;
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.selfAndDescendants = function () {
+            var _this = this;
+            return this.memoize("selfAndDescendants", function () {
+                var result = [];
+                _this.visitSelfAndDescendants(function (child) { return result.push(child); });
+                return result;
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.siblingsBefore = function () {
+            var _this = this;
+            return this.memoize('siblingsBefore', function () {
+                if (_this.parent) {
+                    return _this.parent.children.slice(0, _this.myIndex());
+                }
+                else {
+                    return [];
+                }
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.siblingsAfter = function () {
+            var _this = this;
+            return this.memoize('siblingsAfter', function () {
+                if (_this.parent) {
+                    return _this.parent.children.slice(1 + _this.myIndex());
+                }
+                else {
+                    return [];
+                }
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.siblings = function () {
+            var _this = this;
+            return this.memoize('siblings', function () { return [].concat(_this.siblingsBefore(), _this.siblingsAfter()); });
+        };
+        DecoratedTreeNodeMixin.prototype.isFirstChild = function () {
+            var _this = this;
+            return this.memoize('isFirstChild', function () { return _this.parent ? _this.myIndex() === 0 : false; });
+        };
+        DecoratedTreeNodeMixin.prototype.myIndex = function () {
+            var _this = this;
+            return this.memoize('myIndex', function () {
+                var myIndex = _this.parent.children.findIndex(function (child) { return child.node === _this.node; });
+                pectin.assert.isTruthy(myIndex >= 0, 'illegal state, expected index to be >= 0');
+                return myIndex;
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.isLastChild = function () {
+            var _this = this;
+            return this.memoize('isLastChild', function () {
+                return _this.parent ? _this.myIndex() === _this.parent.children.length - 1 : false;
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.hasSiblings = function () {
+            return this.parent ? this.node.children.length > 1 : false;
+        };
+        DecoratedTreeNodeMixin.prototype.find = function (predicate) {
+            return _.find(this.descendants(), predicate);
+        };
+        DecoratedTreeNodeMixin.prototype.select = function (predicate) {
+            return _.filter(this.descendants(), predicate);
+        };
+        DecoratedTreeNodeMixin.prototype.flattenInto = function (array) {
+            this.visitSelfAndDescendants(function (child) { return array.push(child); });
+            return array;
+        };
+        DecoratedTreeNodeMixin.prototype.ancestors = function () {
+            var _this = this;
+            return this.memoize('ancestors', function () {
+                return _this.parent ? _this.parent.ancestors().concat([_this.parent]) : [];
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.ancestorsAndSelf = function () {
+            var _this = this;
+            return this.memoize("ancestorsAndSelf", function () {
+                return _this.ancestors().concat([(_this.decoratedSelf)]);
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.pathToParent = function (parent) {
+            var _this = this;
+            return this.memoize("pathToParent", function () {
+                if (_this.node === parent.node) {
+                    return [];
+                }
+                else if (_this.parent) {
+                    return _this.parent.pathToParent(parent).concat([_this.parent]);
+                }
+                else {
+                    throw new Error('parent is not an ancestor');
+                }
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.pathToParentAndSelf = function (parent) {
+            var _this = this;
+            return this.memoize("pathToParentAndSelf", function () {
+                return _this.pathToParent(parent).concat([_this.decoratedSelf]);
+            });
+        };
+        DecoratedTreeNodeMixin.prototype.isRoot = function () {
+            return !this.parent;
+        };
+        Object.defineProperty(DecoratedTreeNodeMixin.prototype, "depth", {
+            get: function () {
+                return this.isRoot() ? 0 : this.parent.depth + 1;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DecoratedTreeNodeMixin.prototype.isLeaf = function () {
+            return !this.isRoot() && this.node.children.length < 1;
+        };
+        DecoratedTreeNodeMixin.prototype.hasChildren = function () {
+            return this.node.children.length > 0;
         };
-        TableCellRendererComponent.prototype.initialiseRenderer = function (instance) {
-            this.column.onRendererAttached(this, instance);
+        DecoratedTreeNodeMixin.prototype.depthFromParent = function (parent) {
+            return this.pathToParent(parent).length;
         };
-        TableCellRendererComponent.prototype.initialiseEditor = function (instance) {
+        DecoratedTreeNodeMixin.prototype.treeDepth = function () {
             var _this = this;
-            this.column.onEditorAttached(this, instance);
-            if (this.firstEditableColumn.value) {
-                // @see https://github.com/angular/components/issues/12070
-                setTimeout(function () { return _this.tryAndFocusEditor(instance); });
-            }
+            return this.memoize("treeDepth", function () {
+                return 1 + _this.descendants().map(function (child) { return child.depthFromParent(_this); }).reduce(function (prev, current) { return Math.max(prev, current); });
+            });
         };
-        TableCellRendererComponent.prototype.tryAndFocusEditor = function (editor) {
-            var _a;
-            if (editor.requestFocus) {
-                editor.requestFocus();
-            }
-            else {
-                var model = (editor['valueModel'] || editor['listModel']);
-                (_a = model === null || model === void 0 ? void 0 : model.focusContext) === null || _a === void 0 ? void 0 : _a.requestFocus();
-            }
+        DecoratedTreeNodeMixin.prototype.flatten = function () {
+            var _this = this;
+            return this.memoize("flatten", function () {
+                return _this.flattenInto([]);
+            });
         };
-        // @Trace()
-        TableCellRendererComponent.prototype.ngOnChanges = function (changes) {
-            this.column.updatePortalContent(this);
+        DecoratedTreeNodeMixin.prototype.visit = function (visitor) {
+            visitor.visit(this);
+            return visitor;
         };
-        TableCellRendererComponent.prototype.getRendererPortal = function () {
-            return this[CELL_RENDERER_PORTAL];
+        DecoratedTreeNodeMixin.prototype.visitChildren = function (visitor) {
+            _.each(this.children, function (child) { return child.visit(visitor); });
+            return visitor;
         };
-        TableCellRendererComponent.prototype.getEditorPortal = function () {
-            return this[CELL_EDITOR_PORTAL];
+        DecoratedTreeNodeMixin.prototype.visitSelfAndDescendants = function (callback) {
+            this.visit(new exports.SelfAndDescendantsVisitor.Each(callback));
         };
-        TableCellRendererComponent.prototype.getRowData = function () {
-            return {
-                row: this.row,
-                editSession: this.editSession,
-                editRowCommand: this.editRowCommand
-            };
+        DecoratedTreeNodeMixin.prototype.visitDescendants = function (callback) {
+            this.visitChildren(new exports.SelfAndDescendantsVisitor.Each(callback));
         };
-        return TableCellRendererComponent;
-    }(DisposableComponent));
-    TableCellRendererComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-table-cell-renderer',
-                    template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event.instance)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event.instance)\"></ng-container>\n",
-                    styles: [""]
-                },] }
-    ];
-    TableCellRendererComponent.ctorParameters = function () { return []; };
-    TableCellRendererComponent.propDecorators = {
-        row: [{ type: i0.Input }],
-        column: [{ type: i0.Input }],
-        editSession: [{ type: i0.Input }],
-        tableModel: [{ type: i0.Input }],
-        defaultClassNames: [{ type: i0.HostBinding, args: ['class',] }],
-        fillCell: [{ type: i0.HostBinding, args: ['class.fillCell',] }],
-        padChild: [{ type: i0.HostBinding, args: ['class.padChild',] }]
-    };
-
-    var TableHeaderCellRendererComponent = /** @class */ (function () {
-        function TableHeaderCellRendererComponent() {
-            this.defaultClassNames = 'aup-header-cell-renderer';
+        DecoratedTreeNodeMixin.prototype.memoize = function (property, factory) {
+            var key = "__" + property;
+            if (_.isNil(this[key])) {
+                this[key] = factory();
+            }
+            return this[key];
+        };
+        return DecoratedTreeNodeMixin;
+    }());
+    (function (DecoratedTreeNode) {
+        function createRoot(node) {
+            return typescriptUtilities.Mixin.createProxy(node, new DecoratedTreeNodeMixin(undefined, node));
+        }
+        DecoratedTreeNode.createRoot = createRoot;
+    })(exports.DecoratedTreeNode || (exports.DecoratedTreeNode = {}));
+
+    var TreeToListModel = /** @class */ (function (_super) {
+        __extends(TreeToListModel, _super);
+        function TreeToListModel(source, expansionModel) {
+            var _this = _super.call(this, source) || this;
+            _this.source = source;
+            _this.expansionModel = expansionModel;
+            _this.trackSource(_this.expansionModel.isExpandedPredicate);
+            return _this;
         }
-        TableHeaderCellRendererComponent.prototype.ngOnInit = function () {
-            this.column.attachHeaderCell(this);
+        TreeToListModel.prototype.getIdentityOf = function (item) {
+            return this.source.identityOf(item.node);
         };
-        // @Trace()
-        TableHeaderCellRendererComponent.prototype.initialiseHeader = function (instance) {
-            this.column.onHeaderAttached(this, instance);
+        TreeToListModel.prototype.compute = function (values) {
+            var _this = this;
+            var result = [];
+            values.forEach(function (value) { return _this.addNodeAndVisibleChildren(exports.DecoratedTreeNode.createRoot(value), result); });
+            return result;
         };
-        TableHeaderCellRendererComponent.prototype.getPortal = function () {
-            return this[HEADER_CELL_RENDERER_PORTAL];
+        TreeToListModel.prototype.addNodeAndVisibleChildren = function (node, result) {
+            var _this = this;
+            result.push(node);
+            if (node.hasChildren() && !this.expansionModel.isCollapsed(node)) {
+                node.children.forEach(function (child) { return _this.addNodeAndVisibleChildren(child, result); });
+            }
         };
-        return TableHeaderCellRendererComponent;
-    }());
-    TableHeaderCellRendererComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-table-header-cell-renderer',
-                    template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
-                    styles: [":host{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center}"]
-                },] }
-    ];
-    TableHeaderCellRendererComponent.ctorParameters = function () { return []; };
-    TableHeaderCellRendererComponent.propDecorators = {
-        column: [{ type: i0.Input }],
-        defaultClassNames: [{ type: i0.HostBinding, args: ['class',] }]
-    };
+        return TreeToListModel;
+    }(pectin.ComputedListModel));
 
-    var MenuItemData = /** @class */ (function () {
-        function MenuItemData(factory, face) {
-            this.factory = factory;
-            this.face = face;
-        }
-        return MenuItemData;
-    }());
-    /**
-     *
-     */
-    var TableRowMenuComponent = /** @class */ (function (_super) {
-        __extends(TableRowMenuComponent, _super);
-        function TableRowMenuComponent() {
-            var _this = _super.call(this) || this;
-            _this.actions = [];
-            _this.moreActions = [];
+    var TreeTableModel = /** @class */ (function (_super) {
+        __extends(TreeTableModel, _super);
+        function TreeTableModel(source, treeExpansionModel) {
+            var _this = _super.call(this, source) || this;
+            _this.treeExpansionModel = treeExpansionModel;
             return _this;
         }
-        TableRowMenuComponent.prototype.registerAction = function (commandFactory, properties) {
-            this.actions.push(new MenuItemData(commandFactory, properties));
-        };
-        TableRowMenuComponent.prototype.registerMoreAction = function (commandFactory, properties) {
-            this.moreActions.push(new MenuItemData(commandFactory, properties));
+        TreeTableModel.fromChildrenOf = function (sourceOfTruth, builder) {
+            var garbage = new pectin.GarbageCollector();
+            var _a = pectin.Dsl.disposeWith(garbage), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+            var children = chain(sourceOfTruth).mapToList(function (root) { return root.children; }); // for some reason pluck list can't see 'children'
+            var model = this.fromList(children, builder);
+            model.registerDisposable(garbage);
+            return model;
         };
-        TableRowMenuComponent.prototype.ngOnInit = function () {
+        TreeTableModel.fromList = function (sourceOfTruth, builder) {
+            var treeExpansionModel = new TreeExpansionModel(sourceOfTruth.identityOf);
+            var nodes = new TreeToListModel(sourceOfTruth, treeExpansionModel);
+            var model = new TreeTableModel(nodes, treeExpansionModel);
+            model.registerDisposable(nodes);
+            if (builder)
+                builder(model);
+            return model;
         };
-        TableRowMenuComponent.prototype.createMoreMenuCommand = function (item, value) {
+        TreeTableModel.prototype.treeControlColumn = function (builder) {
             var _this = this;
-            var when = pectin.Dsl.disposeWith(this).when;
-            var command = item.factory.create(value);
-            when(command.busy).becomesFalsey(function () {
-                _this.closeMoreMenu();
-            });
-            return command;
+            var columnId = 'tree-label';
+            var column = new TreeLabelColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, this.treeExpansionModel);
+            builder(column);
+            this.addColumn(column);
         };
-        TableRowMenuComponent.prototype.closeMoreMenu = function () {
-            this.menu.closeMenu();
+        TreeTableModel.prototype.expand = function (node) {
+            this.treeExpansionModel.expand(node);
         };
-        return TableRowMenuComponent;
+        TreeTableModel.prototype.collapse = function (node) {
+            this.treeExpansionModel.expand(node);
+        };
+        TreeTableModel.prototype.isCollapsed = function (node) {
+            return this.treeExpansionModel.isCollapsed(node);
+        };
+        TreeTableModel.prototype.ensureAncestorsAndSelfVisible = function (node) {
+            this.treeExpansionModel.ensureAncestorsAndSelfVisible(node);
+        };
+        return TreeTableModel;
+    }(exports.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));
+    // class DecoratorCache {
+    //
+    //     private map = new Map<number, T>();
+    //
+    //     get(area:T): T {
+    //
+    //         if (!area) return null;
+    //
+    //         let decoratedArea = this.map.get(area.id);
+    //         if (!decoratedArea) {
+    //             decoratedArea = TreeModel.AreaDecorator.decorate(area);
+    //             this.map.set(area.id, decoratedArea);
+    //         }
+    //         return decoratedArea;
+    //     }
+    //
+    //     clear() {
+    //         this.map.clear();
+    //     }
+    //
+    //
+    // }
+
+    //
+    // 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>
+    // `;
+    var TreeTableComponent = /** @class */ (function (_super) {
+        __extends(TreeTableComponent, _super);
+        function TreeTableComponent() {
+            return _super.call(this) || this;
+        }
+        return TreeTableComponent;
     }(DisposableComponent));
-    TableRowMenuComponent.decorators = [
+    TreeTableComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'aup-table-row-menu',
-                    template: "\n      <aup-tool-bar>\n          <aup-command *ngFor=\"let action of actions\" [command]=\"action.factory.create(value)\"\n                       [face]=\"action.face\"></aup-command>\n      </aup-tool-bar>\n      <ng-container *ngIf=\"moreActions.length > 0\">\n          <aup-more-menu>\n              <aup-command *ngFor=\"let action of moreActions\" [command]=\"action.factory.create(value)\"\n                           [face]=\"action.face\"></aup-command>\n          </aup-more-menu>\n      </ng-container>\n  ",
-                    styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+                    selector: "aup-tree-table",
+                    template: "<aup-table [tableModel]=\"treeTableModel\"></aup-table>\n",
+                    encapsulation: i0.ViewEncapsulation.None // allow us to target nested table styles
+                    ,
+                    styles: ["td.mat-cell{border-bottom-width:0!important;border-top-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}"]
                 },] }
     ];
-    TableRowMenuComponent.ctorParameters = function () { return []; };
-    TableRowMenuComponent.propDecorators = {
-        value: [{ type: i0.Input }],
-        menu: [{ type: i0.ViewChild, args: [menu.MatMenuTrigger,] }]
+    TreeTableComponent.ctorParameters = function () { return []; };
+    TreeTableComponent.propDecorators = {
+        treeTableModel: [{ type: i0.Input }]
     };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", TreeTableModel)
+    ], TreeTableComponent.prototype, "treeTableModel", void 0);
 
     var VerticalFocusContainerComponent = /** @class */ (function (_super) {
         __extends(VerticalFocusContainerComponent, _super);
@@ -3521,7 +4106,11 @@
                         SeparatorComponent,
                         FlexComponent,
                         AbstractPopupMenuComponent,
-                        PopupMenuRendererComponent
+                        PopupMenuRendererComponent,
+                        TreeTableComponent,
+                        exports.TreeInheritanceIconComponent,
+                        TreeLabelCellRendererComponent,
+                        exports.IconComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -3574,7 +4163,8 @@
                         CommandFaceComponent,
                         MoreMenuComponent,
                         SeparatorComponent,
-                        FlexComponent
+                        FlexComponent,
+                        TreeTableComponent
                     ],
                     providers: [
                         FocusBindingFactory
@@ -4215,6 +4805,35 @@
         activityOutlets: [{ type: i0.ViewChildren, args: [ActivityOutletComponent,] }]
     };
 
+    var ActivityTitleComponent = /** @class */ (function (_super) {
+        __extends(ActivityTitleComponent, _super);
+        function ActivityTitleComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        // @Input()
+        // align: 'start' | 'end' | 'stretch' = 'start';
+        //
+        // @HostBinding('class.align-end')
+        // get alignEnd():boolean {
+        //   return this.align === 'end'
+        // }
+        //
+        // @HostBinding('class.align-stretch')
+        // get alignStretch():boolean {
+        //   return this.align === 'stretch'
+        // }
+        ActivityTitleComponent.prototype.ngOnInit = function () {
+        };
+        return ActivityTitleComponent;
+    }(DisposableComponent));
+    ActivityTitleComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-activity-title',
+                    template: "<ng-content></ng-content>\n",
+                    styles: [":host{display:block}"]
+                },] }
+    ];
+
     var InteractionServiceRoutingAdapter = /** @class */ (function () {
         function InteractionServiceRoutingAdapter(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {
             this.activeInteractionContextIds = activeInteractionContextIds;
@@ -4900,6 +5519,93 @@
         { type: i0.NgZone }
     ]; };
 
+    /**
+     * Example:
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     * });
+     *
+     * Editable tables
+     * @example
+     * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+     *   if (form.validate()) {
+     *     // normal form save stuff
+     *     return true; // finish editing
+     *   }
+     *   return false; // continue editiing
+     * }
+     * const colorsNames: ListModel<string> = ...;
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
+     *   table.pluck("lastName").cellEditor(StringInputComponent, {
+     *     validators: [Validator.present("We need a last name")]
+     *   });
+     *   table.pluck("age").cellEditor(NumberInputComponent);
+     *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+     *     initialiseComponent(component: SelectInputComponent) {
+     *       selectInput.optionsModel = colorsNames; // <- initialise our component
+     *     }
+     *   });
+     *   table.addEditControls(saveCommand); // <- required to enable editing
+     * });
+     *
+     * Selection models
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     * });
+     *
+     * Custom cell renderers and editors
+     * @example
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("favoriteColor")
+     *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+     *        // configure your component with what ever you need.
+     *      });
+     *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+     *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel:  DirtyTrackingForm.ValueModel<string> | ValueModel<string>; }
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     * });
+     *
+     * I18n
+     * @example
+     * [table.yml]
+     * table:
+     *   columns(ColumnTextProperties[]):
+     *      firstName:
+     *         headerText: "First Name"
+     *      fullName:
+     *         headerText: "Full Name"
+     *
+     * const model = TableModel.fromList(heroList, table => {
+     *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     *
+     *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+     * });
+     */
+    var TableModel = /** @class */ (function (_super) {
+        __extends(TableModel, _super);
+        function TableModel() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        TableModel.fromList = function (sourceOfTruth, builder) {
+            var model = new TableModel(sourceOfTruth);
+            if (builder)
+                builder(model);
+            return model;
+        };
+        TableModel.prototype.addSelectionColumn = function (selectionModel) {
+            return this._addSelectionColumn(selectionModel);
+        };
+        return TableModel;
+    }(exports.AbstractTableModel));
+
     /**
      * @file Automatically generated by barrelsby.
      */
@@ -4938,11 +5644,13 @@
                         SelectInputActivity,
                         AbstractInputActivity,
                         InteractionContextTriggerFor,
-                        Activity
+                        Activity,
+                        ActivityTitleComponent
                     ],
                     exports: [
                         ActivityContainerComponent,
                         ActivityOutletComponent,
+                        ActivityTitleComponent,
                         InPlaceInteractionContextComponent,
                         AddItemInteractionContextComponent,
                         ActivityActionsComponent,
@@ -8059,6 +8767,7 @@
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
     exports.ActivityRef = ActivityRef;
+    exports.ActivityTitleComponent = ActivityTitleComponent;
     exports.AddItemInteractionContextComponent = AddItemInteractionContextComponent;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
@@ -8098,6 +8807,7 @@
     exports.EditorControlColumnModel = EditorControlColumnModel;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.EventCleanUpSession = EventCleanUpSession;
+    exports.FlattenStrategy = FlattenStrategy;
     exports.FlexComponent = FlexComponent;
     exports.FocusBinding = FocusBinding;
     exports.FocusBindingDirective = FocusBindingDirective;
@@ -8164,10 +8874,17 @@
     exports.TableCellRendererComponent = TableCellRendererComponent;
     exports.TableComponent = TableComponent;
     exports.TableHeaderCellRendererComponent = TableHeaderCellRendererComponent;
+    exports.TableModel = TableModel;
     exports.TableRowMenuComponent = TableRowMenuComponent;
     exports.TemplateCellRendererPortalRef = TemplateCellRendererPortalRef;
     exports.TextInputComponent = TextInputComponent;
     exports.ToolBarComponent = ToolBarComponent;
+    exports.TreeExpansionModel = TreeExpansionModel;
+    exports.TreeLabelCellRendererComponent = TreeLabelCellRendererComponent;
+    exports.TreeLabelColumnModel = TreeLabelColumnModel;
+    exports.TreeTableComponent = TreeTableComponent;
+    exports.TreeTableModel = TreeTableModel;
+    exports.TreeToListModel = TreeToListModel;
     exports.UrlService = UrlService;
     exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
     exports.Visit = Visit;