@coolon/angular-ui-powerups 11.0.0-alpha.9 → 11.1.0

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

@@ -1,5 +1,5 @@
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, 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, Pipe, 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';
@@ -19,10 +19,11 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, MutableValueModel, DelegatingListModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Trace, TransactionObserver, Functions } from '@coolon/pectin';
+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 { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+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 { 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';
@@ -35,6 +36,7 @@ import { MatListModule } from '@angular/material/list';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
+import * as wakeEvent from 'wake-event';
 
 class CommandDirective extends GarbageCollector {
     constructor(elementRef, matButton, matMenuItem) {
@@ -295,13 +297,75 @@ FocusBindingDirective.propDecorators = {
     onFocusOut: [{ type: HostListener, args: ['focusout',] }]
 };
 
+class HighlightTextModelDirective extends GarbageCollector {
+    constructor() {
+        super();
+    }
+    ngOnDestroy() {
+        this.dispose();
+    }
+}
+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
+                    FocusBindingDirective,
+                    HighlightPipe,
+                    HighlightTextModelDirective
                 ],
                 imports: [
                     CommonModule,
@@ -314,7 +378,9 @@ DirectivesModule.decorators = [
                 ],
                 exports: [
                     CommandDirective,
-                    FocusBindingDirective
+                    FocusBindingDirective,
+                    HighlightPipe,
+                    HighlightTextModelDirective
                 ]
             },] }
 ];
@@ -774,8 +840,18 @@ AbstractPopupMenuComponent.ctorParameters = () => [
 AbstractPopupMenuComponent.propDecorators = {
     xPosition: [{ type: Input }],
     yPosition: [{ type: Input }],
-    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }]
+    triggers: [{ type: ViewChildren, args: [MatMenuTrigger,] }],
+    enabled: [{ type: Input }],
+    enabledModel: [{ type: Input }]
 };
+__decorate([
+    StoreInValueModel("enabledModel"),
+    __metadata("design:type", Boolean)
+], AbstractPopupMenuComponent.prototype, "enabled", void 0);
+__decorate([
+    TrackExternal({ defaultValue: true }),
+    __metadata("design:type", ValueModel)
+], AbstractPopupMenuComponent.prototype, "enabledModel", void 0);
 
 /**
  *
@@ -801,7 +877,7 @@ class MoreMenuComponent extends AbstractPopupMenuComponent {
 MoreMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-more-menu',
-                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                 providers: [
                     { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
                 ]
@@ -821,7 +897,11 @@ __decorate([
 
 var TrackBy;
 (function (TrackBy) {
-    TrackBy.byIndex = (data, index) => index;
+    TrackBy.byIndex = (index, item) => index;
+    function trackByProperty(property) {
+        return (index, item) => item[property];
+    }
+    TrackBy.trackByProperty = trackByProperty;
 })(TrackBy || (TrackBy = {}));
 
 class CommandContainer extends GarbageCollector {
@@ -924,7 +1004,7 @@ class PopupMenuComponent extends AbstractPopupMenuComponent {
 PopupMenuComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-popup-menu',
-                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
                 providers: [
                     { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
                 ]
@@ -981,8 +1061,8 @@ class PopupMenuRendererComponent extends DisposableComponent {
             });
         }
     }
-    isEnabled(data) {
-        return true; //ViewData.getCommand(data).enabled.value;
+    isCommandEnabled(data) {
+        return this.isCommand(data) && data.command.enabled.value;
     }
     // @Trace()
     onCommandFired() {
@@ -999,6 +1079,9 @@ class PopupMenuRendererComponent extends DisposableComponent {
     isPopupMenu(child) {
         return child instanceof AbstractPopupMenuComponent;
     }
+    isPopupMenuEnabled(child) {
+        return this.isPopupMenu(child) && child.enabled;
+    }
     isSeparator(child) {
         return child instanceof SeparatorComponent;
     }
@@ -1016,7 +1099,7 @@ class PopupMenuRendererComponent extends DisposableComponent {
 PopupMenuRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-popup-menu-renderer',
-                template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                matMenuTrigger\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n"
+                template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isCommandEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                matMenuTrigger\n                [disabled]=\"!isPopupMenuEnabled(child)\"\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n"
             },] }
 ];
 PopupMenuRendererComponent.ctorParameters = () => [];
@@ -2007,7 +2090,7 @@ class DefaultCellRendererComponent {
 DefaultCellRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-default-cell-renderer',
-                template: "{{value}}\n",
+                template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n",
                 styles: [""]
             },] }
 ];
@@ -2185,7 +2268,14 @@ class ColumnModel {
     getColumnTextProperties() {
         return this._columnTextProperties || this.textPropertiesProvider();
     }
+    /**
+     * @deprecated use #columnTextProperties instead
+     * @param columnTextProperties
+     */
     textProperties(columnTextProperties) {
+        return this.columnTextProperties(columnTextProperties);
+    }
+    columnTextProperties(columnTextProperties) {
         this._columnTextProperties = columnTextProperties;
         return this;
     }
@@ -2805,7 +2895,7 @@ 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",
-                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}"]
+                styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}"]
             },] }
 ];
 TableComponent.ctorParameters = () => [
@@ -7215,7 +7305,7 @@ PlaceOutletComponent.decorators = [
                 selector: 'aup-place-outlet',
                 template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<div  class=\"not-authorised-component-container\" *ngIf=\"!authorised.value\">\n  <ng-template [cdkPortalOutlet]=\"notAuthorisedNoticePortal\"></ng-template>\n</div>\n",
                 animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:scroll}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}"]
+                styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:auto}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}"]
             },] }
 ];
 PlaceOutletComponent.ctorParameters = () => [
@@ -7269,12 +7359,7 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
         this.commandFactory = Command.createFactory((placeDefinition) => {
             this.placeOutlet.navigate(new Visit(placeDefinition));
         });
-        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));
-        });
+        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 {
@@ -7284,11 +7369,14 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
         }, {
             dependsOn: this.activePlaceDefinition
         });
-        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);
+        // 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);
     }
     getNavigationFace(placeDef) {
         const navItem = placeDef.getPlaceData('nav');
@@ -7298,9 +7386,6 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
             icon: () => navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null)
         };
     }
-    isActive(place) {
-        return;
-    }
     ngOnInit() {
     }
 }
@@ -7964,6 +8049,78 @@ function VisitParameterList(options) {
     };
 }
 
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+// TODO: Merge various wake detection events into this class.  visibility, wake events, websocket connection, online detection.
+// Taken from: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+class VisibilityService extends GarbageCollector {
+    // private _wakeEvents = new MutableStream<Instant>();
+    // private _throttledWakeEvents: Stream<Instant>;
+    constructor(document) {
+        super();
+        this._visibleModel = new MutableValueModel();
+        this.document = document; // see https://stackoverflow.com/a/53715642
+        const { chain } = Dsl.disposeWith(this);
+        // Set the name of the hidden property and the change event for visibility
+        if (typeof this.document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
+            this.attributeName = 'hidden';
+            this.eventName = 'visibilitychange';
+        }
+        else if (typeof this.document['msHidden'] !== 'undefined') {
+            this.attributeName = 'msHidden';
+            this.eventName = 'msvisibilitychange';
+        }
+        else if (typeof this.document['webkitHidden'] !== 'undefined') {
+            this.attributeName = 'webkitHidden';
+            this.eventName = 'webkitvisibilitychange';
+        }
+        // Warn if the browser doesn't support addEventListener or the Page Visibility API
+        if (typeof this.document.addEventListener === 'undefined' || typeof document[this.attributeName] === 'undefined') {
+            console.log('This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.');
+        }
+        else {
+            // Handle page visibility change
+            const handler = () => this.updateVisibilityState();
+            this.document.addEventListener(this.eventName, handler, false);
+            this.onDispose(() => {
+                this.document.removeEventListener(this.eventName, handler);
+            });
+        }
+        wakeEvent(() => this.updateVisibilityState());
+        this._visibleModel.value = this.isVisible();
+        // give the network a chance to come back or we end up with a bunch of failed requests.
+        // should probably also implement a connection service so that we can go
+        // connectionServer.ensureConnectedThen(fireWakeEvent);
+        // this._throttledWakeEvents = chain(this._wakeEvents).throttle(300);
+    }
+    // get wakeEvents(): Stream<Instant> {
+    //   return this._throttledWakeEvents;
+    // }
+    // @trace
+    updateVisibilityState() {
+        this._visibleModel.value = this.isVisible();
+        // this._wakeEvents.publish(Instant.now());
+    }
+    get visibleModel() {
+        return this._visibleModel.readonly;
+    }
+    isHidden() {
+        return !!this.document[this.attributeName];
+    }
+    isVisible() {
+        return !this.isHidden();
+    }
+}
+VisibilityService.ɵprov = ɵɵdefineInjectable({ factory: function VisibilityService_Factory() { return new VisibilityService(ɵɵinject(DOCUMENT)); }, token: VisibilityService, providedIn: "root" });
+VisibilityService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+VisibilityService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -7972,5 +8129,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, 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, 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, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, ɵ0 };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map