@coolon/angular-ui-powerups 16.1.0-aplpha.137 → 16.1.0-aplpha.139

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

@@ -2,14 +2,14 @@ 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, 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 { ElementRef, Directive, Inject, Host, Optional, Input, HostListener, ChangeDetectorRef, inject, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, ViewChild, ViewChildren, EventEmitter, Output, Self, ContentChildren, ComponentRef, Injector, PLATFORM_ID, SkipSelf } from '@angular/core';
+import * as i2$5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4$1 from '@angular/material/form-field';
+import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$1 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
-import * as i4$2 from '@angular/material/select';
+import * as i4$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$3 from '@angular/material/tabs';
 import { MatTabsModule, MAT_TABS_CONFIG } from '@angular/material/tabs';
@@ -20,25 +20,25 @@ import * as i1$2 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 i3 from '@angular/material/button';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$2 from '@angular/material/checkbox';
 import { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$3 from '@angular/material/divider';
+import * as i2$4 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i2$2 from '@angular/material/icon';
+import * as i2$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2 from '@angular/material/menu';
-import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i2$5 from '@angular/material/progress-bar';
+import * as i2$1 from '@angular/material/menu';
+import { MatMenu, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import * as i2$6 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i2$1 from '@angular/material/progress-spinner';
+import * as i2$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i2$6 from '@angular/material/table';
+import * as i2$7 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i4 from '@angular/material/tooltip';
+import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i4$3 from 'ng-table-virtual-scroll';
+import * as i4$2 from 'ng-table-virtual-scroll';
 import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
 import { __decorate, __metadata, __param } from 'tslib';
 import * as i1$3 from '@coolon/pectin';
@@ -164,7 +164,7 @@ class CommandDirective extends GarbageCollector {
             console.warn('disabled command clicked, ignoring.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandDirective, deps: [{ token: ElementRef }, { token: i3.MatButton, host: true, optional: true }, { token: i2.MatMenuItem, host: true, optional: true }, { token: i2.MatMenu, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandDirective, deps: [{ token: ElementRef }, { token: i2.MatButton, host: true, optional: true }, { token: i2$1.MatMenuItem, host: true, optional: true }, { token: i2$1.MatMenu, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.9", type: CommandDirective, selector: "[pectinCommand]", inputs: { pectinCommand: "pectinCommand", commandParameter: "commandParameter", preventDefault: "preventDefault" }, host: { listeners: { "click": "notifyClick($event)" } }, usesInheritance: true, ngImport: i0 });
 }
 __decorate([
@@ -182,15 +182,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
                     type: Inject,
                     args: [ElementRef]
-                }] }, { type: i3.MatButton, decorators: [{
+                }] }, { type: i2.MatButton, decorators: [{
                     type: Host
                 }, {
                     type: Optional
-                }] }, { type: i2.MatMenuItem, decorators: [{
+                }] }, { type: i2$1.MatMenuItem, decorators: [{
                     type: Host
                 }, {
                     type: Optional
-                }] }, { type: i2.MatMenu, decorators: [{
+                }] }, { type: i2$1.MatMenu, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { pectinCommand: [{
                 type: Input
@@ -662,7 +662,7 @@ class BusyOverlayComponent extends GarbageCollector {
     get busy() { return this.#busy_accessor_storage; }
     set busy(value) { this.#busy_accessor_storage = value; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: BusyOverlayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: { busy$: "busy$", busy: "busy" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busy$.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column;align-items:stretch}div.busy-overlay-backdrop{z-index:var(--aup-busy-overlay-z-index, 10);position:absolute;background-color:#0003;inset:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: { busy$: "busy$", busy: "busy" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busy$.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column;align-items:stretch}div.busy-overlay-backdrop{z-index:var(--aup-busy-overlay-z-index, 10);position:absolute;background-color:#0003;inset:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
 __decorate([
     Proxify(),
@@ -887,7 +887,7 @@ 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" }, 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.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.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,
@@ -1119,9 +1119,54 @@ const HorizontalAlignment = Enum({
 
 const POPUP_CONTAINER = new InjectionToken('popup-component');
 
-class ButtonRendererComponent extends DisposableComponent {
-    popupContainer;
-    matMenu;
+class PopupAwareComponent extends DisposableComponent {
+    element = this.inject(ElementRef);
+    popupContainer = this.inject(POPUP_CONTAINER, {
+        optional: true,
+        skipSelf: true
+    });
+    menu = this.inject(MatMenu, {
+        optional: true
+    });
+    constructor() {
+        super();
+        if (this.popupContainer) {
+            this.registerDisposable(this.popupContainer.register(this));
+        }
+    }
+    get inPopup() {
+        console.log(this.menu, this.popupContainer);
+        return !!this.menu || !!this.popupContainer;
+    }
+    get componentIndex() {
+        return this.computeComponentIndex();
+    }
+    computeComponentIndex() {
+        let node = this.element.nativeElement;
+        let index = 0;
+        while ((node = node.previousElementSibling)) {
+            index++;
+        }
+        return index;
+    }
+    getFace() {
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PopupAwareComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PopupAwareComponent, selector: "aup-popup-aware", host: { properties: { "class.in-popup": "this.inPopup" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PopupAwareComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'aup-popup-aware',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inPopup: [{
+                type: HostBinding,
+                args: ["class.in-popup"]
+            }] } });
+
+class ButtonRendererComponent extends PopupAwareComponent {
     #faces$_accessor_storage = proxify((ListModel));
     get faces$() { return this.#faces$_accessor_storage; }
     set faces$(value) { this.#faces$_accessor_storage = value; }
@@ -1149,10 +1194,8 @@ class ButtonRendererComponent extends DisposableComponent {
     iconOnly$;
     tooltip$;
     CommandFaceUtils = CommandFace;
-    constructor(popupContainer, matMenu) {
+    constructor() {
         super();
-        this.popupContainer = popupContainer;
-        this.matMenu = matMenu;
         const { chain, when } = Dsl.disposeWith(this);
         this.activeFace$ = chain(this.faces$).first();
         this.buttonStyle$ = chain(this.activeFace$).map(f => CommandFace.getStyleOf(f));
@@ -1163,13 +1206,13 @@ class ButtonRendererComponent extends DisposableComponent {
         }).count().equals(chain(this.faces$).count());
     }
     get renderAsMenuItem() {
-        return (!!this.popupContainer || !!this.matMenu) && !this.forceRenderAsButton;
+        return this.inPopup && !this.forceRenderAsButton;
     }
     focus() {
         this.matControl.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ButtonRendererComponent, deps: [{ token: POPUP_CONTAINER, optional: true }, { token: i2.MatMenu, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: { faces$: "faces$", faces: "faces", enabled$: "enabled$", enabled: "enabled", busy$: "busy$", busy: "busy", alignFace: "alignFace", forceRenderAsButton: "forceRenderAsButton" }, host: { properties: { "class": "this.alignFace" } }, viewQueries: [{ propertyName: "matControl", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsMenuItem\">\n  <ng-container *ngIf=\"iconOnly$.value\">\n    <button #button mat-icon-button [color]=\"color$.value\" [disabled]=\"!enabled\" [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=\"CommandFaceUtils.Style.STROKED\">\n        <button #button mat-stroked-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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=\"CommandFaceUtils.Style.RAISED\">\n        <button #button mat-raised-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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 #button mat-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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</ng-container>\n\n<ng-container *ngIf=\"renderAsMenuItem\">\n  <button #button mat-menu-item [disabled]=\"!enabled\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n", styles: [""], 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: "component", type: i3.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: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ButtonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: { faces$: "faces$", faces: "faces", enabled$: "enabled$", enabled: "enabled", busy$: "busy$", busy: "busy", alignFace: "alignFace", forceRenderAsButton: "forceRenderAsButton" }, host: { properties: { "class": "this.alignFace", "class.in-popup": "this.renderAsMenuItem" } }, viewQueries: [{ propertyName: "matControl", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!renderAsMenuItem\">\n  <ng-container *ngIf=\"iconOnly$.value\">\n    <button #button mat-icon-button [color]=\"color$.value\" [disabled]=\"!enabled\" [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=\"CommandFaceUtils.Style.STROKED\">\n        <button #button mat-stroked-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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=\"CommandFaceUtils.Style.RAISED\">\n        <button #button mat-raised-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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 #button mat-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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</ng-container>\n\n<ng-container *ngIf=\"renderAsMenuItem\">\n  <button #button mat-menu-item [disabled]=\"!enabled\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.in-popup{display:contents}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}\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: "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: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
 }
 __decorate([
     Proxify(),
@@ -1197,15 +1240,8 @@ __decorate([
 ], ButtonRendererComponent.prototype, "busy", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: ButtonRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-button-renderer', template: "<ng-container *ngIf=\"!renderAsMenuItem\">\n  <ng-container *ngIf=\"iconOnly$.value\">\n    <button #button mat-icon-button [color]=\"color$.value\" [disabled]=\"!enabled\" [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=\"CommandFaceUtils.Style.STROKED\">\n        <button #button mat-stroked-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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=\"CommandFaceUtils.Style.RAISED\">\n        <button #button mat-raised-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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 #button mat-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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</ng-container>\n\n<ng-container *ngIf=\"renderAsMenuItem\">\n  <button #button mat-menu-item [disabled]=\"!enabled\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }, {
-                    type: Optional
-                }] }, { type: i2.MatMenu, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { faces$: [{
+            args: [{ selector: 'aup-button-renderer', template: "<ng-container *ngIf=\"!renderAsMenuItem\">\n  <ng-container *ngIf=\"iconOnly$.value\">\n    <button #button mat-icon-button [color]=\"color$.value\" [disabled]=\"!enabled\" [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=\"CommandFaceUtils.Style.STROKED\">\n        <button #button mat-stroked-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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=\"CommandFaceUtils.Style.RAISED\">\n        <button #button mat-raised-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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 #button mat-button [color]=\"color$.value\" [disabled]=\"!enabled\"\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</ng-container>\n\n<ng-container *ngIf=\"renderAsMenuItem\">\n  <button #button mat-menu-item [disabled]=\"!enabled\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.in-popup{display:contents}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { faces$: [{
                 type: Input
             }], faces: [{
                 type: Input
@@ -1227,35 +1263,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             }], matControl: [{
                 type: ViewChild,
                 args: ["button"]
+            }], renderAsMenuItem: [{
+                type: HostBinding,
+                args: ["class.in-popup"]
             }] } });
 
-class PopupAwareComponent extends DisposableComponent {
-    element;
-    parent;
-    constructor(element, parent) {
-        super();
-        this.element = element;
-        this.parent = parent;
-        if (parent) {
-            this.registerDisposable(this.parent.register(this));
-        }
-    }
-    get componentIndex() {
-        return this.computeComponentIndex();
-    }
-    computeComponentIndex() {
-        let node = this.element.nativeElement;
-        let index = 0;
-        while ((node = node.previousElementSibling)) {
-            index++;
-        }
-        return index;
-    }
-    getFace() {
-        return undefined;
-    }
-}
-
 /**
  *
  */
@@ -1285,8 +1297,8 @@ class CommandComponent extends PopupAwareComponent {
     iconOnly$;
     tooltip$;
     visible$;
-    constructor(element, parent) {
-        super(element, parent);
+    constructor() {
+        super();
         const { chain, switchOn } = Dsl.disposeWith(this);
         this.faces$ = chain(this.command.busy$)
             .mapToList(busy => {
@@ -1321,8 +1333,8 @@ class CommandComponent extends PopupAwareComponent {
     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", "style.display": "this.cssDisplayProperty" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ButtonRendererComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-button-renderer [faces$]=\"faces$\" [enabled$]=\"command.enabled$\" [alignFace]=\"alignFace\" [pectinCommand]=\"command\"></aup-button-renderer>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "component", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: ["faces$", "faces", "enabled$", "enabled", "busy$", "busy", "alignFace", "forceRenderAsButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandComponent, deps: [], 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", "style.display": "this.cssDisplayProperty" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ButtonRendererComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-button-renderer [faces$]=\"faces$\" [enabled$]=\"command.enabled$\" [alignFace]=\"alignFace\" [pectinCommand]=\"command\"></aup-button-renderer>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:stretch}:host.in-popup{display:contents}\n"], dependencies: [{ kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "component", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: ["faces$", "faces", "enabled$", "enabled", "busy$", "busy", "alignFace", "forceRenderAsButton"] }] });
 }
 __decorate([
     Proxify(),
@@ -1346,13 +1358,8 @@ __decorate([
 ], CommandComponent.prototype, "busyFace", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-command', template: "<aup-button-renderer [faces$]=\"faces$\" [enabled$]=\"command.enabled$\" [alignFace]=\"alignFace\" [pectinCommand]=\"command\"></aup-button-renderer>\n", styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { command: [{
+            args: [{ selector: 'aup-command', template: "<aup-button-renderer [faces$]=\"faces$\" [enabled$]=\"command.enabled$\" [alignFace]=\"alignFace\" [pectinCommand]=\"command\"></aup-button-renderer>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:stretch}:host.in-popup{display:contents}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { command: [{
                 type: Input
             }], face$: [{
                 type: Input
@@ -1408,8 +1415,8 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
     set enabled(value) { this.#enabled_accessor_storage = value; }
     children;
     faces$;
-    constructor(element, parent) {
-        super(element, parent);
+    constructor() {
+        super();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
         this.faceAdapter$ = chain(this.faceModelDelegate).map(f => new CommandFace.Adapter(f));
@@ -1427,7 +1434,7 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
         return this.faceAdapter$?.value ?? new CommandFace.Adapter(undefined);
     }
     isRoot() {
-        return !this.parent;
+        return !this.popupContainer;
     }
     // @Trace()
     register(component) {
@@ -1446,7 +1453,7 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
     getFace() {
         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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractPopupMenuComponent, deps: [], 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 });
 }
 __decorate([
@@ -1466,10 +1473,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AbstractPopupMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-abstract-popup-menu', template: '' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }] }]; }, propDecorators: { xPosition: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { xPosition: [{
                 type: Input
             }], yPosition: [{
                 type: Input
@@ -1482,33 +1486,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], onCommandFired: [] } });
 
-class CommandContainer extends GarbageCollector {
-    parent;
-    constructor(parent) {
-        super();
-        this.parent = parent;
-    }
-    get depth() {
-        return this.hasParent() ? this.parent.depth + 1 : 0;
-    }
-    hasParent() {
-        return !!this.parent;
-    }
-    get orientation() {
-        return CommandContainer.Orientation.VERTICAL;
-    }
-}
-(function (CommandContainer) {
-    CommandContainer.Orientation = Enum({ HORIZONTAL: 'horizontal', VERTICAL: 'vertical' });
-})(CommandContainer || (CommandContainer = {}));
-
 // TODO: this is an ugly copy and paste hack from the Command component.
 /**
  *
  */
 class FileDownloadComponent extends PopupAwareComponent {
-    containerParent;
-    matMenu;
     CommandFaceUtil = CommandFace;
     #download$_accessor_storage = proxify((ValueModel));
     get download$() { return this.#download$_accessor_storage; }
@@ -1521,11 +1503,8 @@ class FileDownloadComponent extends PopupAwareComponent {
     buttonStyle$;
     color$;
     tooltip$;
-    inMenu;
-    constructor(element, popupContainer, containerParent, matMenu) {
-        super(element, popupContainer);
-        this.containerParent = containerParent;
-        this.matMenu = matMenu;
+    constructor() {
+        super();
         const { chain } = Dsl.disposeWith(this);
         this.faces$ = chain(this.download$).map(it => {
             return it.icon ? it : {
@@ -1538,10 +1517,9 @@ class FileDownloadComponent extends PopupAwareComponent {
         this.buttonStyle$ = chain(this.download$).map(f => CommandFace.getStyleOf(f));
         this.color$ = chain(this.download$).map(f => CommandFace.getColorOf(f));
         this.tooltip$ = chain(this.download$).map(f => CommandFace.getTooltipOf(f));
-        this.inMenu = !!matMenu || !!popupContainer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FileDownloadComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }, { token: CommandContainer, optional: true }, { token: i2.MatMenu, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: FileDownloadComponent, selector: "aup-file-download", inputs: { download$: "download$", download: "download", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inMenu\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.STROKED\">\n      <a mat-stroked-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.RAISED\">\n      <a mat-raised-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <a mat-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n<ng-container *ngIf=\"inMenu\">\n  <a mat-menu-item [href]=\"download?.url\" [download]=\"download?.saveAs\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </a>\n</ng-container>\n\n", styles: [""], 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: "component", type: i3.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FileDownloadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: FileDownloadComponent, selector: "aup-file-download", inputs: { download$: "download$", download: "download", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inPopup\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.STROKED\">\n      <a mat-stroked-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.RAISED\">\n      <a mat-raised-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <a mat-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n<ng-container *ngIf=\"inPopup\">\n  <a mat-menu-item [href]=\"download?.url\" [download]=\"download?.saveAs\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </a>\n</ng-container>\n\n", styles: [""], 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: "component", type: i2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }] });
 }
 __decorate([
     Proxify(),
@@ -1553,17 +1531,8 @@ __decorate([
 ], FileDownloadComponent.prototype, "download", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: FileDownloadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-file-download', template: "<ng-container *ngIf=\"!inMenu\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.STROKED\">\n      <a mat-stroked-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.RAISED\">\n      <a mat-raised-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <a mat-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n<ng-container *ngIf=\"inMenu\">\n  <a mat-menu-item [href]=\"download?.url\" [download]=\"download?.saveAs\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </a>\n</ng-container>\n\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }] }, { type: CommandContainer, decorators: [{
-                    type: Optional
-                }] }, { type: i2.MatMenu, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { download$: [{
+            args: [{ selector: 'aup-file-download', template: "<ng-container *ngIf=\"!inPopup\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.STROKED\">\n      <a mat-stroked-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFaceUtil.Style.RAISED\">\n      <a mat-raised-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <a mat-button [href]=\"download?.url\" [download]=\"download?.saveAs\"\n         [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </a>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n<ng-container *ngIf=\"inPopup\">\n  <a mat-menu-item [href]=\"download?.url\" [download]=\"download?.saveAs\" [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </a>\n</ng-container>\n\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { download$: [{
                 type: Input
             }], download: [{
                 type: Input
@@ -1583,6 +1552,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
     FileDownloadComponent.createInfo = createInfo;
 })(FileDownloadComponent || (FileDownloadComponent = {}));
 
+class CommandContainer extends GarbageCollector {
+    parent;
+    constructor(parent) {
+        super();
+        this.parent = parent;
+    }
+    get depth() {
+        return this.hasParent() ? this.parent.depth + 1 : 0;
+    }
+    hasParent() {
+        return !!this.parent;
+    }
+    get orientation() {
+        return CommandContainer.Orientation.VERTICAL;
+    }
+}
+(function (CommandContainer) {
+    CommandContainer.Orientation = Enum({ HORIZONTAL: 'horizontal', VERTICAL: 'vertical' });
+})(CommandContainer || (CommandContainer = {}));
+
 /**
  *
  */
@@ -1608,27 +1597,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  */
 class SeparatorComponent extends PopupAwareComponent {
     containerParent;
-    constructor(element, popupContainer, containerParent) {
-        super(element, popupContainer);
+    constructor(containerParent) {
+        super();
         this.containerParent = containerParent;
     }
     isHorizontalContainer() {
         return this.containerParent instanceof ToolBarComponent && this.containerParent.orientation === CommandContainer.Orientation.HORIZONTAL;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SeparatorComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }, { token: CommandContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SeparatorComponent, deps: [{ token: CommandContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SeparatorComponent, selector: "aup-separator", host: { properties: { "class.horizontal-container": "this.isHorizontalContainer" } }, usesInheritance: true, ngImport: i0, template: `
-    <mat-divider [vertical]="!isHorizontalContainer()"></mat-divider>`, isInline: true, styles: ["", ":host(.horizontal-container){display:inline-flex;flex-direction:row;align-items:stretch}\n"], dependencies: [{ kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    <mat-divider [vertical]="!isHorizontalContainer()"></mat-divider>`, isInline: true, styles: ["", ":host(.horizontal-container){display:inline-flex;flex-direction:row;align-items:stretch}\n"], dependencies: [{ kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SeparatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aup-separator', template: `
     <mat-divider [vertical]="!isHorizontalContainer()"></mat-divider>`, styles: [":host(.horizontal-container){display:inline-flex;flex-direction:row;align-items:stretch}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }] }, { type: CommandContainer, decorators: [{
+        }], ctorParameters: function () { return [{ type: CommandContainer, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { isHorizontalContainer: [{
                 type: HostBinding,
@@ -1713,7 +1697,7 @@ class PopupMenuRendererComponent extends DisposableComponent {
             undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PopupMenuRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: { parent: "parent" }, outputs: { commandFired: "commandFired" }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isCommandEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                [disabled]=\"!isPopupMenuEnabled(child)\"\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <!-- Hack... -->\n      <a *ngIf=\"isFileDownload(child)\" mat-menu-item [href]=\"child.download.url\" [download]=\"child.download.saveAs\">\n        <aup-command-face [faces]=\"getFaces(child)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </a>\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\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: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { kind: "component", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: { parent: "parent" }, outputs: { commandFired: "commandFired" }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: ["menu"], descendants: true, static: true }, { propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isCommandEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                [disabled]=\"!isPopupMenuEnabled(child)\"\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <!-- Hack... -->\n      <a *ngIf=\"isFileDownload(child)\" mat-menu-item [href]=\"child.download.url\" [download]=\"child.download.saveAs\">\n        <aup-command-face [faces]=\"getFaces(child)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </a>\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\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: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { kind: "component", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PopupMenuRendererComponent, decorators: [{
             type: Component,
@@ -1738,8 +1722,8 @@ class MoreMenuComponent extends AbstractPopupMenuComponent {
     #tooltip_accessor_storage;
     get tooltip() { return this.#tooltip_accessor_storage; }
     set tooltip(value) { this.#tooltip_accessor_storage = value; }
-    constructor(element, parent) {
-        super(element, parent);
+    constructor() {
+        super();
         const { chain } = Dsl.disposeWith(this);
         this.faceModelDelegate.setDelegate(chain(this.tooltip$).map(tooltip => {
             return {
@@ -1753,10 +1737,10 @@ class MoreMenuComponent extends AbstractPopupMenuComponent {
     get face() {
         return this.faceModelDelegate.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: MoreMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: MoreMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: MoreMenuComponent, selector: "aup-more-menu", inputs: { tooltip: "tooltip" }, providers: [
             { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
-        ], usesInheritance: true, ngImport: i0, template: "<!-- we hide our commands as they need to be rendered by the menu renderer so the menu -> submenu heirarch is maintained -->\n<!-- probably a better way to do this is with a aup-menu-item directive that makes a template and skips the rendering all together -->\n<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n\n<ng-container *ngIf=\"isRoot()\">\n  <aup-button-renderer [faces$]=\"faces$\" [matMenuTriggerFor]=\"subMenu.menuComponent \"\n                       (click)=\"$event.stopPropagation()\"\n                       [forceRenderAsButton]=\"true\"\n  ></aup-button-renderer>\n  <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }, { kind: "component", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: ["faces$", "faces", "enabled$", "enabled", "busy$", "busy", "alignFace", "forceRenderAsButton"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<!-- we hide our commands as they need to be rendered by the menu renderer so the menu -> submenu heirarch is maintained -->\n<!-- probably a better way to do this is with a aup-menu-item directive that makes a template and skips the rendering all together -->\n<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n\n<ng-container *ngIf=\"isRoot()\">\n  <aup-button-renderer [faces$]=\"faces$\" [matMenuTriggerFor]=\"subMenu.menuComponent \"\n                       (click)=\"$event.stopPropagation()\"\n                       [forceRenderAsButton]=\"true\"\n  ></aup-button-renderer>\n  <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }, { kind: "component", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: ["faces$", "faces", "enabled$", "enabled", "busy$", "busy", "alignFace", "forceRenderAsButton"] }] });
 }
 __decorate([
     StoreInValueModel(),
@@ -1767,14 +1751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             args: [{ selector: 'aup-more-menu', providers: [
                         { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
                     ], template: "<!-- we hide our commands as they need to be rendered by the menu renderer so the menu -> submenu heirarch is maintained -->\n<!-- probably a better way to do this is with a aup-menu-item directive that makes a template and skips the rendering all together -->\n<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n\n<ng-container *ngIf=\"isRoot()\">\n  <aup-button-renderer [faces$]=\"faces$\" [matMenuTriggerFor]=\"subMenu.menuComponent \"\n                       (click)=\"$event.stopPropagation()\"\n                       [forceRenderAsButton]=\"true\"\n  ></aup-button-renderer>\n  <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }, {
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }]; }, propDecorators: { tooltip: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { tooltip: [{
                 type: Input
             }] } });
 
@@ -1788,15 +1765,15 @@ class PopupMenuComponent extends AbstractPopupMenuComponent {
     #face_accessor_storage;
     get face() { return this.#face_accessor_storage; }
     set face(value) { this.#face_accessor_storage = value; }
-    constructor(element, parent) {
-        super(element, parent);
+    constructor() {
+        super();
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
         // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PopupMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PopupMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PopupMenuComponent, selector: "aup-popup-menu", inputs: { face$: "face$", face: "face" }, providers: [
             { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
-        ], usesInheritance: true, ngImport: i0, template: "<!-- we hide our commands as they need to be rendered by the menu renderer so the menu -> submenu heirarch is maintained -->\n<!-- probably a better way to do this is with a aup-menu-item directive that makes a template and skips the rendering all together -->\n<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n\n<ng-container *ngIf=\"isRoot()\">\n  <aup-button-renderer [faces$]=\"faces$\" [matMenuTriggerFor]=\"subMenu.menuComponent \"\n                       (click)=\"$event.stopPropagation()\"\n                       [forceRenderAsButton]=\"true\"\n  ></aup-button-renderer>\n  <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }, { kind: "component", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: ["faces$", "faces", "enabled$", "enabled", "busy$", "busy", "alignFace", "forceRenderAsButton"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<!-- we hide our commands as they need to be rendered by the menu renderer so the menu -> submenu heirarch is maintained -->\n<!-- probably a better way to do this is with a aup-menu-item directive that makes a template and skips the rendering all together -->\n<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n\n<ng-container *ngIf=\"isRoot()\">\n  <aup-button-renderer [faces$]=\"faces$\" [matMenuTriggerFor]=\"subMenu.menuComponent \"\n                       (click)=\"$event.stopPropagation()\"\n                       [forceRenderAsButton]=\"true\"\n  ></aup-button-renderer>\n  <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }, { kind: "component", type: ButtonRendererComponent, selector: "aup-button-renderer", inputs: ["faces$", "faces", "enabled$", "enabled", "busy$", "busy", "alignFace", "forceRenderAsButton"] }] });
 }
 __decorate([
     DelegateToValueModel('faceModelDelegate'),
@@ -1811,14 +1788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             args: [{ selector: 'aup-popup-menu', providers: [
                         { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
                     ], template: "<!-- we hide our commands as they need to be rendered by the menu renderer so the menu -> submenu heirarch is maintained -->\n<!-- probably a better way to do this is with a aup-menu-item directive that makes a template and skips the rendering all together -->\n<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n\n<ng-container *ngIf=\"isRoot()\">\n  <aup-button-renderer [faces$]=\"faces$\" [matMenuTriggerFor]=\"subMenu.menuComponent \"\n                       (click)=\"$event.stopPropagation()\"\n                       [forceRenderAsButton]=\"true\"\n  ></aup-button-renderer>\n  <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }, {
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }]; }, propDecorators: { face$: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { face$: [{
                 type: Input
             }], face: [{
                 type: Input
@@ -2311,7 +2281,7 @@ class AutocompleteInputComponent extends AbstractValueInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AutocompleteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AutocompleteInputComponent, selector: "aup-autocomplete-input", inputs: { rawTextContent$: "rawTextContent$", options$: "options$", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", autoActiveFirstOption: "autoActiveFirstOption", autoFilter: "autoFilter", optionLabelFormat: "optionLabelFormat", filterFactory: "filterFactory" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], viewQueries: [{ propertyName: "matInputComponent", first: true, predicate: MatInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValue$.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{formatOption(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-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\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>{{placeholder}}</div>\n  <div class=\"item\" *ngFor=\"let item of options\">\n    <ng-container *ngIf=\"!optionTemplateRef\">{{formatOption(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.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$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AutocompleteInputComponent, selector: "aup-autocomplete-input", inputs: { rawTextContent$: "rawTextContent$", options$: "options$", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", autoActiveFirstOption: "autoActiveFirstOption", autoFilter: "autoFilter", optionLabelFormat: "optionLabelFormat", filterFactory: "filterFactory" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], viewQueries: [{ propertyName: "matInputComponent", first: true, predicate: MatInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValue$.value\"\n         (ngModelChange)=\"updateFilter($event)\"\n         [disabled]=\"!enabled$.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-autocomplete #autocomplete [displayWith]=\"optionLabelFormat\"\n                    [autoActiveFirstOption]=\"autoActiveFirstOption\"\n                    (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{formatOption(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-option *ngIf=\"allowNil\">{{placeholder}}</mat-option>\n  </mat-autocomplete>\n\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>{{placeholder}}</div>\n  <div class=\"item\" *ngFor=\"let item of options\">\n    <ng-container *ngIf=\"!optionTemplateRef\">{{formatOption(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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
 }
 __decorate([
     Proxify(),
@@ -2369,7 +2339,7 @@ class CheckboxInputComponent extends AbstractValueInputComponent {
         this.componentValue$.value = $event.checked;
     }
     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<!-- NOTE: using [(ngModel)] affects how material renders the component and makes it harder to test so we're using [checked] and (change) -->\n<mat-checkbox\n  [checked]=\"componentValue$.value\"\n  (change)=\"select($event)\"\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: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$2.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<!-- NOTE: using [(ngModel)] affects how material renders the component and makes it harder to test so we're using [checked] and (change) -->\n<mat-checkbox\n  [checked]=\"componentValue$.value\"\n  (change)=\"select($event)\"\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: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$2.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,
@@ -2423,7 +2393,7 @@ class MultipleSelectInputComponent extends AbstractListInputComponent {
         })).writeRight();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: MultipleSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: MultipleSelectInputComponent, selector: "aup-multiple-select-input", inputs: { options$: "options$", options: "options", optionLabel: "optionLabel", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], 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              multiple\n              [ngModel]=\"componentList$.value\"\n              (ngModelChange)=\"selectAll($event)\"\n              [disabled]=\"!enabled$.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of options$.value; let i = index\" [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>{{placeholder}}</div>\n  <div class=\"item\" *ngFor=\"let item of options\">{{optionLabelFormat(item)}}</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:30px}\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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { 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: MultipleSelectInputComponent, selector: "aup-multiple-select-input", inputs: { options$: "options$", options: "options", optionLabel: "optionLabel", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], 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              multiple\n              [ngModel]=\"componentList$.value\"\n              (ngModelChange)=\"selectAll($event)\"\n              [disabled]=\"!enabled$.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngFor=\"let option of options$.value; let i = index\" [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>{{placeholder}}</div>\n  <div class=\"item\" *ngFor=\"let item of options\">{{optionLabelFormat(item)}}</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:30px}\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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
 }
 __decorate([
     Proxify(),
@@ -2501,7 +2471,7 @@ class NumberInputComponent extends AbstractValueInputComponent {
         this.value$.value = value;
     }
     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$", min: "min", max$: "max$", max: "max", significantDigits$: "significantDigits$", significantDigits: "significantDigits" }, 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]=\"displayValue$.value\"\n         (ngModelChange)=\"onValueChange($event)\"\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         [step]=\"step$.value\"\n  >\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$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
+    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", significantDigits$: "significantDigits$", significantDigits: "significantDigits" }, 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]=\"displayValue$.value\"\n         (ngModelChange)=\"onValueChange($event)\"\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         [step]=\"step$.value\"\n  >\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$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
 }
 __decorate([
     Proxify(),
@@ -2574,7 +2544,7 @@ class PasswordInputComponent extends AbstractValueInputComponent {
         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", 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$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.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"] }] });
+    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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.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(),
@@ -2608,7 +2578,7 @@ class SearchInputComponent extends AbstractValueInputComponent {
         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$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { kind: "component", type: i3.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: 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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { 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,
@@ -2700,7 +2670,7 @@ class SelectInputComponent extends AbstractValueInputComponent {
         });
     }
     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    <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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.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(),
@@ -2764,7 +2734,7 @@ class StringInputComponent extends AbstractValueInputComponent {
         this.elementRef.nativeElement.querySelector('input').select();
     }
     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", 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$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4$1.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"] }] });
+    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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.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(),
@@ -2807,7 +2777,7 @@ class TextInputComponent extends AbstractValueInputComponent {
         this.elementRef.nativeElement.querySelector('input').select();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TextInputComponent, selector: "aup-text-input", inputs: { rows: "rows", cols: "cols" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValue$.value\"\n            [disabled]=\"!enabled$.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}\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$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.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: TextInputComponent, selector: "aup-text-input", inputs: { rows: "rows", cols: "cols" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValue$.value\"\n            [disabled]=\"!enabled$.value\"\n            (keydown.enter)=\"notifyEnterKey()\"\n            (keydown.escape)=\"notifyEscapeKey()\"\n            [pectinFocusBinding]=\"focusContext\"\n            [errorStateMatcher]=\"errorStateMatcher\"\n            [rows]=\"rows\"\n            [cols]=\"cols\"\n  >\n  </textarea>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}textarea{overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -2852,7 +2822,7 @@ class LoadingContainerComponent extends GarbageCollector {
         return this.loading$.value ? "loaded" : "loading";
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: LoadingContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: LoadingContainerComponent, selector: "aup-loading-container", inputs: { loading$: "loading$", loading: "loading", message$: "message$", message: "message" }, host: { properties: { "class": "this.state" } }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"!loading$.value\"></ng-content>\n<section *ngIf=\"loading$.value\" class=\"loading-indicator-overlay\">\n  <div class=\"loading-message\">\n    <p>{{message$.value}}</p>\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n</section>\n", styles: [":host{display:block;position:relative}section.loading-indicator-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-message{display:inline-block;text-align:center;width:10em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: LoadingContainerComponent, selector: "aup-loading-container", inputs: { loading$: "loading$", loading: "loading", message$: "message$", message: "message" }, host: { properties: { "class": "this.state" } }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"!loading$.value\"></ng-content>\n<section *ngIf=\"loading$.value\" class=\"loading-indicator-overlay\">\n  <div class=\"loading-message\">\n    <p>{{message$.value}}</p>\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n  </div>\n</section>\n", styles: [":host{display:block;position:relative}section.loading-indicator-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-message{display:inline-block;text-align:center;width:10em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
 __decorate([
     Proxify(),
@@ -3702,7 +3672,7 @@ class EditRowControlsComponent extends DisposableComponent {
         return this.editSession?.form;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: EditRowControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: EditRowControlsComponent, selector: "aup-row-editor-controls", inputs: { row: "row", editRowCommand: "editRowCommand", editSession: "editSession" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><aup-icon icon=\"mat:edit\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><aup-icon icon=\"mat:done\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><aup-icon icon=\"mat:clear\"></aup-icon></button>\n", styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "component", type: i3.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: EditRowControlsComponent, selector: "aup-row-editor-controls", inputs: { row: "row", editRowCommand: "editRowCommand", editSession: "editSession" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!editSession\" mat-icon-button [pectinCommand]=\"editRowCommand\" class=\"edit-button\"><aup-icon icon=\"mat:edit\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"saveCommand\"><aup-icon icon=\"mat:done\"></aup-icon></button>\n<button *ngIf=\"editSession\" mat-icon-button [pectinCommand]=\"cancelCommand\"><aup-icon icon=\"mat:clear\"></aup-icon></button>\n", styles: [":host{display:block;width:80px}.edit-button{visibility:hidden}:host-context(tr:hover) .edit-button{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { 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"] }] });
 }
 __decorate([
     Proxify(),
@@ -3743,7 +3713,7 @@ class PaginatorComponent extends DisposableComponent {
         return this.pageController.nextCommand;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: PaginatorComponent, selector: "aup-paginator", inputs: { pageController: "pageController" }, usesInheritance: true, ngImport: i0, template: "<p>Items {{totalItems}}<span class=\"spacer\"></span>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n", styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:#0009}:host p{color:inherit;margin:0 8px 0 0}:host span.spacer{padding:0 calc(var(--default-padding) / 2)}:host span.spacer:before{content:\"|\";opacity:.35}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "component", type: i3.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: PaginatorComponent, selector: "aup-paginator", inputs: { pageController: "pageController" }, usesInheritance: true, ngImport: i0, template: "<p>Items {{totalItems}}<span class=\"spacer\"></span>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n", styles: [":host{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;font-size:12px;padding:0 8px;color:#0009}:host p{color:inherit;margin:0 8px 0 0}:host span.spacer{padding:0 calc(var(--default-padding) / 2)}:host span.spacer:before{content:\"|\";opacity:.35}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { 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"] }] });
 }
 __decorate([
     Proxify(),
@@ -4439,7 +4409,7 @@ class TableMoreMenuComponent extends DisposableComponent {
         return this._visible$.readonly$;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TableMoreMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableMoreMenuComponent, selector: "aup-table-more-menu", host: { listeners: { "click": "preventDefault($event)" } }, viewQueries: [{ propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-menu #menu=\"matMenu\" xPosition=\"before\">\n  <ng-template matMenuContent [cdkPortalOutlet]=\"popupComponentPortal$.value\"\n               (attached)=\"initialise($event)\"></ng-template>\n</mat-menu>\n\n<button mat-icon-button [matMenuTriggerFor]=\"menu\" data-cy=\"more-menu-trigger\" *ngIf=\"visible$.value\">\n  <aup-icon icon=\"mat:more_vert\"></aup-icon>\n</button>\n", styles: [":host{display:inline;text-align:end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableMoreMenuComponent, selector: "aup-table-more-menu", host: { listeners: { "click": "preventDefault($event)" } }, viewQueries: [{ propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-menu #menu=\"matMenu\" xPosition=\"before\">\n  <ng-template matMenuContent [cdkPortalOutlet]=\"popupComponentPortal$.value\"\n               (attached)=\"initialise($event)\"></ng-template>\n</mat-menu>\n\n<button mat-icon-button [matMenuTriggerFor]=\"menu\" data-cy=\"more-menu-trigger\" *ngIf=\"visible$.value\">\n  <aup-icon icon=\"mat:more_vert\"></aup-icon>\n</button>\n", styles: [":host{display:inline;text-align:end}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i2$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
 }
 __decorate([
     StoreInValueModel(),
@@ -5035,7 +5005,7 @@ class TableBodyComponent extends ResizeAwareComponent {
     }
     Proxify = Proxify;
     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", footerRow: "footerRow", 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]=\"$any(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    <ng-container matColumnDef=\"sticky-footer\" *ngIf=\"Proxify.hasTarget(footerRow)\">\n      <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"columns$.length\" [ngClass]=\"'footer-cell'\">\n        <aup-table-footer-row [row]=\"$any(footerRow)\"></aup-table-footer-row>\n      </td>\n      <tr mat-footer-row *matFooterRowDef=\"['sticky-footer']; sticky: true\"></tr>\n    </ng-container>\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<!--    Layout doesn't work yet - probably needs fixed footer row height -->\n<!--    <ng-container matColumnDef=\"sticky-footer\" *ngIf=\"tableModel.footerRowPortalRef\">-->\n<!--      <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"columns$.length\">-->\n<!--        <ng-container [cdkPortalOutlet]=\"tableModel.footerRowPortalRef.portal\" (attached)=\"initialiseFooter($event)\"></ng-container>-->\n<!--      </td>-->\n<!--      <tr mat-footer-row *matFooterRowDef=\"['sticky-footer']; sticky: true\"></tr>-->\n<!--    </ng-container>-->\n\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.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { 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: "directive", type: i2$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-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: i2$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i4$3.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"] }, { kind: "component", type: TableFooterRow, selector: "aup-table-footer-row", inputs: ["row"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TableBodyComponent, selector: "aup-table-body", inputs: { data$: "data$", tableModel: "tableModel", footerRow: "footerRow", 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]=\"$any(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    <ng-container matColumnDef=\"sticky-footer\" *ngIf=\"Proxify.hasTarget(footerRow)\">\n      <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"columns$.length\" [ngClass]=\"'footer-cell'\">\n        <aup-table-footer-row [row]=\"$any(footerRow)\"></aup-table-footer-row>\n      </td>\n      <tr mat-footer-row *matFooterRowDef=\"['sticky-footer']; sticky: true\"></tr>\n    </ng-container>\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<!--    Layout doesn't work yet - probably needs fixed footer row height -->\n<!--    <ng-container matColumnDef=\"sticky-footer\" *ngIf=\"tableModel.footerRowPortalRef\">-->\n<!--      <td mat-footer-cell *matFooterCellDef [attr.colspan]=\"columns$.length\">-->\n<!--        <ng-container [cdkPortalOutlet]=\"tableModel.footerRowPortalRef.portal\" (attached)=\"initialiseFooter($event)\"></ng-container>-->\n<!--      </td>-->\n<!--      <tr mat-footer-row *matFooterRowDef=\"['sticky-footer']; sticky: true\"></tr>-->\n<!--    </ng-container>-->\n\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$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i2$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i2$7.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i2$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i2$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i2$7.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i1$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i4$2.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"] }, { kind: "component", type: TableFooterRow, selector: "aup-table-footer-row", inputs: ["row"] }] });
 }
 __decorate([
     Proxify(),
@@ -11065,7 +11035,7 @@ class InlineStringEditorComponent extends DisposableComponent {
         return !this.editingEnabled$.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: InlineStringEditorComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: InlineStringEditorComponent, selector: "aup-inline-string-editor", inputs: { editorModel: "editorModel", facesModel: "facesModel", faces: "faces", label: "label", placeHolder: "placeHolder", placeHolder$: "placeHolder$" }, host: { properties: { "class.disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field floatLabel=\"always\" (click)=\"startEdit()\"\n                  [class.editable]=\"editingEnabled$.value\" [class.empty]=\"isEmpty()\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input matInput\n           placeholder=\"{{placeHolder}}\"\n           [ngModel]=\"editorModel.valueModel.value\"\n           [disabled]=\"true\"\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  </mat-form-field>\n  <aup-command *ngIf=\"editCommand.enabled$.value\" [command]=\"editCommand\" [face$]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\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"] }, { 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$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "component", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity", "syncWithRoutes"], outputs: ["started", "finished"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: InlineStringEditorComponent, selector: "aup-inline-string-editor", inputs: { editorModel: "editorModel", facesModel: "facesModel", faces: "faces", label: "label", placeHolder: "placeHolder", placeHolder$: "placeHolder$" }, host: { properties: { "class.disabled": "this.isDisabled" } }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field floatLabel=\"always\" (click)=\"startEdit()\"\n                  [class.editable]=\"editingEnabled$.value\" [class.empty]=\"isEmpty()\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input matInput\n           placeholder=\"{{placeHolder}}\"\n           [ngModel]=\"editorModel.valueModel.value\"\n           [disabled]=\"true\"\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  </mat-form-field>\n  <aup-command *ngIf=\"editCommand.enabled$.value\" [command]=\"editCommand\" [face$]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\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"] }, { kind: "directive", type: i2$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity", "syncWithRoutes"], outputs: ["started", "finished"] }] });
 }
 __decorate([
     Proxify(),
@@ -12019,7 +11989,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$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { 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$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { 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,
@@ -12094,7 +12064,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--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$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i3$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { 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$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i3$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
 }
 __decorate([
     Proxify(),
@@ -12124,7 +12094,7 @@ class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
         super(router);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: TabbedPlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: TabbedPlaceNavigationComponent, selector: "aup-tabbed-place-navigation", usesInheritance: true, ngImport: i0, template: "<nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n  <ng-content select=\"[nav-start]\"></ng-content>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     aup-gc #gc=\"aup-gc\"\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n  <ng-content select=\"[nav-end]\"></ng-content>\n</nav>\n<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n", styles: [":host{display:block}div.place-holder{border:1px solid green}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { 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: TabbedPlaceNavigationComponent, selector: "aup-tabbed-place-navigation", usesInheritance: true, ngImport: i0, template: "<nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n  <ng-content select=\"[nav-start]\"></ng-content>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     aup-gc #gc=\"aup-gc\"\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n  <ng-content select=\"[nav-end]\"></ng-content>\n</nav>\n<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n", styles: [":host{display:block}div.place-holder{border:1px solid green}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "animationDuration"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex", "active", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter", "preventDefault"] }, { 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: TabbedPlaceNavigationComponent, decorators: [{
             type: Component,