@coolon/angular-ui-powerups 16.1.0-aplpha.9 → 16.1.0-aplpha.90

package/fesm2022/coolon-angular-ui-powerups.mjs

@@ -2,7 +2,7 @@ import { ObserversModule } from '@angular/cdk/observers';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, inject, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ViewEncapsulation, InjectionToken, ViewChild, ViewChildren, EventEmitter, Output, SkipSelf, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID } from '@angular/core';
+import { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, ChangeDetectorRef, inject, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, ViewChild, ViewChildren, EventEmitter, Output, SkipSelf, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID } from '@angular/core';
 import * as i2$4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4$2 from '@angular/material/form-field';
@@ -17,7 +17,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i3$2 from '@angular/cdk/portal';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$2 from '@angular/cdk/scrolling';
-import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, CdkScrollableModule, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i7 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2 from '@angular/material/button';
@@ -38,35 +38,34 @@ import * as i2$6 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i4$5 from 'ng-table-virtual-scroll';
+import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
 import * as i1$3 from '@coolon/pectin';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, MutableValueModel, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ProxyRegistry, TransactionObserver, DelegatingCommand, PagedListModel, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, DirtyTrackingForm, ProxyRegistry, DelegatingCommand, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
 import { __decorate, __param, __metadata } from 'tslib';
 import * as i1 from '@angular/platform-browser';
 import escapeStringRegexp from 'escape-string-regexp';
-import { isEmpty, isString, isFunction, isNil, isInteger, isObject, isEqual, join, first, uniq, last as last$1, isNumber, isNaN as isNaN$1 } from 'lodash';
+import { isEmpty, isString, isFunction, isNil, isInteger, isObject, isEqual, join, last, first, uniq, findLast, isNumber, isNaN as isNaN$1 } from 'lodash-es';
 import { marked } from 'marked';
-import { Memoize } from '@typescript-plus/fast-memoize-decorator';
+import { MemoizeGet, lang as lang$1, assert as assert$1, Stringy, Klass, Opts } from '@coolon/typescript-utilities';
 import { Enum } from 'typescript-string-enums';
-import { lang as lang$1, assert as assert$1, Stringy, Klass, Opts } from '@coolon/typescript-utilities';
 import * as i5 from '@angular/material/core';
-import produce from 'immer';
+import { Memoize } from 'fast-typescript-memoize';
+import { produce } from 'immer';
 import ResizeObserver from 'resize-observer-polyfill';
-import { isFunction as isFunction$1, isNil as isNil$1, isEmpty as isEmpty$1, last, findLast } from 'lodash-es';
+import { generateKeyBetween } from 'fractional-indexing';
 import * as i5$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i7$1 from '@angular/flex-layout';
-import { FlexModule, GridModule } from '@angular/flex-layout';
 import * as i1$6 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import * as i1$4 from '@angular/router';
 import { ActivatedRouteSnapshot, UrlSegment, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterModule } from '@angular/router';
-import { Memoize as Memoize$1 } from 'typescript-memoize';
 import 'reflect-metadata';
 import * as i1$5 from '@angular/cdk/overlay';
+import { style, trigger, transition, animate, group, query } from '@angular/animations';
 import { MatCardModule } from '@angular/material/card';
 import * as i3$3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { style, query, group, animate, trigger, transition } from '@angular/animations';
 
 class CommandDirective extends GarbageCollector {
     elementRef;
@@ -213,11 +212,12 @@ var Track;
 
 class DisposableComponent extends GarbageCollector {
     trackById = Track.byId();
-    #_loaded$ = new MutableValueModel();
-    #asyncLoadables = [];
-    #awaitedLoadables = [];
+    // #_loaded$ = new MutableValueModel<boolean>();
+    // #asyncLoadables: Loadable[] = [];
+    // #awaitedLoadables: Loadable[] = [];
     #initCallbacks = [];
     #initialised = false;
+    cdr = this.inject(ChangeDetectorRef);
     onInit(callback) {
         if (this.#initialised) {
             callback();
@@ -226,44 +226,25 @@ class DisposableComponent extends GarbageCollector {
             this.#initCallbacks.push(callback);
         }
     }
-    get loaded$() {
-        return this.#_loaded$.readonly$;
-    }
     ngOnInit() {
         this.#initCallbacks.forEach(it => it());
-        this.#asyncLoadables.forEach(it => it.ensureLoaded());
-        if (this.#awaitedLoadables.length > 0) {
-            Promise.all(this.#awaitedLoadables.map(it => {
-                return it.ensureLoaded(); //.then(() => console.log(`${it.constructor.name} loaded`));
-            })).then(() => {
-                this.#_loaded$.value = true;
-            });
-        }
-        else {
-            this.#_loaded$.value = true;
-        }
         this.#initialised = true;
     }
+    ngOnDestroy() {
+        this.dispose();
+    }
     inject(token) {
         return inject(token);
     }
-    injectLoadable(token, options) {
-        const loadable = inject(token);
-        if (this.loaded$.value) {
-            loadable.ensureLoaded();
-        }
-        else {
-            if (!options || options.wait === true) {
-                this.#awaitedLoadables.push(loadable);
-            }
-            else {
-                this.#asyncLoadables.push(loadable);
-            }
-        }
-        return loadable;
-    }
-    ngOnDestroy() {
-        this.dispose();
+    /**
+     * Monitors the specified models for any change and triggers and angular change detect cycle.  This is intended for use
+     * when the component uses the ON_PUSH change detection strategy.
+     * @param models
+     * @protected
+     */
+    trackChangesAndMarkForCheck(...models) {
+        const { when } = Dsl.disposeWith(this);
+        when.anyOf(...models).changes(() => this.cdr.markForCheck());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DisposableComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: DisposableComponent, usesInheritance: true, ngImport: i0 });
@@ -736,42 +717,42 @@ var CommandFace;
         }
     }
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "text", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "icon", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "iconPosition", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "tooltip", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "iconPositionStart", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "iconPositionEnd", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "color", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [])
     ], Adapter.prototype, "style", null);
@@ -842,6 +823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ["class.disable-scroll"]
             }] } });
 
+/* eslint-disable @angular-eslint/no-host-metadata-property */
 class IconComponent {
     _icon;
     prefix;
@@ -873,11 +855,13 @@ class IconComponent {
         return `fa-${this.suffix}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: IconComponent, selector: "aup-icon", inputs: { icon: "icon" }, host: { properties: { "attr.icon": "this.icon" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\" class=\"faIconWrapper\">\n    <i class=\"fa-solid\" [class]=\"faIcon\"></i>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n", styles: [":host{display:inline-flex;--resolved-size: var(--aup-icon-size, 24px);width:var(--resolved-size) fa-icon;width-vertical-align:middle}:host .faIconWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:var(--resolved-size);height:var(--resolved-size)}:host .svgIcon{width:var(--resolved-size);height:var(--resolved-size)}:host :host(.mat-chip-remove){--aup-icon-size: 18px}:host mat-icon{font-size:var(--resolved-size);width:var(--resolved-size);height:var(--resolved-size);margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: IconComponent, selector: "aup-icon", inputs: { icon: "icon" }, host: { properties: { "attr.icon": "this.icon" }, classAttribute: "mat-icon" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\" class=\"faIconWrapper\">\n    <i class=\"fa-solid\" [class]=\"faIcon\"></i>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n", styles: [":host{display:inline-flex;--resolved-size: var(--aup-icon-size, 24px);width:var(--resolved-size)!important;min-width:var(--resolved-size)!important;height:var(--resolved-size)!important;min-height:var(--resolved-size)!important}:host fa-icon{vertical-align:middle}:host .faIconWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host .svgIcon{width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host :host(.mat-chip-remove){--aup-icon-size: 18px}:host mat-icon{font-size:var(--resolved-size)!important;width:var(--resolved-size)!important;height:var(--resolved-size)!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-icon', template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\" class=\"faIconWrapper\">\n    <i class=\"fa-solid\" [class]=\"faIcon\"></i>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n", styles: [":host{display:inline-flex;--resolved-size: var(--aup-icon-size, 24px);width:var(--resolved-size) fa-icon;width-vertical-align:middle}:host .faIconWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:var(--resolved-size);height:var(--resolved-size)}:host .svgIcon{width:var(--resolved-size);height:var(--resolved-size)}:host :host(.mat-chip-remove){--aup-icon-size: 18px}:host mat-icon{font-size:var(--resolved-size);width:var(--resolved-size);height:var(--resolved-size);margin-right:0!important}\n"] }]
+            args: [{ selector: 'aup-icon', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "mat-icon" // this ensures angular form styles that target mat icon also work with us
+                    }, template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\" class=\"faIconWrapper\">\n    <i class=\"fa-solid\" [class]=\"faIcon\"></i>\n  </div>\n\n  <mat-icon *ngSwitchDefault\n            [matTooltip]=\"errorMessage\">\n    bug_report\n  </mat-icon>\n\n</ng-container>\n\n", styles: [":host{display:inline-flex;--resolved-size: var(--aup-icon-size, 24px);width:var(--resolved-size)!important;min-width:var(--resolved-size)!important;height:var(--resolved-size)!important;min-height:var(--resolved-size)!important}:host fa-icon{vertical-align:middle}:host .faIconWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host .svgIcon{width:var(--resolved-size)!important;height:var(--resolved-size)!important}:host :host(.mat-chip-remove){--aup-icon-size: 18px}:host mat-icon{font-size:var(--resolved-size)!important;width:var(--resolved-size)!important;height:var(--resolved-size)!important;margin-right:0!important}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }, {
@@ -908,6 +892,7 @@ class CommandFaceComponent extends DisposableComponent {
     // tslint:disable-next-line:no-input-rename
     get _rawFaces() { return this.#_rawFaces_accessor_storage; }
     set _rawFaces(value) { this.#_rawFaces_accessor_storage = value; }
+    hasTextAndLeadingIcon$;
     set face(face) {
         this.faces$.value = [face];
     }
@@ -927,6 +912,7 @@ class CommandFaceComponent extends DisposableComponent {
         const activeFace = this.faceAdapters.first();
         this.activeIcon = activeFace.pluck("icon");
         this.activeColor = activeFace.pluck("color");
+        this.hasTextAndLeadingIcon$ = valueOf.all(this.activeIcon.isNotNil(), activeFace.pluckString('text').isNotBlank(), activeFace.pluck("iconPosition").doesNotEqual(CommandFace.Position.END)).areTruthy();
     }
     shouldIncludeIcon(face) {
         return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
@@ -940,8 +926,11 @@ class CommandFaceComponent extends DisposableComponent {
     get color() {
         return this.activeColor.value;
     }
+    get hasTextAndIcon() {
+        return this.hasTextAndLeadingIcon$.value;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandFaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommandFaceComponent, selector: "aup-command-face", inputs: { _rawFaces: ["faces", "_rawFaces"], face: "face", ignoreIcon: "ignoreIcon", ignoreText: "ignoreText", includeMissingIconInLayout: "includeMissingIconInLayout" }, host: { properties: { "class.hide-icon": "this.requiresMissingIconInLayout", "attr.color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n", styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommandFaceComponent, selector: "aup-command-face", inputs: { _rawFaces: ["faces", "_rawFaces"], face: "face", ignoreIcon: "ignoreIcon", ignoreText: "ignoreText", includeMissingIconInLayout: "includeMissingIconInLayout" }, host: { properties: { "class.hide-icon": "this.requiresMissingIconInLayout", "attr.color": "this.color", "class.has-text-and-leading-icon": "this.hasTextAndIcon" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n", styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container>span{white-space:nowrap}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}aup-command-face.has-text-and-leading-icon{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 __decorate([
     StoreInListModel("faces$"),
@@ -949,7 +938,7 @@ __decorate([
 ], CommandFaceComponent.prototype, "_rawFaces", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandFaceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-command-face', encapsulation: ViewEncapsulation.None, template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n", styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"] }]
+            args: [{ selector: 'aup-command-face', encapsulation: ViewEncapsulation.None, template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n", styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container>span{white-space:nowrap}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}aup-command-face.has-text-and-leading-icon{margin-top:4px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { _rawFaces: [{
                 type: Input,
                 args: ['faces']
@@ -967,6 +956,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], color: [{
                 type: HostBinding,
                 args: ['attr.color']
+            }], hasTextAndIcon: [{
+                type: HostBinding,
+                args: ['class.has-text-and-leading-icon']
             }] } });
 
 /**
@@ -1070,11 +1062,11 @@ class CardContainerComponent extends AbstractCardContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CardContainerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CardContainerComponent, selector: "aup-card-container", inputs: { columnCount: "columnCount", enableScroll: "enableScroll" }, host: { properties: { "class.auto-columns": "this.isAutoColumns", "class.single-column": "this.isSingleColumn" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <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  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enableScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enableScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns>*>.card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));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))}:host:not(.auto-columns)>*>.card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "component", type: ScrollContainerComponent, selector: "aup-scroll-container", inputs: ["disableScroll$", "disableScroll"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CardContainerComponent, selector: "aup-card-container", inputs: { columnCount: "columnCount", enableScroll: "enableScroll" }, host: { properties: { "class.auto-columns": "this.isAutoColumns", "class.single-column": "this.isSingleColumn" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header], [slot=header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <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  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enableScroll\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enableScroll\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer], [slot=footer]\"></ng-content>\n</div>\n\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-min-width: var(--card-min-width, var(--card-width, var(--card-max-width)));--resolved-card-max-width: var(--card-max-width, var(--card-width, var(--card-min-width)));--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns>*>.card-container{grid-template-columns:repeat(auto-fill,minmax(var(--resolved-card-min-width),var(--resolved-card-max-width)))}:host:not(.auto-columns)>*>.card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "component", type: ScrollContainerComponent, selector: "aup-scroll-container", inputs: ["disableScroll$", "disableScroll"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CardContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-card-container', template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <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  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enableScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enableScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns>*>.card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));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))}:host:not(.auto-columns)>*>.card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"] }]
+            args: [{ selector: 'aup-card-container', template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header], [slot=header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <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  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enableScroll\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enableScroll\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer], [slot=footer]\"></ng-content>\n</div>\n\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-min-width: var(--card-min-width, var(--card-width, var(--card-max-width)));--resolved-card-max-width: var(--card-max-width, var(--card-width, var(--card-min-width)));--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns>*>.card-container{grid-template-columns:repeat(auto-fill,minmax(var(--resolved-card-min-width),var(--resolved-card-max-width)))}:host:not(.auto-columns)>*>.card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { columnCount: [{
                 type: Input
             }], enableScroll: [{
@@ -1150,14 +1142,24 @@ class CommandComponent extends PopupAwareComponent {
     activeFace$;
     iconOnly$;
     tooltip$;
+    visible$;
     constructor(element, parent) {
         super(element, parent);
         const { chain, switchOn } = Dsl.disposeWith(this);
-        this.faces$ = chain(this.command.busy$).mapToList(busy => {
+        this.faces$ = chain(this.command.busy$)
+            .mapToList(busy => {
             return busy ?
-                [this.busyFace$.value, this.face$.value] :
-                [this.face$.value, this.busyFace$.value];
-        }, { allowNil: true, dependsOn: [this.face$, this.busyFace$] })
+                [this.busyFace$.value ?? this.command.busyFace$.value, this.face$.value ?? this.command.defaultFace$.value] :
+                [this.face$.value ?? this.command.defaultFace$.value, this.busyFace$.value ?? this.command.busyFace$.value];
+        }, {
+            allowNil: true,
+            dependsOn: [
+                this.face$,
+                this.busyFace$,
+                this.command.defaultFace$,
+                this.command.busyFace$
+            ]
+        })
             .rejectNil();
         this.activeFace$ = this.faces$.first();
         this.buttonStyle$ = chain(this.activeFace$).map(f => CommandFace.getStyleOf(f));
@@ -1166,18 +1168,19 @@ class CommandComponent extends PopupAwareComponent {
         this.iconOnly$ = this.faces$.select(face => {
             return isEmpty(CommandFace.getTextOf(face)) && !isEmpty(CommandFace.getIconOf(face));
         }).count().equals(this.faces$.count());
+        this.visible$ = chain(this.command.visible$);
+    }
+    get cssDisplayProperty() {
+        return this.visible$.value ? undefined : 'none';
     }
     isActive(face) {
         return this.activeFace$.query().equals(face);
     }
-    getFace() {
-        return this.face;
-    }
     requestFocus() {
         this.button.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommandComponent, selector: "aup-command", inputs: { command: "command", face$: "face$", face: "face", busyFace$: "busyFace$", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, viewQueries: [{ propertyName: "button", first: true, predicate: MatButton, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [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]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [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]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CommandComponent, selector: "aup-command", inputs: { command: "command", face$: "face$", face: "face", busyFace$: "busyFace$", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace", "style.display": "this.cssDisplayProperty" } }, viewQueries: [{ propertyName: "button", first: true, predicate: MatButton, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [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]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [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]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy$.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
 }
 __decorate([
     Proxify(),
@@ -1225,6 +1228,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], button: [{
                 type: ViewChild,
                 args: [MatButton]
+            }], cssDisplayProperty: [{
+                type: HostBinding,
+                args: ["style.display"]
             }] } });
 
 /**
@@ -1252,12 +1258,12 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
     xPosition = 'after';
     yPosition = 'below';
     triggers;
-    #enabled_accessor_storage;
-    get enabled() { return this.#enabled_accessor_storage; }
-    set enabled(value) { this.#enabled_accessor_storage = value; }
     #enabled$_accessor_storage = proxify((ValueModel));
     get enabled$() { return this.#enabled$_accessor_storage; }
     set enabled$(value) { this.#enabled$_accessor_storage = value; }
+    #enabled_accessor_storage = true;
+    get enabled() { return this.#enabled_accessor_storage; }
+    set enabled(value) { this.#enabled_accessor_storage = value; }
     children;
     faces$;
     constructor(element, parent) {
@@ -1299,16 +1305,16 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
         return this.faceAdapter.face;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractPopupMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractPopupMenuComponent, selector: "aup-abstract-popup-menu", inputs: { xPosition: "xPosition", yPosition: "yPosition", enabled: "enabled", enabled$: "enabled$" }, viewQueries: [{ propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractPopupMenuComponent, selector: "aup-abstract-popup-menu", inputs: { xPosition: "xPosition", yPosition: "yPosition", enabled$: "enabled$", enabled: "enabled" }, viewQueries: [{ propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
-__decorate([
-    StoreInValueModel(),
-    __metadata("design:type", Boolean)
-], AbstractPopupMenuComponent.prototype, "enabled", null);
 __decorate([
     Proxify(),
     __metadata("design:type", Object)
 ], AbstractPopupMenuComponent.prototype, "enabled$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", Object)
+], AbstractPopupMenuComponent.prototype, "enabled", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractPopupMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-abstract-popup-menu', template: '' }]
@@ -1322,10 +1328,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], triggers: [{
                 type: ViewChildren,
                 args: [MatMenuTrigger]
-            }], enabled: [{
-                type: Input
             }], enabled$: [{
                 type: Input
+            }], enabled: [{
+                type: Input
             }] } });
 
 class CommandContainer extends GarbageCollector {
@@ -1358,13 +1364,15 @@ class ToolBarComponent extends CommandContainer {
     get orientation() {
         return CommandContainer.Orientation.HORIZONTAL;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ToolBarComponent, deps: [{ token: CommandContainer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ToolBarComponent, deps: [{ token: CommandContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ToolBarComponent, selector: "aup-tool-bar", usesInheritance: true, ngImport: i0, template: '<div class="toolbar-content"><ng-content></ng-content></div>', isInline: true, styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-tool-bar', template: '<div class="toolbar-content"><ng-content></ng-content></div>', encapsulation: ViewEncapsulation.None, styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: CommandContainer }]; } });
+        }], ctorParameters: function () { return [{ type: CommandContainer, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  *
@@ -1675,7 +1683,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['blur']
             }] } });
 
-/* tslint:disable:no-input-rename */
 const INPUT_TOKEN_HACK = new InjectionToken("INPUT_TOKEN_HACK");
 class AbstractInputComponent extends DisposableComponent {
     onValueEditedListeners = new EventListenerList();
@@ -1690,11 +1697,16 @@ class AbstractInputComponent extends DisposableComponent {
      * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
      */
     formValue$;
-    label;
-    // eslint-disable-next-line @angular-eslint/no-input-rename
+    #i18n$_accessor_storage = proxify((MutableValueModel));
+    get i18n$() { return this.#i18n$_accessor_storage; }
+    set i18n$(value) { this.#i18n$_accessor_storage = value; }
+    #i18n_accessor_storage;
+    get i18n() { return this.#i18n_accessor_storage; }
+    set i18n(value) { this.#i18n_accessor_storage = value; }
+    _label;
     userFloatLabel = 'always'; // TODO: make this an injectable default
-    hint;
-    placeholder;
+    _hint;
+    _placeholder;
     dense = false;
     _enabled$ = this.registerDisposable(new DelegatingValueModel());
     set enabled$(condition$) {
@@ -1761,6 +1773,9 @@ class AbstractInputComponent extends DisposableComponent {
     isEnabled() {
         return this.enabled$.value;
     }
+    get disabled() {
+        return !this.isEnabled();
+    }
     hasErrors() {
         return !this.errorList$.query().isEmpty();
     }
@@ -1773,6 +1788,15 @@ class AbstractInputComponent extends DisposableComponent {
     get focusContext() {
         return this.formValue$.focusContext;
     }
+    get label() {
+        return this._label ?? this.i18n?.label();
+    }
+    get hint() {
+        return this._hint ?? this.hackyGetI18n("hint");
+    }
+    get placeholder() {
+        return this._placeholder ?? this.hackyGetI18n("placeholder");
+    }
     get floatLabel() {
         // return this.dense ? 'never' : this.userFloatLabel;
         return this.userFloatLabel;
@@ -1787,24 +1811,45 @@ class AbstractInputComponent extends DisposableComponent {
     onValueEdited(callback) {
         return this.onValueEditedListeners.add(callback);
     }
+    hackyGetI18n(key) {
+        // TODO: update I18n to make it possible to get an optional value with return the missing key message.
+        const i18nFn = this.i18n ? this.i18n[key] : undefined;
+        const i18nValue = i18nFn && i18nFn();
+        return i18nValue?.startsWith("missing key") ? undefined : i18nValue;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractInputComponent, deps: [{ token: INPUT_TOKEN_HACK }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractInputComponent, selector: "ng-component", inputs: { label: "label", userFloatLabel: ["floatLabel", "userFloatLabel"], hint: "hint", placeholder: "placeholder", dense: "dense", enabled$: "enabled$", focusCommand: ["command.focus", "focusCommand"], blurCommand: ["command.blur", "blurCommand"], enterCommand: ["command.enter", "enterCommand"], escapeCommand: ["command.escape", "escapeCommand"], clickCommand: ["command.click", "clickCommand"] }, outputs: { focus: "focus", blur: "blur", enterKey: "enterKey", escapeKey: "escapeKey" }, host: { listeners: { "click": "notifyClick()", "focusin": "notifyFocusIn()", "focusout": "notifyFocusOut()" }, properties: { "class.dense": "this.dense", "class": "this.baseClassName" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractInputComponent, selector: "ng-component", inputs: { i18n$: "i18n$", i18n: "i18n", _label: ["label", "_label"], userFloatLabel: ["floatLabel", "userFloatLabel"], _hint: ["hint", "_hint"], _placeholder: ["placeholder", "_placeholder"], dense: "dense", enabled$: "enabled$", focusCommand: ["command.focus", "focusCommand"], blurCommand: ["command.blur", "blurCommand"], enterCommand: ["command.enter", "enterCommand"], escapeCommand: ["command.escape", "escapeCommand"], clickCommand: ["command.click", "clickCommand"] }, outputs: { focus: "focus", blur: "blur", enterKey: "enterKey", escapeKey: "escapeKey" }, host: { listeners: { "click": "notifyClick()", "focusin": "notifyFocusIn()", "focusout": "notifyFocusOut()" }, properties: { "class.dense": "this.dense", "class": "this.baseClassName", "class.disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
+__decorate([
+    Proxify(),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "i18n$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", Object)
+], AbstractInputComponent.prototype, "i18n", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractInputComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [INPUT_TOKEN_HACK]
-                }] }]; }, propDecorators: { label: [{
+                }] }]; }, propDecorators: { i18n$: [{
                 type: Input
+            }], i18n: [{
+                type: Input
+            }], _label: [{
+                type: Input,
+                args: ["label"]
             }], userFloatLabel: [{
                 type: Input,
                 args: ['floatLabel']
-            }], hint: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
+            }], _hint: [{
+                type: Input,
+                args: ['hint']
+            }], _placeholder: [{
+                type: Input,
+                args: ['placeholder']
             }], dense: [{
                 type: HostBinding,
                 args: ['class.dense']
@@ -1847,6 +1892,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], notifyFocusOut: [{
                 type: HostListener,
                 args: ['focusout']
+            }], disabled: [{
+                type: HostBinding,
+                args: ["class.disabled"]
             }] } });
 
 class AbstractListInputComponent extends AbstractInputComponent {
@@ -2085,11 +2133,11 @@ class CheckboxInputComponent extends AbstractValueInputComponent {
         super();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CheckboxInputComponent, selector: "aup-checkbox-input", inputs: { color: "color", labelPosition: "labelPosition" }, usesInheritance: true, ngImport: i0, template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: CheckboxInputComponent, selector: "aup-checkbox-input", inputs: { color: "color", labelPosition: "labelPosition" }, usesInheritance: true, ngImport: i0, template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{ label }}\n</mat-checkbox>\n<ng-container *ngIf=\"!dense\">\n  <mat-hint *ngIf=\"showHint\">{{ hint }}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:10px 0 0}:host.dense{padding:4px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CheckboxInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-checkbox-input', template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"] }]
+            args: [{ selector: 'aup-checkbox-input', template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValue$.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{ label }}\n</mat-checkbox>\n<ng-container *ngIf=\"!dense\">\n  <mat-hint *ngIf=\"showHint\">{{ hint }}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:10px 0 0}:host.dense{padding:4px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { color: [{
                 type: Input
             }], labelPosition: [{
@@ -2128,7 +2176,7 @@ class MultipleSelectInputComponent extends AbstractListInputComponent {
         const self = this;
         this.registerDisposable(new Binding(this.componentList$, this.ids$, {
             toLeft(selectedItems, currentLeftValue) {
-                const newValues = selectedItems.map(it => lookup.get(it)).filter(it => !it);
+                const newValues = selectedItems.map(it => lookup.get(it)).filter(it => !!it);
                 // if our lookup didn't find anything then we return the previous values so we don't clobber selections when the options go empty
                 return newValues.length < 1 && selectedItems.length > 0 ? currentLeftValue : newValues;
             },
@@ -2167,48 +2215,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
 
 class NumberInputComponent extends AbstractValueInputComponent {
     autocomplete;
-    min = Number.MIN_SAFE_INTEGER;
-    max = Number.MAX_SAFE_INTEGER;
-    iconPrefix;
+    #min$_accessor_storage = proxify((ValueModel));
+    get min$() { return this.#min$_accessor_storage; }
+    set min$(value) { this.#min$_accessor_storage = value; }
+    #min_accessor_storage = Number.MIN_SAFE_INTEGER;
+    get min() { return this.#min_accessor_storage; }
+    set min(value) { this.#min_accessor_storage = value; }
+    #max$_accessor_storage = proxify((ValueModel));
+    get max$() { return this.#max$_accessor_storage; }
+    set max$(value) { this.#max$_accessor_storage = value; }
+    #max_accessor_storage = Number.MAX_SAFE_INTEGER;
+    get max() { return this.#max_accessor_storage; }
+    set max(value) { this.#max_accessor_storage = value; }
+    incrementCommand;
+    decrementCommand;
     constructor() {
         super();
+        const { chain } = Dsl.disposeWith(this);
+        const normalisedValue$ = chain(this.value$).otherwise(0);
+        this.incrementCommand = Command.create(() => {
+            this.value$.value = normalisedValue$.value + 1;
+        }).enableWhile(chain.numericValue(normalisedValue$).isLessThan(this.max$).and(this.enabled$));
+        this.decrementCommand = Command.create(() => {
+            this.value$.value = normalisedValue$.value - 1;
+        }).enableWhile(chain.numericValue(normalisedValue$).isGreaterThan(this.min$).and(this.enabled$));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min: "min", max: "max", iconPrefix: "iconPrefix" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min$: "min$", min: "min", max$: "max$", max: "max" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n          [size]=\"4\">\n  <section matIconSuffix>\n    <button [pectinCommand]=\"decrementCommand\">-</button>\n    <button [pectinCommand]=\"incrementCommand\">+</button>\n  </section>\n  <mat-hint *ngIf=\"hint && !dense\">{{ hint }}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</mat-form-field>\n", styles: [":host{--width: 56px;--height: 42px;--margin-right: 1px;--border-radius: 3px;--border-color:#d5d5d5;--button-background: #fafafa;--button-background-hover: #efefef}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}:host:focus-within:has(section:not(:focus-within)){--height: 40px;--margin-right: 2px;--border-radius: 2px}:host section[maticonsuffix]{display:flex;flex-direction:row;align-items:stretch;gap:1px;background-color:var(--border-color);border-left:1px solid var(--border-color);width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);margin-right:var(--margin-right);border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden}:host button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-weight:600;border-style:none;background-color:var(--button-background)}:host button:hover{background-color:var(--button-background-hover)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
 }
+__decorate([
+    Proxify(),
+    __metadata("design:type", ValueModel)
+], NumberInputComponent.prototype, "min$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", Object)
+], NumberInputComponent.prototype, "min", null);
+__decorate([
+    Proxify(),
+    __metadata("design:type", ValueModel)
+], NumberInputComponent.prototype, "max$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", Object)
+], NumberInputComponent.prototype, "max", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-number-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n</mat-form-field>\n" }]
+            args: [{ selector: 'aup-number-input', template: "<mat-form-field floatLabel=\"always\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n          [size]=\"4\">\n  <section matIconSuffix>\n    <button [pectinCommand]=\"decrementCommand\">-</button>\n    <button [pectinCommand]=\"incrementCommand\">+</button>\n  </section>\n  <mat-hint *ngIf=\"hint && !dense\">{{ hint }}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{ firstError }}</mat-error>\n</mat-form-field>\n", styles: [":host{--width: 56px;--height: 42px;--margin-right: 1px;--border-radius: 3px;--border-color:#d5d5d5;--button-background: #fafafa;--button-background-hover: #efefef}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}:host:focus-within:has(section:not(:focus-within)){--height: 40px;--margin-right: 2px;--border-radius: 2px}:host section[maticonsuffix]{display:flex;flex-direction:row;align-items:stretch;gap:1px;background-color:var(--border-color);border-left:1px solid var(--border-color);width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);margin-right:var(--margin-right);border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden}:host button{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-weight:600;border-style:none;background-color:var(--button-background)}:host button:hover{background-color:var(--button-background-hover)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
                 type: Input
+            }], min$: [{
+                type: Input
             }], min: [{
                 type: Input
-            }], max: [{
+            }], max$: [{
                 type: Input
-            }], iconPrefix: [{
+            }], max: [{
                 type: Input
             }] } });
 
 class PasswordInputComponent extends AbstractValueInputComponent {
     autocomplete;
+    #enableShowPassword$_accessor_storage = proxify((ValueModel));
+    get enableShowPassword$() { return this.#enableShowPassword$_accessor_storage; }
+    set enableShowPassword$(value) { this.#enableShowPassword$_accessor_storage = value; }
+    #enableShowPassword_accessor_storage = false;
+    get enableShowPassword() { return this.#enableShowPassword_accessor_storage; }
+    set enableShowPassword(value) { this.#enableShowPassword_accessor_storage = value; }
+    showPassword$ = new MutableValueModel(false);
+    toggleShowPasswordCommand;
     constructor() {
         super();
+        const { chain, valueOf } = Dsl.disposeWith(this);
+        const face$ = chain(this.showPassword$).map(show => {
+            return {
+                icon: () => show ? "mat:visibility_off" : "mat:visibility"
+            };
+        });
+        this.toggleShowPasswordCommand = Command.create(() => {
+            this.showPassword$.value = !this.showPassword$.value;
+        })
+            .withFace(face$)
+            .enableWhile(chain.stringValue(this.componentValue$).isNotBlank());
+    }
+    get fieldType() {
+        return this.showPassword$.value ? "text" : "password";
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PasswordInputComponent, selector: "aup-password-input", inputs: { autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PasswordInputComponent, selector: "aup-password-input", inputs: { autocomplete: "autocomplete", enableShowPassword$: "enableShowPassword$", enableShowPassword: "enableShowPassword" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input [type]=\"fieldType\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <span matSuffix *ngIf=\"enableShowPassword$.value\">\n    <aup-command [command]=\"toggleShowPasswordCommand\" data-cy=\"showPassword\"></aup-command>\n  </span>\n</mat-form-field>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
 }
+__decorate([
+    Proxify(),
+    __metadata("design:type", Object)
+], PasswordInputComponent.prototype, "enableShowPassword$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", Object)
+], PasswordInputComponent.prototype, "enableShowPassword", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-password-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n" }]
+            args: [{ selector: 'aup-password-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input [type]=\"fieldType\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <span matSuffix *ngIf=\"enableShowPassword$.value\">\n    <aup-command [command]=\"toggleShowPasswordCommand\" data-cy=\"showPassword\"></aup-command>\n  </span>\n</mat-form-field>\n\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
+                type: Input
+            }], enableShowPassword$: [{
+                type: Input
+            }], enableShowPassword: [{
+                type: Input
+            }] } });
+
+class SearchInputComponent extends AbstractValueInputComponent {
+    autocomplete;
+    clearCommand;
+    constructor() {
+        super();
+        this.dense = true;
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.clearCommand = Command.create(() => {
+            this.componentValue$.value = "";
+        });
+        this.clearCommand.disableWhile(chain.stringValue(this.componentValue$).isBlank());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SearchInputComponent, selector: "aup-search-input", inputs: { autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <aup-icon matPrefix icon=\"mat:search\"></aup-icon>\n  <button mat-icon-button matSuffix [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-search-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <aup-icon matPrefix icon=\"mat:search\"></aup-icon>\n  <button mat-icon-button matSuffix [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
                 type: Input
             }] } });
 
 /**
  * Using templates:
- * <aup-select-input [valueModel]="myModel" [options]="myOptions">
+ * <aup-select-input [value$]="myModel" [options]="myOptions">
  *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
- *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #selectedOptionTemplate let-option>{{option.thePropertyYouWant}} note, not used for nils (the placeholder is used)</ng-template>
+ *   <ng-template #nilOptionTemplate>Uses the placeholder by default but you can customise it</ng-template>
  * </aup-select_input>
  */
 class SelectInputComponent extends AbstractValueInputComponent {
@@ -2233,7 +2375,7 @@ class SelectInputComponent extends AbstractValueInputComponent {
         super();
         const { chain } = Dsl.disposeWith(this);
         this.cookedOptions$ = chain(this.options$)
-            .reduceToList(options => {
+            .mapAll(options => {
             return options.length < 1 && !isNil(this.componentValue$.value) ? [this.componentValue$.value] : options;
         }, {
             dependsOn: this.componentValue$
@@ -2272,21 +2414,21 @@ class SelectInputComponent extends AbstractValueInputComponent {
             id: this.delegatedIdentityOf(value)
         });
         let lastIdSnapshot = snapshotValueAndId(this.componentValue$.value);
-        console.log(lastIdSnapshot);
+        // console.log(lastIdSnapshot)
         before(this.options$).changes(() => {
             lastIdSnapshot = snapshotValueAndId(this.componentValue$.value);
-            console.log(lastIdSnapshot);
+            // console.log(lastIdSnapshot)
         });
         when(this.options$).changes((is, was) => {
             const newIdSnapshot = snapshotValueAndId(lastIdSnapshot.value);
-            console.log(lastIdSnapshot, newIdSnapshot);
+            // console.log(lastIdSnapshot, newIdSnapshot)
             if (newIdSnapshot !== lastIdSnapshot.id) {
                 this.id$.value = this.delegatedIdentityOf(this.componentValue$.value);
             }
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SelectInputComponent, selector: "aup-select-input", inputs: { options$: "options$", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "selectedOptionTemplateRef", first: true, predicate: ["selectedOptionTemplate"], descendants: true }, { propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [ngModel]=\"componentValue$.value\"\n              (ngModelChange)=\"select($event)\"\n              [disabled]=\"!enabled$.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n\n    <!--\n    TODO: dave has a scenario where the selected item isn't rendering that I can't reproduce so we explicity render it..\n          It typically happens because the ngModel value isn't the one contained in the list - this means our source model\n          identifyOf function has changed and our id$/lookup$/componentValue$ are out of sync.\n          We get around this for now by explicity rendering the component value.\n          Please Note: I haven't been able to reproduce this\n    -->\n    <mat-select-trigger *ngIf=\"!selectedOptionTemplateRef\">\n      {{optionLabelFormat(componentValue$.value)}}\n    </mat-select-trigger>\n\n    <mat-select-trigger *ngIf=\"selectedOptionTemplateRef\">\n      <ng-container [ngTemplateOutlet]=\"selectedOptionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: componentValue$.value}\"></ng-container>\n    </mat-select-trigger>\n\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of cookedOptions$.value; trackBy: trackByIdentity;let i = index\"\n                [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n<div class=\"width-strut\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <div class=\"item\" *ngFor=\"let item of cookedOptions$.value\">\n    <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(item)}}</ng-container>\n    <ng-container *ngIf=\"optionTemplateRef\"\n                  [ngTemplateOutlet]=\"optionTemplateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item, index: 0 }\"\n    >\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{display:block;height:0;max-height:0;width:auto;visibility:hidden;overflow:hidden;padding-right:35px}.width-strut mat-label{font-size:75%}.width-strut>.item{font-size:16px;padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SelectInputComponent, selector: "aup-select-input", inputs: { options$: "options$", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "selectedOptionTemplateRef", first: true, predicate: ["selectedOptionTemplate"], descendants: true }, { propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [ngModel]=\"componentValue$.value\"\n              (ngModelChange)=\"select($event)\"\n              [disabled]=\"!enabled$.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n\n    <!--\n    TODO: dave has a scenario where the selected item isn't rendering that I can't reproduce so we explicity render it..\n          It typically happens because the ngModel value isn't the one contained in the list - this means our source model\n          identifyOf function has changed and our id$/lookup$/componentValue$ are out of sync.\n          We get around this for now by explicity rendering the component value.\n          Please Note: I haven't been able to reproduce this\n    -->\n    <mat-select-trigger *ngIf=\"!selectedOptionTemplateRef\">\n      {{optionLabelFormat(componentValue$.value)}}\n    </mat-select-trigger>\n\n    <mat-select-trigger *ngIf=\"selectedOptionTemplateRef\">\n      <ng-container [ngTemplateOutlet]=\"selectedOptionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: componentValue$.value}\"></ng-container>\n    </mat-select-trigger>\n\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of cookedOptions$.value; trackBy: trackByIdentity;let i = index\"\n                [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n    <ng-content select=\"[select-option-footer]\"></ng-content>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n<div class=\"width-strut\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <div class=\"item\" *ngFor=\"let item of cookedOptions$.value\">\n    <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(item)}}</ng-container>\n    <ng-container *ngIf=\"optionTemplateRef\"\n                  [ngTemplateOutlet]=\"optionTemplateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item, index: 0 }\"\n    >\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{display:block;height:0;max-height:0;width:auto;visibility:hidden;overflow:hidden;padding-right:35px}.width-strut mat-label{font-size:75%}.width-strut>.item{font-size:16px;padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
 }
 __decorate([
     Proxify(),
@@ -2298,7 +2440,7 @@ __decorate([
 ], SelectInputComponent.prototype, "options", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SelectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-select-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [ngModel]=\"componentValue$.value\"\n              (ngModelChange)=\"select($event)\"\n              [disabled]=\"!enabled$.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n\n    <!--\n    TODO: dave has a scenario where the selected item isn't rendering that I can't reproduce so we explicity render it..\n          It typically happens because the ngModel value isn't the one contained in the list - this means our source model\n          identifyOf function has changed and our id$/lookup$/componentValue$ are out of sync.\n          We get around this for now by explicity rendering the component value.\n          Please Note: I haven't been able to reproduce this\n    -->\n    <mat-select-trigger *ngIf=\"!selectedOptionTemplateRef\">\n      {{optionLabelFormat(componentValue$.value)}}\n    </mat-select-trigger>\n\n    <mat-select-trigger *ngIf=\"selectedOptionTemplateRef\">\n      <ng-container [ngTemplateOutlet]=\"selectedOptionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: componentValue$.value}\"></ng-container>\n    </mat-select-trigger>\n\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of cookedOptions$.value; trackBy: trackByIdentity;let i = index\"\n                [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n<div class=\"width-strut\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <div class=\"item\" *ngFor=\"let item of cookedOptions$.value\">\n    <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(item)}}</ng-container>\n    <ng-container *ngIf=\"optionTemplateRef\"\n                  [ngTemplateOutlet]=\"optionTemplateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item, index: 0 }\"\n    >\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{display:block;height:0;max-height:0;width:auto;visibility:hidden;overflow:hidden;padding-right:35px}.width-strut mat-label{font-size:75%}.width-strut>.item{font-size:16px;padding-left:0}\n"] }]
+            args: [{ selector: 'aup-select-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [ngModel]=\"componentValue$.value\"\n              (ngModelChange)=\"select($event)\"\n              [disabled]=\"!enabled$.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n\n    <!--\n    TODO: dave has a scenario where the selected item isn't rendering that I can't reproduce so we explicity render it..\n          It typically happens because the ngModel value isn't the one contained in the list - this means our source model\n          identifyOf function has changed and our id$/lookup$/componentValue$ are out of sync.\n          We get around this for now by explicity rendering the component value.\n          Please Note: I haven't been able to reproduce this\n    -->\n    <mat-select-trigger *ngIf=\"!selectedOptionTemplateRef\">\n      {{optionLabelFormat(componentValue$.value)}}\n    </mat-select-trigger>\n\n    <mat-select-trigger *ngIf=\"selectedOptionTemplateRef\">\n      <ng-container [ngTemplateOutlet]=\"selectedOptionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: componentValue$.value}\"></ng-container>\n    </mat-select-trigger>\n\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of cookedOptions$.value; trackBy: trackByIdentity;let i = index\"\n                [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n    <ng-content select=\"[select-option-footer]\"></ng-content>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n<div class=\"width-strut\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <div class=\"item\" *ngFor=\"let item of cookedOptions$.value\">\n    <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(item)}}</ng-container>\n    <ng-container *ngIf=\"optionTemplateRef\"\n                  [ngTemplateOutlet]=\"optionTemplateRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item, index: 0 }\"\n    >\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{display:block;height:0;max-height:0;width:auto;visibility:hidden;overflow:hidden;padding-right:35px}.width-strut mat-label{font-size:75%}.width-strut>.item{font-size:16px;padding-left:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { options$: [{
                 type: Input
             }], options: [{
@@ -2329,17 +2471,24 @@ class StringInputComponent extends AbstractValueInputComponent {
     get enableClear() { return this.#enableClear_accessor_storage; }
     set enableClear(value) { this.#enableClear_accessor_storage = value; }
     iconPrefix;
+    #suffixCommand_accessor_storage = proxify(Command);
+    get suffixCommand() { return this.#suffixCommand_accessor_storage; }
+    set suffixCommand(value) { this.#suffixCommand_accessor_storage = value; }
     clearCommand;
     constructor() {
         super();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.clearCommand = Command.create(() => {
             this.componentValue$.value = "";
-        });
-        this.clearCommand.disableWhile(chain.stringValue(this.componentValue$).isBlank());
+        })
+            .withFace({ icon: () => "mat:clear" })
+            .enableWhile(chain.stringValue(this.componentValue$).isNotBlank());
+    }
+    get hasSuffixCommand() {
+        return Proxify.hasTarget(this.suffixCommand);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: StringInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: StringInputComponent, selector: "aup-string-input", inputs: { autocomplete: "autocomplete", enableClear$: "enableClear$", enableClear: "enableClear", iconPrefix: "iconPrefix" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: StringInputComponent, selector: "aup-string-input", inputs: { autocomplete: "autocomplete", enableClear$: "enableClear$", enableClear: "enableClear", iconPrefix: "iconPrefix", suffixCommand: "suffixCommand" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <span matSuffix>\n    <aup-command *ngIf=\"enableClear\" [command]=\"clearCommand\" data-cy=\"clearCommand\"></aup-command>\n    <aup-command *ngIf=\"hasSuffixCommand\" [command]=\"suffixCommand\" data-cy=\"suffixCommand\"></aup-command>\n  </span>\n</mat-form-field>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
 }
 __decorate([
     Proxify(),
@@ -2349,9 +2498,13 @@ __decorate([
     StoreInValueModel(),
     __metadata("design:type", Object)
 ], StringInputComponent.prototype, "enableClear", null);
+__decorate([
+    Proxify(),
+    __metadata("design:type", Command)
+], StringInputComponent.prototype, "suffixCommand", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: StringInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-string-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}\n"] }]
+            args: [{ selector: 'aup-string-input', template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValue$.value\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <span matSuffix>\n    <aup-command *ngIf=\"enableClear\" [command]=\"clearCommand\" data-cy=\"clearCommand\"></aup-command>\n    <aup-command *ngIf=\"hasSuffixCommand\" [command]=\"suffixCommand\" data-cy=\"suffixCommand\"></aup-command>\n  </span>\n</mat-form-field>\n\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
                 type: Input
             }], enableClear$: [{
@@ -2360,6 +2513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], iconPrefix: [{
                 type: Input
+            }], suffixCommand: [{
+                type: Input
             }] } });
 
 class TextInputComponent extends AbstractValueInputComponent {
@@ -2547,7 +2702,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  * </aup-switch-case>
  */
 class SwitchCaseComponent extends DisposableComponent {
-    cdr;
     #switch$_accessor_storage = proxify((ValueModel));
     get switch$() { return this.#switch$_accessor_storage; }
     set switch$(value) { this.#switch$_accessor_storage = value; }
@@ -2556,9 +2710,8 @@ class SwitchCaseComponent extends DisposableComponent {
     set switch(value) { this.#switch_accessor_storage = value; }
     switchCaseOptions;
     selectedIndex = 0;
-    constructor(cdr) {
+    constructor() {
         super();
-        this.cdr = cdr;
     }
     ngAfterContentInit() {
         const subscription = this.switchCaseOptions.changes.subscribe(change => this.updateSelection());
@@ -2595,7 +2748,7 @@ class SwitchCaseComponent extends DisposableComponent {
             this.selectedIndex = -1;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SwitchCaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SwitchCaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SwitchCaseComponent, selector: "aup-switch-case", inputs: { switch$: "switch$", switch: "switch" }, queries: [{ propertyName: "switchCaseOptions", predicate: SwitchCaseOption }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
 }
 __decorate([
@@ -2609,7 +2762,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SwitchCaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-switch-case', template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { switch$: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { switch$: [{
                 type: Input
             }], switch: [{
                 type: Input
@@ -2806,6 +2959,7 @@ class ColumnTextSearchWrapper extends ColumnTextSearchFormatter.Delegate {
 }
 class ColumnModel extends GarbageCollector {
     columnId;
+    order;
     textPropertiesProvider;
     _columnTextProperties;
     _columnHeaderPortalRef;
@@ -2819,9 +2973,10 @@ class ColumnModel extends GarbageCollector {
     dasherisedColumnId;
     textSearchDelegate = new ColumnTextSearchWrapper();
     visible$;
-    constructor(columnId, textPropertiesProvider) {
+    constructor(columnId, order, textPropertiesProvider) {
         super();
         this.columnId = columnId;
+        this.order = order;
         this.textPropertiesProvider = textPropertiesProvider;
         const { valueOf } = Dsl.disposeWith(this);
         this.installHeaderRenderer();
@@ -2866,6 +3021,14 @@ class ColumnModel extends GarbageCollector {
         this._columnTextProperties = columnTextProperties;
         return this;
     }
+    positionAfter(column) {
+        this.order.position(this, { after: column });
+        return this;
+    }
+    positionBefore(column) {
+        this.order.position(this, { before: column });
+        return this;
+    }
     getSearchTextFor(row) {
         return this.textSearchDelegate.format(row);
     }
@@ -2967,8 +3130,8 @@ __decorate([
 
 class CustomTemplateColumnModel extends ColumnModel {
     config = new TemplateCellRendererPortalRef();
-    constructor(columnId, defaults) {
-        super(columnId, defaults);
+    constructor(columnId, order, defaults) {
+        super(columnId, order, defaults);
         this.configureCellRenderer(this.config);
     }
     setTemplate(templateRef, viewContainer, fillCell, padChild) {
@@ -3046,12 +3209,17 @@ class AbstractTableComponent extends DisposableComponent {
     #showHeader_accessor_storage = true;
     get showHeader() { return this.#showHeader_accessor_storage; }
     set showHeader(value) { this.#showHeader_accessor_storage = value; }
+    #enableScrolling$_accessor_storage = proxify((ValueModel));
     /**
      * 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.
      */
-    enableScrolling = false;
+    get enableScrolling$() { return this.#enableScrolling$_accessor_storage; }
+    set enableScrolling$(value) { this.#enableScrolling$_accessor_storage = value; }
+    #enableScrolling_accessor_storage = false;
+    get enableScrolling() { return this.#enableScrolling_accessor_storage; }
+    set enableScrolling(value) { this.#enableScrolling_accessor_storage = value; }
     columns;
     columnIds;
     columnsById;
@@ -3070,7 +3238,6 @@ class AbstractTableComponent extends DisposableComponent {
         super();
         this.injector = injector;
         const { chain, when } = Dsl.disposeWith(this);
-        this._visibleRows$.setDelegate(this._dataSource$);
         when(chain(this._dataSource$).first()).becomesTruthy(it => {
             if (it === this.identityOf(it)) {
                 console.warn("Table model identity function is using reference equality.  This can cause lots of table re-rendering", {
@@ -3089,7 +3256,7 @@ class AbstractTableComponent extends DisposableComponent {
         if (!model) {
             lang$1.illegalState("aup-table tableModel is nil");
         }
-        this.columnsById = chain(model.columns).indexBy('columnId');
+        this.columnsById = chain(model.columns$).indexBy('columnId');
         this._dataSource$.setDelegate(model.dataSource$);
         model.initialise(this.injector, (row) => this.identityOf(row));
     }
@@ -3106,7 +3273,7 @@ class AbstractTableComponent extends DisposableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractTableComponent, selector: "aup-abstract-table", inputs: { showHeader$: "showHeader$", showHeader: "showHeader", enableScrolling: "enableScrolling" }, host: { properties: { "class": "this.baseCssClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractTableComponent, selector: "aup-abstract-table", inputs: { showHeader$: "showHeader$", showHeader: "showHeader", enableScrolling$: "enableScrolling$", enableScrolling: "enableScrolling" }, host: { properties: { "class": "this.baseCssClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
 __decorate([
     Proxify(),
@@ -3116,6 +3283,14 @@ __decorate([
     StoreInValueModel(),
     __metadata("design:type", Object)
 ], AbstractTableComponent.prototype, "showHeader", null);
+__decorate([
+    Proxify(),
+    __metadata("design:type", ValueModel)
+], AbstractTableComponent.prototype, "enableScrolling$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", Boolean)
+], AbstractTableComponent.prototype, "enableScrolling", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -3126,6 +3301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], showHeader: [{
                 type: Input
+            }], enableScrolling$: [{
+                type: Input
             }], enableScrolling: [{
                 type: Input
             }], baseCssClass: [{
@@ -3186,6 +3363,8 @@ class EditSession extends GarbageCollector {
             //   console.warn()
             // }
             this._liveRowValue$.value = produce(this._liveRowValue$.value, draft => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 this.form.writeDirtyStateTo(draft);
             });
         });
@@ -3288,11 +3467,11 @@ class DefaultCellRendererComponent {
         return this._value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DefaultCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DefaultCellRendererComponent, selector: "aup-default-cell-renderer", inputs: { value: "value" }, ngImport: i0, template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n", styles: [""], dependencies: [{ kind: "pipe", type: HighlightPipe, name: "aupHighlight" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DefaultCellRendererComponent, selector: "aup-default-cell-renderer", inputs: { value: "value" }, ngImport: i0, template: "<span [innerHTML]=\"value?.toString()| aupHighlight\"></span>\n", styles: [""], dependencies: [{ kind: "pipe", type: HighlightPipe, name: "aupHighlight" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DefaultCellRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aup-default-cell-renderer", template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n" }]
+            args: [{ selector: "aup-default-cell-renderer", template: "<span [innerHTML]=\"value?.toString()| aupHighlight\"></span>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -3430,25 +3609,14 @@ class Bounds extends Dimension {
 })(Bounds || (Bounds = {}));
 
 class ResizeAwareComponent extends DisposableComponent {
-    elementRef;
-    ngZone;
-    _bounds$ = new MutableValueModel(new Bounds(0, 0, 0, 0));
-    constructor(elementRef, ngZone) {
-        super();
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-    }
+    elementRef = this.inject(ElementRef);
+    ngZone = this.inject(NgZone);
+    boundsTracker = new ResizeAwareComponent.ResizeTracker(this.elementRef, this.ngZone);
     ngAfterViewInit() {
-        const element = this.elementRef.nativeElement;
-        const ro = new ResizeObserver((entries, observer) => {
-            this.ngZone.run(() => this._updateBounds());
-        });
-        ro.observe(element);
-        this.onDispose(() => ro.disconnect());
-        setTimeout(() => this._updateBounds());
+        this.boundsTracker.notifyViewReady();
     }
     get bounds$() {
-        return this._bounds$.readonly$;
+        return this.boundsTracker.bounds$;
     }
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -3458,57 +3626,160 @@ class ResizeAwareComponent extends DisposableComponent {
         return this.bounds.relativePositionOf(point);
     }
     get bounds() {
-        return this._bounds$.value;
-    }
-    _updateBounds() {
-        this._bounds$.value = Bounds.ofElement(this.nativeElement);
+        return this.bounds$.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeAwareComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeAwareComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: ResizeAwareComponent, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeAwareComponent, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
+        }] });
+(function (ResizeAwareComponent) {
+    class ResizeTracker extends GarbageCollector {
+        elementRef;
+        ngZone;
+        _bounds$ = new MutableValueModel(new Bounds(0, 0, 0, 0));
+        width$;
+        height$;
+        top$;
+        left$;
+        bottom$;
+        right$;
+        constructor(elementRef, ngZone) {
+            super();
+            this.elementRef = elementRef;
+            this.ngZone = ngZone;
+            const { chain } = Dsl.disposeWith(this);
+            this.width$ = chain(this.bounds$).pluck("width");
+            this.height$ = chain(this.bounds$).pluck("height");
+            this.top$ = chain(this.bounds$).pluck("top");
+            this.left$ = chain(this.bounds$).pluck("left");
+            this.bottom$ = chain.numericValue(this.top$).add(this.height$);
+            this.right$ = chain.numericValue(this.left$).add(this.width$);
+        }
+        notifyViewReady() {
+            const element = this.elementRef.nativeElement;
+            const ro = new ResizeObserver((entries, observer) => {
+                this.ngZone.run(() => this._updateBounds());
+            });
+            ro.observe(element);
+            this.onDispose(() => ro.disconnect());
+            setTimeout(() => this._updateBounds());
+        }
+        get bounds$() {
+            return this._bounds$.readonly$;
+        }
+        get nativeElement() {
+            return this.elementRef.nativeElement;
+        }
+        // TODO: Make this handle body scroll
+        relativePositionOf(point) {
+            return this.bounds.relativePositionOf(point);
+        }
+        get bounds() {
+            return this._bounds$.value;
+        }
+        _updateBounds() {
+            this._bounds$.value = Bounds.ofElement(this.nativeElement);
+        }
+    }
+    ResizeAwareComponent.ResizeTracker = ResizeTracker;
+})(ResizeAwareComponent || (ResizeAwareComponent = {}));
 
-class ColumnListModel extends AbstractComputedListModel {
-    _allColumns$ = new MutableListModel();
-    columnsById$;
+var ColumnOrderManager;
+(function (ColumnOrderManager) {
+    function processPosition(position, callback) {
+        if (position) {
+            const keys = Object.keys(position);
+            if (keys.includes("before")) {
+                return position["before"] ? callback.before(position["before"]) : callback.first();
+            }
+            else {
+                return position["after"] ? callback.after(position["after"]) : callback.last();
+            }
+        }
+        else {
+            return callback.last();
+        }
+    }
+    ColumnOrderManager.processPosition = processPosition;
+})(ColumnOrderManager || (ColumnOrderManager = {}));
+
+class ColumnRef {
+    column;
+    position;
+    constructor(column, position) {
+        this.column = column;
+        this.position = position;
+    }
+}
+class ColumnManager extends GarbageCollector {
+    _columnRefs$ = new MutableListModel();
+    orderedColumnRefs$;
+    _columnsById$;
+    allColumns$;
+    columnVisibilities$ = new WatchList();
+    visibleColumns$;
     constructor() {
         super();
         const { chain } = Dsl.disposeWith(this);
-        this.columnsById$ = chain(this._allColumns$).indexBy('columnId');
+        this.orderedColumnRefs$ = chain(this._columnRefs$).orderBy("position", "asc");
+        this.allColumns$ = this.orderedColumnRefs$.pluck("column");
+        this._columnsById$ = chain(this.allColumns$).indexBy('columnId');
+        this.visibleColumns$ = chain(this.allColumns$).select(it => it.visible$.value, {
+            dependsOn: this.columnVisibilities$
+        });
     }
-    get allColumns$() {
-        return this._allColumns$.readonly$;
+    position(column, newPosition) {
+        const target = this._columnRefs$.query().findMatching(it => it.column === column);
+        const position = this.computePosition(newPosition);
+        this._columnRefs$.replace(target, { with: new ColumnRef(target.column, position) });
     }
     getColumn(id) {
-        return this.columnsById$.get(id);
+        return this._columnsById$.get(id);
     }
     hasColumn(id) {
-        return !!this.columnsById$.get(id);
+        return !!this._columnsById$.get(id);
     }
     hasMatchingColumn(row, regex) {
         // only search the visible columns
-        return !!this.value.find(c => regex.test(c.getSearchTextFor(row)));
+        return !!this.visibleColumns$.value.find(c => regex.test(c.getSearchTextFor(row)));
     }
-    addColumn(column, index) {
+    addColumn(column, position) {
         if (this.hasColumn(column.columnId)) {
             lang.illegalState(`Column with id=${column.columnId} already exists`);
         }
         this.registerDisposable(column);
-        this.runInTransaction(() => {
-            if (!isNil(index)) {
-                this._allColumns$.insert(index, column);
-            }
-            else {
-                this._allColumns$.push(column);
+        this._columnRefs$.push(new ColumnRef(column, this.computePosition(position)));
+        this.columnVisibilities$.add(column.visible$);
+        return column;
+    }
+    computePosition(position) {
+        const q = this.orderedColumnRefs$.query();
+        return ColumnOrderManager.processPosition(position, {
+            before(col) {
+                const index = q.findIndex(ref => ref.column === col);
+                const beforeCol = q.value[index];
+                const afterCol = index - 1 >= 0 ? q.value[index - 1] : undefined;
+                return generateKeyBetween(afterCol?.position, beforeCol.position);
+            },
+            after(col) {
+                const index = q.findIndex(ref => ref.column === col);
+                const afterCol = q.value[index];
+                const beforeCol = index + 1 < q.length ? q.value[index + 1] : undefined;
+                return generateKeyBetween(afterCol.position, beforeCol?.position);
+            },
+            first() {
+                return generateKeyBetween(null, q.first()?.position);
+            },
+            last() {
+                // add it to the end of the list
+                return generateKeyBetween(q.last()?.position, null);
             }
-            this.registerDisposable(this.trackSource(column.visible$));
         });
-        return column;
     }
     doComputeValue() {
-        return this._allColumns$.value.filter(c => c.visible$.value);
+        return this.allColumns$.value.filter(c => c.visible$.value);
     }
 }
 
@@ -3542,8 +3813,8 @@ function EnableCellTextSearch(options) {
 
 class CustomValueColumnModel extends ColumnModel {
     getValue;
-    constructor(columnId, defaults, getValue) {
-        super(columnId, defaults);
+    constructor(columnId, order, defaults, getValue) {
+        super(columnId, order, defaults);
         this.getValue = getValue;
         this.cellRenderer(DefaultCellRendererComponent);
     }
@@ -3551,17 +3822,17 @@ class CustomValueColumnModel extends ColumnModel {
         this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => new ColumnTextSearchFormatter.Null()), row => this.getValue(row));
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
             if (firstTime) {
-                if (isFunction$1(onComponentInitOrOptions)) {
+                if (isFunction(onComponentInitOrOptions)) {
                     onComponentInitOrOptions(component);
                 }
                 else {
-                    if (isFunction$1(onComponentInitOrOptions?.onComponentInit)) {
+                    if (isFunction(onComponentInitOrOptions?.onComponentInit)) {
                         onComponentInitOrOptions.onComponentInit(component);
                     }
                 }
             }
             component.value = this.getValue(rowData.row);
-            if (!isFunction$1(onComponentInitOrOptions) && isFunction$1(onComponentInitOrOptions?.onRowUpdate)) {
+            if (!isFunction(onComponentInitOrOptions) && isFunction(onComponentInitOrOptions?.onRowUpdate)) {
                 onComponentInitOrOptions.onRowUpdate(component, rowData.row);
             }
         }));
@@ -3573,8 +3844,8 @@ class CustomValueColumnModel extends ColumnModel {
 }
 
 class EditorControlColumnModel extends ColumnModel {
-    constructor(columnId, saveCommandFactory, defaults) {
-        super(columnId, defaults);
+    constructor(columnId, order, saveCommandFactory, defaults) {
+        super(columnId, order, defaults);
         this.cellRenderer(EditRowControlsComponent);
     }
     cellRenderer(componentType) {
@@ -3599,8 +3870,8 @@ class ListPropertyColumnModel extends ColumnModel {
             intermediate.map(v => v?.toString()).join(", ") :
             intermediate?.toString();
     };
-    constructor(id, property, defaults) {
-        super(id, defaults);
+    constructor(id, order, property, defaults) {
+        super(id, order, defaults);
         this.property = property;
         this.cellRenderer(DefaultCellRendererComponent);
     }
@@ -3616,7 +3887,7 @@ class ListPropertyColumnModel extends ColumnModel {
     }
     cellEditor(editor, validatorsOrInitialiser, initialiseComponent) {
         const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-        const initialiser = isFunction$1(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
+        const initialiser = isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : initialiseComponent;
         this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
             const formListModel = editSession.form.pluckList(this.property);
             if (validators) {
@@ -3645,8 +3916,8 @@ class PropertyColumnModel extends ColumnModel {
     _defaultSearchTextFormatter = (value) => {
         return (this._userFormat ?? Functions.identity)(value)?.toString();
     };
-    constructor(id, property, defaults) {
-        super(id, defaults);
+    constructor(id, order, property, defaults) {
+        super(id, order, defaults);
         this.property = property;
         this.cellRenderer(DefaultCellRendererComponent);
     }
@@ -3654,11 +3925,11 @@ class PropertyColumnModel extends ColumnModel {
         this.configureColumnTextSearch(EnableCellTextSearch.getFormatter(componentType, () => ColumnTextSearchFormatter.forFormatter(this._defaultSearchTextFormatter)), row => row[this.property]);
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData, firstTime) => {
             if (firstTime) {
-                if (isFunction$1(onComponentInitOrOptions)) {
+                if (isFunction(onComponentInitOrOptions)) {
                     onComponentInitOrOptions(component);
                 }
                 else {
-                    if (isFunction$1(onComponentInitOrOptions?.onComponentInit)) {
+                    if (isFunction(onComponentInitOrOptions?.onComponentInit)) {
                         onComponentInitOrOptions.onComponentInit(component);
                     }
                 }
@@ -3683,7 +3954,7 @@ class PropertyColumnModel extends ColumnModel {
             component[ColumnModel.CELL_RENDERER_COMPONENT_ROW_CACHE] = rowData.row;
             let disableEditCallback = false;
             if (firstTime) {
-                if (isFunction$1(options?.onComponentInit)) {
+                if (isFunction(options?.onComponentInit)) {
                     options.onComponentInit(component);
                 }
                 // install our edit callback
@@ -3698,7 +3969,7 @@ class PropertyColumnModel extends ColumnModel {
             disableEditCallback = true;
             component.value = rowData.row[this.property];
             disableEditCallback = false;
-            if (!isFunction$1(options) && isFunction$1(options?.onRowUpdate)) {
+            if (!isFunction(options) && isFunction(options?.onRowUpdate)) {
                 options.onRowUpdate(component, rowData.row);
             }
         }));
@@ -3706,7 +3977,7 @@ class PropertyColumnModel extends ColumnModel {
     }
     cellEditor(editor, validatorsOrInitialiser, onComponentInit) {
         const validators = Array.isArray(validatorsOrInitialiser) ? validatorsOrInitialiser : undefined;
-        const initialiser = isFunction$1(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
+        const initialiser = isFunction(validatorsOrInitialiser) ? validatorsOrInitialiser : onComponentInit;
         this.configureCellEditor(new CellEditorPortalRef(editor, (component, editSession) => {
             const formValueModel = editSession.form.pluck(this.property);
             if (validators) {
@@ -3733,8 +4004,8 @@ class SelectionColumnModel extends ColumnModel {
     selectionModel;
     _enableHeaderControls = true;
     _color = "accent";
-    constructor(columnId, defaults, selectionModel) {
-        super(columnId, defaults);
+    constructor(columnId, order, defaults, selectionModel) {
+        super(columnId, order, defaults);
         this.selectionModel = selectionModel;
         const { chain } = Dsl.disposeWith(this);
         this._selectRowOnClick(false);
@@ -3784,13 +4055,15 @@ class TableMoreMenuComponent extends DisposableComponent {
     popupType$ = new MutableValueModel();
     popupComponentPortal$;
     _visible$ = this.registerDisposable(new DelegatingValueModel());
+    initialiseCallback;
     constructor() {
         super();
         const { chain } = Dsl.disposeWith(this);
         this.popupComponentPortal$ = chain(this.popupType$).map(type => new ComponentPortal(type));
     }
-    configurePopupComponentType(popupComponentType) {
+    configurePopupComponentType(popupComponentType, configureCallback) {
         this.popupType$.value = popupComponentType;
+        this.initialiseCallback = configureCallback;
     }
     // Stops tree selection when clicking the menu button
     preventDefault($event) {
@@ -3801,6 +4074,9 @@ class TableMoreMenuComponent extends DisposableComponent {
         const component = $event.instance;
         component.initialise(this.value$, Command.create(() => this.matMenuTrigger.closeMenu()));
         this._visible$.setDelegate(component.visible$);
+        if (this.initialiseCallback) {
+            this.initialiseCallback(component);
+        }
     }
     get visible$() {
         return this._visible$.readonly$;
@@ -3835,16 +4111,25 @@ class RowClass {
         this.matches = matches;
     }
 }
+class RowAttribute {
+    attributeName;
+    getValue;
+    constructor(attributeName, getValue) {
+        this.attributeName = attributeName;
+        this.getValue = getValue;
+    }
+}
 class AbstractTableModel extends GarbageCollector {
     _dataSource$ = this.registerDisposable(new DelegatingListModel());
     _filteredRows$ = this.registerDisposable(new DelegatingListModel());
     _visibleRows$ = this.registerDisposable(new DelegatingListModel());
-    _columnList = this.registerDisposable(new ColumnListModel());
+    columnManager = this.registerDisposable(new ColumnManager());
     _editorSessions = new MutableListModel();
     _rowsBeingEdited$;
     saveCommandFactory;
     _editorSessionByRowId;
     rowClassNamePredicates = [];
+    rowAttributeGenerators = [];
     _columnTextPropertiesLookup;
     editing$;
     firstEditableColumn$;
@@ -3869,15 +4154,15 @@ class AbstractTableModel extends GarbageCollector {
         });
         this._editorSessionByRowId = chain(this._editorSessions).indexBy("rowId");
         this.editing$ = chain(this._editorSessions).count().isGreaterThan(0);
-        this.textSearchPredicate$ = chain(this.visibleColumns).reduce(columns => {
+        this.textSearchPredicate$ = chain(this.visibleColumns$).reduceAll(columns => {
             return (row, regex) => {
                 return (!regex || !!columns.find(c => regex.test(c.getSearchTextFor(row))));
             };
         });
-        this.firstEditableColumn$ = chain(this.columns).select(c => c.hasEditorPortal()).first();
-        this.firstVisibleColumn$ = chain(this._columnList).first();
-        this.lastVisibleColumn$ = chain(this._columnList).last();
-        this.rowSelectionDisabledOnAllColumns$ = chain(this._columnList).select(column => column.isRowSelectionEnabled()).count().equals(0);
+        this.firstEditableColumn$ = chain(this.columns$).select(c => c.hasEditorPortal()).first();
+        this.firstVisibleColumn$ = chain(this.visibleColumns$).first();
+        this.lastVisibleColumn$ = chain(this.visibleColumns$).last();
+        this.rowSelectionDisabledOnAllColumns$ = chain(this.columnManager.visibleColumns$).select(column => column.isRowSelectionEnabled()).count().equals(0);
         this.dataSourceEmpty$ = chain(this.dataSource$).isEmpty();
         this.selectedItems$ = this.selectionModelProxy.selectedItems$;
         this.leadSelection$ = this.selectionModelProxy.leadSelection$;
@@ -3901,7 +4186,7 @@ class AbstractTableModel extends GarbageCollector {
             ],
             parent: injector
         });
-        this.columns.value.forEach(c => c.initialise(customInjector));
+        this.columns$.value.forEach(c => c.initialise(customInjector));
         this.identityOf = identityOf;
     }
     get dataSource$() {
@@ -3954,19 +4239,19 @@ class AbstractTableModel extends GarbageCollector {
             });
         });
     }
-    get columns() {
-        return this._columnList.allColumns$;
+    get columns$() {
+        return this.columnManager.allColumns$;
     }
-    get visibleColumns() {
-        return this._columnList.readonly$;
+    get visibleColumns$() {
+        return this.columnManager.visibleColumns$;
     }
     pluck(property, options) {
         const columnId = options?.columnId || property.toString();
-        return this.addColumn(new PropertyColumnModel(columnId, property, () => this.getColumnTextProperties(columnId)));
+        return this.addColumn(new PropertyColumnModel(columnId, this.columnManager, property, () => this.getColumnTextProperties(columnId)));
     }
     pluckList(property, options) {
         const columnId = options?.columnId || property.toString();
-        return this.addColumn(new ListPropertyColumnModel(columnId, property, () => this.getColumnTextProperties(columnId)));
+        return this.addColumn(new ListPropertyColumnModel(columnId, this.columnManager, property, () => this.getColumnTextProperties(columnId)));
     }
     // TODO: clean this up and assign the selection model on teh table directly.
     //       tableModel.useSelectionModel(model) and have the seleciton column automatically
@@ -3975,32 +4260,32 @@ class AbstractTableModel extends GarbageCollector {
     _addSelectionColumn(selectionModel, visible) {
         assert.isNil(this.selectionColumnModel);
         const columnId = "selection-column";
-        this.selectionColumnModel = new SelectionColumnModel(columnId, () => this.getColumnTextProperties(columnId), this.selectionModelProxy);
+        this.selectionColumnModel = new SelectionColumnModel(columnId, this.columnManager, () => this.getColumnTextProperties(columnId), this.selectionModelProxy);
         this.selectionColumnModel.useSelectionModel(selectionModel);
         this.addRowClass("aup-row-selected", row => this.selectionColumnModel.isSelected(row));
-        const selectionColumnModel = this.addColumn(this.selectionColumnModel, 0);
-        if (!isNil$1(visible)) {
+        const selectionColumnModel = this.addColumn(this.selectionColumnModel, { before: null }); // first column
+        if (!isNil(visible)) {
             selectionColumnModel.visibleWhile(visible instanceof ValueModel ? visible : ValueModel.constant(visible));
         }
         return selectionColumnModel;
     }
     addEditControls(saveCommandFactory, formFactory) {
         this.saveCommandFactory = saveCommandFactory;
-        if (isFunction$1(formFactory)) {
+        if (isFunction(formFactory)) {
             this._createForm = formFactory;
         }
         const columnId = "editControls";
-        return this.addColumn(new EditorControlColumnModel(columnId, saveCommandFactory, () => this.getColumnTextProperties(columnId)));
+        return this.addColumn(new EditorControlColumnModel(columnId, this.columnManager, saveCommandFactory, () => this.getColumnTextProperties(columnId)));
     }
     addCustomColumn(columnId, dataAccessor) {
-        return this.addColumn(new CustomValueColumnModel(columnId, () => this.getColumnTextProperties(columnId), dataAccessor));
+        return this.addColumn(new CustomValueColumnModel(columnId, this.columnManager, () => this.getColumnTextProperties(columnId), dataAccessor));
     }
     addComponentColumn(columnId, component, onComponentInitOrOptions) {
-        return this.addColumn(new CustomValueColumnModel(columnId, () => this.getColumnTextProperties(columnId), row => row)).cellRenderer(component, onComponentInitOrOptions);
+        return this.addColumn(new CustomValueColumnModel(columnId, this.columnManager, () => this.getColumnTextProperties(columnId), row => row)).cellRenderer(component, onComponentInitOrOptions);
     }
-    addMoreMenu(componentClass) {
+    addMoreMenu(componentClass, initialiseCallback) {
         return this.addComponentColumn("more-menu", TableMoreMenuComponent, (component) => {
-            component.configurePopupComponentType(componentClass);
+            component.configurePopupComponentType(componentClass, initialiseCallback);
         }).columnTextProperties({
             headerText() {
                 return "";
@@ -4008,11 +4293,14 @@ class AbstractTableModel extends GarbageCollector {
         });
     }
     addTemplateColumn(columnId) {
-        return this.addColumn(new CustomTemplateColumnModel(columnId, () => this.getColumnTextProperties(columnId)));
+        return this.addColumn(new CustomTemplateColumnModel(columnId, this.columnManager, () => this.getColumnTextProperties(columnId)));
     }
     addRowClass(className, predicate) {
         this.rowClassNamePredicates.push(new RowClass(className, predicate));
     }
+    addRowAttribute(attributeName, getValue) {
+        this.rowAttributeGenerators.push(new RowAttribute(attributeName, getValue));
+    }
     getRowClasses(row) {
         const classNames = [];
         this.rowClassNamePredicates.forEach(i => {
@@ -4022,8 +4310,13 @@ class AbstractTableModel extends GarbageCollector {
         });
         return classNames;
     }
-    addColumn(column, index) {
-        return this._columnList.addColumn(column, index);
+    getRowAttributes(row) {
+        return this.rowAttributeGenerators.reduce((result, generator) => {
+            return { ...result, [generator.attributeName]: generator.getValue(row) };
+        }, {});
+    }
+    addColumn(column, position) {
+        return this.columnManager.addColumn(column, position);
     }
     columnTextProperties(columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
@@ -4191,7 +4484,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['class']
             }] } });
 
+const AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER = new InjectionToken("AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER");
+class TableRowAttributesDirective {
+    elementRef;
+    aupTableRowAttributes;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        for (const attr in this.aupTableRowAttributes) {
+            this.elementRef.nativeElement.setAttribute(attr, this.aupTableRowAttributes[attr]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableRowAttributesDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: TableRowAttributesDirective, selector: "[aupTableRowAttributes]", inputs: { aupTableRowAttributes: "aupTableRowAttributes" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableRowAttributesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[aupTableRowAttributes]",
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { aupTableRowAttributes: [{
+                type: Input
+            }] } });
 class TableBodyComponent extends ResizeAwareComponent {
+    bufferMultiplier;
     #data$_accessor_storage = proxify((ListModel));
     get data$() { return this.#data$_accessor_storage; }
     set data$(value) { this.#data$_accessor_storage = value; }
@@ -4204,51 +4521,66 @@ class TableBodyComponent extends ResizeAwareComponent {
     #showHeader_accessor_storage = true;
     get showHeader() { return this.#showHeader_accessor_storage; }
     set showHeader(value) { this.#showHeader_accessor_storage = value; }
-    visibleRowCount = new EventEmitter();
     trackBy;
-    /**
-     * 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.
-     */
-    enableScrolling = false;
+    #scrollMode$_accessor_storage = proxify((ValueModel));
+    get scrollMode$() { return this.#scrollMode$_accessor_storage; }
+    set scrollMode$(value) { this.#scrollMode$_accessor_storage = value; }
+    #scrollMode_accessor_storage = "none";
+    get scrollMode() { return this.#scrollMode_accessor_storage; }
+    set scrollMode(value) { this.#scrollMode_accessor_storage = value; }
+    scrollViewport;
     columns$;
     columnIds$;
     columnsById$;
-    _visibleRowCount$;
     // TODO: support user defined header and row heights via css vars.
-    headerHeight$ = new MutableValueModel(29);
-    rowHeight$ = new MutableValueModel(40);
+    headerHeight$ = new MutableValueModel(48);
+    rowHeight$ = new MutableValueModel(44);
     baseCssClass = "aup-table-component";
-    constructor(elementRef, ngZone) {
-        super(elementRef, ngZone);
-        const { chain, when } = Dsl.disposeWith(this);
+    virtualScrollDataSource = new TableVirtualScrollDataSource();
+    virtualScrollActive$ = new MutableValueModel(false);
+    scrollTimeout;
+    constructor(bufferMultiplier = 1) {
+        super();
+        this.bufferMultiplier = bufferMultiplier;
+        const { chain, when, observe } = Dsl.disposeWith(this);
         const actualHeaderHeight$ = chain(this.showHeader$).map(show => {
             return show ? this.headerHeight$.value : 0;
         }, { dependsOn: this.headerHeight$ });
-        this._visibleRowCount$ = chain(this.bounds$).map(bounds => {
-            // TODO: this doesn't take into account any css styling adjustments etc.  Will investigate if it's an issue.
-            const rawRowCount = (bounds.height - actualHeaderHeight$.value) / this.rowHeight$.value;
-            return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
-        }, {
-            dependsOn: [actualHeaderHeight$, this.rowHeight$],
-            postponeWhile: chain(this.bounds$).pluckNumeric("height").isLessThan(1)
-        });
-        when(this._visibleRowCount$).changes(visibleRows => {
-            this.visibleRowCount.emit(visibleRows);
-        }, { initialValue: "triggerChangeUnlessNil" });
+        // performance is terrible if the data changes while we're scrolling, so we postpone updates until
+        // scrolling stops.
+        const delayedDatea$ = chain(this.data$).postponeWhile(this.virtualScrollActive$);
+        when(delayedDatea$).changes(delatedData => {
+            this.virtualScrollDataSource.data = delatedData;
+            this.scheduleTableHeightCheck();
+        }, { initialValue: "evaluate" });
         this.onInit(() => {
-            this.columns$ = chain(this.tableModel.columns);
+            this.columns$ = chain(this.tableModel.visibleColumns$);
             this.columnIds$ = chain(this.columns$).pluck("columnId");
             this.columnsById$ = chain(this.columns$).indexBy('columnId');
         });
-        const txo = new TransactionObserver().onEvent(e => console.log(e.name, e.payload));
-        txo.observe('this.boundsModel', this.bounds$);
-        txo.observe('this._visibleRowCount$', this._visibleRowCount$);
+        // const txo = new TransactionObserver({verbose: false}).onEvent(e => console.log(e.name, e.payload));
+        // txo.observe('this.virtualScrollRowRange$', this.virtualScrollRowRange$);
+        // txo.observe('this.virtualScrollSpacerSize$', this.virtualScrollSpacerSize$);
+        // txo.observe('this.virtualRows$', this.virtualRows$);
+        // txo.observe('this.tableBodyHeight$', this.tableBodyHeight$);
+        // txo.observe('this.virtualScrollActive$', this.virtualScrollActive$);
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.scrollViewport) {
+            const { observe } = Dsl.disposeWith(this);
+            this.scrollViewport.elementScrolled().subscribe(() => this.notifyScrolled());
+        }
     }
     get hideHeader() {
         return !this.showHeader;
     }
+    get headerHeightCssVar() {
+        return `${this.headerHeight$.value}px`;
+    }
+    get rowHeightCssVar() {
+        return `${this.rowHeight$.value}px`;
+    }
     isEditing(row) {
         return !!this.tableModel.getEditSessionFor(row);
     }
@@ -4273,8 +4605,34 @@ class TableBodyComponent extends ResizeAwareComponent {
         }
         return classes;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", trackBy: "trackBy", enableScrolling: "enableScrolling" }, outputs: { visibleRowCount: "visibleRowCount" }, host: { properties: { "class.enable-scrolling": "this.enableScrolling", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [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>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\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:auto;display:flex;flex-direction:column;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { kind: "component", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }] });
+    scheduleTableHeightCheck(waitMillis = 50) {
+        setTimeout(() => {
+            const tbody = this.elementRef.nativeElement.querySelector("tbody");
+            const bodyHeight = tbody.offsetHeight;
+            if (this.data$.length > 0 && bodyHeight < this.rowHeight$.value) {
+                // Hacks to get our virtual scroll to repaint
+                // Logger.get(this).log(`rowCount=${this.data$.length}, bodyHeight=${bodyHeight} -> virtual table not rendering, triggering resize to force repaint`)
+                window.dispatchEvent(new Event('resize'));
+                if (waitMillis < 500) {
+                    this.scheduleTableHeightCheck(waitMillis + 50);
+                }
+            }
+        }, waitMillis);
+    }
+    notifyScrolled() {
+        this.virtualScrollActive$.value = true;
+        this.clearScrollTimeout();
+        this.scrollTimeout = setTimeout(() => {
+            return this.virtualScrollActive$.value = false;
+        }, 200);
+    }
+    clearScrollTimeout() {
+        if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, deps: [{ token: AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", showHeader$: "showHeader$", showHeader: "showHeader", trackBy: "trackBy", scrollMode$: "scrollMode$", scrollMode: "scrollMode" }, host: { properties: { "attr.scrollMode": "this.scrollMode", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader", "style.--aup-table-header-height": "this.headerHeightCssVar", "style.--aup-table-row-height": "this.rowHeightCssVar" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n<cdk-virtual-scroll-viewport  *ngIf=\"scrollMode$.value === 'virtual'\"\n                              [tvsItemSize]=\"rowHeight$.value\"\n                              [headerHeight]=\"headerHeight$.value\"\n                              [bufferMultiplier]=\"bufferMultiplier\"\n>\n  <table mat-table [dataSource]=\"virtualScrollDataSource\" [trackBy]=\"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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</cdk-virtual-scroll-viewport>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host[scrollMode=virtual] cdk-virtual-scroll-viewport{flex:1}:host[scrollMode=virtual] table th{height:var(--aup-table-header-height);max-height:var(--aup-table-header-height);min-height:var(--aup-table-header-height)}:host[scrollMode=virtual] table td{height:var(--aup-table-row-height);max-height:var(--aup-table-row-height);min-height:var(--aup-table-row-height)}:host[scrollMode=classic]{min-height:0}:host[scrollMode=classic] .classic-scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i4$5.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "directive", type: TableRowAttributesDirective, selector: "[aupTableRowAttributes]", inputs: ["aupTableRowAttributes"] }, { kind: "component", type: TableCellComponent, selector: "aup-table-cell", inputs: ["row", "column", "editSession", "tableModel"] }, { kind: "component", type: TableHeaderCellComponent, selector: "aup-table-header-cell", inputs: ["column"] }] });
 }
 __decorate([
     Proxify(),
@@ -4292,10 +4650,23 @@ __decorate([
     StoreInValueModel(),
     __metadata("design:type", Object)
 ], TableBodyComponent.prototype, "showHeader", null);
+__decorate([
+    Proxify(),
+    __metadata("design:type", ValueModel)
+], TableBodyComponent.prototype, "scrollMode$", null);
+__decorate([
+    StoreInValueModel(),
+    __metadata("design:type", String)
+], TableBodyComponent.prototype, "scrollMode", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aup-table-body", template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [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>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\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:auto;display:flex;flex-direction:column;align-items:stretch}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { data$: [{
+            args: [{ selector: "aup-table-body", template: "\n<div class=\"classic-scroll-container\" *ngIf=\"scrollMode$.value !== 'virtual'\">\n  <table mat-table [dataSource]=\"data$.value\" [trackBy]=\"trackBy\" [multiTemplateDataRows]>\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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n\n<cdk-virtual-scroll-viewport  *ngIf=\"scrollMode$.value === 'virtual'\"\n                              [tvsItemSize]=\"rowHeight$.value\"\n                              [headerHeight]=\"headerHeight$.value\"\n                              [bufferMultiplier]=\"bufferMultiplier\"\n>\n  <table mat-table [dataSource]=\"virtualScrollDataSource\" [trackBy]=\"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 [column]=\"column\"\n                               [attr.column-index]=\"index\"\n                               [attr.column-id]=\"column.columnId\"\n                               [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell>\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 [column]=\"$any(column)\"\n                        [row]=\"row\"\n                        [tableModel]=\"$any(tableModel)\"\n                        [editSession]=\"$any(tableModel.getEditSessionFor(row))\"\n                        [attr.column-index]=\"index\"\n                        [attr.column-id]=\"column.columnId\"\n                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds$.value; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds$.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\"\n        [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [aupTableRowAttributes]=\"tableModel.getRowAttributes(row)\"\n        [attr.aup-row-id]=\"trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</cdk-virtual-scroll-viewport>\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host[scrollMode=virtual] cdk-virtual-scroll-viewport{flex:1}:host[scrollMode=virtual] table th{height:var(--aup-table-header-height);max-height:var(--aup-table-header-height);min-height:var(--aup-table-header-height)}:host[scrollMode=virtual] table td{height:var(--aup-table-row-height);max-height:var(--aup-table-row-height);min-height:var(--aup-table-row-height)}:host[scrollMode=classic]{min-height:0}:host[scrollMode=classic] .classic-scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER]
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { data$: [{
                 type: Input
             }], tableModel: [{
                 type: Input
@@ -4303,21 +4674,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], showHeader: [{
                 type: Input
-            }], visibleRowCount: [{
-                type: Output
             }], trackBy: [{
                 type: Input
-            }], enableScrolling: [{
+            }], scrollMode$: [{
+                type: Input
+            }], scrollMode: [{
                 type: Input
             }, {
                 type: HostBinding,
-                args: ["class.enable-scrolling"]
+                args: ["attr.scrollMode"]
+            }], scrollViewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
             }], baseCssClass: [{
                 type: HostBinding,
                 args: ["class"]
             }], hideHeader: [{
                 type: HostBinding,
                 args: ["class.hide-header"]
+            }], headerHeightCssVar: [{
+                type: HostBinding,
+                args: ["style.--aup-table-header-height"]
+            }], rowHeightCssVar: [{
+                type: HostBinding,
+                args: ["style.--aup-table-row-height"]
             }] } });
 
 class TableMoreMenuPopupComponent extends DisposableComponent {
@@ -4438,8 +4818,10 @@ class TableFilterModel extends GarbageCollector {
         this.useSearchText(options.searchText$);
         this.useRowPredicate(options.predicate$);
         const { chain } = Dsl.disposeWith(this);
-        const textSearchRegex$ = chain(this._searchText$).map(text => {
-            return isEmpty$1(text) ? undefined : new RegExp(escapeStringRegexp(text), "i");
+        const textSearchRegex$ = chain(this._searchText$)
+            .debounce(250)
+            .map(text => {
+            return isEmpty(text) ? undefined : new RegExp(escapeStringRegexp(text), "i");
         }, { allowNil: true });
         this._rowPredicate = chain(this._rowPredicate$)
             .map(predicate => {
@@ -4647,28 +5029,14 @@ class TableComponent extends AbstractTableComponent {
     #filterModel_accessor_storage = proxify((TableFilterModel));
     get filterModel() { return this.#filterModel_accessor_storage; }
     set filterModel(value) { this.#filterModel_accessor_storage = value; }
-    #enablePaging$_accessor_storage = proxify((ValueModel));
-    get enablePaging$() { return this.#enablePaging$_accessor_storage; }
-    set enablePaging$(value) { this.#enablePaging$_accessor_storage = value; }
-    #enablePaging_accessor_storage = false;
-    get enablePaging() { return this.#enablePaging_accessor_storage; }
-    set enablePaging(value) { this.#enablePaging_accessor_storage = value; }
-    // enablePaging() {
-    //   if (isNil(this.pageController)) {
-    //     const pagedListModel = this.registerDisposable(PagedListModel.create(this._visibleRows$.getDelegate(), this._pageSize));
-    //     this._visibleRows$.setDelegate(pagedListModel);
-    //     this._pageController = pagedListModel.pageController;
-    //   }
-    // }
+    tableBody;
     _footerContentAdded = false;
     _filteredRows$ = this.registerDisposable(new DelegatingListModel());
-    _pageSize = new MutableValueModel();
-    pagedListModel;
+    scrollMode$;
     constructor(injector) {
         super(injector);
-        const { when } = Dsl.disposeWith(this);
-        this.onDispose(() => this.disposeOfPagedListModel());
-        when(this.enablePaging$).changes(enabled => this.configurePaging(enabled));
+        const { chain, when } = Dsl.disposeWith(this);
+        this.scrollMode$ = chain(this.enableScrolling$).map(enabled => enabled ? "virtual" : "none");
     }
     ngOnInit() {
         super.ngOnInit();
@@ -4680,76 +5048,42 @@ class TableComponent extends AbstractTableComponent {
         else {
             this._filteredRows$.setDelegate(this._dataSource$);
         }
-        this.configurePaging(this.enablePaging$.value);
+        this._visibleRows$.setDelegate(this._filteredRows$);
+        // let users of the model know what the current visible and filtered rows are for selection models and what not
         this.tableModel.bindToTable(this._filteredRows$, this._visibleRows$);
     }
     getModel() {
         return this.tableModel;
     }
-    get pageController() {
-        // TODO: need to support external page controllers if the paging occurs to our primary data source.
-        return this.pagedListModel.pageController;
-    }
-    configurePaging(enable) {
-        if (enable) {
-            if (!this.pagedListModel) {
-                this.pagedListModel = PagedListModel.create(this._filteredRows$, this._pageSize);
-            }
-            this._visibleRows$.setDelegate(this.pagedListModel);
-        }
-        else {
-            this.disposeOfPagedListModel();
-            this._visibleRows$.setDelegate(this._filteredRows$);
-        }
-    }
-    disposeOfPagedListModel() {
-        if (this.pagedListModel) {
-            this.pagedListModel.dispose();
-            this.pagedListModel = null;
-        }
-    }
     footerContentChanged($event) {
         // console.log($event);
         this._footerContentAdded = true;
     }
-    //@Trace()
-    updatePageSize(count) {
-        this._pageSize.value = count;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel", filterModel: "filterModel", enablePaging$: "enablePaging$", enablePaging: "enablePaging" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel", filterModel: "filterModel" }, providers: [
             { provide: AbstractTableComponent, useExisting: TableComponent }
-        ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [trackBy]=\"trackBy\"\n                (visibleRowCount)=\"updatePageSize($event)\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n  <aup-paginator *ngIf=\"enablePaging$.value\" [pageController]=\"pageController\"></aup-paginator>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: PaginatorComponent, selector: "aup-paginator", inputs: ["pageController"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "enableScrolling"], outputs: ["visibleRowCount"] }] });
+        ], viewQueries: [{ propertyName: "tableBody", first: true, predicate: TableBodyComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [trackBy]=\"trackBy\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer], [slot=footer]\"></ng-content></div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "scrollMode$", "scrollMode"] }] });
 }
 __decorate([
     Proxify(),
-    __metadata("design:type", Object)
+    __metadata("design:type", TableModel)
 ], TableComponent.prototype, "tableModel", null);
 __decorate([
     Proxify(),
     __metadata("design:type", Object)
 ], TableComponent.prototype, "filterModel", null);
-__decorate([
-    Proxify(),
-    __metadata("design:type", Object)
-], TableComponent.prototype, "enablePaging$", null);
-__decorate([
-    StoreInValueModel(),
-    __metadata("design:type", Object)
-], TableComponent.prototype, "enablePaging", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TableComponent }
-                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [trackBy]=\"trackBy\"\n                (visibleRowCount)=\"updatePageSize($event)\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer]\"></ng-content></div>\n  <aup-paginator *ngIf=\"enablePaging$.value\" [pageController]=\"pageController\"></aup-paginator>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"] }]
+                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"tableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [trackBy]=\"trackBy\"\n                [aupHighlightTextModel]=\"highlightText$\"\n></aup-table-body>\n<section class=\"table-footer\">\n  <div class=\"footer-content\"><ng-content select=\"[footer], [slot=footer]\"></ng-content></div>\n</section>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}aup-table-body{flex:1}.table-footer{display:flex;flex-direction:row;align-items:center}.table-footer .footer-content{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { tableModel: [{
                 type: Input
             }], filterModel: [{
                 type: Input
-            }], enablePaging$: [{
-                type: Input
-            }], enablePaging: [{
-                type: Input
+            }], tableBody: [{
+                type: ViewChild,
+                args: [TableBodyComponent]
             }] } });
 
 const SVG_HEIGHT = 60;
@@ -4930,7 +5264,7 @@ var DecoratedTreeNode;
         }
     }
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Array),
         __metadata("design:paramtypes", [])
     ], Decorator.prototype, "children", null);
@@ -4983,7 +5317,7 @@ var DecoratedTreeNode;
         __metadata("design:returntype", Array)
     ], Decorator.prototype, "ancestors", null);
     __decorate([
-        Memoize(),
+        MemoizeGet(),
         __metadata("design:type", Number),
         __metadata("design:paramtypes", [])
     ], Decorator.prototype, "depth", null);
@@ -4994,8 +5328,8 @@ class TreeLabelColumnModel extends ColumnModel {
     expansionModel;
     labelFactory = () => undefined;
     iconFactory;
-    constructor(columnId, textPropertiesProvider, expansionModel) {
-        super(columnId, textPropertiesProvider);
+    constructor(columnId, order, textPropertiesProvider, expansionModel) {
+        super(columnId, order, textPropertiesProvider);
         this.expansionModel = expansionModel;
         this.cellRenderer(TreeLabelCellRendererComponent);
     }
@@ -5063,7 +5397,7 @@ class TreeTableModel extends AbstractTableModel {
     }
     treeControlColumn(builder) {
         const columnId = 'tree-label';
-        const column = new TreeLabelColumnModel(columnId, () => this.getColumnTextProperties(columnId), this);
+        const column = new TreeLabelColumnModel(columnId, this.columnManager, () => this.getColumnTextProperties(columnId), this);
         builder(column);
         this.addColumn(column);
     }
@@ -5389,8 +5723,11 @@ class TreeTableComponent extends AbstractTableComponent {
     #expansionModel_accessor_storage = proxify((TreeExpansionModel));
     get expansionModel() { return this.#expansionModel_accessor_storage; }
     set expansionModel(value) { this.#expansionModel_accessor_storage = value; }
+    scrollMode$;
     constructor(injector) {
         super(injector);
+        const { chain } = Dsl.disposeWith(this);
+        this.scrollMode$ = chain(this.enableScrolling$).map(enabled => enabled ? "virtual" : "none");
     }
     ngOnInit() {
         super.ngOnInit();
@@ -5410,7 +5747,7 @@ class TreeTableComponent extends AbstractTableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TreeTableComponent, selector: "aup-tree-table", inputs: { treeTableModel: "treeTableModel", expansionModel: "expansionModel" }, providers: [
             { provide: AbstractTableComponent, useExisting: TreeTableComponent }
-        ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "enableScrolling"], outputs: ["visibleRowCount"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"], dependencies: [{ kind: "directive", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: ["aupHighlightTextModel"] }, { kind: "component", type: TableBodyComponent, selector: "aup-table-body", inputs: ["data$", "tableModel", "showHeader$", "showHeader", "trackBy", "scrollMode$", "scrollMode"] }] });
 }
 __decorate([
     Proxify(),
@@ -5424,7 +5761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             type: Component,
             args: [{ selector: 'aup-tree-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TreeTableComponent }
-                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [enableScrolling]=\"enableScrolling\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"] }]
+                    ], template: "<aup-table-body [data$]=\"visibleRows$\"\n                [tableModel]=\"treeTableModel\"\n                [showHeader$]=\"showHeader$\"\n                [scrollMode$]=\"scrollMode$\"\n                [aupHighlightTextModel]=\"highlightText$\"\n                [trackBy]=\"trackBy\"\n></aup-table-body>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host::ng-deep td.mat-mdc-cell{border-top-width:0!important;border-bottom-width:0!important}:host::ng-deep td.mat-column-tree-label{width:1px}:host::ng-deep aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}:host::ng-deep aup-tree-label-cell-renderer{flex:1}aup-table-body{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { treeTableModel: [{
                 type: Input
             }], expansionModel: [{
@@ -5606,6 +5943,7 @@ class ComponentsModule {
             FocusableComponent,
             CardContainerComponent,
             TableComponent,
+            TableRowAttributesDirective,
             EditRowControlsComponent,
             ColumnTemplateDirective,
             DefaultCellRendererComponent,
@@ -5639,7 +5977,8 @@ class ComponentsModule {
             MarkdownComponent,
             TableBodyComponent,
             TableMoreMenuComponent,
-            TableMoreMenuPopupComponent], imports: [CommonModule,
+            TableMoreMenuPopupComponent,
+            SearchInputComponent], imports: [CommonModule,
             BrowserAnimationsModule,
             FormsModule,
             MatInputModule,
@@ -5658,7 +5997,9 @@ class ComponentsModule {
             MatMenuModule,
             MatDividerModule,
             MatProgressSpinnerModule,
-            MatProgressBarModule], exports: [NumberInputComponent,
+            MatProgressBarModule,
+            ScrollingModule,
+            TableVirtualScrollModule], exports: [NumberInputComponent,
             StringInputComponent,
             TextInputComponent,
             PasswordInputComponent,
@@ -5696,7 +6037,8 @@ class ComponentsModule {
             LoadingContainerComponent,
             MarkdownComponent,
             TableMoreMenuComponent,
-            TableMoreMenuPopupComponent] });
+            TableMoreMenuPopupComponent,
+            SearchInputComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ComponentsModule, providers: [
             FocusBindingFactory,
             MarkdownService
@@ -5719,7 +6061,9 @@ class ComponentsModule {
             MatMenuModule,
             MatDividerModule,
             MatProgressSpinnerModule,
-            MatProgressBarModule] });
+            MatProgressBarModule,
+            ScrollingModule,
+            TableVirtualScrollModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule,
@@ -5744,7 +6088,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         MatMenuModule,
                         MatDividerModule,
                         MatProgressSpinnerModule,
-                        MatProgressBarModule
+                        MatProgressBarModule,
+                        ScrollingModule,
+                        TableVirtualScrollModule
                     ],
                     declarations: [
                         AbstractInputComponent,
@@ -5768,6 +6114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         FocusableComponent,
                         CardContainerComponent,
                         TableComponent,
+                        TableRowAttributesDirective,
                         EditRowControlsComponent,
                         ColumnTemplateDirective,
                         DefaultCellRendererComponent,
@@ -5802,6 +6149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         TableBodyComponent,
                         TableMoreMenuComponent,
                         TableMoreMenuPopupComponent,
+                        SearchInputComponent
                     ],
                     exports: [
                         NumberInputComponent,
@@ -5843,6 +6191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         MarkdownComponent,
                         TableMoreMenuComponent,
                         TableMoreMenuPopupComponent,
+                        SearchInputComponent
                     ],
                     providers: [
                         FocusBindingFactory,
@@ -5851,6 +6200,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 }]
         }] });
 
+class LoadableComponent extends DisposableComponent {
+    #_loaded$ = new MutableValueModel();
+    #asyncLoadables = [];
+    #awaitedLoadables = [];
+    get loaded$() {
+        return this.#_loaded$.readonly$;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.#asyncLoadables.forEach(it => it.ensureLoaded());
+        if (this.#awaitedLoadables.length > 0) {
+            Promise.all(this.#awaitedLoadables.map(it => {
+                return it.ensureLoaded(); //.then(() => console.log(`${it.constructor.name} loaded`));
+            })).then(() => {
+                this.#_loaded$.value = true;
+            });
+        }
+        else {
+            this.#_loaded$.value = true;
+        }
+    }
+    injectLoadable(token, options) {
+        return this.registerLoadable(inject(token), options);
+    }
+    registerLoadable(loadable, options) {
+        if (this.loaded$.value) {
+            loadable.ensureLoaded();
+        }
+        else {
+            if (!options || options.wait === true) {
+                this.#awaitedLoadables.push(loadable);
+            }
+            else {
+                this.#asyncLoadables.push(loadable);
+            }
+        }
+        return loadable;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: LoadableComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: LoadableComponent, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: LoadableComponent, decorators: [{
+            type: Directive
+        }] });
+
+class TextSearchContext {
+    row;
+    searchText;
+    searchRegex;
+    constructor(row, searchText, searchRegex) {
+        this.row = row;
+        this.searchText = searchText;
+        this.searchRegex = searchRegex;
+    }
+    getOrCreate(type, create) {
+    }
+    matchesText(text) {
+        return this.searchRegex.test(text);
+    }
+}
+
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -5877,7 +6287,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  * </aup-activity-actions>
  */
 class ActivityActionsComponent extends DisposableComponent {
-    cdr;
     confirmCommandComponent;
     cancelCommandComponent;
     #confirmCommand_accessor_storage = proxify((Command));
@@ -5906,9 +6315,8 @@ class ActivityActionsComponent extends DisposableComponent {
     }
     layout = ActivityActionsComponent.Layout.BLOCK;
     align = ActivityActionsComponent.Align.STRETCH;
-    constructor(cdr) {
+    constructor() {
         super();
-        this.cdr = cdr;
     }
     hasConfirmFace() {
         return !!this.confirmFace;
@@ -5927,8 +6335,8 @@ class ActivityActionsComponent extends DisposableComponent {
     focusCancel() {
         this.cancelCommandComponent.requestFocus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, viewQueries: [{ propertyName: "confirmCommandComponent", first: true, predicate: ["confirmCommandComponent"], descendants: true }, { propertyName: "cancelCommandComponent", first: true, predicate: ["cancelCommandComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, viewQueries: [{ propertyName: "confirmCommandComponent", first: true, predicate: ["confirmCommandComponent"], descendants: true }, { propertyName: "cancelCommandComponent", first: true, predicate: ["cancelCommandComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CommandComponent, selector: "aup-command", inputs: ["command", "face$", "face", "busyFace$", "busyFace", "alignFace"] }] });
 }
 __decorate([
     Proxify(),
@@ -5940,8 +6348,8 @@ __decorate([
 ], ActivityActionsComponent.prototype, "cancelCommand", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { confirmCommandComponent: [{
+            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command #cancelCommandComponent class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command #confirmCommandComponent class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { confirmCommandComponent: [{
                 type: ViewChild,
                 args: ["confirmCommandComponent"]
             }], cancelCommandComponent: [{
@@ -5984,7 +6392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
 
 const ACTIVITY_DATA = new InjectionToken("InteractionActivityData");
 // eslint-disable-next-line @angular-eslint/component-class-suffix
-class Activity extends DisposableComponent {
+class Activity extends LoadableComponent {
     activityData = inject(ACTIVITY_DATA);
     activityReadyListeners = new EventListenerList();
     _busy$ = this.registerDisposable(new DelegatingValueModel().withDefault(false));
@@ -6039,7 +6447,6 @@ class Activity extends DisposableComponent {
     notifyActivityReady() {
         this.activityReadyListeners.fire(l => l(this));
         this._ready$.value = true;
-        console.log("ready");
     }
     onActivityReady(callback) {
         return this.activityReadyListeners.add(callback);
@@ -6159,7 +6566,7 @@ class AbstractDialogComponent extends Activity {
         }
     }
     isDestructive() {
-        return isFunction$1(this.config['destructive']) && this.config["destructive"]();
+        return isFunction(this.config['destructive']) && this.config["destructive"]();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractDialogComponent, deps: [{ token: ALERT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
@@ -6176,6 +6583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
 
 class AbstractConfirmDialogComponent extends AbstractDialogComponent {
     cancelFace;
+    confirmClass = "aup-confirm-activity";
     constructor(config) {
         super(config);
         this.cancelFace = {
@@ -6186,7 +6594,7 @@ class AbstractConfirmDialogComponent extends AbstractDialogComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractConfirmDialogComponent, deps: [{ token: ALERT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractConfirmDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AbstractConfirmDialogComponent, selector: "ng-component", host: { properties: { "class": "this.confirmClass" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractConfirmDialogComponent, decorators: [{
             type: Component,
@@ -6196,7 +6604,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ALERT_CONFIG]
-                }] }]; } });
+                }] }]; }, propDecorators: { confirmClass: [{
+                type: HostBinding,
+                args: ["class"]
+            }] } });
 
 class ActivityBodyComponent extends DisposableComponent {
     fullWidth = false;
@@ -6735,7 +7146,7 @@ const ROUTE_PARAMETER_LIST_KEY = Symbol('place:route:parameters');
 //     return true;
 //   }
 // }
-class PlaceComponent extends DisposableComponent {
+class PlaceComponent extends LoadableComponent {
     _placeReadyCallbacks = [];
     visitModel = new MutableValueModel();
     _inVisitUpdate = new Guard();
@@ -6792,6 +7203,7 @@ class PlaceComponent extends DisposableComponent {
      */
     installAndInitialiseBinding(initialVisit, parameterDef) {
         const model = this[parameterDef.propertyName];
+        assert.notNil(model);
         DebugContext.tag(model, `${this.placeDefinition.component.name}.${parameterDef.propertyName}`);
         const binding = this.registerDisposable(new Binding(this.visitModel, model, {
             toRight(visit) {
@@ -6876,7 +7288,7 @@ class PlaceComponent extends DisposableComponent {
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: PlaceComponent, usesInheritance: true, ngImport: i0 });
 }
 __decorate([
-    Memoize(),
+    MemoizeGet(),
     __metadata("design:type", PlaceDefinition),
     __metadata("design:paramtypes", [])
 ], PlaceComponent.prototype, "placeDefinition", null);
@@ -7066,7 +7478,7 @@ class Visit {
     getRouterCommands() {
         return this.segments.reduce((result, v) => {
             const path = v.placeDefinition.path;
-            return isEmpty$1(path) ?
+            return isEmpty(path) ?
                 [...result, path] : // Angular doesn't support route params on empty path segments
                 [...result, path, ...v.createRouterCommands()];
         }, []);
@@ -7082,7 +7494,7 @@ class Visit {
     }
 }
 __decorate([
-    Memoize$1(),
+    Memoize(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [PlaceDefinition]),
     __metadata("design:returntype", VisitSegment)
@@ -7463,10 +7875,7 @@ class SynchroniseInteractionContextIdsWithRoute extends NavigationSession {
         return true;
     }
     notifyActive() {
-        // TODO: Do I still need this??
-        setTimeout(() => {
-            this.syncInteractionIdsWithRouter();
-        });
+        this.syncInteractionIdsWithRouter();
     }
     // @Trace()
     onRouterEnd(event) {
@@ -8209,7 +8618,7 @@ class ConsolidatedParameterMap {
     }
 }
 __decorate([
-    Memoize(),
+    MemoizeGet(),
     __metadata("design:type", Array),
     __metadata("design:paramtypes", [])
 ], ConsolidatedParameterMap.prototype, "keys", null);
@@ -8287,7 +8696,7 @@ class UrlSnapshot {
         return this.getPrimaryUrlSegments().find(s => s.path === placeDef.path);
     }
     isLastPlaceInUrl(placeDef) {
-        return last$1(this.getPrimaryUrlSegments()).path === placeDef.path;
+        return last(this.getPrimaryUrlSegments()).path === placeDef.path;
     }
     createVisitSegmentFor(placeDef) {
         return new VisitSegment(placeDef, new ConsolidatedParameterMap(this.getPrimaryUrlSegments()));
@@ -8743,11 +9152,11 @@ class ActivityTitleComponent extends DisposableComponent {
         return this._color;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: { hasTransparentBackground: "hasTransparentBackground", color: "color" }, host: { properties: { "class.transparent-background": "this.hasTransparentBackground", "attr.color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: { hasTransparentBackground: "hasTransparentBackground", color: "color" }, host: { properties: { "class.transparent-background": "this.hasTransparentBackground", "attr.color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<span style=\"flex:1\"></span>\n<ng-content select=\"[slot='title-end']\"></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-activity-title', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'aup-activity-title', template: "<ng-content></ng-content>\n<span style=\"flex:1\"></span>\n<ng-content select=\"[slot='title-end']\"></ng-content>\n", styles: [":host{display:flex;flex-direction:row;align-items:center}\n"] }]
         }], propDecorators: { hasTransparentBackground: [{
                 type: Input
             }, {
@@ -9012,6 +9421,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
     tabs;
     activityOutlets;
     activityRefs = [];
+    animationDuration = "500ms";
     _identifier;
     _deferredCleanUp;
     interactionServiceApi;
@@ -9024,6 +9434,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
     busy = this.registerDisposable(new DelegatingValueModel().withDefault(false));
     syncTabsJob = undefined;
     stable$;
+    wasActive = false;
     constructor(placeRouter) {
         super();
         this.placeRouter = placeRouter;
@@ -9060,7 +9471,12 @@ class ActivityContainerComponent extends AbstractInteractionContext {
      * Returns true if an activity is currently running.
      */
     isActive() {
-        return this.getActiveActivityCount() > 0;
+        const isActive = this.getActiveActivityCount() > 0;
+        // if (this.wasActive !== isActive) {
+        //   console.log({was: this.wasActive, is: isActive});
+        // }
+        // this.wasActive = isActive
+        return isActive;
     }
     registerDisposable(disposable) {
         return this.garbage.registerDisposable(disposable);
@@ -9143,7 +9559,7 @@ class ActivityContainerComponent extends AbstractInteractionContext {
             // by activity index)
             setTimeout(() => {
                 this.activityRefs = []; // we have to do it after the animation timeout or the activity disappears before the animatin finsihes
-            }, this.getTabAnimationDuration());
+            }, this.getTabAnimationDurationInMillis());
             const promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(() => {
@@ -9169,7 +9585,6 @@ class ActivityContainerComponent extends AbstractInteractionContext {
     /**
      * Synchronises the selected tab index.
      */
-    // @Trace()
     synchroniseSelectedTabIndex() {
         assert.isTruthy(this.isActive());
         const previousIndex = this.tabs.selectedIndex;
@@ -9181,10 +9596,10 @@ class ActivityContainerComponent extends AbstractInteractionContext {
             activityRef.setFocused(false);
             this.busy.setDelegate(activityRef.activityBusy);
             this.tabs.selectedIndex = newIndex;
-            if (this.ready$.value) {
-                // Note: We're not using the animation done event as it's firing almost immeadiately.
-                setTimeout(() => this.finaliseActivityStates(), animate ? this.getTabAnimationDuration() : 0);
-            }
+            // if (this.ready$.value) {
+            //   // Note: We're not using the animation done event as it's firing almost immeadiately.
+            //   setTimeout(() => this.finaliseActivityStates(), animate ? this.getTabAnimationDurationInMillis() : 0);
+            // }
         }
     }
     finaliseActivityStates() {
@@ -9198,7 +9613,12 @@ class ActivityContainerComponent extends AbstractInteractionContext {
         return this.activityOutlets.toArray()[this.tabs.selectedIndex];
     }
     getTabAnimationDuration() {
-        const match = this.tabs.animationDuration.match(/(\d+)(.*)/);
+        // const s = this._started$.value ? this.animationDuration : "0";
+        // return s
+        return this.animationDuration;
+    }
+    getTabAnimationDurationInMillis() {
+        const match = this.animationDuration.match(/(\d+)(.*)/);
         const numericValue = parseFloat(match[1]);
         switch (match[2].trim()) {
             case "ms":
@@ -9224,12 +9644,16 @@ class ActivityContainerComponent extends AbstractInteractionContext {
             }
         }, 75);
     }
+    onAnimationDone() {
+        this._started$.value = true;
+        this.finaliseActivityStates();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityContainerComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busy$", "busy"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight", animationDuration: "animationDuration" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busy$", "busy"] }, { kind: "directive", type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ActivityContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aup-activity-container", template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"] }]
+            args: [{ selector: "aup-activity-container", template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\"\n               [animationDuration]=\"getTabAnimationDuration()\"\n               (animationDone)=\"onAnimationDone()\"\n>\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busy$]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; }, propDecorators: { dynamicHeight: [{
                 type: Input
             }], tabs: [{
@@ -9238,6 +9662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], activityOutlets: [{
                 type: ViewChildren,
                 args: [ActivityOutletComponent]
+            }], animationDuration: [{
+                type: Input
             }] } });
 
 class AbstractActivityTriggerComponent extends DisposableComponent {
@@ -9338,14 +9764,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 args: ['class.active']
             }] } });
 
-const cssDurationRegex = /(\d+)(m?s)/;
+const cssDurationRegex$1 = /(\d+)(m?s)/;
 /**
  * @example
  *   <aup-in-place-interaction-context #inPlaceInteractionContext>
  *   </aup-in-place-interaction-context>
  *
  *   in your component
- *     @ViewChild('inPlaceInteractionContext', { static: true })
+ *     @ViewChild(InPlaceInteractionContextComponent)
  *     interactionContext: InteractionContext;
  *
  *
@@ -9368,7 +9794,7 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         return this.animateFirstActivity ? (this.tabConfig?.animationDuration || "500ms") : "0ms";
     }
     get animationDurationMillis() {
-        const result = cssDurationRegex.exec(this.animationDuration);
+        const result = cssDurationRegex$1.exec(this.animationDuration);
         if (!result) {
             lang.illegalState(`unsupported css duration: ${this.animationDuration}`);
         }
@@ -9441,7 +9867,7 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InPlaceInteractionContextComponent, deps: [{ token: MAT_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity", syncWithRoutes: "syncWithRoutes" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs\n               (selectedTabChange)=\"onTabChanged($event)\"\n               [dynamicHeight]=\"false\"\n               [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], dependencies: [{ kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity", syncWithRoutes: "syncWithRoutes" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs\n               (selectedTabChange)=\"onTabChanged($event)\"\n               [dynamicHeight]=\"false\"\n               [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], dependencies: [{ kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight", "animationDuration"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InPlaceInteractionContextComponent, decorators: [{
             type: Component,
@@ -9910,12 +10336,14 @@ class StringInputActivity extends InputActivity {
                         [label]="activityData.label"
                         [placeholder]="activityData.placeholder"
                         [command.enter]="confirmCommand"
-                        [command.escape]="cancelCommand"></aup-string-input>
+                        [command.escape]="cancelCommand"
+                        [dense]="true"
+      ></aup-string-input>
       <aup-activity-actions [layout]="layout" align="end"
                             [confirmFace]="confirmFace"
                             [cancelFace]="cancelFace"
       ></aup-activity-actions>
-  `, isInline: true, dependencies: [{ kind: "component", type: StringInputComponent, selector: "aup-string-input", inputs: ["autocomplete", "enableClear$", "enableClear", "iconPrefix"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: StringInputComponent, selector: "aup-string-input", inputs: ["autocomplete", "enableClear$", "enableClear", "iconPrefix", "suffixCommand"] }, { kind: "component", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: StringInputActivity, decorators: [{
             type: Component,
@@ -9926,7 +10354,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         [label]="activityData.label"
                         [placeholder]="activityData.placeholder"
                         [command.enter]="confirmCommand"
-                        [command.escape]="cancelCommand"></aup-string-input>
+                        [command.escape]="cancelCommand"
+                        [dense]="true"
+      ></aup-string-input>
       <aup-activity-actions [layout]="layout" align="end"
                             [confirmFace]="confirmFace"
                             [cancelFace]="cancelFace"
@@ -10192,6 +10622,7 @@ class SelectInputActivity extends InputActivity {
                       [options]="options"
                       [optionLabelFormat]="optionLabelFormat"
                       [allowNil]="activityData.allowNil"
+                      [dense]="true"
     >
       <ng-template #nilOptionTemplate>{{activityData.nilLabel}}</ng-template>
     </aup-select-input>
@@ -10214,6 +10645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                       [options]="options"
                       [optionLabelFormat]="optionLabelFormat"
                       [allowNil]="activityData.allowNil"
+                      [dense]="true"
     >
       <ng-template #nilOptionTemplate>{{activityData.nilLabel}}</ng-template>
     </aup-select-input>
@@ -10225,6 +10657,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 }]
         }] });
 
+const slideDownOnEnterDef = style({
+    opacity: 0,
+    'height': '0',
+    'max-height': '0',
+    paddingTop: '0',
+    paddingBottom: '0'
+});
+// TODO: params aren't getting customised in the view.  Need to figure out the correct approach.
+const slideDownOnEnterAnimation = trigger('slideDownOnEnter', [
+    transition(':enter', [slideDownOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
+    transition(':leave', [animate('{{duration}}', slideDownOnEnterDef)], { params: { duration: '100ms' } })
+]);
+const slideDownWhenOpenAnimation = trigger('slideDownWhenOpen', [
+    transition('closed => open', [slideDownOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
+    transition('open => closed', [animate('{{duration}}', slideDownOnEnterDef)], { params: { duration: '100ms' } })
+]);
+const slideLeftOnEnterDef = style({
+    opacity: 0,
+    'width': '0',
+    paddingLeft: '0',
+    paddingRight: '0'
+});
+const slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
+    transition(':enter', [slideLeftOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
+    transition(':leave', [animate('{{duration}}', slideLeftOnEnterDef)], { params: { duration: '100ms' } })
+]);
+const ZERO_WIDTH = {
+    opacity: 0,
+    width: '0',
+    paddingLeft: '0',
+    paddingRight: '0',
+};
+const ZERO_HEIGHT = {
+    opacity: 0,
+    height: '0',
+    paddingTop: '0',
+    paddingBottom: '0',
+};
+const slideDownAndRightOnEnterAnimation = trigger('slideDownAndRightOnEnter', [
+    transition(':enter', [
+        style({ overflow: "hidden", whiteSpace: "nowrap", ...ZERO_WIDTH, ...ZERO_HEIGHT }),
+        animate('{{duration}}')
+    ], { params: { duration: '100ms' } }),
+    transition(':leave', [
+        style({ overflow: "hidden", whiteSpace: "nowrap" }),
+        group([
+            animate('{{duration}}', style(ZERO_HEIGHT)),
+            // Hack: 100ms is too quick as it animates from * - 0 as we only see it animate the width is greater than the parent.
+            // Not sure how to animate from * to natural new width of parent.  This hack won't work for text that's just a little
+            // bit wider than the parent as it'll fall within the parent bounds very early in the animation cycle.
+            animate('300ms', style(ZERO_WIDTH)),
+        ])
+    ], { params: { duration: '100ms' } })
+]);
+
+const cssDurationRegex = /(\d+)(m?s)/;
+/**
+ * This interaction context remains hidden (height: 0) until it is active.
+ * @example
+ *   <aup-slide-down-interaction-context #inPlaceInteractionContext>
+ *   </aup-slide-down-interaction-context>
+ *
+ *   in your component
+ *     @ViewChild(SlideDownInteractionContextComponent)
+ *     interactionContext: InteractionContext;
+ *
+ *
+ */
+class SlideDownInteractionContextComponent extends DisposableComponent {
+    tabConfig;
+    activityContainerComponent;
+    // NOTE: disabling this as I'm using the initialise callback to release the hacky height clamp.
+    //       The whole registration thing is a bit naf so I should really clean that up at some point.
+    // /**
+    //  * If true the activity will sync with the router to enable back button support.  This is a work around for
+    //  * deeply nested activities that can't be linked with the root place interactionContext hook for cancelling
+    //  * active interactions.
+    //  */
+    // @Input()
+    // syncWithRoutes = true;
+    dynamicHeight = true;
+    get active() {
+        return this.isActive();
+    }
+    // Horrible hack to stop the div and activity container bouncing back for a bit in after closing.  No idea why it's doing that.
+    clampShut = true;
+    interactionService = this.inject(InteractionService);
+    constructor(tabConfig) {
+        super();
+        this.tabConfig = tabConfig;
+    }
+    ngAfterViewInit() {
+        // NOTE: this is a temp work around to detach inplace contexts from the router until AUP-88 is implemented.
+        // https://coolon.atlassian.net/browse/AUP-88?atlOrigin=eyJpIjoiOTg5YjEzZGUzZjRmNDg0NmExOWU3ZGJmMzJiNTRmNGYiLCJwIjoiaiJ9
+        const self = this;
+        this.activityContainerComponent.initialise("dont-care", {
+            async notifyActive(interactionContext) {
+                self.clampShut = false;
+                return undefined;
+            },
+            async notifyFinished(interactionContext) {
+                return undefined;
+            }
+        });
+        // if (this.syncWithRoutes) {
+        //   this.interactionService.registerInplaceInteractionContext(this);
+        // }
+    }
+    getAnimationState() {
+        return {
+            value: this.isActive() ? "open" : "closed",
+            params: { duration: "200ms" }
+        };
+    }
+    // this is a regsitration callback from the interaction service
+    // @Trace() // webstorm says no usages... but I'm not sure.
+    onInplaceInteractionContextRegistered(id, api) {
+        this.activityContainerComponent.initialise(id, api);
+    }
+    get identifier() {
+        return this.activityContainerComponent.identifier;
+    }
+    alert(alert) {
+        return this.activityContainerComponent.alert(alert);
+    }
+    cancelActiveActivity() {
+        return this.activityContainerComponent.cancelActiveActivity();
+    }
+    confirm(confirm) {
+        return this.activityContainerComponent.confirm(confirm);
+    }
+    confirmOrReject(confirm) {
+        return this.activityContainerComponent.confirmOrReject(confirm);
+    }
+    confirmThen(confirm, activityType, data) {
+        return this.activityContainerComponent.confirmThen(confirm, activityType);
+    }
+    confirmThenExecute(confirm, operation) {
+        return this.activityContainerComponent.confirmThenExecute(confirm, operation);
+    }
+    isActive() {
+        return this.activityContainerComponent.isActive();
+    }
+    startActivity(activityType, data, options) {
+        return this.activityContainerComponent.startActivity(activityType, data, options);
+    }
+    onAnimationDone() {
+        if (!this.isActive()) {
+            this.clampShut = true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SlideDownInteractionContextComponent, deps: [{ token: MAT_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SlideDownInteractionContextComponent, selector: "aup-slide-down-interaction-context", inputs: { dynamicHeight: "dynamicHeight" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [@slideDownWhenOpen]=\"getAnimationState()\" (@slideDownWhenOpen.done)=\"onAnimationDone()\" [style.max-height.px]=\"clampShut ? 0 : undefined\">\n  <aup-activity-container #activityContainer  [dynamicHeight]=\"dynamicHeight\"></aup-activity-container>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "component", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight", "animationDuration"] }], animations: [
+            slideDownWhenOpenAnimation
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SlideDownInteractionContextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aup-slide-down-interaction-context", animations: [
+                        slideDownWhenOpenAnimation
+                    ], template: "<div [@slideDownWhenOpen]=\"getAnimationState()\" (@slideDownWhenOpen.done)=\"onAnimationDone()\" [style.max-height.px]=\"clampShut ? 0 : undefined\">\n  <aup-activity-container #activityContainer  [dynamicHeight]=\"dynamicHeight\"></aup-activity-container>\n</div>\n\n", styles: [":host{display:flex;flex-direction:column}:host>div{overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_TABS_CONFIG]
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { activityContainerComponent: [{
+                type: ViewChild,
+                args: ["activityContainer", { static: true }]
+            }], dynamicHeight: [{
+                type: Input
+            }], active: [{
+                type: HostBinding,
+                args: ["class.active"]
+            }] } });
+
 class InteractionContextTriggerForDirective extends GarbageCollector {
     aupInteractionContextTriggerFor;
     activityClass;
@@ -10307,6 +10915,7 @@ class InteractionModule {
             AlertDialogComponent,
             ActivityOutletComponent,
             InPlaceInteractionContextComponent,
+            SlideDownInteractionContextComponent,
             AddItemInteractionContextComponent,
             ActivityActionsComponent,
             PopupInteractionContextComponent,
@@ -10333,8 +10942,6 @@ class InteractionModule {
             RouterModule,
             MatIconModule,
             DirectivesModule,
-            FlexModule,
-            GridModule,
             ComponentsModule,
             FormsModule,
             MatInputModule,
@@ -10354,7 +10961,8 @@ class InteractionModule {
             InlineActivityTriggerComponent,
             ModalActivityTriggerComponent,
             AddCardActivityComponent,
-            InlineStringEditorComponent] });
+            InlineStringEditorComponent,
+            SlideDownInteractionContextComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InteractionModule, providers: [
             InteractionService
             // {
@@ -10368,8 +10976,6 @@ class InteractionModule {
             RouterModule,
             MatIconModule,
             DirectivesModule,
-            FlexModule,
-            GridModule,
             ComponentsModule,
             FormsModule,
             MatInputModule,
@@ -10388,8 +10994,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         RouterModule,
                         MatIconModule,
                         DirectivesModule,
-                        FlexModule,
-                        GridModule,
                         ComponentsModule,
                         FormsModule,
                         MatInputModule,
@@ -10404,6 +11008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         AlertDialogComponent,
                         ActivityOutletComponent,
                         InPlaceInteractionContextComponent,
+                        SlideDownInteractionContextComponent,
                         AddItemInteractionContextComponent,
                         ActivityActionsComponent,
                         PopupInteractionContextComponent,
@@ -10441,6 +11046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         ModalActivityTriggerComponent,
                         AddCardActivityComponent,
                         InlineStringEditorComponent,
+                        SlideDownInteractionContextComponent,
                     ],
                     providers: [
                         InteractionService
@@ -10511,7 +11117,6 @@ class PlaceOutletComponent extends DisposableComponent {
     router;
     placeRouter;
     placeConfig;
-    cdr;
     #animate$_accessor_storage = proxify((ValueModel));
     get animate$() { return this.#animate$_accessor_storage; }
     set animate$(value) { this.#animate$_accessor_storage = value; }
@@ -10545,12 +11150,11 @@ class PlaceOutletComponent extends DisposableComponent {
     animationEnabled;
     authorised;
     notAuthorisedNoticePortal;
-    constructor(router, placeRouter, placeConfig, unauthorisedPlaceNotice, parentOutlet, cdr) {
+    constructor(router, placeRouter, placeConfig, unauthorisedPlaceNotice, parentOutlet) {
         super();
         this.router = router;
         this.placeRouter = placeRouter;
         this.placeConfig = placeConfig;
-        this.cdr = cdr;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         this.parentOutletModel = new MutableValueModel(parentOutlet);
         const defaultPlaceAnimationOrder = chain(this.parentOutletModel)
@@ -10562,7 +11166,7 @@ class PlaceOutletComponent extends DisposableComponent {
         this.placesInAnimationOrder = chain(this.customPlaceAnimationOrder$)
             .otherwise(defaultPlaceAnimationOrder);
         this.activePlaceAnimationPosition = this.placesInAnimationOrder
-            .reduce((placesInOrder) => {
+            .reduceAll((placesInOrder) => {
             let placeIndex = 0;
             if (activatePlaceType.value) {
                 placeIndex = placesInOrder.indexOf(activatePlaceType.value);
@@ -10716,7 +11320,7 @@ class PlaceOutletComponent extends DisposableComponent {
             this.onAnimationFinishedJob = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PlaceOutletComponent, deps: [{ token: i1$4.Router }, { token: PlaceRouter }, { token: AUP_PLACE_CONFIG, optional: true }, { token: AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, optional: true }, { token: PlaceOutletComponent, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PlaceOutletComponent, deps: [{ token: i1$4.Router }, { token: PlaceRouter }, { token: AUP_PLACE_CONFIG, optional: true }, { token: AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, optional: true }, { token: PlaceOutletComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PlaceOutletComponent, selector: "aup-place-outlet", inputs: { animate$: "animate$", animate: "animate", customPlaceAnimationOrder$: ["placeAnimationOrderModel", "customPlaceAnimationOrder$"], customPlaceAnimationOrder: ["placeAnimationOrder", "customPlaceAnimationOrder"] }, outputs: { placeChanged: "placeChanged" }, host: { properties: { "class.authorised": "this.isAuthorised" } }, viewQueries: [{ propertyName: "routerOut", first: true, predicate: ["routeOutlet"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, 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", 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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i3$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [LEFT_RIGHT_PLACE_ANIMATION] });
 }
 __decorate([
@@ -10752,7 +11356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                     type: SkipSelf
                 }, {
                     type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { animate$: [{
+                }] }]; }, propDecorators: { animate$: [{
                 type: Input
             }], animate: [{
                 type: Input
@@ -10885,7 +11489,7 @@ class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
         super(router);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ListPlaceNavComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ListPlaceNavComponent, selector: "aup-list-place-nav", usesInheritance: true, ngImport: i0, template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     aup-gc #gc=\"aup-gc\"\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\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", 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)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$3.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { kind: "directive", type: i7$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ListPlaceNavComponent, selector: "aup-list-place-nav", usesInheritance: true, ngImport: i0, template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     aup-gc #gc=\"aup-gc\"\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\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", 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)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$3.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ListPlaceNavComponent, decorators: [{
             type: Component,
@@ -10960,7 +11564,7 @@ class SidePlaceNavigationComponent extends AbstractPlaceNavigationComponent {
         this.expanded = !this.expanded;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SidePlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SidePlaceNavigationComponent, selector: "aup-side-place-navigation", inputs: { expanded$: "expanded$", expanded: "expanded" }, host: { properties: { "class.expanded": "this.expanded" } }, queries: [{ propertyName: "navEndTemplate", first: true, predicate: ["navEndTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle 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", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i3$3.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SidePlaceNavigationComponent, selector: "aup-side-place-navigation", inputs: { expanded$: "expanded$", expanded: "expanded" }, host: { properties: { "class.expanded": "this.expanded" } }, queries: [{ propertyName: "navEndTemplate", first: true, predicate: ["navEndTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle 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", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item--with-leading-icon:hover .mdc-list-item__start,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item:hover{background-color:#444}:host .mdc-list-item:hover .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i3$3.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
 }
 __decorate([
     Proxify(),
@@ -10972,7 +11576,7 @@ __decorate([
 ], SidePlaceNavigationComponent.prototype, "expanded", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SidePlaceNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-side-place-navigation', template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle 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", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"] }]
+            args: [{ selector: 'aup-side-place-navigation', template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle 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", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item--with-leading-icon:hover .mdc-list-item__start,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item:hover{background-color:#444}:host .mdc-list-item:hover .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; }, propDecorators: { expanded$: [{
                 type: Input
             }], expanded: [{
@@ -11013,7 +11617,6 @@ class PlaceModule {
             MatTooltipModule,
             MatIconModule,
             DirectivesModule,
-            FlexModule,
             ComponentsModule,
             PortalModule,
             MatCardModule], exports: [PlaceOutletComponent,
@@ -11030,7 +11633,6 @@ class PlaceModule {
             MatTooltipModule,
             MatIconModule,
             DirectivesModule,
-            FlexModule,
             ComponentsModule,
             PortalModule,
             MatCardModule] });
@@ -11048,7 +11650,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         MatTooltipModule,
                         MatIconModule,
                         DirectivesModule,
-                        FlexModule,
                         ComponentsModule,
                         PortalModule,
                         MatCardModule
@@ -11138,60 +11739,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 }]
         }] });
 
-const slideDownOnEnterDef = style({
-    opacity: 0,
-    'height': '0',
-    paddingTop: '0',
-    paddingBottom: '0'
-});
-// TODO: params aren't getting customised in the view.  Need to figure out the correct approach.
-const slideDownOnEnterAnimation = trigger('slideDownOnEnter', [
-    transition(':enter', [slideDownOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
-    transition(':leave', [animate('{{duration}}', slideDownOnEnterDef)], { params: { duration: '100ms' } })
-]);
-const slideLeftOnEnterDef = style({
-    opacity: 0,
-    'width': '0',
-    paddingLeft: '0',
-    paddingRight: '0'
-});
-const slideRightOnEnterAnimation = trigger('slideRightOnEnter', [
-    transition(':enter', [slideLeftOnEnterDef, animate('{{duration}}')], { params: { duration: '100ms' } }),
-    transition(':leave', [animate('{{duration}}', slideLeftOnEnterDef)], { params: { duration: '100ms' } })
-]);
-const ZERO_WIDTH = {
-    opacity: 0,
-    width: '0',
-    paddingLeft: '0',
-    paddingRight: '0',
-};
-const ZERO_HEIGHT = {
-    opacity: 0,
-    height: '0',
-    paddingTop: '0',
-    paddingBottom: '0',
-};
-const slideDownAndRightOnEnterAnimation = trigger('slideDownAndRightOnEnter', [
-    transition(':enter', [
-        style({ overflow: "hidden", whiteSpace: "nowrap", ...ZERO_WIDTH, ...ZERO_HEIGHT }),
-        animate('{{duration}}')
-    ], { params: { duration: '100ms' } }),
-    transition(':leave', [
-        style({ overflow: "hidden", whiteSpace: "nowrap" }),
-        group([
-            animate('{{duration}}', style(ZERO_HEIGHT)),
-            // Hack: 100ms is too quick as it animates from * - 0 as we only see it animate the width is greater than the parent.
-            // Not sure how to animate from * to natural new width of parent.  This hack won't work for text that's just a little
-            // bit wider than the parent as it'll fall within the parent bounds very early in the animation cycle.
-            animate('300ms', style(ZERO_WIDTH)),
-        ])
-    ], { params: { duration: '100ms' } })
-]);
-
 /**
  * @file Automatically generated by barrelsby.
  */
 
+class ResizeObserverDirective extends DisposableComponent {
+    aupOnResize = new EventEmitter();
+    elementRef = this.inject(ElementRef);
+    ngZone = this.inject(NgZone);
+    _bounds$ = new MutableValueModel();
+    ngAfterViewInit() {
+        const element = this.elementRef.nativeElement;
+        const ro = new ResizeObserver((entries, observer) => {
+            this.ngZone.run(() => this._updateBounds());
+        });
+        ro.observe(element);
+        this.onDispose(() => ro.disconnect());
+        setTimeout(() => this._updateBounds());
+    }
+    get bounds$() {
+        return this._bounds$.readonly$;
+    }
+    _updateBounds() {
+        this._bounds$.value = Bounds.ofElement(this.elementRef.nativeElement);
+        this.aupOnResize.emit(this._bounds$.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeObserverDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: ResizeObserverDirective, isStandalone: true, selector: "[aupOnResize]", outputs: { aupOnResize: "aupOnResize" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ResizeObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[aupOnResize]",
+                    standalone: true
+                }]
+        }], propDecorators: { aupOnResize: [{
+                type: Output
+            }] } });
+
 /**
  * @file Automatically generated by barrelsby.
  */
@@ -11567,69 +12152,74 @@ var Formatter;
     Formatter.BOOLEAN = new BooleanType();
 })(Formatter || (Formatter = {}));
 
-function installMechanics(parameterDef, prototype, propertyKey, tagPrefix) {
-    Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, parameterDef);
-    function getMechanics(instance, propertyName) {
-        const key = `__mechanics_${propertyName.toString()}`;
-        if (!instance[key]) {
-            const backingModel = parameterDef.createBackingModel();
-            instance[key] = {
-                backingModel: backingModel,
-                binding: null
-            };
-            const tag = `${tagPrefix}(${prototype.constructor.name}.${propertyKey.toString()})`;
-            DebugContext.getOrCreate(instance[key].backingModel).tag(tag);
-        }
-        return instance[key];
-    }
-    Object.defineProperty(prototype, propertyKey, {
-        get: function () {
-            return getMechanics(this, propertyKey).backingModel;
-        },
-        set: function (userModel) {
-            const mechanics = getMechanics(this, propertyKey);
-            // This handles the scenario where we want to push an existing value model (such as a form model)
-            // to and from the route.
-            if (mechanics.binding) {
-                mechanics.binding.dispose();
-            }
-            if (userModel) {
-                mechanics.binding = new Binding(mechanics.backingModel, userModel, {
-                    toLeft: Functions.identity,
-                    toRight: Functions.identity
-                });
-                if (parameterDef.isEmptyValue(userModel.value)) {
-                    // console.log(`Push visit to model for ${tag}`, {value: mechanics.backingModel.value});
-                    mechanics.binding.writeRight(); // push the visit into the user model;
-                }
-                else {
-                    if (!parameterDef.isEmptyValue(mechanics.backingModel.value)) {
-                        console.warn('Assigning a visit model with an existing value to a visit parameter with an existing value.  Visit parameter will be overridden');
-                    }
-                    mechanics.binding.writeLeft(); // push the user model into the visit
-                }
-            }
-        }
-    });
-}
+// function installMechanics<M extends HasValue<any>>(parameterDef: ParameterDefinition<any>, prototype: object, propertyKey: string | symbol, tagPrefix: string) {
+//
+//   Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, parameterDef);
+//
+//   function getMechanics(instance: M, propertyName: string | symbol) {
+//     const key = `__mechanics_${propertyName.toString()}`;
+//     if (!instance[key]) {
+//       const backingModel = parameterDef.createBackingModel();
+//       instance[key] = {
+//         backingModel: backingModel,
+//         binding: null as Binding<any, any>
+//       };
+//       const tag = `${tagPrefix}(${prototype.constructor.name}.${propertyKey.toString()})`;
+//       DebugContext.getOrCreate(instance[key].backingModel).tag(tag);
+//     }
+//     return instance[key];
+//   }
+//
+//   Object.defineProperty(prototype, propertyKey, {
+//     get: function() {
+//       return getMechanics(this, propertyKey).backingModel;
+//     },
+//     set: function(userModel: M) {
+//       const mechanics = getMechanics(this, propertyKey);
+//       // This handles the scenario where we want to push an existing value model (such as a form model)
+//       // to and from the route.
+//       if (mechanics.binding) {
+//         mechanics.binding.dispose();
+//       }
+//       if (userModel) {
+//         mechanics.binding = new Binding(mechanics.backingModel, userModel, {
+//           toLeft: Functions.identity,
+//           toRight: Functions.identity
+//         });
+//         if (parameterDef.isEmptyValue(userModel.value)) {
+//           // console.log(`Push visit to model for ${tag}`, {value: mechanics.backingModel.value});
+//           mechanics.binding.writeRight(); // push the visit into the user model;
+//         } else {
+//           if (!parameterDef.isEmptyValue(mechanics.backingModel.value)) {
+//             console.warn('Assigning a visit model with an existing value to a visit parameter with an existing value.  Visit parameter will be overridden');
+//           }
+//           mechanics.binding.writeLeft(); // push the user model into the visit
+//         }
+//       }
+//     }
+//   });
+// }
 function RouteId(formatter, options) {
     return (prototype, propertyKey) => {
         const parameterDef = new ParameterDefinition.RouteId(propertyKey.toString(), options, formatter);
-        installMechanics(parameterDef, prototype, propertyKey, '@RouteId');
+        // installMechanics(parameterDef, prototype, propertyKey, '@RouteId');
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, parameterDef);
     };
 }
 function VisitParameter(options) {
     const opts = Opts.get(options);
     return (prototype, propertyKey) => {
         const parameterDef = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
-        installMechanics(parameterDef, prototype, propertyKey, '@VisitParameter');
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, parameterDef);
+        // installMechanics(parameterDef, prototype, propertyKey, '@VisitParameter');
     };
 }
 function VisitParameterList(options) {
     const opts = Opts.get(options);
     return (prototype, propertyKey) => {
         const parameterDef = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
-        installMechanics(parameterDef, prototype, propertyKey, '@VisitParameterList');
+        Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, parameterDef);
+        // installMechanics(parameterDef, prototype, propertyKey, '@VisitParameterList');
     };
 }
 
@@ -11723,5 +12313,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
+export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_TABLE_VIRTUAL_SCROLL_BUFFER_MULTIPLIER, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnManager, ColumnModel, ColumnOrderManager, ColumnTemplateDirective, ColumnTextSearchFormatter, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControlsComponent, EditSession, EditorControlColumnModel, EmptyStateComponent, EnableCellTextSearch, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, GarbageCollectorDirective, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerForDirective, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, Keys, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadableComponent, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceAuthService, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, ResizeObserverDirective, RouteId, ScrollContainerComponent, SearchInputComponent, SectionHeaderComponent, SelectInputActivity, SelectInputComponent, SelectionCellComponent, SelectionColumnModel, SelectionHeaderCellComponent, SeparatorComponent, SidePlaceNavigationComponent, SlideDownInteractionContextComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableBodyComponent, TableCellComponent, TableComponent, TableFilterModel, TableHeaderCellComponent, TableModel, TableMoreMenuComponent, TableMoreMenuPopupComponent, TableRowAttributesDirective, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, TextSearchContext, ToolBarComponent, Track, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSegment, VisitSegmentSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownAndRightOnEnterAnimation, slideDownOnEnterAnimation, slideDownWhenOpenAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
 //# sourceMappingURL=coolon-angular-ui-powerups.mjs.map