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

package/assets/table.scss

@@ -1,9 +1,7 @@
 aup-table {
-  --resolved-column-gap: var(--column-gap, var(--aup-table-column-gap, 24px)); // material design table column padding
-  --resolved-row-selected-background-color: var(--row-selected-background-color, var(--aup-table-row-selected-background-color, rgba(0, 0, 255, 0.04)));
-  --resolved-row-hover-background-color: var(--row-hover-background-color, var(--aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)));
-  --resolved-first-column-padding-left: var(--first-column-padding-left, var(--aup-table-first-column-padding-left, var(--resolved-column-gap)));
-  --resolved-last-column-padding-right: var(--last-column-padding-right, var(--aup-table-last-column-padding-right, var(--resolved-column-gap)));
+  --default-column-gap: var(--column-gap, 24px); // material design table column padding
+  --resolved-row-selected-background-color: var(--row-selected-background-color, rgba(0, 0, 255, 0.04));
+  --resolved-row-hover-background-color: var(--row-hover-background-color, rgba(0, 0, 0, 0.05));
 
   &.hide-header {
     .mat-table thead {
@@ -66,14 +64,9 @@ aup-table {
     height: 100%;
     min-height: 47px; // same as mat table row height - border bottom.
 
-    padding-left: var(--resolved-column-gap);
-
-    &.first-visible-column {
-      padding-left: var(--resolved-first-column-padding-left);
-    }
-
+    padding-left: var(--default-column-gap);
     &.last-visible-column {
-      padding-right: var(--resolved-last-column-padding-right);
+      padding-right: var(--default-column-gap);
     }
   }
 
@@ -85,7 +78,7 @@ aup-table {
 
     &.padChild {
       > *:first-child {
-        padding-left: var(--resolved-column-gap);
+        padding-left: var(--default-column-gap);
         flex: 1;
       }
     }

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', 'resize-observer-polyfill', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.src, global.typescriptStringEnums, global.ResizeObserver, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations));
-}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, src, typescriptStringEnums, ResizeObserver, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('lodash'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@typescript-plus/fast-memoize-decorator/dist/src', 'lodash', 'typescript-string-enums', 'resize-observer-polyfill', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.src, global._, global.typescriptStringEnums, global.ResizeObserver, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations));
+}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, src, _, typescriptStringEnums, ResizeObserver, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -605,66 +605,6 @@
         onFocusOut: [{ type: i0.HostListener, args: ['focusout',] }]
     };
 
-    var HighlightTextModelDirective = /** @class */ (function () {
-        function HighlightTextModelDirective() {
-        }
-        return HighlightTextModelDirective;
-    }());
-    HighlightTextModelDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[aupHighlightTextModel]'
-                },] }
-    ];
-    HighlightTextModelDirective.ctorParameters = function () { return []; };
-    HighlightTextModelDirective.propDecorators = {
-        aupHighlightTextModel: [{ type: i0.Input }]
-    };
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", pectin.ValueModel)
-    ], HighlightTextModelDirective.prototype, "aupHighlightTextModel", void 0);
-
-    var HighlightPipe = /** @class */ (function (_super) {
-        __extends(HighlightPipe, _super);
-        function HighlightPipe(sanitizer, highlightContext) {
-            var _this = _super.call(this) || this;
-            _this.sanitizer = sanitizer;
-            _this.highlightContext = highlightContext;
-            return _this;
-        }
-        HighlightPipe.prototype.ngOnDestroy = function () {
-            this.dispose();
-        };
-        HighlightPipe.prototype.transform = function (value, searchModel) {
-            var _a;
-            var model = searchModel !== null && searchModel !== void 0 ? searchModel : (_a = this.highlightContext) === null || _a === void 0 ? void 0 : _a.aupHighlightTextModel;
-            var searchText = model === null || model === void 0 ? void 0 : model.value;
-            if (___default['default'].isEmpty(searchText) || !___default['default'].isString(value)) {
-                return value;
-            }
-            // Match in a case insensitive manner
-            var re = new RegExp(searchText, 'gi');
-            var match = value.match(re);
-            // If there's no match, just return the original value.
-            if (!match) {
-                return value;
-            }
-            var result = value.replace(re, '<mark>' + match[0] + '</mark>');
-            return this.sanitizer.bypassSecurityTrustHtml(result);
-        };
-        return HighlightPipe;
-    }(pectin.GarbageCollector));
-    HighlightPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'aupHighlight',
-                    pure: false
-                },] }
-    ];
-    HighlightPipe.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer },
-        { type: HighlightTextModelDirective, decorators: [{ type: i0.Optional }] }
-    ]; };
-
     var DirectivesModule = /** @class */ (function () {
         function DirectivesModule() {
         }
@@ -674,9 +614,7 @@
         { type: i0.NgModule, args: [{
                     declarations: [
                         CommandDirective,
-                        FocusBindingDirective,
-                        HighlightPipe,
-                        HighlightTextModelDirective
+                        FocusBindingDirective
                     ],
                     imports: [
                         i2.CommonModule,
@@ -689,9 +627,7 @@
                     ],
                     exports: [
                         CommandDirective,
-                        FocusBindingDirective,
-                        HighlightPipe,
-                        HighlightTextModelDirective
+                        FocusBindingDirective
                     ]
                 },] }
     ];
@@ -793,7 +729,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-card-container',
                     template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                    styles: [":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 = function () { return []; };
@@ -1073,9 +1009,6 @@
             _this.activeFace = _this.faces.first();
             _this.buttonStyle = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getStyleOf(f); });
             _this.colorModel = chain(_this.activeFace).map(function (f) { return exports.CommandFace.getColorOf(f); });
-            _this.iconOnly = _this.faces.select(function (face) {
-                return ___default['default'].isEmpty(exports.CommandFace.getTextOf(face)) && !___default['default'].isEmpty(exports.CommandFace.getIconOf(face));
-            }).count().equals(_this.faces.count());
             return _this;
         }
         CommandComponent.prototype.isActive = function (face) {
@@ -1094,7 +1027,7 @@
     CommandComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-command',
-                    template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\">\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}"]
                 },] }
     ];
@@ -1271,11 +1204,7 @@
     ], MoreMenuComponent.prototype, "tooltip", void 0);
 
     (function (TrackBy) {
-        TrackBy.byIndex = function (index, item) { return index; };
-        function trackByProperty(property) {
-            return function (index, item) { return item[property]; };
-        }
-        TrackBy.trackByProperty = trackByProperty;
+        TrackBy.byIndex = function (data, index) { return index; };
     })(exports.TrackBy || (exports.TrackBy = {}));
 
     exports.CommandContainer = /** @class */ (function (_super) {
@@ -2634,7 +2563,7 @@
     DefaultCellRendererComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-default-cell-renderer',
-                    template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n",
+                    template: "{{value}}\n",
                     styles: [""]
                 },] }
     ];
@@ -2778,7 +2707,6 @@
             this._flex = false;
             this._visibleModel = new pectin.DelegatingValueModel().withDefault(true);
             this.installHeaderRenderer();
-            this.dasherisedColumnId = typescriptUtilities.Stringy.from(columnId).dasherize().toString();
         }
         ColumnModel.prototype.installHeaderRenderer = function () {
             this.cellHeaderRenderer(DefaultHeaderCellRendererComponent, function (component, column) {
@@ -3404,32 +3332,15 @@
      *
      * 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
      *     }
      *   }
@@ -3499,22 +3410,12 @@
             var _a;
             return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
-        TableComponent.prototype.getColumnClasses = function (columnId) {
-            var 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;
-        };
         return TableComponent;
     }(ResizeAwareComponent));
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-table',
-                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                    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}"]
                 },] }
     ];
@@ -4013,7 +3914,7 @@
         Object.defineProperty(DecoratedTreeNodeMixin.prototype, "decoratedSelf", {
             get: function () {
                 var _this = this;
-                return this.memoize('decoratedSelf', function () {
+                return this.memoize("decoratedSelf", function () {
                     return _this.parent ? _this.parent.children.find(function (child) { return child.node === _this.node; }) : exports.DecoratedTreeNode.createRoot(_this.node);
                 });
             },
@@ -4023,7 +3924,7 @@
         Object.defineProperty(DecoratedTreeNodeMixin.prototype, "children", {
             get: function () {
                 var _this = this;
-                return this.memoize('children', function () {
+                return this.memoize("children", function () {
                     return _this.node.children ? _this.node.children.map(function (child) {
                         return typescriptUtilities.Mixin.createProxy(child, new DecoratedTreeNodeMixin(_this.decoratedSelf, child));
                     }) : [];
@@ -4034,7 +3935,7 @@
         });
         DecoratedTreeNodeMixin.prototype.descendants = function () {
             var _this = this;
-            return this.memoize('descendants', function () {
+            return this.memoize("descendants", function () {
                 var result = [];
                 _this.visitDescendants(function (child) { return result.push(child); });
                 return result;
@@ -4042,7 +3943,7 @@
         };
         DecoratedTreeNodeMixin.prototype.selfAndDescendants = function () {
             var _this = this;
-            return this.memoize('selfAndDescendants', function () {
+            return this.memoize("selfAndDescendants", function () {
                 var result = [];
                 _this.visitSelfAndDescendants(function (child) { return result.push(child); });
                 return result;
@@ -4113,24 +4014,29 @@
         };
         DecoratedTreeNodeMixin.prototype.ancestorsAndSelf = function () {
             var _this = this;
-            return this.memoize('ancestorsAndSelf', function () {
+            return this.memoize("ancestorsAndSelf", function () {
                 return _this.ancestors().concat([(_this.decoratedSelf)]);
             });
         };
         DecoratedTreeNodeMixin.prototype.pathToParent = function (parent) {
-            if (this.node === parent.node) {
-                return [];
-            }
-            else if (this.parent) {
-                var pathToParent = this.parent.pathToParent(parent);
-                return pathToParent.concat([this.parent]);
-            }
-            else {
-                throw new Error('parent is not an ancestor');
-            }
+            var _this = this;
+            return this.memoize("pathToParent", function () {
+                if (_this.node === parent.node) {
+                    return [];
+                }
+                else if (_this.parent) {
+                    return _this.parent.pathToParent(parent).concat([_this.parent]);
+                }
+                else {
+                    throw new Error('parent is not an ancestor');
+                }
+            });
         };
         DecoratedTreeNodeMixin.prototype.pathToParentAndSelf = function (parent) {
-            return this.pathToParent(parent).concat([this.decoratedSelf]);
+            var _this = this;
+            return this.memoize("pathToParentAndSelf", function () {
+                return _this.pathToParent(parent).concat([_this.decoratedSelf]);
+            });
         };
         DecoratedTreeNodeMixin.prototype.isRoot = function () {
             return !this.parent;
@@ -4146,20 +4052,20 @@
             return !this.isRoot() && this.node.children.length < 1;
         };
         DecoratedTreeNodeMixin.prototype.hasChildren = function () {
-            return this.node.children && this.node.children.length > 0;
+            return this.node.children.length > 0;
         };
         DecoratedTreeNodeMixin.prototype.depthFromParent = function (parent) {
             return this.pathToParent(parent).length;
         };
         DecoratedTreeNodeMixin.prototype.treeDepth = function () {
             var _this = this;
-            return this.memoize('treeDepth', function () {
+            return this.memoize("treeDepth", function () {
                 return 1 + _this.descendants().map(function (child) { return child.depthFromParent(_this); }).reduce(function (prev, current) { return Math.max(prev, current); });
             });
         };
         DecoratedTreeNodeMixin.prototype.flatten = function () {
             var _this = this;
-            return this.memoize('flatten', function () {
+            return this.memoize("flatten", function () {
                 return _this.flattenInto([]);
             });
         };
@@ -4369,21 +4275,14 @@
     var TreeTableComponent = /** @class */ (function (_super) {
         __extends(TreeTableComponent, _super);
         function TreeTableComponent() {
-            var _this = _super.call(this) || this;
-            /**
-             * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
-             * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
-             * containment area.
-             */
-            _this.enableScrolling = false;
-            return _this;
+            return _super.call(this) || this;
         }
         return TreeTableComponent;
     }(DisposableComponent));
     TreeTableComponent.decorators = [
         { type: i0.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: i0.ViewEncapsulation.None // allow us to target nested table styles
                     ,
                     styles: ["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
@@ -4391,23 +4290,12 @@
     ];
     TreeTableComponent.ctorParameters = function () { return []; };
     TreeTableComponent.propDecorators = {
-        treeTableModel: [{ type: i0.Input }],
-        showHeaderModel: [{ type: i0.Input }],
-        showHeader: [{ type: i0.Input }],
-        enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }]
+        treeTableModel: [{ type: i0.Input }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", TreeTableModel)
     ], TreeTableComponent.prototype, "treeTableModel", void 0);
-    __decorate([
-        pectin.TrackExternal({ defaultValue: true }),
-        __metadata("design:type", pectin.ValueModel)
-    ], TreeTableComponent.prototype, "showHeaderModel", void 0);
-    __decorate([
-        pectin.StoreInValueModel('showHeaderModel'),
-        __metadata("design:type", Boolean)
-    ], TreeTableComponent.prototype, "showHeader", void 0);
 
     var VerticalFocusContainerComponent = /** @class */ (function (_super) {
         __extends(VerticalFocusContainerComponent, _super);
@@ -4580,9 +4468,12 @@
                         TreeTableComponent,
                         exports.TreeInheritanceIconComponent,
                         TreeLabelCellRendererComponent,
+                        exports.IconComponent,
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
+                        exports.IconComponent,
+                        exports.IconComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -6071,15 +5962,6 @@
      *   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]
@@ -6446,7 +6328,6 @@
             _this._active = new pectin.MutableValueModel(false);
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             when(_this._active).becomesTruthy(function () { return _this.onPlaceReady(); });
-            _this.childPlaces = _this.placeDefinition.children.map(function (d) { return d.component; });
             return _this;
         }
         // @Trace()
@@ -6496,6 +6377,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PlaceComponent.prototype, "childPlaces", {
+            get: function () {
+                return this.placeDefinition.children.map(function (d) { return d.component; });
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(PlaceComponent.prototype, "active", {
             get: function () {
                 return this._active.readonly;
@@ -8468,7 +8356,6 @@
             var _this = _super.call(this) || this;
             _this.placeRouter = placeRouter;
             _this._activePlaceComponent = new pectin.DelegatingValueModel();
-            _this.trackByPlaceDef = function (data) { return data.place; };
             var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             _this.placeDefinitions = chain(_this.placesModel)
                 .map(function (c) { return exports.PlaceComponent.getDefinition(c); })
@@ -8480,26 +8367,15 @@
             _this.commandFactory = pectin.Command.createFactory(function (placeDefinition) {
                 _this.placeOutlet.navigate(new Visit(placeDefinition));
             });
-            when(_this.placeOutletModel).changes(function (outlet) { return _this.handlePlaceOutLetChanged(outlet); }, { initialValue: "triggerChange" });
-            _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
-            _this.menuItems = chain(_this.placeDefinitions).map(function (d) {
-                return {
-                    place: d,
-                    active: _this.activePlaceDefinition.value === d
-                };
-            }, {
-                dependsOn: _this.activePlaceDefinition
+            when(_this.placeOutletModel).changes(function (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(function () { return _this._activePlaceComponent.setDelegate(outlet ? outlet.activePlaceModel : null); });
             });
+            _this.activePlaceDefinition = chain(_this._activePlaceComponent).pluck('placeDefinition');
             return _this;
-            // 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);
         }
-        AbstractPlaceNavigationComponent.prototype.handlePlaceOutLetChanged = function (outlet) {
-            this._activePlaceComponent.setDelegate(outlet ? outlet.activePlaceModel : null);
-        };
         AbstractPlaceNavigationComponent.prototype.getNavigationFace = function (placeDef) {
             var navItem = placeDef.getPlaceData('nav');
             return {
@@ -8508,6 +8384,9 @@
                 icon: function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); }
             };
         };
+        AbstractPlaceNavigationComponent.prototype.isActive = function (place) {
+            return this.activePlaceDefinition.query().equals(place);
+        };
         AbstractPlaceNavigationComponent.prototype.ngOnInit = function () {
         };
         return AbstractPlaceNavigationComponent;
@@ -8559,7 +8438,7 @@
     ListPlaceNavComponent.decorators = [
         { type: i0.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)}"]
                 },] }
     ];
@@ -8630,7 +8509,7 @@
     SidePlaceNavigationComponent.decorators = [
         { type: i0.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)}"]
                 },] }
     ];
@@ -8652,7 +8531,7 @@
     TabbedPlaceNavigationComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -9331,8 +9210,6 @@
     exports.FocusContainerComponent = FocusContainerComponent;
     exports.FocusableComponent = FocusableComponent;
     exports.HEADER_CELL_RENDERER_PORTAL = HEADER_CELL_RENDERER_PORTAL;
-    exports.HighlightPipe = HighlightPipe;
-    exports.HighlightTextModelDirective = HighlightTextModelDirective;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionContextTriggerFor = InteractionContextTriggerFor;
     exports.InteractionModule = InteractionModule;