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

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

@@ -1,14 +1,35 @@
 (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('@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';
+    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'), require('wake-event')) :
+    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', 'wake-event'], 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, global.wakeEvent));
+}(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, wakeEvent) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
     var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
     var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
     var produce__default = /*#__PURE__*/_interopDefaultLegacy(produce);
+    var wakeEvent__namespace = /*#__PURE__*/_interopNamespace(wakeEvent);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -605,6 +626,71 @@
         onFocusOut: [{ type: i0.HostListener, args: ['focusout',] }]
     };
 
+    var HighlightTextModelDirective = /** @class */ (function (_super) {
+        __extends(HighlightTextModelDirective, _super);
+        function HighlightTextModelDirective() {
+            return _super.call(this) || this;
+        }
+        HighlightTextModelDirective.prototype.ngOnDestroy = function () {
+            this.dispose();
+        };
+        return HighlightTextModelDirective;
+    }(pectin.GarbageCollector));
+    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() {
         }
@@ -614,7 +700,9 @@
         { type: i0.NgModule, args: [{
                     declarations: [
                         CommandDirective,
-                        FocusBindingDirective
+                        FocusBindingDirective,
+                        HighlightPipe,
+                        HighlightTextModelDirective
                     ],
                     imports: [
                         i2.CommonModule,
@@ -627,7 +715,9 @@
                     ],
                     exports: [
                         CommandDirective,
-                        FocusBindingDirective
+                        FocusBindingDirective,
+                        HighlightPipe,
+                        HighlightTextModelDirective
                     ]
                 },] }
     ];
@@ -1154,8 +1244,18 @@
     AbstractPopupMenuComponent.propDecorators = {
         xPosition: [{ type: i0.Input }],
         yPosition: [{ type: i0.Input }],
-        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }]
+        triggers: [{ type: i0.ViewChildren, args: [menu.MatMenuTrigger,] }],
+        enabled: [{ type: i0.Input }],
+        enabledModel: [{ type: i0.Input }]
     };
+    __decorate([
+        pectin.StoreInValueModel("enabledModel"),
+        __metadata("design:type", Boolean)
+    ], AbstractPopupMenuComponent.prototype, "enabled", void 0);
+    __decorate([
+        pectin.TrackExternal({ defaultValue: true }),
+        __metadata("design:type", pectin.ValueModel)
+    ], AbstractPopupMenuComponent.prototype, "enabledModel", void 0);
 
     /**
      *
@@ -1188,7 +1288,7 @@
     MoreMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-more-menu',
-                    template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              mat-button>\n        <aup-command-face [faces]=\"[face]\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n    >\n      <aup-command-face [faces]=\"[face]\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n",
+                    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 }
                     ]
@@ -1207,7 +1307,11 @@
     ], MoreMenuComponent.prototype, "tooltip", void 0);
 
     (function (TrackBy) {
-        TrackBy.byIndex = function (data, index) { return index; };
+        TrackBy.byIndex = function (index, item) { return index; };
+        function trackByProperty(property) {
+            return function (index, item) { return item[property]; };
+        }
+        TrackBy.trackByProperty = trackByProperty;
     })(exports.TrackBy || (exports.TrackBy = {}));
 
     exports.CommandContainer = /** @class */ (function (_super) {
@@ -1356,8 +1460,8 @@
                 });
             }
         };
-        PopupMenuRendererComponent.prototype.isEnabled = function (data) {
-            return true; //ViewData.getCommand(data).enabled.value;
+        PopupMenuRendererComponent.prototype.isCommandEnabled = function (data) {
+            return this.isCommand(data) && data.command.enabled.value;
         };
         // @Trace()
         PopupMenuRendererComponent.prototype.onCommandFired = function () {
@@ -1374,6 +1478,9 @@
         PopupMenuRendererComponent.prototype.isPopupMenu = function (child) {
             return child instanceof AbstractPopupMenuComponent;
         };
+        PopupMenuRendererComponent.prototype.isPopupMenuEnabled = function (child) {
+            return this.isPopupMenu(child) && child.enabled;
+        };
         PopupMenuRendererComponent.prototype.isSeparator = function (child) {
             return child instanceof SeparatorComponent;
         };
@@ -1392,7 +1499,7 @@
     PopupMenuRendererComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -1419,7 +1526,7 @@
     PopupMenuComponent.decorators = [
         { type: i0.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 }
                     ]
@@ -2566,7 +2673,7 @@
     DefaultCellRendererComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-default-cell-renderer',
-                    template: "{{value}}\n",
+                    template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n",
                     styles: [""]
                 },] }
     ];
@@ -2741,7 +2848,14 @@
         ColumnModel.prototype.getColumnTextProperties = function () {
             return this._columnTextProperties || this.textPropertiesProvider();
         };
+        /**
+         * @deprecated use #columnTextProperties instead
+         * @param columnTextProperties
+         */
         ColumnModel.prototype.textProperties = function (columnTextProperties) {
+            return this.columnTextProperties(columnTextProperties);
+        };
+        ColumnModel.prototype.columnTextProperties = function (columnTextProperties) {
             this._columnTextProperties = columnTextProperties;
             return this;
         };
@@ -3447,7 +3561,7 @@
         { 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",
-                    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 = function () { return [
@@ -8357,7 +8471,7 @@
                     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 = function () { return [
@@ -8412,12 +8526,7 @@
             _this.commandFactory = pectin.Command.createFactory(function (placeDefinition) {
                 _this.placeOutlet.navigate(new Visit(placeDefinition));
             });
-            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); });
-            });
+            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 {
@@ -8427,13 +8536,16 @@
             }, {
                 dependsOn: _this.activePlaceDefinition
             });
-            var txo = new pectin.TransactionObserver({ verbose: true }).onEvent(function (e) { return 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);
             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 {
@@ -8442,9 +8554,6 @@
                 icon: function () { return navItem && navItem.icon ? navItem.icon() : placeDef.getPlaceData('navIcon', null); }
             };
         };
-        AbstractPlaceNavigationComponent.prototype.isActive = function (place) {
-            return;
-        };
         AbstractPlaceNavigationComponent.prototype.ngOnInit = function () {
         };
         return AbstractPlaceNavigationComponent;
@@ -9195,6 +9304,84 @@
         };
     }
 
+    /**
+     * @file Automatically generated by barrelsby.
+     */
+
+    // Taken from: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
+    var VisibilityService = /** @class */ (function (_super) {
+        __extends(VisibilityService, _super);
+        // private _wakeEvents = new MutableStream<Instant>();
+        // private _throttledWakeEvents: Stream<Instant>;
+        function VisibilityService(document) {
+            var _this = _super.call(this) || this;
+            _this._visibleModel = new pectin.MutableValueModel();
+            _this.document = document; // see https://stackoverflow.com/a/53715642
+            var chain = pectin.Dsl.disposeWith(_this).chain;
+            // 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
+                var handler_1 = function () { return _this.updateVisibilityState(); };
+                _this.document.addEventListener(_this.eventName, handler_1, false);
+                _this.onDispose(function () {
+                    _this.document.removeEventListener(_this.eventName, handler_1);
+                });
+            }
+            wakeEvent__namespace(function () { return _this.updateVisibilityState(); });
+            _this._visibleModel.value = _this.isVisible();
+            return _this;
+            // 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
+        VisibilityService.prototype.updateVisibilityState = function () {
+            this._visibleModel.value = this.isVisible();
+            // this._wakeEvents.publish(Instant.now());
+        };
+        Object.defineProperty(VisibilityService.prototype, "visibleModel", {
+            get: function () {
+                return this._visibleModel.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        VisibilityService.prototype.isHidden = function () {
+            return !!this.document[this.attributeName];
+        };
+        VisibilityService.prototype.isVisible = function () {
+            return !this.isHidden();
+        };
+        return VisibilityService;
+    }(pectin.GarbageCollector));
+    VisibilityService.ɵprov = i0.ɵɵdefineInjectable({ factory: function VisibilityService_Factory() { return new VisibilityService(i0.ɵɵinject(i2.DOCUMENT)); }, token: VisibilityService, providedIn: "root" });
+    VisibilityService.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
+    VisibilityService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [i2.DOCUMENT,] }] }
+    ]; };
+
     /**
      * @file Automatically generated by barrelsby.
      */
@@ -9268,6 +9455,8 @@
     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;
@@ -9341,6 +9530,7 @@
     exports.TreeToListModel = TreeToListModel;
     exports.UrlService = UrlService;
     exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
+    exports.VisibilityService = VisibilityService;
     exports.Visit = Visit;
     exports.VisitParameter = VisitParameter;
     exports.VisitParameterList = VisitParameterList;