@coolon/angular-ui-powerups 11.0.0-alpha.17 → 11.0.0-alpha.3

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, Pipe, NgModule, Component, ContentChild, ViewEncapsulation, HostBinding, InjectionToken, 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';
@@ -21,12 +21,11 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Trace, Functions } from '@coolon/pectin';
 import { __decorate, __metadata, __awaiter } from 'tslib';
-import { DomSanitizer } from '@angular/platform-browser';
-import _, { find, filter, each, isNil, isEqual } from 'lodash';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import _, { find, filter, each, isNil, isEqual } from 'lodash';
 import { Enum } from 'typescript-string-enums';
 import ResizeObserver from 'resize-observer-polyfill';
-import { assert as assert$1, Stringy, Mixin, 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';
@@ -296,70 +295,13 @@ FocusBindingDirective.propDecorators = {
     onFocusOut: [{ type: HostListener, args: ['focusout',] }]
 };
 
-class HighlightTextModelDirective {
-    constructor() { }
-}
-HighlightTextModelDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[aupHighlightTextModel]'
-            },] }
-];
-HighlightTextModelDirective.ctorParameters = () => [];
-HighlightTextModelDirective.propDecorators = {
-    aupHighlightTextModel: [{ type: Input }]
-};
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", ValueModel)
-], HighlightTextModelDirective.prototype, "aupHighlightTextModel", void 0);
-
-class HighlightPipe extends GarbageCollector {
-    constructor(sanitizer, highlightContext) {
-        super();
-        this.sanitizer = sanitizer;
-        this.highlightContext = highlightContext;
-    }
-    ngOnDestroy() {
-        this.dispose();
-    }
-    transform(value, searchModel) {
-        var _a;
-        const model = searchModel !== null && searchModel !== void 0 ? searchModel : (_a = this.highlightContext) === null || _a === void 0 ? void 0 : _a.aupHighlightTextModel;
-        const searchText = model === null || model === void 0 ? void 0 : model.value;
-        if (_.isEmpty(searchText) || !_.isString(value)) {
-            return value;
-        }
-        // Match in a case insensitive manner
-        const re = new RegExp(searchText, 'gi');
-        const match = value.match(re);
-        // If there's no match, just return the original value.
-        if (!match) {
-            return value;
-        }
-        const result = value.replace(re, '<mark>' + match[0] + '</mark>');
-        return this.sanitizer.bypassSecurityTrustHtml(result);
-    }
-}
-HighlightPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'aupHighlight',
-                pure: false
-            },] }
-];
-HighlightPipe.ctorParameters = () => [
-    { type: DomSanitizer },
-    { type: HighlightTextModelDirective, decorators: [{ type: Optional }] }
-];
-
 class DirectivesModule {
 }
 DirectivesModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
                     CommandDirective,
-                    FocusBindingDirective,
-                    HighlightPipe,
-                    HighlightTextModelDirective
+                    FocusBindingDirective
                 ],
                 imports: [
                     CommonModule,
@@ -372,9 +314,7 @@ DirectivesModule.decorators = [
                 ],
                 exports: [
                     CommandDirective,
-                    FocusBindingDirective,
-                    HighlightPipe,
-                    HighlightTextModelDirective
+                    FocusBindingDirective
                 ]
             },] }
 ];
@@ -580,7 +520,7 @@ CardContainerComponent.decorators = [
     { type: 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: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.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{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+                styles: [":host{--resolved-card-gap:var(--card-gap,16px);--resolved-card-width:var(--card-width,300px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-background:var(--card-background,#fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;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)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.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{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
             },] }
 ];
 CardContainerComponent.ctorParameters = () => [];
@@ -701,9 +641,6 @@ class CommandComponent extends PopupAwareComponent {
         this.activeFace = this.faces.first();
         this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
         this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
-        this.iconOnly = this.faces.select(face => {
-            return _.isEmpty(CommandFace.getTextOf(face)) && !_.isEmpty(CommandFace.getIconOf(face));
-        }).count().equals(this.faces.count());
     }
     isActive(face) {
         return this.activeFace.query().equals(face);
@@ -720,7 +657,7 @@ class CommandComponent extends PopupAwareComponent {
 CommandComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command',
-                template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n    <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n        <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
+                template: "<ng-container [ngSwitch]=\"buttonStyle.value\">\n  <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n    <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n    <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n  <ng-container *ngSwitchDefault>\n    <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\n      <aup-command-face class=\"centered\" [faces]=\"faces.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n",
                 styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]
             },] }
 ];
@@ -881,11 +818,7 @@ __decorate([
 
 var TrackBy;
 (function (TrackBy) {
-    TrackBy.byIndex = (index, item) => index;
-    function trackByProperty(property) {
-        return (index, item) => item[property];
-    }
-    TrackBy.trackByProperty = trackByProperty;
+    TrackBy.byIndex = (data, index) => index;
 })(TrackBy || (TrackBy = {}));
 
 class CommandContainer extends GarbageCollector {
@@ -2071,7 +2004,7 @@ class DefaultCellRendererComponent {
 DefaultCellRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-default-cell-renderer',
-                template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n",
+                template: "{{value}}\n",
                 styles: [""]
             },] }
 ];
@@ -2222,7 +2155,6 @@ class ColumnModel {
         this._flex = false;
         this._visibleModel = new DelegatingValueModel().withDefault(true);
         this.installHeaderRenderer();
-        this.dasherisedColumnId = Stringy.from(columnId).dasherize().toString();
     }
     installHeaderRenderer() {
         this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, (component, column) => {
@@ -2765,32 +2697,15 @@ AbstractTableModel = __decorate([
  *
  * Styling
  * @example
- *  // global settings
- * :root {
- *   --aup-table-column-gap: 10px; // defaults to 24px
- *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
- *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
- *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
- *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
- * }
- *
- * // per table settings.
  * aup-table {
  *   --column-gap: 10px; // defaults to 24px
  *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
  *   --row-selected-background-color: rebeccapurple; // defaults to transparent
- *   --first-column-padding-left: 18px // defaults to --column-gap
- *   --last-column-padding-right: 18px // defaults to --column-gap
- *
- *   aup-table-header-cell-renderer,
  *   aup-table-cell-renderer {
- *     &.aup-col-my-dasherised-column-id {
+ *     &:first-column {
  *       // do stuff
  *     }
- *     &.first-visible-column {
- *       // do stuff
- *     }
- *     &.last-visible-column {
+ *     &:last-column {
  *       // do stuff
  *     }
  *   }
@@ -2854,21 +2769,11 @@ class TableComponent extends ResizeAwareComponent {
         var _a;
         return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
     }
-    getColumnClasses(columnId) {
-        const classes = [`aup-col-${this.columnsById.get(columnId).dasherisedColumnId}`];
-        if (this.isFirstVisibleColumn(columnId)) {
-            classes.push('first-visible-column');
-        }
-        if (this.isLastVisibleColumn(columnId)) {
-            classes.push('last-visible-column');
-        }
-        return classes;
-    }
 }
 TableComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-table',
-                template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class.first-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n                                        [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class.first-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n                                 [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
                 styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:scroll;display:flex;flex-direction:column;align-items:stretch}"]
             },] }
 ];
@@ -3190,26 +3095,26 @@ class DecoratedTreeNodeMixin {
         this.node = node;
     }
     get decoratedSelf() {
-        return this.memoize('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.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', () => {
+        return this.memoize("descendants", () => {
             const result = [];
             this.visitDescendants(child => result.push(child));
             return result;
         });
     }
     selfAndDescendants() {
-        return this.memoize('selfAndDescendants', () => {
+        return this.memoize("selfAndDescendants", () => {
             const result = [];
             this.visitSelfAndDescendants(child => result.push(child));
             return result;
@@ -3272,24 +3177,27 @@ class DecoratedTreeNodeMixin {
         });
     }
     ancestorsAndSelf() {
-        return this.memoize('ancestorsAndSelf', () => {
+        return this.memoize("ancestorsAndSelf", () => {
             return this.ancestors().concat([(this.decoratedSelf)]);
         });
     }
     pathToParent(parent) {
-        if (this.node === parent.node) {
-            return [];
-        }
-        else if (this.parent) {
-            const pathToParent = this.parent.pathToParent(parent);
-            return pathToParent.concat([this.parent]);
-        }
-        else {
-            throw new Error('parent is not an ancestor');
-        }
+        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.pathToParent(parent).concat([this.decoratedSelf]);
+        return this.memoize("pathToParentAndSelf", () => {
+            return this.pathToParent(parent).concat([this.decoratedSelf]);
+        });
     }
     isRoot() {
         return !this.parent;
@@ -3301,18 +3209,18 @@ class DecoratedTreeNodeMixin {
         return !this.isRoot() && this.node.children.length < 1;
     }
     hasChildren() {
-        return this.node.children && this.node.children.length > 0;
+        return this.node.children.length > 0;
     }
     depthFromParent(parent) {
         return this.pathToParent(parent).length;
     }
     treeDepth() {
-        return this.memoize('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.memoize("flatten", () => {
             return this.flattenInto([]);
         });
     }
@@ -3646,18 +3554,12 @@ class FlattenStrategy extends SelfAndDescendantsVisitor {
 class TreeTableComponent extends DisposableComponent {
     constructor() {
         super();
-        /**
-         * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
-         * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
-         * containment area.
-         */
-        this.enableScrolling = false;
     }
 }
 TreeTableComponent.decorators = [
     { type: Component, args: [{
                 selector: "aup-tree-table",
-                template: "<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n",
+                template: "<aup-table [tableModel]=\"treeTableModel\"></aup-table>\n",
                 encapsulation: ViewEncapsulation.None // allow us to target nested table styles
                 ,
                 styles: ["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
@@ -3665,23 +3567,12 @@ TreeTableComponent.decorators = [
 ];
 TreeTableComponent.ctorParameters = () => [];
 TreeTableComponent.propDecorators = {
-    treeTableModel: [{ type: Input }],
-    showHeaderModel: [{ type: Input }],
-    showHeader: [{ type: Input }],
-    enableScrolling: [{ type: Input }, { type: HostBinding, args: ['class.enable-scrolling',] }]
+    treeTableModel: [{ type: Input }]
 };
 __decorate([
     TrackExternal(),
     __metadata("design:type", TreeTableModel)
 ], TreeTableComponent.prototype, "treeTableModel", void 0);
-__decorate([
-    TrackExternal({ defaultValue: true }),
-    __metadata("design:type", ValueModel)
-], TreeTableComponent.prototype, "showHeaderModel", void 0);
-__decorate([
-    StoreInValueModel('showHeaderModel'),
-    __metadata("design:type", Boolean)
-], TreeTableComponent.prototype, "showHeader", void 0);
 
 class VerticalFocusContainerComponent extends FocusContainerComponent {
     constructor(focusManager) {
@@ -3832,9 +3723,12 @@ ComponentsModule.decorators = [
                     TreeTableComponent,
                     TreeInheritanceIconComponent,
                     TreeLabelCellRendererComponent,
+                    IconComponent,
                     BusyOverlayComponent,
                     EmptyStateComponent,
                     PaginatorComponent,
+                    IconComponent,
+                    IconComponent
                 ],
                 imports: [
                     CommonModule,
@@ -5156,15 +5050,6 @@ SelectInputActivity.decorators = [
  *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
  * });
  *
- * Template columns
- * @example
- * const model = TableModel.fromList(heroList, table => {
- *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
- *   table.addTemplateColumn("myTemplate");
- * });
- *
- * <div *aupColumnTemplate="let hero; columnId: 'myTemplate'">{{hero.age}}</div>
- *
  * I18n
  * @example
  * [table.yml]
@@ -5496,7 +5381,6 @@ class PlaceComponent extends DisposableComponent {
         this._active = new MutableValueModel(false);
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         when(this._active).becomesTruthy(() => this.onPlaceReady());
-        this.childPlaces = this.placeDefinition.children.map(d => d.component);
     }
     // @Trace()
     initialiseVisit(visit, notifyVisitChanged) {
@@ -5539,6 +5423,9 @@ class PlaceComponent extends DisposableComponent {
     get placeDefinition() {
         return PlaceComponent.getDefinition(this.constructor);
     }
+    get childPlaces() {
+        return this.placeDefinition.children.map(d => d.component);
+    }
     get active() {
         return this._active.readonly;
     }
@@ -7321,7 +7208,6 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
         super();
         this.placeRouter = placeRouter;
         this._activePlaceComponent = new DelegatingValueModel();
-        this.trackByPlaceDef = (data) => data.place;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.placeDefinitions = chain(this.placesModel)
             .map(c => PlaceComponent.getDefinition(c))
@@ -7333,24 +7219,13 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
         this.commandFactory = Command.createFactory((placeDefinition) => {
             this.placeOutlet.navigate(new Visit(placeDefinition));
         });
-        when(this.placeOutletModel).changes(outlet => this.handlePlaceOutLetChanged(outlet), { initialValue: "triggerChange" });
-        this.activePlaceDefinition = chain(this._activePlaceComponent).pluck('placeDefinition');
-        this.menuItems = chain(this.placeDefinitions).map(d => {
-            return {
-                place: d,
-                active: this.activePlaceDefinition.value === d
-            };
-        }, {
-            dependsOn: this.activePlaceDefinition
+        when(this.placeOutletModel).changes(outlet => {
+            // NOTE: this updates during a change cycle and causes our isActiveMethod to return 2 different
+            // values in the one change detection cycle. So instead we delay the update to a different
+            // tick.
+            setTimeout(() => this._activePlaceComponent.setDelegate(outlet ? outlet.activePlaceModel : null));
         });
-        // const txo = new TransactionObserver({ verbose: true }).onEvent(e => console.log(e.name, e.payload));
-        // txo.observe('this.placesModel', this.placesModel);
-        // txo.observe('this.placeDefinitions', this.placeDefinitions);
-        // txo.observe('this.activePlaceDefinition', this.activePlaceDefinition);
-        // txo.observe('this.menuItems', this.menuItems);
-    }
-    handlePlaceOutLetChanged(outlet) {
-        this._activePlaceComponent.setDelegate(outlet ? outlet.activePlaceModel : null);
+        this.activePlaceDefinition = chain(this._activePlaceComponent).pluck('placeDefinition');
     }
     getNavigationFace(placeDef) {
         const navItem = placeDef.getPlaceData('nav');
@@ -7360,6 +7235,9 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
             icon: () => navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null)
         };
     }
+    isActive(place) {
+        return this.activePlaceDefinition.query().equals(place);
+    }
     ngOnInit() {
     }
 }
@@ -7408,7 +7286,7 @@ class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
 ListPlaceNavComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-list-place-nav',
-                template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
+                template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n",
                 styles: [":host{display:flex;flex-direction:column;--selected-border-color:#838383;--selected-color:inherit;--selected-background:#f1f1f1}mat-nav-list{padding-top:0}a{border-right:2px solid transparent}a.active{border-right:2px solid var(--selected-border-color);background:var(--selected-background);color:var(--selected-color)}"]
             },] }
 ];
@@ -7476,7 +7354,7 @@ class SidePlaceNavigationComponent extends AbstractPlaceNavigationComponent {
 SidePlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-side-place-navigation',
-                template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
+                template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [class.active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(placeDefinition).icon()\" [icon]=\"getNavigationFace(placeDefinition).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(placeDefinition).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n",
                 styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width:var(--nav-width,56px);--resolved-nav-item-height:var(--nav-item-height,var(--resolved-nav-item-width));--resolved-expanded-width:var(--nav-expanded-width,235px);--resolved-color:var(--nav-color,hsla(0,0%,100%,0.9));--resolved-background-color:var(--nav-background-color,#555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}"]
             },] }
 ];
@@ -7496,7 +7374,7 @@ class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
 TabbedPlaceNavigationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-tabbed-place-navigation',
-                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</nav>\n",
+                template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link *ngFor=\"let placeDefinition of placeDefinitions.value\"\n     [pectinCommand]=\"commandFactory.create(placeDefinition)\"\n     [active]=\"isActive(placeDefinition)\"\n     [matTooltip]=\"getNavigationFace(placeDefinition).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(placeDefinition)]\"></aup-command-face>\n  </a>\n</nav>\n",
                 styles: [""]
             },] }
 ];
@@ -8031,5 +7909,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenStrategy, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, 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 };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractInputActivity, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddItemInteractionContextComponent, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenStrategy, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, IconComponent, InPlaceInteractionContextComponent, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ListPropertyColumnModel, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, 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