@coolon/angular-ui-powerups 3.9.0 → 3.10.1

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

@@ -1,5 +1,5 @@
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, InjectionToken, ViewEncapsulation, HostBinding, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver, INJECTOR } from '@angular/core';
+import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver, INJECTOR } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -18,12 +18,12 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, ValueModel, StoreInValueModel, MutableListModel, Disposable, DelegatingListModel, StoreInListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DirtyTrackingForm, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, Command, MutableListModel, StoreInListModel, ValueModel, StoreInValueModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DirtyTrackingForm, ComputedListModel, DelegatingCommand, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
-import _, { isEqual, isNil } from 'lodash';
+import _, { find, filter, each, isNil, isEqual } from 'lodash';
 import { Enum } from 'typescript-string-enums';
-import { assert as assert$1, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
+import { assert as assert$1, Mixin, Opts, lang as lang$1, Klass } from '@coolon/typescript-utilities';
 import produce from 'immer';
 import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialogModule, MatDialog, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogConfig } from '@angular/material/dialog';
@@ -506,10 +506,68 @@ __decorate([
     __metadata("design:type", Command)
 ], CardContainerComponent.prototype, "addCardCommand", void 0);
 
-var TrackBy;
-(function (TrackBy) {
-    TrackBy.byIndex = (data, index) => index;
-})(TrackBy || (TrackBy = {}));
+/**
+ * Custom CSS:
+ * @example
+ * root: { // globally
+ *   --aup-command-face-icon-gap: 8px;
+ * }
+ * aup-command-face { // per instance
+ *   --icon-gap: 4px;
+ * }
+ */
+class CommandFaceComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.facesModel = new MutableListModel();
+        this.ignoreIcon = false;
+        this.ignoreText = false;
+        this.includeMissingIconInLayout = false;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.faceAdapters = chain(this.facesModel).map(face => new CommandFace.Adapter(face));
+        const activeFace = this.faceAdapters.first();
+        this.activeIcon = activeFace.pluck("icon");
+        this.activeColor = activeFace.pluck("color");
+    }
+    get requiresMissingIconInLayout() {
+        return this.includeMissingIconInLayout && !this.activeIcon.value;
+    }
+    ngOnInit() {
+    }
+    shouldIncludeIcon(face) {
+        return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
+    }
+    hasIconStart(face) {
+        return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === CommandFace.Position.START);
+    }
+    hasIconEnd(face) {
+        return this.shouldIncludeIcon(face) && face.iconPosition === CommandFace.Position.END;
+    }
+    get color() {
+        return this.activeColor.value;
+    }
+}
+CommandFaceComponent.decorators = [
+    { type: 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: 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 = () => [];
+CommandFaceComponent.propDecorators = {
+    _rawFaces: [{ type: Input, args: ['faces',] }],
+    ignoreIcon: [{ type: Input }],
+    ignoreText: [{ type: Input }],
+    includeMissingIconInLayout: [{ type: Input }],
+    requiresMissingIconInLayout: [{ type: HostBinding, args: ['class.hide-icon',] }],
+    color: [{ type: HostBinding, args: ['attr.color',] }]
+};
+__decorate([
+    StoreInListModel('facesModel'),
+    __metadata("design:type", Array)
+], CommandFaceComponent.prototype, "_rawFaces", void 0);
 
 class PopupAwareComponent extends DisposableComponent {
     constructor(element, parent) {
@@ -607,92 +665,23 @@ __decorate([
     __metadata("design:type", Object)
 ], CommandComponent.prototype, "busyFace", void 0);
 
-class CommandContainer extends GarbageCollector {
-    constructor(parent) {
-        super();
-        this.parent = parent;
-    }
-    get depth() {
-        return this.hasParent() ? this.parent.depth + 1 : 0;
-    }
-    hasParent() {
-        return !!this.parent;
-    }
-    get orientation() {
-        return CommandContainer.Orientation.VERTICAL;
-    }
-}
-(function (CommandContainer) {
-    CommandContainer.Orientation = Enum({ HORIZONTAL: 'horizontal', VERTICAL: 'vertical' });
-})(CommandContainer || (CommandContainer = {}));
-
 /**
  *
  */
-class ToolBarComponent extends CommandContainer {
+class FlexComponent extends DisposableComponent {
     constructor() {
         super();
     }
-    get orientation() {
-        return CommandContainer.Orientation.HORIZONTAL;
-    }
-    // @Trace()
-    ngOnInit() {
-    }
-    // @Trace()
-    ngAfterContentInit() {
-        // this.group.initialise();
-    }
-    // @Trace()
-    ngAfterViewInit() {
-    }
-}
-ToolBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-tool-bar',
-                template: '<div class="toolbar-content"><ng-content></ng-content></div>',
-                encapsulation: ViewEncapsulation.None,
-                styles: [":host{display:inline-block}.toolbar-content{align-items:center;display:inline-flex;flex-direction:row}.toolbar-content>aup-separator{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}"]
-            },] }
-];
-ToolBarComponent.ctorParameters = () => [];
-
-/**
- *
- */
-class SeparatorComponent extends PopupAwareComponent {
-    constructor(element, popupContainer, containerParent) {
-        super(element, popupContainer);
-        this.containerParent = containerParent;
-    }
-    isHorizontalContainer() {
-        return this.containerParent instanceof ToolBarComponent && this.containerParent.orientation === CommandContainer.Orientation.HORIZONTAL;
-    }
     ngOnInit() {
     }
 }
-SeparatorComponent.decorators = [
+FlexComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aup-separator',
-                template: `
-    <mat-divider [vertical]="!isHorizontalContainer()"></mat-divider>`,
-                styles: [`:host {
-  }`,
-                    `:host(.horizontal-container) {
-      display: inline-flex;
-      flex-direction: row;
-      align-items: stretch;
-    }`]
+                selector: 'aup-flex',
+                template: ``
             },] }
 ];
-SeparatorComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [POPUP_CONTAINER,] }] },
-    { type: CommandContainer, decorators: [{ type: Optional }] }
-];
-SeparatorComponent.propDecorators = {
-    isHorizontalContainer: [{ type: HostBinding, args: ['class.horizontal-container',] }]
-};
+FlexComponent.ctorParameters = () => [];
 
 /**
  *
@@ -760,241 +749,252 @@ AbstractPopupMenuComponent.propDecorators = {
 /**
  *
  */
-class PopupMenuComponent extends AbstractPopupMenuComponent {
+class MoreMenuComponent extends AbstractPopupMenuComponent {
     constructor(element, parent) {
         super(element, parent);
+        this.tooltipModel = new MutableValueModel();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
+        this.faceModelDelegate.setDelegate(chain(this.tooltipModel).map(tooltip => {
+            return {
+                icon: () => 'mat:more_vert',
+                tooltip() {
+                    return tooltip;
+                }
+            };
+        }, { allowNil: true }));
+    }
+    get face() {
+        return this.faceModelDelegate.value;
     }
 }
-PopupMenuComponent.decorators = [
+MoreMenuComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aup-popup-menu',
+                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: PopupMenuComponent }
+                    { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
                 ]
             },] }
 ];
-PopupMenuComponent.ctorParameters = () => [
+MoreMenuComponent.ctorParameters = () => [
     { type: ElementRef },
     { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] }
 ];
-PopupMenuComponent.propDecorators = {
-    faceModel: [{ type: Input }],
-    face: [{ type: Input }]
+MoreMenuComponent.propDecorators = {
+    tooltip: [{ type: Input }]
 };
 __decorate([
-    TrackExternal({ delegateTo: 'faceModelDelegate' }),
-    __metadata("design:type", ValueModel)
-], PopupMenuComponent.prototype, "faceModel", void 0);
-__decorate([
-    StoreInValueModel('faceModel'),
-    __metadata("design:type", Object)
-], PopupMenuComponent.prototype, "face", void 0);
+    StoreInValueModel('tooltipModel'),
+    __metadata("design:type", String)
+], MoreMenuComponent.prototype, "tooltip", void 0);
 
-class PopupMenuRendererComponent extends DisposableComponent {
-    constructor() {
+var TrackBy;
+(function (TrackBy) {
+    TrackBy.byIndex = (data, index) => index;
+})(TrackBy || (TrackBy = {}));
+
+class CommandContainer extends GarbageCollector {
+    constructor(parent) {
         super();
-        this._childList = new DelegatingListModel();
-        this.commandFired = new EventEmitter();
-        this.TrackBy = TrackBy;
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        // this.children = chain(this.groupViewDataModel).pluckList('children');
-        // this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
-        const faces = chain(this._childList).map(child => {
-            return child.getFace();
-        }).rejectNil();
-        const icons = faces.select(face => !!CommandFace.getIconOf(face));
-        const iconCount = icons.count();
-        const totalFaces = faces.count();
-        this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), totalFaces.doesNotEqual(iconCount)).areTruthy();
-    }
-    get parent() {
-        return this._parentComponent;
-    }
-    set parent(comp) {
-        this._parentComponent = comp;
-        this._childList.setDelegate(comp.children);
-    }
-    get children() {
-        return this.parent.children.value;
-    }
-    executeCommand(data) {
-        if (this.isCommand(data)) {
-            data.command.execute().finally(() => {
-                this.commandFired.emit();
-            });
-        }
-    }
-    isEnabled(data) {
-        return true; //ViewData.getCommand(data).enabled.value;
-    }
-    // @Trace()
-    onCommandFired() {
-        this.commandFired.emit();
-        this.triggers.forEach(trigger => {
-            if (trigger.menuOpen) {
-                trigger.closeMenu();
-            }
-        });
-    }
-    isCommand(child) {
-        return child instanceof CommandComponent;
-    }
-    isPopupMenu(child) {
-        return child instanceof AbstractPopupMenuComponent;
+        this.parent = parent;
     }
-    isSeparator(child) {
-        return child instanceof SeparatorComponent;
+    get depth() {
+        return this.hasParent() ? this.parent.depth + 1 : 0;
     }
-    getTooltip(child) {
-        return this.isCommand(child) ? CommandFace.getTooltipOf(child.face) : undefined;
+    hasParent() {
+        return !!this.parent;
     }
-    getFaces(child) {
-        return this.isCommand(child) ?
-            child.faces.value :
-            this.isPopupMenu(child) ?
-                [child.faceAdapter.face] :
-                undefined;
+    get orientation() {
+        return CommandContainer.Orientation.VERTICAL;
     }
 }
-PopupMenuRendererComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'aup-popup-menu-renderer',
-                template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                matMenuTrigger\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n"
-            },] }
-];
-PopupMenuRendererComponent.ctorParameters = () => [];
-PopupMenuRendererComponent.propDecorators = {
-    parent: [{ type: Input }],
-    menuComponent: [{ type: ViewChild, args: ['menu', { static: true },] }],
-    commandFired: [{ type: Output }],
-    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
-};
+(function (CommandContainer) {
+    CommandContainer.Orientation = Enum({ HORIZONTAL: 'horizontal', VERTICAL: 'vertical' });
+})(CommandContainer || (CommandContainer = {}));
 
 /**
- * Custom CSS:
- * @example
- * root: { // globally
- *   --aup-command-face-icon-gap: 8px;
- * }
- * aup-command-face { // per instance
- *   --icon-gap: 4px;
- * }
+ *
  */
-class CommandFaceComponent extends DisposableComponent {
+class ToolBarComponent extends CommandContainer {
     constructor() {
         super();
-        this.facesModel = new MutableListModel();
-        this.ignoreIcon = false;
-        this.ignoreText = false;
-        this.includeMissingIconInLayout = false;
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.faceAdapters = chain(this.facesModel).map(face => new CommandFace.Adapter(face));
-        const activeFace = this.faceAdapters.first();
-        this.activeIcon = activeFace.pluck("icon");
-        this.activeColor = activeFace.pluck("color");
     }
-    get requiresMissingIconInLayout() {
-        return this.includeMissingIconInLayout && !this.activeIcon.value;
+    get orientation() {
+        return CommandContainer.Orientation.HORIZONTAL;
     }
+    // @Trace()
     ngOnInit() {
     }
-    shouldIncludeIcon(face) {
-        return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
-    }
-    hasIconStart(face) {
-        return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === CommandFace.Position.START);
-    }
-    hasIconEnd(face) {
-        return this.shouldIncludeIcon(face) && face.iconPosition === CommandFace.Position.END;
+    // @Trace()
+    ngAfterContentInit() {
+        // this.group.initialise();
     }
-    get color() {
-        return this.activeColor.value;
+    // @Trace()
+    ngAfterViewInit() {
     }
 }
-CommandFaceComponent.decorators = [
+ToolBarComponent.decorators = [
     { type: 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",
+                selector: 'aup-tool-bar',
+                template: '<div class="toolbar-content"><ng-content></ng-content></div>',
                 encapsulation: 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}"]
+                styles: [":host{display:inline-block}.toolbar-content{align-items:center;display:inline-flex;flex-direction:row}.toolbar-content>aup-separator{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}"]
             },] }
 ];
-CommandFaceComponent.ctorParameters = () => [];
-CommandFaceComponent.propDecorators = {
-    _rawFaces: [{ type: Input, args: ['faces',] }],
-    ignoreIcon: [{ type: Input }],
-    ignoreText: [{ type: Input }],
-    includeMissingIconInLayout: [{ type: Input }],
-    requiresMissingIconInLayout: [{ type: HostBinding, args: ['class.hide-icon',] }],
-    color: [{ type: HostBinding, args: ['attr.color',] }]
-};
-__decorate([
-    StoreInListModel('facesModel'),
-    __metadata("design:type", Array)
-], CommandFaceComponent.prototype, "_rawFaces", void 0);
+ToolBarComponent.ctorParameters = () => [];
 
 /**
  *
  */
-class FlexComponent extends DisposableComponent {
-    constructor() {
-        super();
+class SeparatorComponent extends PopupAwareComponent {
+    constructor(element, popupContainer, containerParent) {
+        super(element, popupContainer);
+        this.containerParent = containerParent;
+    }
+    isHorizontalContainer() {
+        return this.containerParent instanceof ToolBarComponent && this.containerParent.orientation === CommandContainer.Orientation.HORIZONTAL;
     }
     ngOnInit() {
     }
 }
-FlexComponent.decorators = [
+SeparatorComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aup-flex',
-                template: ``
+                selector: 'aup-separator',
+                template: `
+    <mat-divider [vertical]="!isHorizontalContainer()"></mat-divider>`,
+                styles: [`:host {
+  }`,
+                    `:host(.horizontal-container) {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: stretch;
+    }`]
             },] }
 ];
-FlexComponent.ctorParameters = () => [];
+SeparatorComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [POPUP_CONTAINER,] }] },
+    { type: CommandContainer, decorators: [{ type: Optional }] }
+];
+SeparatorComponent.propDecorators = {
+    isHorizontalContainer: [{ type: HostBinding, args: ['class.horizontal-container',] }]
+};
 
 /**
  *
  */
-class MoreMenuComponent extends AbstractPopupMenuComponent {
+class PopupMenuComponent extends AbstractPopupMenuComponent {
     constructor(element, parent) {
         super(element, parent);
-        this.tooltipModel = new MutableValueModel();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.faceModelDelegate.setDelegate(chain(this.tooltipModel).map(tooltip => {
-            return {
-                icon: () => 'mat:more_vert',
-                tooltip() {
-                    return tooltip;
-                }
-            };
-        }, { allowNil: true }));
-    }
-    get face() {
-        return this.faceModelDelegate.value;
+        // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
     }
 }
-MoreMenuComponent.decorators = [
+PopupMenuComponent.decorators = [
     { type: Component, args: [{
-                selector: 'aup-more-menu',
+                selector: 'aup-popup-menu',
                 template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              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 }
+                    { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
                 ]
             },] }
 ];
-MoreMenuComponent.ctorParameters = () => [
+PopupMenuComponent.ctorParameters = () => [
     { type: ElementRef },
     { type: undefined, decorators: [{ type: Inject, args: [POPUP_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] }
 ];
-MoreMenuComponent.propDecorators = {
-    tooltip: [{ type: Input }]
+PopupMenuComponent.propDecorators = {
+    faceModel: [{ type: Input }],
+    face: [{ type: Input }]
 };
 __decorate([
-    StoreInValueModel('tooltipModel'),
-    __metadata("design:type", String)
-], MoreMenuComponent.prototype, "tooltip", void 0);
+    TrackExternal({ delegateTo: 'faceModelDelegate' }),
+    __metadata("design:type", ValueModel)
+], PopupMenuComponent.prototype, "faceModel", void 0);
+__decorate([
+    StoreInValueModel('faceModel'),
+    __metadata("design:type", Object)
+], PopupMenuComponent.prototype, "face", void 0);
+
+class PopupMenuRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this._childList = new DelegatingListModel();
+        this.commandFired = new EventEmitter();
+        this.TrackBy = TrackBy;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        // this.children = chain(this.groupViewDataModel).pluckList('children');
+        // this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');
+        const faces = chain(this._childList).map(child => {
+            return child.getFace();
+        }).rejectNil();
+        const icons = faces.select(face => !!CommandFace.getIconOf(face));
+        const iconCount = icons.count();
+        const totalFaces = faces.count();
+        this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), totalFaces.doesNotEqual(iconCount)).areTruthy();
+    }
+    get parent() {
+        return this._parentComponent;
+    }
+    set parent(comp) {
+        this._parentComponent = comp;
+        this._childList.setDelegate(comp.children);
+    }
+    get children() {
+        return this.parent.children.value;
+    }
+    executeCommand(data) {
+        if (this.isCommand(data)) {
+            data.command.execute().finally(() => {
+                this.commandFired.emit();
+            });
+        }
+    }
+    isEnabled(data) {
+        return true; //ViewData.getCommand(data).enabled.value;
+    }
+    // @Trace()
+    onCommandFired() {
+        this.commandFired.emit();
+        this.triggers.forEach(trigger => {
+            if (trigger.menuOpen) {
+                trigger.closeMenu();
+            }
+        });
+    }
+    isCommand(child) {
+        return child instanceof CommandComponent;
+    }
+    isPopupMenu(child) {
+        return child instanceof AbstractPopupMenuComponent;
+    }
+    isSeparator(child) {
+        return child instanceof SeparatorComponent;
+    }
+    getTooltip(child) {
+        return this.isCommand(child) ? CommandFace.getTooltipOf(child.face) : undefined;
+    }
+    getFaces(child) {
+        return this.isCommand(child) ?
+            child.faces.value :
+            this.isPopupMenu(child) ?
+                [child.faceAdapter.face] :
+                undefined;
+    }
+}
+PopupMenuRendererComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-popup-menu-renderer',
+                template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                matMenuTrigger\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n"
+            },] }
+];
+PopupMenuRendererComponent.ctorParameters = () => [];
+PopupMenuRendererComponent.propDecorators = {
+    parent: [{ type: Input }],
+    menuComponent: [{ type: ViewChild, args: ['menu', { static: true },] }],
+    commandFired: [{ type: Output }],
+    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
+};
 
 class FocusContainerComponent extends DisposableComponent {
     constructor(focusManager) {
@@ -2006,10 +2006,13 @@ const noop = () => {
 const ɵ0 = noop;
 const CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
 class ColumnModel {
-    constructor(columnId, defaults) {
+    constructor(columnId, textPropertiesProvider) {
         this.columnId = columnId;
-        this.defaults = defaults;
+        this.textPropertiesProvider = textPropertiesProvider;
         this._selectRowOnClick = undefined;
+        this.installHeaderRenderer();
+    }
+    installHeaderRenderer() {
         this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
             component.headerText = column.getHeaderText();
         });
@@ -2022,7 +2025,7 @@ class ColumnModel {
         return this.columnId;
     }
     getColumnTextProperties() {
-        return this._columnTextProperties || this.defaults.getColumnTextProperties(this);
+        return this._columnTextProperties || this.textPropertiesProvider();
     }
     textProperties(columnTextProperties) {
         this._columnTextProperties = columnTextProperties;
@@ -2311,7 +2314,6 @@ class SelectionColumnModel extends ColumnModel {
     }
 }
 
-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];
 class RowClass {
@@ -2320,80 +2322,10 @@ class RowClass {
         this.matches = matches;
     }
 }
-/**
- * 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
- * });
- */
-let TableModel = TableModel_1 = class TableModel {
+let AbstractTableModel = class AbstractTableModel extends GarbageCollector {
     constructor(sourceOfTruth) {
+        super();
         this.sourceOfTruth = sourceOfTruth;
-        this._garbage = new GarbageCollector();
         this._columns = new MutableListModel();
         this._editorSessions = new MutableListModel();
         this.rowClassNamePredicates = [];
@@ -2403,7 +2335,7 @@ let TableModel = TableModel_1 = class TableModel {
             return this.identityOf ? this.identityOf(item) : index;
         };
         this.identityOf = sourceOfTruth.identityOf;
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this._garbage);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this._columnsById = chain(this._columns).indexBy('columnId');
         this._rowsBeingEdited = new MutableListModel([], {
             identifiedWith: this.identityOf
@@ -2414,11 +2346,6 @@ let TableModel = TableModel_1 = class TableModel {
         this.firstEditableColumn = chain(this.columns).select(c => c.hasEditorPortal()).first();
         this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(this._columns).findIndex(column => column.isRowSelectionExplicitlyEnabled()).isGreaterThanOrEqualTo(0);
     }
-    static fromList(sourceOfTruth, builder) {
-        const model = new TableModel_1(sourceOfTruth);
-        builder(model);
-        return model;
-    }
     get rowsBeingEdited() {
         return this._rowsBeingEdited.readonly;
     }
@@ -2426,28 +2353,32 @@ let TableModel = TableModel_1 = class TableModel {
         return this._columns.readonly;
     }
     pluck(property, options) {
-        return this.addColumn(new PropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
+        const columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
+        return this.addColumn(new PropertyColumnModel(columnId, property, () => this.getColumnTextProperties(columnId)));
     }
     pluckList(property, options) {
-        return this.addColumn(new ListPropertyColumnModel((options === null || options === void 0 ? void 0 : options.columnId) || property.toString(), property, this));
+        const columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
+        return this.addColumn(new ListPropertyColumnModel(columnId, property, () => this.getColumnTextProperties(columnId)));
     }
-    addSelectionColumn(selectionModel) {
+    _addSelectionColumn(selectionModel) {
         assert.isNil(this.selectionColumnModel);
-        this.selectionColumnModel = new SelectionColumnModel('selection', this, selectionModel);
+        const columnId = 'selection-column';
+        this.selectionColumnModel = new SelectionColumnModel(columnId, () => this.getColumnTextProperties(columnId), selectionModel);
         return this.addColumn(this.selectionColumnModel);
     }
     addEditControls(saveCommand) {
         this.saveCommand = saveCommand;
-        return this.addColumn(new EditorControlColumnModel('editControls', saveCommand, this));
+        const columnId = 'editControls';
+        return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, () => this.getColumnTextProperties(columnId)));
     }
     addCustomColumn(columnId, dataAccessor) {
-        return this.addColumn(new CustomValueColumnModel(columnId, this, dataAccessor));
+        return this.addColumn(new CustomValueColumnModel(columnId, () => this.getColumnTextProperties(columnId), dataAccessor));
     }
     addComponentColumn(columnId, component, onComponentInitOrOptions) {
-        return this.addColumn(new CustomValueColumnModel(columnId, this, row => row)).cellRenderer(component, onComponentInitOrOptions);
+        return this.addColumn(new CustomValueColumnModel(columnId, () => this.getColumnTextProperties(columnId), row => row)).cellRenderer(component, onComponentInitOrOptions);
     }
     addTemplateColumn(columnId) {
-        return this.addColumn(new CustomTemplateColumnModel(columnId, this));
+        return this.addColumn(new CustomTemplateColumnModel(columnId, () => this.getColumnTextProperties(columnId)));
     }
     addRowClass(className, predicate) {
         this.rowClassNamePredicates.push(new RowClass(className, predicate));
@@ -2474,14 +2405,18 @@ let TableModel = TableModel_1 = class TableModel {
         }
         return column;
     }
+    get selectionModel() {
+        var _a;
+        return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
+    }
     // removeColumn(column: ColumnModel<Row>) {
     //
     // }
     columnTextProperties(columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
     }
-    getColumnTextProperties(column) {
-        return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[column.columnId] : undefined;
+    getColumnTextProperties(columnId) {
+        return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[columnId] : undefined;
     }
     startEditSession(row) {
         const rowId = this.identityOf(row);
@@ -2526,11 +2461,6 @@ let TableModel = TableModel_1 = class TableModel {
         return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
     }
     isCursorEnabled(column) {
-        // console.log({
-        //   column: column.columnId,
-        //   rowSelectionEnabled: this.isRowSelectionEnabledFor(column),
-        //   hasRowListeners: this.rowClickListeners.listenerCount > 0
-        // });
         return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
     }
     selectRow(row) {
@@ -2540,7 +2470,6 @@ let TableModel = TableModel_1 = class TableModel {
     onRowClicked(callback) {
         return this.rowClickListeners.add(callback);
     }
-    // @Trace()
     _notifyCellClicked(columnModel, row) {
         if (this.isRowSelectionEnabledFor(columnModel)) {
             this.selectRow(row);
@@ -2548,10 +2477,10 @@ let TableModel = TableModel_1 = class TableModel {
         this.rowClickListeners.fire(l => l(row));
     }
 };
-TableModel = TableModel_1 = __decorate([
+AbstractTableModel = __decorate([
     TrackExternal.Strategy(new TrackExternal.OneTimeBinding()),
     __metadata("design:paramtypes", [ListModel])
-], TableModel);
+], AbstractTableModel);
 
 /**
  * Create your model:
@@ -2607,7 +2536,7 @@ TableComponent.decorators = [
     { type: 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 = () => [];
@@ -2616,7 +2545,7 @@ TableComponent.propDecorators = {
 };
 __decorate([
     TrackExternal(),
-    __metadata("design:type", TableModel)
+    __metadata("design:type", AbstractTableModel)
 ], TableComponent.prototype, "tableModel", void 0);
 
 class ColumnTemplateDirective {
@@ -2627,28 +2556,110 @@ class ColumnTemplateDirective {
         this.aupColumnTemplateFillCell = false;
         this.aupColumnTemplateAutoPadChild = undefined;
     }
-    ngOnInit() {
-        var _a;
-        assert.isTruthy(this.aupColumnTemplateColumnId);
-        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, (_a = this.aupColumnTemplateAutoPadChild) !== null && _a !== void 0 ? _a : this.aupColumnTemplateFillCell);
+    ngOnInit() {
+        var _a;
+        assert.isTruthy(this.aupColumnTemplateColumnId);
+        this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, (_a = this.aupColumnTemplateAutoPadChild) !== null && _a !== void 0 ? _a : this.aupColumnTemplateFillCell);
+    }
+}
+ColumnTemplateDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[aupColumnTemplate]'
+            },] }
+];
+ColumnTemplateDirective.ctorParameters = () => [
+    { type: TableComponent },
+    { type: TemplateRef },
+    { type: ViewContainerRef }
+];
+ColumnTemplateDirective.propDecorators = {
+    aupColumnTemplate: [{ type: Input }],
+    aupColumnTemplateColumnId: [{ type: Input }],
+    aupColumnTemplateFillCell: [{ type: Input }],
+    aupColumnTemplateAutoPadChild: [{ type: Input }]
+};
+
+/**
+ * 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
+ * });
+ */
+class TableModel extends AbstractTableModel {
+    static fromList(sourceOfTruth, builder) {
+        const model = new TableModel(sourceOfTruth);
+        if (builder)
+            builder(model);
+        return model;
+    }
+    addSelectionColumn(selectionModel) {
+        return this._addSelectionColumn(selectionModel);
     }
 }
-ColumnTemplateDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[aupColumnTemplate]'
-            },] }
-];
-ColumnTemplateDirective.ctorParameters = () => [
-    { type: TableComponent },
-    { type: TemplateRef },
-    { type: ViewContainerRef }
-];
-ColumnTemplateDirective.propDecorators = {
-    aupColumnTemplate: [{ type: Input }],
-    aupColumnTemplateColumnId: [{ type: Input }],
-    aupColumnTemplateFillCell: [{ type: Input }],
-    aupColumnTemplateAutoPadChild: [{ type: Input }]
-};
 
 class TableCellRendererComponent extends DisposableComponent {
     constructor() {
@@ -2815,6 +2826,583 @@ TableRowMenuComponent.propDecorators = {
     menu: [{ type: ViewChild, args: [MatMenuTrigger,] }]
 };
 
+const SVG_HEIGHT = 60;
+class TreeInheritanceIconComponent {
+    constructor() {
+        this.pixelWidth = 24;
+        this.pixelHeight = 48;
+    }
+    get heightOffset() {
+        return SVG_HEIGHT - this.pixelHeight;
+    }
+    get viewBox() {
+        return `${0} ${this.heightOffset} ${this.pixelWidth} ${this.pixelHeight - this.heightOffset}`;
+    }
+    hasHead() {
+        return TreeInheritanceIconComponent.HAS_HEAD.includes(this.type);
+    }
+    hasTerminal() {
+        return TreeInheritanceIconComponent.HAS_TERMINAL.includes(this.type);
+    }
+    hasLeadIn() {
+        return TreeInheritanceIconComponent.HAS_LEAD_IN.includes(this.type);
+    }
+    hasTail() {
+        return TreeInheritanceIconComponent.HAS_TAIL.includes(this.type);
+    }
+}
+TreeInheritanceIconComponent.decorators = [
+    { type: 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}"]
+            },] }
+];
+TreeInheritanceIconComponent.ctorParameters = () => [];
+TreeInheritanceIconComponent.propDecorators = {
+    type: [{ type: Input }, { type: HostBinding, args: ["class",] }],
+    pixelWidth: [{ type: Input }],
+    pixelHeight: [{ type: Input }]
+};
+(function (TreeInheritanceIconComponent) {
+    TreeInheritanceIconComponent.Type = 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
+    ];
+})(TreeInheritanceIconComponent || (TreeInheritanceIconComponent = {}));
+
+class SelfAndDescendantsVisitor {
+    constructor() {
+    }
+    visit(it) {
+        this.onVisit(it);
+        if (this.shouldVisitChildrenOf(it)) {
+            it.visitChildren(this);
+        }
+    }
+    shouldVisitChildrenOf(it) {
+        return true;
+    }
+}
+(function (SelfAndDescendantsVisitor) {
+    class Each extends SelfAndDescendantsVisitor {
+        constructor(callback) {
+            super();
+            this.callback = callback;
+        }
+        onVisit(it) {
+            this.callback(it);
+        }
+    }
+    SelfAndDescendantsVisitor.Each = Each;
+})(SelfAndDescendantsVisitor || (SelfAndDescendantsVisitor = {}));
+
+class DecoratedTreeNodeMixin {
+    constructor(parent, node) {
+        this.parent = parent;
+        this.node = node;
+    }
+    get decoratedSelf() {
+        return this.memoize("decoratedSelf", () => {
+            return this.parent ? this.parent.children.find(child => child.node === this.node) : DecoratedTreeNode.createRoot(this.node);
+        });
+    }
+    get children() {
+        return this.memoize("children", () => {
+            return this.node.children ? this.node.children.map(child => {
+                return Mixin.createProxy(child, new DecoratedTreeNodeMixin(this.decoratedSelf, child));
+            }) : [];
+        });
+    }
+    descendants() {
+        return this.memoize("descendants", () => {
+            const result = [];
+            this.visitDescendants(child => result.push(child));
+            return result;
+        });
+    }
+    selfAndDescendants() {
+        return this.memoize("selfAndDescendants", () => {
+            const result = [];
+            this.visitSelfAndDescendants(child => result.push(child));
+            return result;
+        });
+    }
+    siblingsBefore() {
+        return this.memoize('siblingsBefore', () => {
+            if (this.parent) {
+                return this.parent.children.slice(0, this.myIndex());
+            }
+            else {
+                return [];
+            }
+        });
+    }
+    siblingsAfter() {
+        return this.memoize('siblingsAfter', () => {
+            if (this.parent) {
+                return this.parent.children.slice(1 + this.myIndex());
+            }
+            else {
+                return [];
+            }
+        });
+    }
+    siblings() {
+        return this.memoize('siblings', () => [].concat(this.siblingsBefore(), this.siblingsAfter()));
+    }
+    isFirstChild() {
+        return this.memoize('isFirstChild', () => this.parent ? this.myIndex() === 0 : false);
+    }
+    myIndex() {
+        return this.memoize('myIndex', () => {
+            const myIndex = this.parent.children.findIndex(child => child.node === this.node);
+            assert.isTruthy(myIndex >= 0, 'illegal state, expected index to be >= 0');
+            return myIndex;
+        });
+    }
+    isLastChild() {
+        return this.memoize('isLastChild', () => {
+            return this.parent ? this.myIndex() === this.parent.children.length - 1 : false;
+        });
+    }
+    hasSiblings() {
+        return this.parent ? this.node.children.length > 1 : false;
+    }
+    find(predicate) {
+        return find(this.descendants(), predicate);
+    }
+    select(predicate) {
+        return filter(this.descendants(), predicate);
+    }
+    flattenInto(array) {
+        this.visitSelfAndDescendants(child => array.push(child));
+        return array;
+    }
+    ancestors() {
+        return this.memoize('ancestors', () => {
+            return this.parent ? this.parent.ancestors().concat([this.parent]) : [];
+        });
+    }
+    ancestorsAndSelf() {
+        return this.memoize("ancestorsAndSelf", () => {
+            return this.ancestors().concat([(this.decoratedSelf)]);
+        });
+    }
+    pathToParent(parent) {
+        return this.memoize("pathToParent", () => {
+            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');
+            }
+        });
+    }
+    pathToParentAndSelf(parent) {
+        return this.memoize("pathToParentAndSelf", () => {
+            return this.pathToParent(parent).concat([this.decoratedSelf]);
+        });
+    }
+    isRoot() {
+        return !this.parent;
+    }
+    get depth() {
+        return this.isRoot() ? 0 : this.parent.depth + 1;
+    }
+    isLeaf() {
+        return !this.isRoot() && this.node.children.length < 1;
+    }
+    hasChildren() {
+        return this.node.children.length > 0;
+    }
+    depthFromParent(parent) {
+        return this.pathToParent(parent).length;
+    }
+    treeDepth() {
+        return this.memoize("treeDepth", () => {
+            return 1 + this.descendants().map(child => child.depthFromParent(this)).reduce((prev, current) => Math.max(prev, current));
+        });
+    }
+    flatten() {
+        return this.memoize("flatten", () => {
+            return this.flattenInto([]);
+        });
+    }
+    visit(visitor) {
+        visitor.visit(this);
+        return visitor;
+    }
+    visitChildren(visitor) {
+        each(this.children, child => child.visit(visitor));
+        return visitor;
+    }
+    visitSelfAndDescendants(callback) {
+        this.visit(new SelfAndDescendantsVisitor.Each(callback));
+    }
+    visitDescendants(callback) {
+        this.visitChildren(new SelfAndDescendantsVisitor.Each(callback));
+    }
+    memoize(property, factory) {
+        const key = `__${property}`;
+        if (isNil(this[key])) {
+            this[key] = factory();
+        }
+        return this[key];
+    }
+}
+var DecoratedTreeNode;
+(function (DecoratedTreeNode) {
+    function createRoot(node) {
+        return Mixin.createProxy(node, new DecoratedTreeNodeMixin(undefined, node));
+    }
+    DecoratedTreeNode.createRoot = createRoot;
+})(DecoratedTreeNode || (DecoratedTreeNode = {}));
+
+class TreeExpansionModel {
+    constructor(identityOf) {
+        this.identityOf = identityOf;
+        this.collapsedIds = new Set();
+        this._isExpandedPredicate = new MutableValueModel(() => true);
+        this.updatePredicate();
+    }
+    get isExpandedPredicate() {
+        return this._isExpandedPredicate.readonly;
+    }
+    // @Trace()
+    expand(node) {
+        if (this.isCollapsed(node)) {
+            this.collapsedIds.delete(this.identityOf(node.node));
+            this.updatePredicate();
+        }
+    }
+    // @Trace()
+    collapse(node) {
+        if (!this.isCollapsed(node)) {
+            this.collapsedIds.add(this.identityOf(node.node));
+            this.updatePredicate();
+        }
+    }
+    canExpand(node) {
+        return node.hasChildren() && this.isCollapsed(node);
+    }
+    canCollapse(node) {
+        return node.hasChildren() && !this.isCollapsed(node);
+    }
+    isCollapsed(node) {
+        return this.collapsedIds.has(this.identityOf(node.node));
+    }
+    isExpanded(node) {
+        return !this.isCollapsed(node);
+    }
+    ensureAncestorsAndSelfVisible(node) {
+        node.ancestors()
+            .map(a => this.identityOf(node.node))
+            .forEach(id => this.collapsedIds.delete(id));
+        this.updatePredicate();
+    }
+    updatePredicate() {
+        this._isExpandedPredicate.value = (node) => !this.collapsedIds.has(this.identityOf(node.node));
+    }
+}
+
+class TreeLabelColumnModel extends ColumnModel {
+    constructor(columnId, textPropertiesProvider, expansionModel) {
+        super(columnId, textPropertiesProvider);
+        this.expansionModel = expansionModel;
+        this.iconFactory = (node, expanded) => expanded ? 'mat:folder_open' : 'mat:folder';
+        this.cellRenderer(TreeLabelCellRendererComponent);
+    }
+    pluck(property) {
+        this.labelProperty = property;
+    }
+    addIcon(factory) {
+        this.iconFactory = factory;
+    }
+    cellRenderer(componentType) {
+        this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
+            if (firstTime) {
+                component.expansionModel = this.expansionModel;
+            }
+            component.value = rowData.row;
+            component.label = _.isNil(this.labelProperty) ? undefined : rowData.row[this.labelProperty];
+            component.iconFactory = this.iconFactory;
+        }));
+        return this;
+    }
+    selectRowOnClick(selectOnRowClick) {
+        return super.selectRowOnClick(selectOnRowClick);
+    }
+}
+
+class TreeLabelCellRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.iconTypes = [];
+        this.nodeModel = new MutableValueModel();
+        const { chain } = Dsl.disposeWith(this);
+        this.iconList = chain(this.nodeModel).mapToList(node => {
+            const icons = node.ancestors().slice(1).map(ancestor => {
+                return ancestor.isLastChild() ? TreeInheritanceIconComponent.Type.ICON_BLANK : TreeInheritanceIconComponent.Type.ICON_THROUGH;
+            });
+            if (!node.isRoot()) {
+                icons.push(node.isLastChild() ? TreeInheritanceIconComponent.Type.ICON_INHERITED_TERMINAL : TreeInheritanceIconComponent.Type.ICON_INHERITED_THROUGH_TERMINAL);
+            }
+            return icons;
+        });
+    }
+    ngOnInit() {
+        const { chain } = Dsl.disposeWith(this);
+        this.canExpand = chain(this.nodeModel).map(node => {
+            return node.hasChildren() && this.expansionModel.isCollapsed(node);
+        }, { dependsOn: this.expansionModel.isExpandedPredicate });
+        this.canCollapse = chain(this.nodeModel).map(node => {
+            return node.hasChildren() && !this.expansionModel.isCollapsed(node);
+        }, { dependsOn: this.expansionModel.isExpandedPredicate });
+        this.iconModel = chain(this.nodeModel).map(node => {
+            return this.node.isLeaf() ? undefined : this.iconFactory(node, this.expansionModel.isExpanded(this.node));
+        }, { dependsOn: this.expansionModel.isExpandedPredicate });
+    }
+    get isRoot() {
+        return this.node.isRoot();
+    }
+    get isLeaf() {
+        return this.node.isLeaf();
+    }
+    get node() {
+        return this.nodeModel.value;
+    }
+    // @Trace()
+    expandOrCollapse(node) {
+        this.expansionModel.isCollapsed(node) ? this.expansionModel.expand(node) : this.expansionModel.collapse(node);
+    }
+}
+TreeLabelCellRendererComponent.decorators = [
+    { type: 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 = () => [];
+TreeLabelCellRendererComponent.propDecorators = {
+    value: [{ type: Input }],
+    label: [{ type: Input }],
+    iconFactory: [{ type: Input }],
+    expansionModel: [{ type: Input }],
+    isRoot: [{ type: HostBinding, args: ['class.root',] }],
+    isLeaf: [{ type: HostBinding, args: ['class.leaf',] }]
+};
+__decorate([
+    StoreInValueModel('nodeModel'),
+    __metadata("design:type", Object)
+], TreeLabelCellRendererComponent.prototype, "value", void 0);
+
+class TreeToListModel extends ComputedListModel {
+    constructor(source, expansionModel) {
+        super(source);
+        this.source = source;
+        this.expansionModel = expansionModel;
+        this.trackSource(this.expansionModel.isExpandedPredicate);
+    }
+    getIdentityOf(item) {
+        return this.source.identityOf(item.node);
+    }
+    compute(values) {
+        const result = [];
+        values.forEach(value => this.addNodeAndVisibleChildren(DecoratedTreeNode.createRoot(value), result));
+        return result;
+    }
+    addNodeAndVisibleChildren(node, result) {
+        result.push(node);
+        if (node.hasChildren() && !this.expansionModel.isCollapsed(node)) {
+            node.children.forEach(child => this.addNodeAndVisibleChildren(child, result));
+        }
+    }
+}
+
+// import {T } from '@client/api/light-architect/model/area/area.class';
+// TODO:
+//    Selection Models:
+//      - as simple navigation tree
+//      - as editable grid (selecte all, even hidden etc?)
+//      - fixing selection on underlying model changes.
+//      - rendering selection: row highlighting, checkboxes (in the tree renderer or in separate column), both.
+//    Expansion Models:
+//      - Add ability to auto show to depth
+//      - Add a predicate to check default expansion (i.e. has children of a certain type)
+//
+class TreeTableModel extends AbstractTableModel {
+    constructor(source, treeExpansionModel) {
+        super(source);
+        this.treeExpansionModel = treeExpansionModel;
+    }
+    static fromRoot(sourceOfTruth, builder) {
+        const garbage = new GarbageCollector();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(garbage);
+        const children = chain(sourceOfTruth).mapToList(root => [root]);
+        const model = this.fromList(children, builder);
+        model.registerDisposable(garbage);
+        return model;
+    }
+    static fromChildrenOf(sourceOfTruth, builder) {
+        const garbage = new GarbageCollector();
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(garbage);
+        const children = chain(sourceOfTruth).mapToList(root => root.children); // for some reason pluck list can't see 'children'
+        const model = this.fromList(children, builder);
+        model.registerDisposable(garbage);
+        return model;
+    }
+    static fromList(sourceOfTruth, builder) {
+        const treeExpansionModel = new TreeExpansionModel(sourceOfTruth.identityOf);
+        const nodes = new TreeToListModel(sourceOfTruth, treeExpansionModel);
+        const model = new TreeTableModel(nodes, treeExpansionModel);
+        model.registerDisposable(nodes);
+        if (builder)
+            builder(model);
+        return model;
+    }
+    treeControlColumn(builder) {
+        const columnId = 'tree-label';
+        const column = new TreeLabelColumnModel(columnId, () => this.getColumnTextProperties(columnId), this.treeExpansionModel);
+        builder(column);
+        this.addColumn(column);
+    }
+    expand(node) {
+        this.treeExpansionModel.expand(node);
+    }
+    collapse(node) {
+        this.treeExpansionModel.expand(node);
+    }
+    isCollapsed(node) {
+        return this.treeExpansionModel.isCollapsed(node);
+    }
+    ensureAncestorsAndSelfVisible(node) {
+        this.treeExpansionModel.ensureAncestorsAndSelfVisible(node);
+    }
+}
+class FlattenStrategy extends SelfAndDescendantsVisitor {
+    constructor(collapsedIds) {
+        super();
+        this.collapsedIds = collapsedIds;
+        this._areas = [];
+        this._collapsed = new Set(collapsedIds);
+    }
+    onVisit(it) {
+        this._areas.push(it);
+    }
+    shouldVisitChildrenOf(it) {
+        return !this._collapsed.has(it);
+    }
+    get flattenedAreas() {
+        return this._areas;
+    }
+}
+// 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>
+// `;
+class TreeTableComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+}
+TreeTableComponent.decorators = [
+    { type: Component, args: [{
+                selector: "aup-tree-table",
+                template: "<aup-table [tableModel]=\"treeTableModel\"></aup-table>\n",
+                encapsulation: 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}"]
+            },] }
+];
+TreeTableComponent.ctorParameters = () => [];
+TreeTableComponent.propDecorators = {
+    treeTableModel: [{ type: Input }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", TreeTableModel)
+], TreeTableComponent.prototype, "treeTableModel", void 0);
+
 class VerticalFocusContainerComponent extends FocusContainerComponent {
     constructor(focusManager) {
         super(focusManager);
@@ -2925,7 +3513,11 @@ ComponentsModule.decorators = [
                     SeparatorComponent,
                     FlexComponent,
                     AbstractPopupMenuComponent,
-                    PopupMenuRendererComponent
+                    PopupMenuRendererComponent,
+                    TreeTableComponent,
+                    TreeInheritanceIconComponent,
+                    TreeLabelCellRendererComponent,
+                    IconComponent
                 ],
                 imports: [
                     CommonModule,
@@ -2978,7 +3570,8 @@ ComponentsModule.decorators = [
                     CommandFaceComponent,
                     MoreMenuComponent,
                     SeparatorComponent,
-                    FlexComponent
+                    FlexComponent,
+                    TreeTableComponent
                 ],
                 providers: [
                     FocusBindingFactory
@@ -6763,7 +7356,7 @@ class VisitSanitiser {
                 const routeIdDef = placeDef.getRouteIdParameterDef();
                 const routeId = visit.getRouteId();
                 const sanitisedValue = yield routeIdDef.sanitise(routeId, visit, this.placeHistory, this.injector, this.navigationSession.isPopState);
-                console.log({ routeId, sanitisedValue });
+                // console.log({routeId, sanitisedValue});
                 // ###------- EARLY EXIT --------###
                 if (routeIdDef.hasChanged(routeId, sanitisedValue)) {
                     // if the route id has changed we redirect immediately as other
@@ -7016,5 +7609,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenStrategy, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SelfAndDescendantsVisitor, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, TreeToListModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map