@coolon/angular-ui-powerups 12.4.9 → 13.0.1

package/fesm2015/{coolon-angular-ui-powerups.js → coolon-angular-ui-powerups.mjs}

@@ -39,19 +39,19 @@ import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$5 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
 import * as i1$7 from '@coolon/pectin';
 import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, TrackExternal, ValueModel, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, FocusManager, EventListenerList, Form, Guard, Binding, DebugContext, ListModel, MultipleSelectionModel, DelegatingSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ComputedListModel, PageController, Deferred, Functions } from '@coolon/pectin';
 import { __decorate, __param, __metadata, __awaiter } from 'tslib';
+import { isEmpty, isString, isFunction, isNil, isInteger, findLast, isObject, isEqual, uniq, first, isNumber, isNaN as isNaN$1 } from 'lodash';
 import * as i1$2 from '@angular/platform-browser';
-import { isEmpty, isString, isFunction, isNil, isInteger, findLast, isObject, isEqual, first, uniq, isNumber, isNaN as isNaN$1 } from 'lodash';
 import { marked } from 'marked';
+import { lang as lang$1, assert as assert$1, Stringy, Opts, Klass } from '@coolon/typescript-utilities';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { Enum } from 'typescript-string-enums';
-import { lang as lang$1, assert as assert$1, Stringy, Opts, Klass } from '@coolon/typescript-utilities';
 import * as i3 from '@angular/material/core';
 import ResizeObserver from 'resize-observer-polyfill';
 import produce from 'immer';
+import { fas } from '@fortawesome/free-solid-svg-icons';
 import * as i5$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i4$2 from '@angular/flex-layout';
@@ -65,7 +65,6 @@ import * as i2$4 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import 'reflect-metadata';
 import { style, query, group, animate, trigger, transition } from '@angular/animations';
-import * as wakeEvent from 'wake-event';
 
 class CommandDirective extends GarbageCollector {
     constructor(elementRef, matButton, matMenuItem) {
@@ -154,26 +153,28 @@ class CommandDirective extends GarbageCollector {
         }
     }
 }
-CommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CommandDirective, deps: [{ token: ElementRef }, { token: i1.MatButton, host: true, optional: true }, { token: i1$1.MatMenuItem, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: CommandDirective, selector: "[pectinCommand]", inputs: { pectinCommand: "pectinCommand", commandParameter: "commandParameter" }, host: { listeners: { "click": "notifyClick($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CommandDirective, decorators: [{
+CommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandDirective, deps: [{ token: ElementRef }, { token: i1.MatButton, host: true, optional: true }, { token: i1$1.MatMenuItem, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: CommandDirective, selector: "[pectinCommand]", inputs: { pectinCommand: "pectinCommand", commandParameter: "commandParameter" }, host: { listeners: { "click": "notifyClick($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
                     selector: '[pectinCommand]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i1.MatButton, decorators: [{
-                    type: Host
-                }, {
-                    type: Optional
-                }] }, { type: i1$1.MatMenuItem, decorators: [{
-                    type: Host
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { pectinCommand: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [ElementRef]
+                    }] }, { type: i1.MatButton, decorators: [{
+                        type: Host
+                    }, {
+                        type: Optional
+                    }] }, { type: i1$1.MatMenuItem, decorators: [{
+                        type: Host
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { pectinCommand: [{
                 type: Input
             }], commandParameter: [{
                 type: Input
@@ -187,9 +188,9 @@ class DisposableComponent extends GarbageCollector {
         this.dispose();
     }
 }
-DisposableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DisposableComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DisposableComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: DisposableComponent, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DisposableComponent, decorators: [{
+DisposableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DisposableComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DisposableComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: DisposableComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DisposableComponent, decorators: [{
             type: Directive
         }] });
 
@@ -278,20 +279,22 @@ class FocusBindingFactory {
         return new FocusBinding(el, this.ngZone, this.document, focusContext);
     }
 }
-FocusBindingFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusBindingFactory, deps: [{ token: NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-FocusBindingFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusBindingFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusBindingFactory, decorators: [{
+FocusBindingFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusBindingFactory, deps: [{ token: NgZone }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+FocusBindingFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusBindingFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusBindingFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone, decorators: [{
-                    type: Inject,
-                    args: [NgZone]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i0.NgZone, decorators: [{
+                        type: Inject,
+                        args: [NgZone]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    } });
 
 class FocusBindingDirective extends DisposableComponent {
     constructor(el, focusBindingFactory) {
@@ -326,18 +329,20 @@ class FocusBindingDirective extends DisposableComponent {
         return this.focusBindingTarget || this.el.nativeElement;
     }
 }
-FocusBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusBindingDirective, deps: [{ token: ElementRef }, { token: FocusBindingFactory }], target: i0.ɵɵFactoryTarget.Directive });
-FocusBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: { pectinFocusBinding: "pectinFocusBinding", focusBindingTarget: "focusBindingTarget" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusBindingDirective, decorators: [{
+FocusBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusBindingDirective, deps: [{ token: ElementRef }, { token: FocusBindingFactory }], target: i0.ɵɵFactoryTarget.Directive });
+FocusBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: { pectinFocusBinding: "pectinFocusBinding", focusBindingTarget: "focusBindingTarget" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
                     selector: '[pectinFocusBinding]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: FocusBindingFactory }]; }, propDecorators: { pectinFocusBinding: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [ElementRef]
+                    }] }, { type: FocusBindingFactory }];
+    }, propDecorators: { pectinFocusBinding: [{
                 type: Input
             }], focusBindingTarget: [{
                 type: Input
@@ -357,13 +362,13 @@ class HighlightTextModelDirective extends GarbageCollector {
         this.dispose();
     }
 }
-HighlightTextModelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HighlightTextModelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-HighlightTextModelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: { aupHighlightTextModel: "aupHighlightTextModel" }, usesInheritance: true, ngImport: i0 });
+HighlightTextModelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HighlightTextModelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+HighlightTextModelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: HighlightTextModelDirective, selector: "[aupHighlightTextModel]", inputs: { aupHighlightTextModel: "aupHighlightTextModel" }, usesInheritance: true, ngImport: i0 });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
 ], HighlightTextModelDirective.prototype, "aupHighlightTextModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HighlightTextModelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HighlightTextModelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[aupHighlightTextModel]'
@@ -399,22 +404,24 @@ class HighlightPipe extends GarbageCollector {
         return this.sanitizer.bypassSecurityTrustHtml(result);
     }
 }
-HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HighlightPipe, deps: [{ token: i1$2.DomSanitizer }, { token: HighlightTextModelDirective, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
-HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HighlightPipe, name: "aupHighlight", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HighlightPipe, decorators: [{
+HighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HighlightPipe, deps: [{ token: i1$2.DomSanitizer }, { token: HighlightTextModelDirective, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+HighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HighlightPipe, name: "aupHighlight", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: HighlightPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'aupHighlight',
                     pure: false
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }, { type: HighlightTextModelDirective, decorators: [{
-                    type: Optional
-                }] }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1$2.DomSanitizer }, { type: HighlightTextModelDirective, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
 
 class DirectivesModule {
 }
-DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DirectivesModule, declarations: [CommandDirective,
+DirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DirectivesModule, declarations: [CommandDirective,
         FocusBindingDirective,
         HighlightPipe,
         HighlightTextModelDirective], imports: [CommonModule,
@@ -427,7 +434,7 @@ DirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         FocusBindingDirective,
         HighlightPipe,
         HighlightTextModelDirective] });
-DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DirectivesModule, imports: [[
+DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DirectivesModule, imports: [[
             CommonModule,
             BrowserAnimationsModule,
             FormsModule,
@@ -436,7 +443,7 @@ DirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             MatSelectModule,
             MatTabsModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DirectivesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DirectivesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -518,9 +525,9 @@ class MarkdownService {
         });
     }
 }
-MarkdownService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MarkdownService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MarkdownService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MarkdownService, decorators: [{
+MarkdownService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MarkdownService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarkdownService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarkdownService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -531,8 +538,8 @@ class BusyOverlayComponent extends GarbageCollector {
     ngOnInit() {
     }
 }
-BusyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BusyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BusyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: { busyModel: "busyModel", busy: "busy" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.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:10;z-index:var(--aup-busy-overlay-z-index, 10);position:absolute;background-color:#0003;top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"], components: [{ type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BusyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BusyOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BusyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: { busyModel: "busyModel", busy: "busy" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.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;top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"], components: [{ type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
@@ -541,19 +548,43 @@ __decorate([
     StoreInValueModel('busyModel'),
     __metadata("design:type", Boolean)
 ], BusyOverlayComponent.prototype, "busy", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BusyOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BusyOverlayComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-busy-overlay',
-                    templateUrl: `./busy-overlay.component.html`,
-                    styleUrls: ['./busy-overlay.component.scss']
-                }]
+            args: [{ selector: 'aup-busy-overlay', template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.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;top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { busyModel: [{
                 type: Input
             }], busy: [{
                 type: Input
             }] } });
 
+class AbstractCardContainerComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+}
+AbstractCardContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractCardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AbstractCardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractCardContainerComponent, selector: "aup-abstract-card-container", inputs: { addCardCommand: "addCardCommand", addCardFace: "addCardFace" }, queries: [{ propertyName: "addCardTemplate", first: true, predicate: ["addCardTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], AbstractCardContainerComponent.prototype, "addCardCommand", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractCardContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'aup-abstract-card-container',
+                    template: '',
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { addCardCommand: [{
+                type: Input
+            }], addCardFace: [{
+                type: Input
+            }], addCardTemplate: [{
+                type: ContentChild,
+                args: ['addCardTemplate']
+            }] } });
+
 var CommandFace;
 (function (CommandFace) {
     let Position;
@@ -662,34 +693,6 @@ var CommandFace;
     CommandFace.Adapter = Adapter;
 })(CommandFace || (CommandFace = {}));
 
-class AbstractCardContainerComponent extends DisposableComponent {
-    constructor() {
-        super();
-    }
-    ngOnInit() {
-    }
-}
-AbstractCardContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractCardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractCardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractCardContainerComponent, selector: "aup-abstract-card-container", inputs: { addCardCommand: "addCardCommand", addCardFace: "addCardFace" }, queries: [{ propertyName: "addCardTemplate", first: true, predicate: ["addCardTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-__decorate([
-    TrackExternal(),
-    __metadata("design:type", Command)
-], AbstractCardContainerComponent.prototype, "addCardCommand", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractCardContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'aup-abstract-card-container',
-                    template: '',
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { addCardCommand: [{
-                type: Input
-            }], addCardFace: [{
-                type: Input
-            }], addCardTemplate: [{
-                type: ContentChild,
-                args: ['addCardTemplate']
-            }] } });
-
 class IconComponent {
     constructor() {
         this.allowedPrefixes = Enum.values(IconComponent.IconPrefix).map(p => `${p}:`);
@@ -719,15 +722,11 @@ class IconComponent {
         return this.suffix;
     }
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: IconComponent, selector: "aup-icon", inputs: { icon: "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\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"faIcon\">\n    </fa-icon>\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;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}\n"], components: [{ type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$5.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: IconComponent, decorators: [{
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: IconComponent, selector: "aup-icon", inputs: { icon: "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\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"faIcon\">\n    </fa-icon>\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;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}\n"], components: [{ type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-icon',
-                    templateUrl: './icon.component.html',
-                    styleUrls: ['./icon.component.scss']
-                }]
+            args: [{ selector: 'aup-icon', template: "<ng-container [ngSwitch]=\"prefix\">\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.SVG\"\n            [svgIcon]=\"suffix\"\n            class=\"svgIcon\">\n  </mat-icon>\n\n  <mat-icon *ngSwitchCase=\"iconPrefix.MATERIAL\">\n    {{suffix}}\n  </mat-icon>\n\n  <div *ngSwitchCase=\"iconPrefix.FONT_AWESOME\"\n       class=\"faIconWrapper\">\n    <fa-icon [icon]=\"faIcon\">\n    </fa-icon>\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;width:24px}fa-icon{vertical-align:middle}.faIconWrapper{text-align:center;width:24px;height:24px}.svgIcon{width:24px;height:24px}:host(.mat-chip-remove) mat-icon{font-size:18px}mat-icon{width:inherit;height:inherit}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }] } });
@@ -783,20 +782,15 @@ class CommandFaceComponent extends DisposableComponent {
         return this.activeColor.value;
     }
 }
-CommandFaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CommandFaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CommandFaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: CommandFaceComponent, selector: "aup-command-face", inputs: { _rawFaces: ["faces", "_rawFaces"], face: "face", ignoreIcon: "ignoreIcon", ignoreText: "ignoreText", includeMissingIconInLayout: "includeMissingIconInLayout" }, host: { properties: { "class.hide-icon": "this.requiresMissingIconInLayout", "attr.color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n", styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"], components: [{ type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+CommandFaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandFaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CommandFaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CommandFaceComponent, selector: "aup-command-face", inputs: { _rawFaces: ["faces", "_rawFaces"], face: "face", ignoreIcon: "ignoreIcon", ignoreText: "ignoreText", includeMissingIconInLayout: "includeMissingIconInLayout" }, host: { properties: { "class.hide-icon": "this.requiresMissingIconInLayout", "attr.color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n", styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"], components: [{ type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     StoreInListModel('facesModel'),
     __metadata("design:type", Array)
 ], CommandFaceComponent.prototype, "_rawFaces", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CommandFaceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandFaceComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-command-face',
-                    templateUrl: './command-face.component.html',
-                    styleUrls: ['./command-face.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'aup-command-face', encapsulation: ViewEncapsulation.None, template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n", styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { _rawFaces: [{
                 type: Input,
                 args: ['faces']
@@ -821,15 +815,11 @@ class ScrollContainerComponent {
     ngOnInit() {
     }
 }
-ScrollContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScrollContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ScrollContainerComponent, selector: "aup-scroll-container", ngImport: i0, template: "<div class=\"container\" cdkScrollable>\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}\n"], directives: [{ type: i1$6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ScrollContainerComponent, decorators: [{
+ScrollContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ScrollContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ScrollContainerComponent, selector: "aup-scroll-container", ngImport: i0, template: "<div class=\"container\" cdkScrollable>\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}\n"], directives: [{ type: i1$6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ScrollContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-scroll-container',
-                    templateUrl: './scroll-container.component.html',
-                    styleUrls: ['./scroll-container.component.scss']
-                }]
+            args: [{ selector: 'aup-scroll-container', template: "<div class=\"container\" cdkScrollable>\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0;align-items:stretch}.container{display:flex;flex-direction:column;flex:1;flex-basis:0;overflow-y:scroll;align-items:stretch}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 /**
@@ -934,15 +924,11 @@ class CardContainerComponent extends AbstractCardContainerComponent {
         }
     }
 }
-CardContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CardContainerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: CardContainerComponent, selector: "aup-card-container", inputs: { columnCount: "columnCount", enabledScroll: "enabledScroll" }, host: { properties: { "class.auto-columns": "this.isAutoColumns", "class.single-column": "this.isSingleColumn" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <div class=\"card-container\">\n    <ng-content></ng-content>\n\n    <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n      <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n      <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n    </div>\n\n    <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n      <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"], components: [{ type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }, { type: ScrollContainerComponent, selector: "aup-scroll-container" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CardContainerComponent, decorators: [{
+CardContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CardContainerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+CardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CardContainerComponent, selector: "aup-card-container", inputs: { columnCount: "columnCount", enabledScroll: "enabledScroll" }, host: { properties: { "class.auto-columns": "this.isAutoColumns", "class.single-column": "this.isSingleColumn" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <div class=\"card-container\">\n    <ng-content></ng-content>\n\n    <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n      <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n      <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n    </div>\n\n    <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n      <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"], components: [{ type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }, { type: ScrollContainerComponent, selector: "aup-scroll-container" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CardContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-card-container',
-                    templateUrl: './card-container.component.html',
-                    styleUrls: ['./card-container.component.scss']
-                }]
+            args: [{ selector: 'aup-card-container', template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <div class=\"card-container\">\n    <ng-content></ng-content>\n\n    <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n      <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n      <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n    </div>\n\n    <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n      <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { columnCount: [{
                 type: Input
             }], enabledScroll: [{
@@ -1022,15 +1008,11 @@ class CardStackComponent extends AbstractCardContainerComponent {
         console.warn('<aup-card-stack></aup-card-stack> is deprecated.  Use <aup-card-container [columnCount]="1"> instead.');
     }
 }
-CardStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: CardStackComponent, selector: "aup-card-stack", usesInheritance: true, ngImport: i0, template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"], components: [{ type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CardStackComponent, decorators: [{
+CardStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CardStackComponent, selector: "aup-card-stack", usesInheritance: true, ngImport: i0, template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"], components: [{ type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CardStackComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-card-stack',
-                    templateUrl: './card-stack.component.html',
-                    styleUrls: ['./card-stack.component.scss']
-                }]
+            args: [{ selector: 'aup-card-stack', template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n", styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 const HorizontalAlignment = Enum({
@@ -1101,8 +1083,8 @@ class CommandComponent extends PopupAwareComponent {
         return this.face;
     }
 }
-CommandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CommandComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: CommandComponent, selector: "aup-command", inputs: { command: "command", faceModel: "faceModel", face: "face", busyFaceModel: "busyFaceModel", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+CommandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CommandComponent, selector: "aup-command", inputs: { command: "command", faceModel: "faceModel", face: "face", busyFaceModel: "busyFaceModel", busyFace: "busyFace", alignFace: "alignFace" }, host: { properties: { "class": "this.alignFace" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -1123,19 +1105,17 @@ __decorate([
     StoreInValueModel('busyFaceModel'),
     __metadata("design:type", Object)
 ], CommandComponent.prototype, "busyFace", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CommandComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CommandComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-command',
-                    templateUrl: './command.component.html',
-                    styleUrls: ['./command.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { command: [{
+            args: [{ selector: 'aup-command', template: "<ng-container *ngIf=\"iconOnly$.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltip$.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly$.value\">\n  <ng-container [ngSwitch]=\"buttonStyle$.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"color$.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltip$.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [POPUP_CONTAINER]
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { command: [{
                 type: Input
             }], faceModel: [{
                 type: Input
@@ -1162,9 +1142,9 @@ class FlexComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-FlexComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FlexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FlexComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: FlexComponent, selector: "aup-flex", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FlexComponent, decorators: [{
+FlexComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FlexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FlexComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FlexComponent, selector: "aup-flex", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FlexComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'aup-flex',
@@ -1221,8 +1201,8 @@ class AbstractPopupMenuComponent extends PopupAwareComponent {
         return this.faceAdapter.face;
     }
 }
-AbstractPopupMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractPopupMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER }], target: i0.ɵɵFactoryTarget.Component });
-AbstractPopupMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractPopupMenuComponent, selector: "aup-abstract-popup-menu", inputs: { xPosition: "xPosition", yPosition: "yPosition", enabled: "enabled", enabledModel: "enabledModel" }, viewQueries: [{ propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractPopupMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractPopupMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER }], target: i0.ɵɵFactoryTarget.Component });
+AbstractPopupMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractPopupMenuComponent, selector: "aup-abstract-popup-menu", inputs: { xPosition: "xPosition", yPosition: "yPosition", enabled: "enabled", enabledModel: "enabledModel" }, viewQueries: [{ propertyName: "triggers", predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     StoreInValueModel('enabledModel'),
     __metadata("design:type", Boolean)
@@ -1231,17 +1211,15 @@ __decorate([
     TrackExternal({ defaultValue: true }),
     __metadata("design:type", ValueModel)
 ], AbstractPopupMenuComponent.prototype, "enabledModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractPopupMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractPopupMenuComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-abstract-popup-menu',
-                    template: '',
-                    styleUrls: []
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }] }]; }, propDecorators: { xPosition: [{
+            args: [{ selector: 'aup-abstract-popup-menu', template: '', styles: [] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [POPUP_CONTAINER]
+                    }] }];
+    }, propDecorators: { xPosition: [{
                 type: Input
             }], yPosition: [{
                 type: Input
@@ -1315,16 +1293,11 @@ class ToolBarComponent extends CommandContainer {
     ngAfterViewInit() {
     }
 }
-ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToolBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ToolBarComponent, selector: "aup-tool-bar", usesInheritance: true, ngImport: i0, template: '<div class="toolbar-content"><ng-content></ng-content></div>', isInline: true, styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToolBarComponent, decorators: [{
+ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ToolBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ToolBarComponent, selector: "aup-tool-bar", usesInheritance: true, ngImport: i0, template: '<div class="toolbar-content"><ng-content></ng-content></div>', isInline: true, styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-tool-bar',
-                    template: '<div class="toolbar-content"><ng-content></ng-content></div>',
-                    styleUrls: ['./tool-bar.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'aup-tool-bar', template: '<div class="toolbar-content"><ng-content></ng-content></div>', encapsulation: ViewEncapsulation.None, styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 /**
@@ -1341,10 +1314,10 @@ class SeparatorComponent extends PopupAwareComponent {
     ngOnInit() {
     }
 }
-SeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SeparatorComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }, { token: CommandContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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 {\n  }", ":host(.horizontal-container) {\n      display: inline-flex;\n      flex-direction: row;\n      align-items: stretch;\n    }"], components: [{ type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SeparatorComponent, decorators: [{
+SeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SeparatorComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true }, { token: CommandContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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"], components: [{ type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'aup-separator',
@@ -1359,14 +1332,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
     }`
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }] }, { type: CommandContainer, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { isHorizontalContainer: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [POPUP_CONTAINER]
+                    }] }, { type: CommandContainer, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { isHorizontalContainer: [{
                 type: HostBinding,
                 args: ['class.horizontal-container']
             }] } });
@@ -1440,14 +1415,11 @@ class PopupMenuRendererComponent extends DisposableComponent {
                 undefined;
     }
 }
-PopupMenuRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupMenuRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopupMenuRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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                matMenuTrigger\n                [disabled]=\"!isPopupMenuEnabled(child)\"\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n", components: [{ type: i1$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }, { type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i1$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupMenuRendererComponent, decorators: [{
+PopupMenuRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupMenuRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PopupMenuRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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                matMenuTrigger\n                [disabled]=\"!isPopupMenuEnabled(child)\"\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n", components: [{ type: i1$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }, { type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i1$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupMenuRendererComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "aup-popup-menu-renderer",
-                    templateUrl: "./popup-menu-renderer.component.html"
-                }]
+            args: [{ selector: "aup-popup-menu-renderer", template: "<mat-menu #menu [xPosition]=\"parent.xPosition\" [yPosition]=\"parent.yPosition\">\n  <ng-template matMenuContent>\n    <ng-container *ngFor=\"let child of children; trackBy: TrackBy.byIndex\" >\n      <button *ngIf=\"isCommand(child)\"\n              (click)=\"executeCommand(child)\"\n              [disabled]=\"!isCommandEnabled(child)\"\n              [matTooltip]=\"getTooltip(child)\"\n              mat-menu-item>\n                <aup-command-face [faces]=\"getFaces(child)\"\n                                  [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n\n      <ng-container *ngIf=\"isPopupMenu(child)\">\n        <button mat-menu-item\n                matMenuTrigger\n                [disabled]=\"!isPopupMenuEnabled(child)\"\n                [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n        >\n                    <aup-command-face [faces]=\"getFaces(child)\"\n                                      [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n        </button>\n        <aup-popup-menu-renderer #innerPanel\n                                 [parent]=\"child\"\n                                 (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n      </ng-container>\n\n      <mat-divider *ngIf=\"isSeparator(child)\"></mat-divider>\n\n    </ng-container>\n\n  </ng-template>\n</mat-menu>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { parent: [{
                 type: Input
             }], menuComponent: [{
@@ -1481,31 +1453,29 @@ class MoreMenuComponent extends AbstractPopupMenuComponent {
         return this.faceModelDelegate.value;
     }
 }
-MoreMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MoreMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-MoreMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: MoreMenuComponent, selector: "aup-more-menu", inputs: { tooltip: "tooltip" }, providers: [
+MoreMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MoreMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+MoreMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MoreMenuComponent, selector: "aup-more-menu", inputs: { tooltip: "tooltip" }, providers: [
         { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n", components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n", components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 __decorate([
     StoreInValueModel('tooltipModel'),
     __metadata("design:type", String)
 ], MoreMenuComponent.prototype, "tooltip", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MoreMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MoreMenuComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-more-menu',
-                    templateUrl: './popup-menu.component.html',
-                    providers: [
+            args: [{ selector: 'aup-more-menu', providers: [
                         { provide: POPUP_CONTAINER, useExisting: MoreMenuComponent }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }, {
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }]; }, propDecorators: { tooltip: [{
+                    ], template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [POPUP_CONTAINER]
+                    }, {
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    }, propDecorators: { tooltip: [{
                 type: Input
             }] } });
 
@@ -1519,10 +1489,10 @@ class PopupMenuComponent extends AbstractPopupMenuComponent {
         // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);
     }
 }
-PopupMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-PopupMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PopupMenuComponent, selector: "aup-popup-menu", inputs: { faceModel: "faceModel", face: "face" }, providers: [
+PopupMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupMenuComponent, deps: [{ token: i0.ElementRef }, { token: POPUP_CONTAINER, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+PopupMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PopupMenuComponent, selector: "aup-popup-menu", inputs: { faceModel: "faceModel", face: "face" }, providers: [
         { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n", components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n", components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }, { type: PopupMenuRendererComponent, selector: "aup-popup-menu-renderer", inputs: ["parent"], outputs: ["commandFired"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 __decorate([
     TrackExternal({ delegateTo: 'faceModelDelegate' }),
     __metadata("design:type", ValueModel)
@@ -1531,24 +1501,21 @@ __decorate([
     StoreInValueModel('faceModel'),
     __metadata("design:type", Object)
 ], PopupMenuComponent.prototype, "face", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupMenuComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-popup-menu',
-                    templateUrl: './popup-menu.component.html',
-                    styleUrls: [],
-                    providers: [
+            args: [{ selector: 'aup-popup-menu', providers: [
                         { provide: POPUP_CONTAINER, useExisting: PopupMenuComponent }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [POPUP_CONTAINER]
-                }, {
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }]; }, propDecorators: { faceModel: [{
+                    ], template: "<div class=\"content\" style=\"display: none\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"isRoot()\">\n  <ng-container *ngIf=\"faceAdapter.text\" [ngSwitch]=\"faceAdapter.style\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu\n                               [parent]=\"this\"\n                              (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button matMenuTrigger\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              (click) = \"$event.stopPropagation()\"\n              [matTooltip]=\"faceAdapter.tooltip\"\n              [color]=\"faceAdapter.color\"\n              [disabled]=\"!enabled\"\n              mat-button>\n        <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n      </button>\n      <aup-popup-menu-renderer #subMenu [parent]=\"this\" (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!faceAdapter.text\">\n    <button matMenuTrigger\n            mat-icon-button\n            [matMenuTriggerFor]=\"subMenu.menuComponent\"\n            (click) = \"$event.stopPropagation()\"\n            [matTooltip]=\"faceAdapter.tooltip\"\n            [color]=\"faceAdapter.color\"\n            [disabled]=\"!enabled\"\n    >\n      <aup-command-face [faces]=\"faces$.value\"></aup-command-face>\n    </button>\n    <aup-popup-menu-renderer #subMenu\n                             [parent]=\"this\"\n                            (commandFired)=\"onCommandFired()\"></aup-popup-menu-renderer>\n  </ng-container>\n</ng-container>\n", styles: [] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [POPUP_CONTAINER]
+                    }, {
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    }, propDecorators: { faceModel: [{
                 type: Input
             }], face: [{
                 type: Input
@@ -1560,23 +1527,19 @@ class EmptyStateComponent {
     ngOnInit() {
     }
 }
-EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: EmptyStateComponent, selector: "aup-empty-state", ngImport: i0, template: `
+EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EmptyStateComponent, selector: "aup-empty-state", ngImport: i0, template: `
       <div class="container">
           <ng-content></ng-content>
       </div>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{display:flex;flex-direction:column;align-items:stretch;padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-empty-state',
-                    template: `
+            args: [{ selector: 'aup-empty-state', template: `
       <div class="container">
           <ng-content></ng-content>
       </div>
-  `,
-                    styleUrls: ['./empty-state.component.scss']
-                }]
+  `, styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{display:flex;flex-direction:column;align-items:stretch;padding:var(--aup-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class FocusContainerComponent extends DisposableComponent {
@@ -1595,23 +1558,20 @@ class FocusContainerComponent extends DisposableComponent {
         this.focusManager.restoreFocus();
     }
 }
-FocusContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusContainerComponent, deps: [{ token: i1$7.FocusManager, self: true }], target: i0.ɵɵFactoryTarget.Component });
-FocusContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: FocusContainerComponent, selector: "aup-focus-container", host: { properties: { "attr.tabindex": "this.tabIndex" } }, providers: [
+FocusContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusContainerComponent, deps: [{ token: i1$7.FocusManager, self: true }], target: i0.ɵɵFactoryTarget.Component });
+FocusContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FocusContainerComponent, selector: "aup-focus-container", host: { properties: { "attr.tabindex": "this.tabIndex" } }, providers: [
         { provide: FocusManager }
     ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-focus-container',
-                    templateUrl: './focus-container.component.html',
-                    styleUrls: ['./focus-container.component.scss'],
-                    providers: [
+            args: [{ selector: 'aup-focus-container', providers: [
                         { provide: FocusManager }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$7.FocusManager, decorators: [{
-                    type: Self
-                }] }]; }, propDecorators: { tabIndex: [{
+                    ], template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$7.FocusManager, decorators: [{
+                        type: Self
+                    }] }];
+    }, propDecorators: { tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
             }] } });
@@ -1643,9 +1603,9 @@ class FocusableComponent extends DisposableComponent {
         return this._focusContext;
     }
 }
-FocusableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusableComponent, deps: [{ token: i0.ElementRef }, { token: i1$7.FocusManager }, { token: FocusBindingFactory }], target: i0.ɵɵFactoryTarget.Component });
-FocusableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: FocusableComponent, selector: "ng-component", host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "this.focusable" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: FocusableComponent, decorators: [{
+FocusableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusableComponent, deps: [{ token: i0.ElementRef }, { token: i1$7.FocusManager }, { token: FocusBindingFactory }], target: i0.ɵɵFactoryTarget.Component });
+FocusableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FocusableComponent, selector: "ng-component", host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "this.focusable" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FocusableComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$7.FocusManager }, { type: FocusBindingFactory }]; }, propDecorators: { focusable: [{
@@ -1741,9 +1701,9 @@ class AbstractInputComponent extends DisposableComponent {
         return this.onValueEditedListeners.add(callback);
     }
 }
-AbstractInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractInputComponent, selector: "ng-component", inputs: { label: "label", userFloatLabel: ["floatLabel", "userFloatLabel"], hint: "hint", placeholder: "placeholder", dense: "dense", focusCommand: ["command.focus", "focusCommand"], blurCommand: ["command.blur", "blurCommand"], enterCommand: ["command.enter", "enterCommand"], escapeCommand: ["command.escape", "escapeCommand"], clickCommand: ["command.click", "clickCommand"] }, outputs: { focus: "focus", blur: "blur", enterKey: "enterKey", escapeKey: "escapeKey" }, host: { listeners: { "click": "notifyClick()", "focusin": "notifyFocusIn()", "focusout": "notifyFocusOut()" }, properties: { "class.dense": "this.dense", "class": "this.baseClassName" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractInputComponent, decorators: [{
+AbstractInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AbstractInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractInputComponent, selector: "ng-component", inputs: { label: "label", userFloatLabel: ["floatLabel", "userFloatLabel"], hint: "hint", placeholder: "placeholder", dense: "dense", focusCommand: ["command.focus", "focusCommand"], blurCommand: ["command.blur", "blurCommand"], enterCommand: ["command.enter", "enterCommand"], escapeCommand: ["command.escape", "escapeCommand"], clickCommand: ["command.click", "clickCommand"] }, outputs: { focus: "focus", blur: "blur", enterKey: "enterKey", escapeKey: "escapeKey" }, host: { listeners: { "click": "notifyClick()", "focusin": "notifyFocusIn()", "focusout": "notifyFocusOut()" }, properties: { "class.dense": "this.dense", "class": "this.baseClassName" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractInputComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
@@ -1845,13 +1805,13 @@ class AbstractListInputComponent extends AbstractInputComponent {
         });
     }
 }
-AbstractListInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractListInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractListInputComponent, selector: "ng-component", inputs: { listModel: "listModel", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractListInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractListInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AbstractListInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractListInputComponent, selector: "ng-component", inputs: { listModel: "listModel", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     TrackExternal({ delegateTo: 'formValueModel' }),
     __metadata("design:type", Object)
 ], AbstractListInputComponent.prototype, "listModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractListInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractListInputComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return []; }, propDecorators: { listModel: [{
@@ -1910,13 +1870,13 @@ class AbstractValueInputComponent extends AbstractInputComponent {
         });
     }
 }
-AbstractValueInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractValueInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractValueInputComponent, selector: "ng-component", inputs: { valueModel: "valueModel", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractValueInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AbstractValueInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractValueInputComponent, selector: "ng-component", inputs: { valueModel: "valueModel", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     TrackExternal({ delegateTo: 'formValueModel' }),
     __metadata("design:type", Object)
 ], AbstractValueInputComponent.prototype, "valueModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractValueInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractValueInputComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return []; }, propDecorators: { valueModel: [{
@@ -1958,8 +1918,8 @@ class AutocompleteInputComponent extends AbstractValueInputComponent {
         this.valueModel.value = $event.option.value;
     }
 }
-AutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AutocompleteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AutocompleteInputComponent, selector: "aup-autocomplete-input", inputs: { optionsModel: "optionsModel", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.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\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</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\">{{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:0}\n"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
+AutocompleteInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AutocompleteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AutocompleteInputComponent, selector: "aup-autocomplete-input", inputs: { optionsModel: "optionsModel", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.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\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</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\">{{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:0}\n"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.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"] }, { type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ListModel)
@@ -1968,13 +1928,9 @@ __decorate([
     StoreInListModel('optionsModel'),
     __metadata("design:type", Array)
 ], AutocompleteInputComponent.prototype, "options", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AutocompleteInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AutocompleteInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-autocomplete-input',
-                    templateUrl: './autocomplete-input.component.html',
-                    styleUrls: ['./autocomplete-input.component.scss']
-                }]
+            args: [{ selector: 'aup-autocomplete-input', template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"string\"\n         matInput\n         [matAutocomplete]=\"autocomplete\"\n         placeholder=\"{{placeholder}}\"\n         [ngModel]=\"componentValueModel.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\" [autoActiveFirstOption]=\"true\" (optionSelected)=\"onSelect($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions.value; let i = index\"\n                [value]=\"option\"\n    >{{formatOption(option)}}</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\">{{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:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { optionsModel: [{
                 type: Input
             }], options: [{
@@ -2001,15 +1957,11 @@ class CheckboxInputComponent extends AbstractValueInputComponent {
     ngOnInit() {
     }
 }
-CheckboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: CheckboxInputComponent, selector: "aup-checkbox-input", inputs: { color: "color", labelPosition: "labelPosition" }, usesInheritance: true, ngImport: i0, template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: CheckboxInputComponent, decorators: [{
+CheckboxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CheckboxInputComponent, selector: "aup-checkbox-input", inputs: { color: "color", labelPosition: "labelPosition" }, usesInheritance: true, ngImport: i0, template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CheckboxInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-checkbox-input',
-                    templateUrl: './checkbox-input.component.html',
-                    styleUrls: ['./checkbox-input.component.scss']
-                }]
+            args: [{ selector: 'aup-checkbox-input', template: "<!-- TODO: add focus binding -->\n<mat-checkbox\n  [(ngModel)]=\"componentValueModel.value\"\n  [color]=\"color\"\n  [labelPosition]=\"labelPosition\"\n  [disabled]=\"!isEnabled()\"\n>{{label}}</mat-checkbox>\n<mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n<mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 0 16px}:host.dense{padding:6px 0 2px}mat-hint,mat-error{margin-top:4px;margin-left:24px;font-size:12px;font-weight:400;line-height:13.5px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { color: [{
                 type: Input
             }], labelPosition: [{
@@ -2031,8 +1983,8 @@ class MultipleSelectInputComponent extends AbstractListInputComponent {
     ngOnInit() {
     }
 }
-MultipleSelectInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MultipleSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultipleSelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: MultipleSelectInputComponent, selector: "aup-multiple-select-input", inputs: { optionsModel: "optionsModel", options: "options", optionLabel: "optionLabel", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"componentListModel.value\"\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 optionsModel.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"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
+MultipleSelectInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MultipleSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultipleSelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MultipleSelectInputComponent, selector: "aup-multiple-select-input", inputs: { optionsModel: "optionsModel", options: "options", optionLabel: "optionLabel", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"componentListModel.value\"\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 optionsModel.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"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ListModel)
@@ -2041,13 +1993,9 @@ __decorate([
     StoreInListModel('optionsModel'),
     __metadata("design:type", Array)
 ], MultipleSelectInputComponent.prototype, "options", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MultipleSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MultipleSelectInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-multiple-select-input',
-                    templateUrl: './multiple-select-input.component.html',
-                    styleUrls: ['./multiple-select-input.component.scss']
-                }]
+            args: [{ selector: 'aup-multiple-select-input', template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              multiple\n              [(ngModel)]=\"componentListModel.value\"\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 optionsModel.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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { optionsModel: [{
                 type: Input
             }], options: [{
@@ -2070,15 +2018,11 @@ class NumberInputComponent extends AbstractValueInputComponent {
     ngOnInit() {
     }
 }
-NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min: "min", max: "max", iconPrefix: "iconPrefix" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$8.MatPrefix, selector: "[matPrefix]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NumberInputComponent, decorators: [{
+NumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: NumberInputComponent, selector: "aup-number-input", inputs: { autocomplete: "autocomplete", min: "min", max: "max", iconPrefix: "iconPrefix" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i5.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$8.MatPrefix, selector: "[matPrefix]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-number-input',
-                    templateUrl: './number-input.component.html',
-                    styleUrls: ['./number-input.component.scss']
-                }]
+            args: [{ selector: 'aup-number-input', template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"number\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n         [min]=\"min\"\n         [max]=\"max\"\n  >\n  <mat-hint *ngIf=\"hint && !dense\" >{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n</mat-form-field>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
                 type: Input
             }], min: [{
@@ -2096,15 +2040,11 @@ class PasswordInputComponent extends AbstractValueInputComponent {
     ngOnInit() {
     }
 }
-PasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PasswordInputComponent, selector: "aup-password-input", inputs: { autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n", styles: [""], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PasswordInputComponent, decorators: [{
+PasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PasswordInputComponent, selector: "aup-password-input", inputs: { autocomplete: "autocomplete" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n", styles: [""], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-password-input',
-                    templateUrl: './password-input.component.html',
-                    styleUrls: ['./password-input.component.scss']
-                }]
+            args: [{ selector: 'aup-password-input', template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input type=\"password\"\n         matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
                 type: Input
             }] } });
@@ -2124,8 +2064,8 @@ class SelectInputComponent extends AbstractValueInputComponent {
     ngOnInit() {
     }
 }
-SelectInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SelectInputComponent, selector: "aup-select-input", inputs: { optionsModel: "optionsModel", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\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 optionsModel.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 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:0}\n"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
+SelectInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectInputComponent, selector: "aup-select-input", inputs: { optionsModel: "optionsModel", options: "options", optionLabel: "optionLabel", allowNil: "allowNil", optionLabelFormat: "optionLabelFormat" }, queries: [{ propertyName: "optionTemplateRef", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "nilOptionTemplateRef", first: true, predicate: ["nilOptionTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\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 optionsModel.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 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:0}\n"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ListModel)
@@ -2134,13 +2074,9 @@ __decorate([
     StoreInListModel('optionsModel'),
     __metadata("design:type", Array)
 ], SelectInputComponent.prototype, "options", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-select-input',
-                    templateUrl: './select-input.component.html',
-                    styleUrls: ['./select-input.component.scss']
-                }]
+            args: [{ selector: 'aup-select-input', template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\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 optionsModel.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 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:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { optionsModel: [{
                 type: Input
             }], options: [{
@@ -2171,8 +2107,8 @@ class StringInputComponent extends AbstractValueInputComponent {
     ngOnInit() {
     }
 }
-StringInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: StringInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: StringInputComponent, selector: "aup-string-input", inputs: { autocomplete: "autocomplete", enableClearModel: "enableClearModel", enableClear: "enableClear", iconPrefix: "iconPrefix" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}\n"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$8.MatPrefix, selector: "[matPrefix]" }, { type: i1$8.MatSuffix, selector: "[matSuffix]" }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+StringInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: StringInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StringInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: StringInputComponent, selector: "aup-string-input", inputs: { autocomplete: "autocomplete", enableClearModel: "enableClearModel", enableClear: "enableClear", iconPrefix: "iconPrefix" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}\n"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$8.MatPrefix, selector: "[matPrefix]" }, { type: i1$8.MatSuffix, selector: "[matSuffix]" }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
 __decorate([
     TrackExternal({ defaultValue: false }),
     __metadata("design:type", ValueModel)
@@ -2181,13 +2117,9 @@ __decorate([
     StoreInValueModel('enableClearModel'),
     __metadata("design:type", Boolean)
 ], StringInputComponent.prototype, "enableClear", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: StringInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: StringInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-string-input',
-                    templateUrl: './string-input.component.html',
-                    styleUrls: ['./string-input.component.scss']
-                }]
+            args: [{ selector: 'aup-string-input', template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n", styles: ["button[disabled]{visibility:hidden}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { autocomplete: [{
                 type: Input
             }], enableClearModel: [{
@@ -2209,15 +2141,11 @@ class TextInputComponent extends AbstractValueInputComponent {
     ngOnInit() {
     }
 }
-TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TextInputComponent, selector: "aup-text-input", inputs: { rows: "rows", cols: "cols" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.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"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TextInputComponent, decorators: [{
+TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TextInputComponent, selector: "aup-text-input", inputs: { rows: "rows", cols: "cols" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.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"], components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: FocusBindingDirective, selector: "[pectinFocusBinding]", inputs: ["pectinFocusBinding", "focusBindingTarget"] }, { type: i1$8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$8.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-text-input',
-                    templateUrl: './text-input.component.html',
-                    styleUrls: ['./text-input.component.scss']
-                }]
+            args: [{ selector: 'aup-text-input', template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <textarea matInput\n            placeholder=\"{{placeholder}}\"\n            [(ngModel)]=\"componentValueModel.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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { rows: [{
                 type: Input
             }], cols: [{
@@ -2234,8 +2162,8 @@ class LoadingContainerComponent extends GarbageCollector {
     ngOnInit() {
     }
 }
-LoadingContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: LoadingContainerComponent, selector: "aup-loading-container", inputs: { loadingModel: "loadingModel", loading: "loading", messageModel: "messageModel", message: "message" }, host: { properties: { "class": "this.state" } }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"!loadingModel.value\"></ng-content>\n<section *ngIf=\"loadingModel.value\" class=\"loading-indicator-overlay\">\n  <div class=\"loading-message\">\n    <p>{{messageModel.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;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-message{display:inline-block;text-align:center;width:10em}\n"], components: [{ type: i1$a.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+LoadingContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadingContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LoadingContainerComponent, selector: "aup-loading-container", inputs: { loadingModel: "loadingModel", loading: "loading", messageModel: "messageModel", message: "message" }, host: { properties: { "class": "this.state" } }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"!loadingModel.value\"></ng-content>\n<section *ngIf=\"loadingModel.value\" class=\"loading-indicator-overlay\">\n  <div class=\"loading-message\">\n    <p>{{messageModel.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;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-message{display:inline-block;text-align:center;width:10em}\n"], components: [{ type: i1$a.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
@@ -2252,13 +2180,9 @@ __decorate([
     StoreInValueModel("messageModel"),
     __metadata("design:type", String)
 ], LoadingContainerComponent.prototype, "message", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-loading-container',
-                    templateUrl: `./loading-container.component.html`,
-                    styleUrls: ['./loading-container.component.scss']
-                }]
+            args: [{ selector: 'aup-loading-container', template: "<ng-content *ngIf=\"!loadingModel.value\"></ng-content>\n<section *ngIf=\"loadingModel.value\" class=\"loading-indicator-overlay\">\n  <div class=\"loading-message\">\n    <p>{{messageModel.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;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-message{display:inline-block;text-align:center;width:10em}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { loadingModel: [{
                 type: Input
             }], loading: [{
@@ -2276,15 +2200,11 @@ class NoopComponent {
     constructor() {
     }
 }
-NoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NoopComponent, selector: "aup-noop", ngImport: i0, template: "", styles: [":host{display:block}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NoopComponent, decorators: [{
+NoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: NoopComponent, selector: "aup-noop", ngImport: i0, template: "", styles: [":host{display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-noop',
-                    templateUrl: './noop.component.html',
-                    styleUrls: ['./noop.component.scss']
-                }]
+            args: [{ selector: 'aup-noop', template: "", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class SectionHeaderComponent extends DisposableComponent {
@@ -2298,15 +2218,11 @@ class SectionHeaderComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-SectionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SectionHeaderComponent, selector: "aup-section-header", inputs: { size: "size", borderTop: "borderTop", borderBottom: "borderBottom" }, host: { properties: { "class": "this.size", "class.border-top": "this.borderTop", "class.border-bottom": "this.borderBottom" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;--resolved-padding: var(--padding, var(--default-padding));--resolved-padding-right: var(--padding-right, calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color:#000000ab}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:#000000ab}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:#000000ab}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:#000000ab}:host.border-top{border-top:var(--pinstripe-border)}:host.border-bottom{border-bottom:var(--pinstripe-border)}span{white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}span.container-start{justify-content:flex-start}span.container-middle{justify-content:center;flex:1;width:0;overflow:hidden}span.container-end{justify-content:flex-end}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SectionHeaderComponent, decorators: [{
+SectionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SectionHeaderComponent, selector: "aup-section-header", inputs: { size: "size", borderTop: "borderTop", borderBottom: "borderBottom" }, host: { properties: { "class": "this.size", "class.border-top": "this.borderTop", "class.border-bottom": "this.borderBottom" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;--resolved-padding: var(--padding, var(--default-padding));--resolved-padding-right: var(--padding-right, calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color:#000000ab}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:#000000ab}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:#000000ab}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:#000000ab}:host.border-top{border-top:var(--pinstripe-border)}:host.border-bottom{border-bottom:var(--pinstripe-border)}span{white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}span.container-start{justify-content:flex-start}span.container-middle{justify-content:center;flex:1;width:0;overflow:hidden}span.container-end{justify-content:flex-end}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-section-header',
-                    templateUrl: './section-header.component.html',
-                    styleUrls: ['./section-header.component.scss']
-                }]
+            args: [{ selector: 'aup-section-header', template: "<span class=\"container-start\"><ng-content select=\"[header-start]\"></ng-content><ng-content></ng-content></span>\n<span class=\"container-middle\"><ng-content select=\"[header-center]\"></ng-content></span>\n<span class=\"container-end\"><ng-content select=\"[header-end]\"></ng-content></span>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;--resolved-padding: var(--padding, var(--default-padding));--resolved-padding-right: var(--padding-right, calc(var(--default-padding)/2));padding-left:var(--resolved-padding);padding-right:var(--resolved-padding-right);box-sizing:border-box}:host.has-back-button{padding-left:0}:host.toolbar{height:56px;min-height:56px}:host.toolbar span{font-weight:500;font-size:18px;color:#000000ab}:host.large{height:48px;min-height:48px}:host.large span{font-weight:500;font-size:14px;color:#000000ab}:host.medium{height:48px;min-height:48px}:host.medium span{font-weight:500;font-size:13px;color:#000000ab}:host.small{height:30px;min-height:30px}:host.small span{font-weight:300;font-size:12px;color:#000000ab}:host.border-top{border-top:var(--pinstripe-border)}:host.border-bottom{border-bottom:var(--pinstripe-border)}span{white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center}span.container-start{justify-content:flex-start}span.container-middle{justify-content:center;flex:1;width:0;overflow:hidden}span.container-end{justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
             }, {
@@ -2341,9 +2257,9 @@ class SwitchCaseWhenDirective extends SwitchCaseOption {
         return this.aupSwitchCaseWhen === value;
     }
 }
-SwitchCaseWhenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SwitchCaseWhenDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-SwitchCaseWhenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SwitchCaseWhenDirective, selector: "[aupSwitchCaseWhen]", inputs: { aupSwitchCaseWhen: "aupSwitchCaseWhen" }, providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SwitchCaseWhenDirective, decorators: [{
+SwitchCaseWhenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SwitchCaseWhenDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+SwitchCaseWhenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: SwitchCaseWhenDirective, selector: "[aupSwitchCaseWhen]", inputs: { aupSwitchCaseWhen: "aupSwitchCaseWhen" }, providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseWhenDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SwitchCaseWhenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[aupSwitchCaseWhen]',
@@ -2361,9 +2277,9 @@ class SwitchCaseDefaultDirective extends SwitchCaseOption {
         return false;
     }
 }
-SwitchCaseDefaultDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SwitchCaseDefaultDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-SwitchCaseDefaultDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SwitchCaseDefaultDirective, selector: "[aupSwitchCaseDefault]", providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SwitchCaseDefaultDirective, decorators: [{
+SwitchCaseDefaultDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SwitchCaseDefaultDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+SwitchCaseDefaultDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: SwitchCaseDefaultDirective, selector: "[aupSwitchCaseDefault]", providers: [{ provide: SwitchCaseOption, useExisting: SwitchCaseDefaultDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SwitchCaseDefaultDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[aupSwitchCaseDefault]',
@@ -2421,8 +2337,8 @@ class SwitchCaseComponent extends DisposableComponent {
         }
     }
 }
-SwitchCaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SwitchCaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SwitchCaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SwitchCaseComponent, selector: "aup-switch-case", inputs: { switchModel: "switchModel", switch: "switch" }, queries: [{ propertyName: "switchCaseOptions", predicate: SwitchCaseOption }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}\n"], components: [{ type: i1$b.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$b.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SwitchCaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SwitchCaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SwitchCaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SwitchCaseComponent, selector: "aup-switch-case", inputs: { switchModel: "switchModel", switch: "switch" }, queries: [{ propertyName: "switchCaseOptions", predicate: SwitchCaseOption }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}\n"], components: [{ type: i1$b.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$b.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
@@ -2431,13 +2347,9 @@ __decorate([
     StoreInValueModel('switchModel'),
     __metadata("design:type", Object)
 ], SwitchCaseComponent.prototype, "switch", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SwitchCaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SwitchCaseComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-switch-case',
-                    templateUrl: './switch-case.component.html',
-                    styleUrls: ['./switch-case.component.scss']
-                }]
+            args: [{ selector: 'aup-switch-case', template: "<mat-tab-group class=\"content-wrapper\" no-tab-header full-height-tabs [selectedIndex]=\"selectedIndex\">\n  <mat-tab *ngFor=\"let option of switchCaseOptions\">\n    <ng-template [ngTemplateOutlet]=\"option.templateRef\"></ng-template>\n  </mat-tab>\n</mat-tab-group>\n\n\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}mat-tab-group{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { switchModel: [{
                 type: Input
             }], switch: [{
@@ -2525,9 +2437,9 @@ class ResizeAwareComponent extends DisposableComponent {
         this._boundsModel.value = Bounds.ofElement(this.nativeElement);
     }
 }
-ResizeAwareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ResizeAwareComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ResizeAwareComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ResizeAwareComponent, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ResizeAwareComponent, decorators: [{
+ResizeAwareComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ResizeAwareComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ResizeAwareComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: ResizeAwareComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ResizeAwareComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
@@ -2632,15 +2544,11 @@ class DefaultCellRendererComponent {
         return this._value;
     }
 }
-DefaultCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DefaultCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: DefaultCellRendererComponent, selector: "aup-default-cell-renderer", inputs: { value: "value" }, ngImport: i0, template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n", styles: [""], pipes: { "aupHighlight": HighlightPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DefaultCellRendererComponent, decorators: [{
+DefaultCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DefaultCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DefaultCellRendererComponent, selector: "aup-default-cell-renderer", inputs: { value: "value" }, ngImport: i0, template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n", styles: [""], pipes: { "aupHighlight": HighlightPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultCellRendererComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-default-cell-renderer',
-                    templateUrl: './default-cell-renderer.component.html',
-                    styleUrls: ['./default-cell-renderer.component.scss']
-                }]
+            args: [{ selector: 'aup-default-cell-renderer', template: "<span [innerHTML]=\"value| aupHighlight\"></span>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { value: [{
                 type: Input
             }] } });
@@ -2649,40 +2557,15 @@ class DefaultHeaderCellRendererComponent {
     constructor() {
     }
 }
-DefaultHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DefaultHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DefaultHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: DefaultHeaderCellRendererComponent, selector: "aup-default-header-renderer", inputs: { headerText: "headerText" }, ngImport: i0, template: "{{headerText}}\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DefaultHeaderCellRendererComponent, decorators: [{
+DefaultHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DefaultHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DefaultHeaderCellRendererComponent, selector: "aup-default-header-renderer", inputs: { headerText: "headerText" }, ngImport: i0, template: "{{headerText}}\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultHeaderCellRendererComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-default-header-renderer',
-                    templateUrl: './default-header-cell-renderer.component.html',
-                    styleUrls: ['./default-header-cell-renderer.component.scss']
-                }]
+            args: [{ selector: 'aup-default-header-renderer', template: "{{headerText}}\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { headerText: [{
                 type: Input
             }] } });
 
-class EditSession extends GarbageCollector {
-    constructor(rowId, row, form, saveCommand) {
-        super();
-        this.rowId = rowId;
-        this.form = form;
-        this.saveCommand = saveCommand;
-        this._liveRowValue = new MutableValueModel();
-        this.liveRowValue = this._liveRowValue.readonly;
-        this.form.load(row);
-        this._liveRowValue.value = row;
-        this.form.onEdit(() => {
-            // if (!this._liveRowValue.value[immerable]) {
-            //   console.warn()
-            // }
-            this._liveRowValue.value = produce(this._liveRowValue.value, draft => {
-                this.form.writeDirtyStateTo(draft);
-            });
-        });
-    }
-}
-
 class EditRowControls extends DisposableComponent {
     constructor() {
         super();
@@ -2712,19 +2595,15 @@ class EditRowControls extends DisposableComponent {
         return (_a = this.editSession) === null || _a === void 0 ? void 0 : _a.form;
     }
 }
-EditRowControls.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EditRowControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditRowControls.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: EditRowControls, 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"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+EditRowControls.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditRowControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EditRowControls.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: EditRowControls, 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"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
 ], EditRowControls.prototype, "editRowCommand", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EditRowControls, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EditRowControls, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-row-editor-controls',
-                    templateUrl: './edit-row-controls.component.html',
-                    styleUrls: ['./edit-row-controls.component.scss']
-                }]
+            args: [{ selector: 'aup-row-editor-controls', 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { row: [{
                 type: Input
             }], editRowCommand: [{
@@ -2746,15 +2625,11 @@ class SelectCellRendererComponent extends DisposableComponent {
         return (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.isSelected(this.row);
     }
 }
-SelectCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SelectCellRendererComponent, selector: "aup-select-cell-renderer", inputs: { row: "row" }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectCellRendererComponent, decorators: [{
+SelectCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectCellRendererComponent, selector: "aup-select-cell-renderer", inputs: { row: "row" }, usesInheritance: true, ngImport: i0, template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectCellRendererComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-select-cell-renderer',
-                    templateUrl: './select-cell-renderer.component.html',
-                    styleUrls: ['./select-cell-renderer.component.scss']
-                }]
+            args: [{ selector: 'aup-select-cell-renderer', template: "<mat-checkbox [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\"></mat-checkbox>\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { row: [{
                 type: Input
             }] } });
@@ -2778,15 +2653,11 @@ class SelectHeaderCellRendererComponent extends DisposableComponent {
         return this.enableHeaderControls && this.selectionModel.getDelegate() instanceof MultipleSelectionModel;
     }
 }
-SelectHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SelectHeaderCellRendererComponent, selector: "aup-select-header-cell-renderer", usesInheritance: true, ngImport: i0, template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectHeaderCellRendererComponent, decorators: [{
+SelectHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectHeaderCellRendererComponent, selector: "aup-select-header-cell-renderer", usesInheritance: true, ngImport: i0, template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n", styles: [""], components: [{ type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectHeaderCellRendererComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-select-header-cell-renderer',
-                    templateUrl: './select-header-cell-renderer.component.html',
-                    styleUrls: ['./select-header-cell-renderer.component.scss']
-                }]
+            args: [{ selector: 'aup-select-header-cell-renderer', template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n", styles: [""] }]
         }], ctorParameters: function () { return []; } });
 
 const noop = () => {
@@ -3039,12 +2910,16 @@ class ListPropertyColumnModel extends ColumnModel {
         this._format = (value) => value.map(v => v === null || v === void 0 ? void 0 : v.toString()).join(', ');
         this.cellRenderer(DefaultCellRendererComponent);
         this.useTextSearchPredicate((row, regex) => {
-            return regex.test(this._format(row[this.property]));
+            let rowElement = row[this.property];
+            // @ts-ignore Started complaining in ts 4.5.. but I think my logic is correct...
+            return regex.test(this._format(rowElement));
         });
     }
     cellRenderer(componentType) {
         this.configureCellRenderer(new ComponentCellRendererPortalRef(componentType, (component, rowData) => {
-            component.value = this._format(rowData.row[this.property]);
+            let rowElement = rowData.row[this.property];
+            // @ts-ignore Started complaining in ts 4.5.. but I think my logic is correct...
+            component.value = this._format(rowElement);
         }));
         return this;
     }
@@ -3296,8 +3171,8 @@ class AbstractTableComponent extends ResizeAwareComponent {
         return classes;
     }
 }
-AbstractTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AbstractTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractTableComponent, selector: "aup-abstract-table", inputs: { showHeaderModel: "showHeaderModel", showHeader: "showHeader", enableScrolling: "enableScrolling" }, host: { properties: { "class.enable-scrolling": "this.enableScrolling", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AbstractTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractTableComponent, selector: "aup-abstract-table", inputs: { showHeaderModel: "showHeaderModel", showHeader: "showHeader", enableScrolling: "enableScrolling" }, host: { properties: { "class.enable-scrolling": "this.enableScrolling", "class": "this.baseCssClass", "class.hide-header": "this.hideHeader" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     TrackExternal({ defaultValue: true }),
     __metadata("design:type", ValueModel)
@@ -3306,7 +3181,7 @@ __decorate([
     StoreInValueModel('showHeaderModel'),
     __metadata("design:type", Boolean)
 ], AbstractTableComponent.prototype, "showHeader", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'aup-abstract-table',
@@ -3343,9 +3218,9 @@ class ColumnTemplateDirective {
         this.host.registerColumnTemplate(this.aupColumnTemplateColumnId, this.templateRef, this.viewContainer, this.aupColumnTemplateFillCell, (_a = this.aupColumnTemplateAutoPadChild) !== null && _a !== void 0 ? _a : this.aupColumnTemplateFillCell);
     }
 }
-ColumnTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ColumnTemplateDirective, deps: [{ token: AbstractTableComponent }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ColumnTemplateDirective, selector: "[aupColumnTemplate]", inputs: { aupColumnTemplate: "aupColumnTemplate", aupColumnTemplateColumnId: "aupColumnTemplateColumnId", aupColumnTemplateFillCell: "aupColumnTemplateFillCell", aupColumnTemplateAutoPadChild: "aupColumnTemplateAutoPadChild" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ColumnTemplateDirective, decorators: [{
+ColumnTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ColumnTemplateDirective, deps: [{ token: AbstractTableComponent }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: ColumnTemplateDirective, selector: "[aupColumnTemplate]", inputs: { aupColumnTemplate: "aupColumnTemplate", aupColumnTemplateColumnId: "aupColumnTemplateColumnId", aupColumnTemplateFillCell: "aupColumnTemplateFillCell", aupColumnTemplateAutoPadChild: "aupColumnTemplateAutoPadChild" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ColumnTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[aupColumnTemplate]'
@@ -3360,49 +3235,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                 type: Input
             }] } });
 
-class ColumnListModel extends AbstractComputedListModel {
+class TableCellRendererComponent extends DisposableComponent {
     constructor() {
         super();
-        this._allColumns = new MutableListModel();
-        const { chain } = Dsl.disposeWith(this);
-        this.columnsById = chain(this._allColumns).indexBy('columnId');
+        this.defaultClassNames = 'aup-cell-renderer';
+        this.fillCell = false;
+        this.padChild = false;
+        this.editRowCommand = Command.create(() => {
+            this.tableModel.startEditSession(this.row);
+        });
     }
-    get allColumns() {
-        return this._allColumns.readonly;
+    ngOnInit() {
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.firstEditableColumn = chain(this.tableModel.firstEditableColumn).equals(this.column); // this would break if the column changed.
+        this.column.attachCell(this);
     }
-    getColumn(id) {
-        return this.columnsById.get(id);
+    hasActiveEditor() {
+        return !!this.editSession && !!this.column.hasEditorPortal();
     }
-    hasColumn(id) {
-        return !!this.columnsById.get(id);
+    initialiseRenderer(ref) {
+        this.column.onRendererAttached(this, ref);
     }
-    addColumn(column, index) {
-        if (this.hasColumn(column.columnId)) {
-            lang.illegalState(`Column with id=${column.columnId} already exists`);
+    initialiseEditor(ref) {
+        this.column.onEditorAttached(this, ref);
+        if (this.firstEditableColumn.value) {
+            // @see https://github.com/angular/components/issues/12070
+            setTimeout(() => this.tryAndFocusEditor(ref));
         }
-        this.registerDisposable(column);
-        this.runInTransaction(() => {
-            if (!isNil(index)) {
-                this._allColumns.insert(index, column);
+    }
+    tryAndFocusEditor(ref) {
+        var _a;
+        if (ref instanceof ComponentRef) {
+            const editor = ref.instance;
+            // CellEditorComponent<Row> | CellListEditorComponent<Row>
+            if (editor.requestFocus) {
+                editor.requestFocus();
             }
             else {
-                this._allColumns.push(column);
+                const model = (editor['valueModel'] || editor['listModel']);
+                (_a = model === null || model === void 0 ? void 0 : model.focusContext) === null || _a === void 0 ? void 0 : _a.requestFocus();
             }
-            this.registerDisposable(this.trackSource(column.visible));
-        });
-        return column;
+        }
     }
-    doComputeValue() {
-        return this._allColumns.value.filter(c => c.visible.value);
+    // @Trace()
+    ngOnChanges(changes) {
+        this.column.updatePortalContent(this);
+    }
+    getRendererPortal() {
+        return this[CELL_RENDERER_PORTAL];
+    }
+    getEditorPortal() {
+        return this[CELL_EDITOR_PORTAL];
+    }
+    getRowData() {
+        return {
+            row: this.row,
+            editSession: this.editSession,
+            editRowCommand: this.editRowCommand
+        };
     }
 }
+TableCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableCellRendererComponent, selector: "aup-table-cell-renderer", inputs: { row: "row", column: "column", editSession: "editSession", tableModel: "tableModel" }, host: { properties: { "class": "this.defaultClassNames", "class.fillCell": "this.fillCell", "class.padChild": "this.padChild" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event)\"></ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-table-cell-renderer', template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event)\"></ng-container>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { row: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], editSession: [{
+                type: Input
+            }], tableModel: [{
+                type: Input
+            }], defaultClassNames: [{
+                type: HostBinding,
+                args: ['class']
+            }], fillCell: [{
+                type: HostBinding,
+                args: ['class.fillCell']
+            }], padChild: [{
+                type: HostBinding,
+                args: ['class.padChild']
+            }] } });
 
-// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
-// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
-class RowClass {
-    constructor(className, matches) {
-        this.className = className;
-        this.matches = matches;
+class TableHeaderCellRendererComponent {
+    constructor() {
+        this.defaultClassNames = 'aup-header-cell-renderer';
+    }
+    ngOnInit() {
+        this.column.attachHeaderCell(this);
+    }
+    // @Trace()
+    initialiseHeader(ref) {
+        this.column.onHeaderAttached(this, ref);
+    }
+    getPortal() {
+        return this[HEADER_CELL_RENDERER_PORTAL];
+    }
+}
+TableHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableHeaderCellRendererComponent, selector: "aup-table-header-cell-renderer", inputs: { column: "column" }, host: { properties: { "class": "this.defaultClassNames" } }, ngImport: i0, template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event)\"></ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"], directives: [{ type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableHeaderCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-table-header-cell-renderer', template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event)\"></ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { column: [{
+                type: Input
+            }], defaultClassNames: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MenuItemData {
+    constructor(factory, face) {
+        this.factory = factory;
+        this.face = face;
+    }
+}
+/**
+ *
+ */
+class TableRowMenuComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.actions = [];
+        this.moreActions = [];
+    }
+    registerAction(commandFactory, properties) {
+        this.actions.push(new MenuItemData(commandFactory, properties));
+    }
+    registerMoreAction(commandFactory, properties) {
+        this.moreActions.push(new MenuItemData(commandFactory, properties));
+    }
+    createMoreMenuCommand(item, value) {
+        const { when } = Dsl.disposeWith(this);
+        const command = item.factory.create(value);
+        when(command.busy).becomesFalsey(() => {
+            this.closeMoreMenu();
+        });
+        return command;
+    }
+    closeMoreMenu() {
+        this.menu.closeMenu();
+    }
+}
+TableRowMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableRowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableRowMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableRowMenuComponent, selector: "aup-table-row-menu", inputs: { value: "value" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+      <aup-tool-bar>
+          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
+                       [face]="action.face"></aup-command>
+      </aup-tool-bar>
+      <ng-container *ngIf="moreActions.length > 0">
+          <aup-more-menu>
+              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
+                           [face]="action.face"></aup-command>
+          </aup-more-menu>
+      </ng-container>
+  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:row;align-items:center}\n"], components: [{ type: ToolBarComponent, selector: "aup-tool-bar" }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: MoreMenuComponent, selector: "aup-more-menu", inputs: ["tooltip"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableRowMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'aup-table-row-menu',
+                    template: `
+      <aup-tool-bar>
+          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
+                       [face]="action.face"></aup-command>
+      </aup-tool-bar>
+      <ng-container *ngIf="moreActions.length > 0">
+          <aup-more-menu>
+              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
+                           [face]="action.face"></aup-command>
+          </aup-more-menu>
+      </ng-container>
+  `,
+                    styles: [`:host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+  }`]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], menu: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }] } });
+
+class ColumnListModel extends AbstractComputedListModel {
+    constructor() {
+        super();
+        this._allColumns = new MutableListModel();
+        const { chain } = Dsl.disposeWith(this);
+        this.columnsById = chain(this._allColumns).indexBy('columnId');
+    }
+    get allColumns() {
+        return this._allColumns.readonly;
+    }
+    getColumn(id) {
+        return this.columnsById.get(id);
+    }
+    hasColumn(id) {
+        return !!this.columnsById.get(id);
+    }
+    addColumn(column, index) {
+        if (this.hasColumn(column.columnId)) {
+            lang.illegalState(`Column with id=${column.columnId} already exists`);
+        }
+        this.registerDisposable(column);
+        this.runInTransaction(() => {
+            if (!isNil(index)) {
+                this._allColumns.insert(index, column);
+            }
+            else {
+                this._allColumns.push(column);
+            }
+            this.registerDisposable(this.trackSource(column.visible));
+        });
+        return column;
+    }
+    doComputeValue() {
+        return this._allColumns.value.filter(c => c.visible.value);
+    }
+}
+
+class EditSession extends GarbageCollector {
+    constructor(rowId, row, form, saveCommand) {
+        super();
+        this.rowId = rowId;
+        this.form = form;
+        this.saveCommand = saveCommand;
+        this._liveRowValue = new MutableValueModel();
+        this.liveRowValue = this._liveRowValue.readonly;
+        this.form.load(row);
+        this._liveRowValue.value = row;
+        this.form.onEdit(() => {
+            // if (!this._liveRowValue.value[immerable]) {
+            //   console.warn()
+            // }
+            this._liveRowValue.value = produce(this._liveRowValue.value, draft => {
+                this.form.writeDirtyStateTo(draft);
+            });
+        });
+    }
+}
+
+// export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
+// export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+class RowClass {
+    constructor(className, matches) {
+        this.className = className;
+        this.matches = matches;
     }
 }
 class AbstractTableModel extends GarbageCollector {
@@ -3580,200 +3662,6 @@ class AbstractTableModel extends GarbageCollector {
 }
 TrackExternal.oneTimeBinding(AbstractTableModel);
 
-class TableCellRendererComponent extends DisposableComponent {
-    constructor() {
-        super();
-        this.defaultClassNames = 'aup-cell-renderer';
-        this.fillCell = false;
-        this.padChild = false;
-        this.editRowCommand = Command.create(() => {
-            this.tableModel.startEditSession(this.row);
-        });
-    }
-    ngOnInit() {
-        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.firstEditableColumn = chain(this.tableModel.firstEditableColumn).equals(this.column); // this would break if the column changed.
-        this.column.attachCell(this);
-    }
-    hasActiveEditor() {
-        return !!this.editSession && !!this.column.hasEditorPortal();
-    }
-    initialiseRenderer(ref) {
-        this.column.onRendererAttached(this, ref);
-    }
-    initialiseEditor(ref) {
-        this.column.onEditorAttached(this, ref);
-        if (this.firstEditableColumn.value) {
-            // @see https://github.com/angular/components/issues/12070
-            setTimeout(() => this.tryAndFocusEditor(ref));
-        }
-    }
-    tryAndFocusEditor(ref) {
-        var _a;
-        if (ref instanceof ComponentRef) {
-            const editor = ref.instance;
-            // CellEditorComponent<Row> | CellListEditorComponent<Row>
-            if (editor.requestFocus) {
-                editor.requestFocus();
-            }
-            else {
-                const model = (editor['valueModel'] || editor['listModel']);
-                (_a = model === null || model === void 0 ? void 0 : model.focusContext) === null || _a === void 0 ? void 0 : _a.requestFocus();
-            }
-        }
-    }
-    // @Trace()
-    ngOnChanges(changes) {
-        this.column.updatePortalContent(this);
-    }
-    getRendererPortal() {
-        return this[CELL_RENDERER_PORTAL];
-    }
-    getEditorPortal() {
-        return this[CELL_EDITOR_PORTAL];
-    }
-    getRowData() {
-        return {
-            row: this.row,
-            editSession: this.editSession,
-            editRowCommand: this.editRowCommand
-        };
-    }
-}
-TableCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TableCellRendererComponent, selector: "aup-table-cell-renderer", inputs: { row: "row", column: "column", editSession: "editSession", tableModel: "tableModel" }, host: { properties: { "class": "this.defaultClassNames", "class.fillCell": "this.fillCell", "class.padChild": "this.padChild" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!hasActiveEditor()\" [cdkPortalOutlet]=\"getRendererPortal()\" (attached)=\"initialiseRenderer($event)\"></ng-container>\n<ng-container *ngIf=\"hasActiveEditor()\" [cdkPortalOutlet]=\"getEditorPortal()\" (attached)=\"initialiseEditor($event)\"></ng-container>\n", styles: [""], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'aup-table-cell-renderer',
-                    templateUrl: './table-cell-renderer.component.html',
-                    styleUrls: ['./table-cell-renderer.component.scss']
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { row: [{
-                type: Input
-            }], column: [{
-                type: Input
-            }], editSession: [{
-                type: Input
-            }], tableModel: [{
-                type: Input
-            }], defaultClassNames: [{
-                type: HostBinding,
-                args: ['class']
-            }], fillCell: [{
-                type: HostBinding,
-                args: ['class.fillCell']
-            }], padChild: [{
-                type: HostBinding,
-                args: ['class.padChild']
-            }] } });
-
-class TableHeaderCellRendererComponent {
-    constructor() {
-        this.defaultClassNames = 'aup-header-cell-renderer';
-    }
-    ngOnInit() {
-        this.column.attachHeaderCell(this);
-    }
-    // @Trace()
-    initialiseHeader(ref) {
-        this.column.onHeaderAttached(this, ref);
-    }
-    getPortal() {
-        return this[HEADER_CELL_RENDERER_PORTAL];
-    }
-}
-TableHeaderCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableHeaderCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TableHeaderCellRendererComponent, selector: "aup-table-header-cell-renderer", inputs: { column: "column" }, host: { properties: { "class": "this.defaultClassNames" } }, ngImport: i0, template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event)\"></ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}\n"], directives: [{ type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableHeaderCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'aup-table-header-cell-renderer',
-                    templateUrl: './table-header-cell-renderer.component.html',
-                    styleUrls: ['./table-header-cell-renderer.component.scss']
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { column: [{
-                type: Input
-            }], defaultClassNames: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class MenuItemData {
-    constructor(factory, face) {
-        this.factory = factory;
-        this.face = face;
-    }
-}
-/**
- *
- */
-class TableRowMenuComponent extends DisposableComponent {
-    constructor() {
-        super();
-        this.actions = [];
-        this.moreActions = [];
-    }
-    registerAction(commandFactory, properties) {
-        this.actions.push(new MenuItemData(commandFactory, properties));
-    }
-    registerMoreAction(commandFactory, properties) {
-        this.moreActions.push(new MenuItemData(commandFactory, properties));
-    }
-    createMoreMenuCommand(item, value) {
-        const { when } = Dsl.disposeWith(this);
-        const command = item.factory.create(value);
-        when(command.busy).becomesFalsey(() => {
-            this.closeMoreMenu();
-        });
-        return command;
-    }
-    closeMoreMenu() {
-        this.menu.closeMenu();
-    }
-}
-TableRowMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableRowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableRowMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TableRowMenuComponent, selector: "aup-table-row-menu", inputs: { value: "value" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenuTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-      <aup-tool-bar>
-          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
-                       [face]="action.face"></aup-command>
-      </aup-tool-bar>
-      <ng-container *ngIf="moreActions.length > 0">
-          <aup-more-menu>
-              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
-                           [face]="action.face"></aup-command>
-          </aup-more-menu>
-      </ng-container>
-  `, isInline: true, styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"], components: [{ type: ToolBarComponent, selector: "aup-tool-bar" }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: MoreMenuComponent, selector: "aup-more-menu", inputs: ["tooltip"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableRowMenuComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'aup-table-row-menu',
-                    template: `
-      <aup-tool-bar>
-          <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
-                       [face]="action.face"></aup-command>
-      </aup-tool-bar>
-      <ng-container *ngIf="moreActions.length > 0">
-          <aup-more-menu>
-              <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
-                           [face]="action.face"></aup-command>
-          </aup-more-menu>
-      </ng-container>
-  `,
-                    styles: [`:host {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-  }`]
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
-                type: Input
-            }], menu: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
-            }] } });
-
 /**
  * Create your model:
  * @example
@@ -3842,24 +3730,19 @@ class TableComponent extends AbstractTableComponent {
         return this.tableModel;
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel" }, providers: [
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TableComponent, selector: "aup-table", inputs: { tableModel: "tableModel" }, providers: [
         { provide: AbstractTableComponent, useExisting: TableComponent }
     ], usesInheritance: true, ngImport: i0, template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"], components: [{ type: i1$c.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: TableHeaderCellRendererComponent, selector: "aup-table-header-cell-renderer", inputs: ["column"] }, { type: TableCellRendererComponent, selector: "aup-table-cell-renderer", inputs: ["row", "column", "editSession", "tableModel"] }, { type: i1$c.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$c.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$c.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$c.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$c.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$c.MatCellDef, selector: "[matCellDef]" }, { type: i1$c.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$c.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$c.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", AbstractTableModel)
 ], TableComponent.prototype, "tableModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-table',
-                    templateUrl: '../table.component.html',
-                    styleUrls: ['../table.component.scss'],
-                    providers: [
+            args: [{ selector: 'aup-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TableComponent }
-                    ]
-                }]
+                    ], template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { tableModel: [{
                 type: Input
             }] } });
@@ -3889,15 +3772,11 @@ class TreeInheritanceIconComponent {
         return TreeInheritanceIconComponent.HAS_TAIL.includes(this.type);
     }
 }
-TreeInheritanceIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TreeInheritanceIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeInheritanceIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TreeInheritanceIconComponent, selector: "aup-tree-inheritance-icon", inputs: { type: "type", pixelWidth: "pixelWidth", pixelHeight: "pixelHeight" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"pixelWidth\" [attr.height]=\"pixelHeight\" [attr.viewBox]=\"viewBox\">\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect *ngIf=\"hasHead()\"  width=\"1\" height=\"32.5\" x=\"11.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTail()\" width=\"1\" height=\"32.5\" x=\"11.5\" y=\"31.5\" fill=\"currentColor\"/>\n\n    <rect *ngIf=\"hasLeadIn()\" width=\"12\" height=\"1\" y=\"31.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTerminal()\" width=\"12\" height=\"1\" x=\"12\" y=\"31.5\" fill=\"currentColor\"/>\n  </g>\n</svg>\n", styles: [":host{position:relative;color:inherit}svg{color:var(--line-color);display:block}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TreeInheritanceIconComponent, decorators: [{
+TreeInheritanceIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeInheritanceIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeInheritanceIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TreeInheritanceIconComponent, selector: "aup-tree-inheritance-icon", inputs: { type: "type", pixelWidth: "pixelWidth", pixelHeight: "pixelHeight" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"pixelWidth\" [attr.height]=\"pixelHeight\" [attr.viewBox]=\"viewBox\">\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect *ngIf=\"hasHead()\"  width=\"1\" height=\"32.5\" x=\"11.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTail()\" width=\"1\" height=\"32.5\" x=\"11.5\" y=\"31.5\" fill=\"currentColor\"/>\n\n    <rect *ngIf=\"hasLeadIn()\" width=\"12\" height=\"1\" y=\"31.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTerminal()\" width=\"12\" height=\"1\" x=\"12\" y=\"31.5\" fill=\"currentColor\"/>\n  </g>\n</svg>\n", styles: [":host{position:relative;color:inherit}svg{color:var(--line-color);display:block}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeInheritanceIconComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-tree-inheritance-icon',
-                    templateUrl: './tree-inheritance-icon.component.svg',
-                    styleUrls: ['./tree-inheritance-icon.component.scss']
-                }]
+            args: [{ selector: 'aup-tree-inheritance-icon', template: "<svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"pixelWidth\" [attr.height]=\"pixelHeight\" [attr.viewBox]=\"viewBox\">\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect *ngIf=\"hasHead()\"  width=\"1\" height=\"32.5\" x=\"11.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTail()\" width=\"1\" height=\"32.5\" x=\"11.5\" y=\"31.5\" fill=\"currentColor\"/>\n\n    <rect *ngIf=\"hasLeadIn()\" width=\"12\" height=\"1\" y=\"31.5\" fill=\"currentColor\"/>\n    <rect *ngIf=\"hasTerminal()\" width=\"12\" height=\"1\" x=\"12\" y=\"31.5\" fill=\"currentColor\"/>\n  </g>\n</svg>\n", styles: [":host{position:relative;color:inherit}svg{color:var(--line-color);display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { type: [{
                 type: Input
             }, {
@@ -4104,6 +3983,87 @@ var DecoratedTreeNode;
     DecoratedTreeNode.Decorator = Decorator;
 })(DecoratedTreeNode || (DecoratedTreeNode = {}));
 
+class TreeLabelCellRendererComponent extends DisposableComponent {
+    constructor() {
+        super();
+        this.nodeModel = new MutableValueModel();
+        const { chain } = Dsl.disposeWith(this);
+        this.iconList = chain(this.nodeModel).mapToList(node => {
+            const icons = DecoratedTreeNode.getDecorator(node).ancestors().slice(1).map(ancestor => {
+                return DecoratedTreeNode.getDecorator(ancestor).isLastChild() ? TreeInheritanceIconComponent.Type.ICON_BLANK : TreeInheritanceIconComponent.Type.ICON_THROUGH;
+            });
+            if (!DecoratedTreeNode.getDecorator(node).isRoot()) {
+                icons.push(DecoratedTreeNode.getDecorator(node).isLastChild() ? TreeInheritanceIconComponent.Type.ICON_INHERITED_TERMINAL : TreeInheritanceIconComponent.Type.ICON_INHERITED_THROUGH_TERMINAL);
+            }
+            return icons;
+        });
+    }
+    ngOnInit() {
+        const { chain } = Dsl.disposeWith(this);
+        this.canExpand = chain(this.nodeModel).map(node => {
+            return DecoratedTreeNode.getDecorator(node).hasChildren() && this.treeTableModel.isCollapsed(node);
+        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
+        this.canCollapse = chain(this.nodeModel).map(node => {
+            return DecoratedTreeNode.getDecorator(node).hasChildren() && !this.treeTableModel.isCollapsed(node);
+        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
+        this.iconModel = chain(this.nodeModel).map(node => {
+            var _a;
+            const expanded = this.treeTableModel.treeExpansionModel.isExpanded(this.node);
+            const iconFactory = (_a = this.iconFactory) !== null && _a !== void 0 ? _a : TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY;
+            return iconFactory(node, expanded, TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY(node, expanded, undefined));
+        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
+    }
+    get isRoot() {
+        return DecoratedTreeNode.getDecorator(this.node).isRoot();
+    }
+    get isLeaf() {
+        return DecoratedTreeNode.getDecorator(this.node).isLeaf();
+    }
+    get node() {
+        return this.nodeModel.value;
+    }
+    // @Trace()
+    expandOrCollapse($event, node) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        this.treeTableModel.isCollapsed(node) ? this.treeTableModel.expand(node) : this.treeTableModel.collapse(node);
+    }
+}
+TreeLabelCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeLabelCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TreeLabelCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TreeLabelCellRendererComponent, selector: "aup-tree-label-cell-renderer", inputs: { value: "value", label: "label", iconFactory: "iconFactory", treeTableModel: "treeTableModel" }, host: { properties: { "class.root": "this.isRoot", "class.leaf": "this.isLeaf" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"tree-icons\">\n  <aup-tree-inheritance-icon *ngFor=\"let type of iconList.value\" [type]=\"type\"></aup-tree-inheritance-icon>\n  <aup-icon *ngIf=\"iconModel.value\"\n            [icon]=\"iconModel.value\"\n            [class.clickable]=\"canExpand.value || canCollapse.value\"\n            (click)=\"expandOrCollapse($event, node)\" ></aup-icon>\n</div>\n<div class=\"label\">{{label}}</div>\n", styles: [":host{--line-color: #ddd;--node-color: #999;display:inline-flex;flex-direction:row;align-items:stretch}:host div.label{display:flex;flex-direction:row;align-items:center;white-space:nowrap;padding-left:6px}:host div.tree-icons{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:1fr;align-items:stretch;justify-content:stretch}:host div.tree-icons aup-icon{align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-tree-inheritance-icon,:host div.tree-icons aup-icon{margin-left:4px}\n"], components: [{ type: TreeInheritanceIconComponent, selector: "aup-tree-inheritance-icon", inputs: ["type", "pixelWidth", "pixelHeight"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+__decorate([
+    StoreInValueModel('nodeModel'),
+    __metadata("design:type", Object)
+], TreeLabelCellRendererComponent.prototype, "value", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeLabelCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-tree-label-cell-renderer', template: "<div class=\"tree-icons\">\n  <aup-tree-inheritance-icon *ngFor=\"let type of iconList.value\" [type]=\"type\"></aup-tree-inheritance-icon>\n  <aup-icon *ngIf=\"iconModel.value\"\n            [icon]=\"iconModel.value\"\n            [class.clickable]=\"canExpand.value || canCollapse.value\"\n            (click)=\"expandOrCollapse($event, node)\" ></aup-icon>\n</div>\n<div class=\"label\">{{label}}</div>\n", styles: [":host{--line-color: #ddd;--node-color: #999;display:inline-flex;flex-direction:row;align-items:stretch}:host div.label{display:flex;flex-direction:row;align-items:center;white-space:nowrap;padding-left:6px}:host div.tree-icons{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:1fr;align-items:stretch;justify-content:stretch}:host div.tree-icons aup-icon{align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-tree-inheritance-icon,:host div.tree-icons aup-icon{margin-left:4px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], iconFactory: [{
+                type: Input
+            }], treeTableModel: [{
+                type: Input
+            }], isRoot: [{
+                type: HostBinding,
+                args: ['class.root']
+            }], isLeaf: [{
+                type: HostBinding,
+                args: ['class.leaf']
+            }] } });
+(function (TreeLabelCellRendererComponent) {
+    TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY = (node, expanded, defaultIcon) => {
+        const isLeaf = DecoratedTreeNode.getDecorator(node).isLeaf();
+        return isLeaf ?
+            undefined :
+            expanded ?
+                'mat:expand_more' :
+                'mat:chevron_right';
+    };
+})(TreeLabelCellRendererComponent || (TreeLabelCellRendererComponent = {}));
+
 class FlattenedTreeListModel extends ComputedListModel {
     constructor(source, childRef, expansionModel) {
         super(source, {
@@ -4302,91 +4262,6 @@ class TreeTableModel extends AbstractTableModel {
 //
 // }
 
-class TreeLabelCellRendererComponent extends DisposableComponent {
-    constructor() {
-        super();
-        this.nodeModel = new MutableValueModel();
-        const { chain } = Dsl.disposeWith(this);
-        this.iconList = chain(this.nodeModel).mapToList(node => {
-            const icons = DecoratedTreeNode.getDecorator(node).ancestors().slice(1).map(ancestor => {
-                return DecoratedTreeNode.getDecorator(ancestor).isLastChild() ? TreeInheritanceIconComponent.Type.ICON_BLANK : TreeInheritanceIconComponent.Type.ICON_THROUGH;
-            });
-            if (!DecoratedTreeNode.getDecorator(node).isRoot()) {
-                icons.push(DecoratedTreeNode.getDecorator(node).isLastChild() ? TreeInheritanceIconComponent.Type.ICON_INHERITED_TERMINAL : TreeInheritanceIconComponent.Type.ICON_INHERITED_THROUGH_TERMINAL);
-            }
-            return icons;
-        });
-    }
-    ngOnInit() {
-        const { chain } = Dsl.disposeWith(this);
-        this.canExpand = chain(this.nodeModel).map(node => {
-            return DecoratedTreeNode.getDecorator(node).hasChildren() && this.treeTableModel.isCollapsed(node);
-        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
-        this.canCollapse = chain(this.nodeModel).map(node => {
-            return DecoratedTreeNode.getDecorator(node).hasChildren() && !this.treeTableModel.isCollapsed(node);
-        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
-        this.iconModel = chain(this.nodeModel).map(node => {
-            var _a;
-            const expanded = this.treeTableModel.treeExpansionModel.isExpanded(this.node);
-            const iconFactory = (_a = this.iconFactory) !== null && _a !== void 0 ? _a : TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY;
-            return iconFactory(node, expanded, TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY(node, expanded, undefined));
-        }, { dependsOn: this.treeTableModel.treeExpansionModel.isExpandedPredicate });
-    }
-    get isRoot() {
-        return DecoratedTreeNode.getDecorator(this.node).isRoot();
-    }
-    get isLeaf() {
-        return DecoratedTreeNode.getDecorator(this.node).isLeaf();
-    }
-    get node() {
-        return this.nodeModel.value;
-    }
-    // @Trace()
-    expandOrCollapse($event, node) {
-        $event.preventDefault();
-        $event.stopPropagation();
-        this.treeTableModel.isCollapsed(node) ? this.treeTableModel.expand(node) : this.treeTableModel.collapse(node);
-    }
-}
-TreeLabelCellRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TreeLabelCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TreeLabelCellRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TreeLabelCellRendererComponent, selector: "aup-tree-label-cell-renderer", inputs: { value: "value", label: "label", iconFactory: "iconFactory", treeTableModel: "treeTableModel" }, host: { properties: { "class.root": "this.isRoot", "class.leaf": "this.isLeaf" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"tree-icons\">\n  <aup-tree-inheritance-icon *ngFor=\"let type of iconList.value\" [type]=\"type\"></aup-tree-inheritance-icon>\n  <aup-icon *ngIf=\"iconModel.value\"\n            [icon]=\"iconModel.value\"\n            [class.clickable]=\"canExpand.value || canCollapse.value\"\n            (click)=\"expandOrCollapse($event, node)\" ></aup-icon>\n</div>\n<div class=\"label\">{{label}}</div>\n", styles: [":host{--line-color: #ddd;--node-color: #999;display:inline-flex;flex-direction:row;align-items:stretch}:host div.label{display:flex;flex-direction:row;align-items:center;white-space:nowrap;padding-left:6px}:host div.tree-icons{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:1fr;align-items:stretch;justify-content:stretch}:host div.tree-icons aup-icon{align-self:center;color:var(--node-color)}:host div.tree-icons aup-icon.clickable{cursor:pointer}:host div.tree-icons aup-tree-inheritance-icon,:host div.tree-icons aup-icon{margin-left:4px}\n"], components: [{ type: TreeInheritanceIconComponent, selector: "aup-tree-inheritance-icon", inputs: ["type", "pixelWidth", "pixelHeight"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-__decorate([
-    StoreInValueModel('nodeModel'),
-    __metadata("design:type", Object)
-], TreeLabelCellRendererComponent.prototype, "value", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TreeLabelCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'aup-tree-label-cell-renderer',
-                    templateUrl: './tree-label-cell-renderer.component.html',
-                    styleUrls: ['./tree-label-cell-renderer.component.scss']
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], iconFactory: [{
-                type: Input
-            }], treeTableModel: [{
-                type: Input
-            }], isRoot: [{
-                type: HostBinding,
-                args: ['class.root']
-            }], isLeaf: [{
-                type: HostBinding,
-                args: ['class.leaf']
-            }] } });
-(function (TreeLabelCellRendererComponent) {
-    TreeLabelCellRendererComponent.DEFAULT_ICON_FACTORY = (node, expanded, defaultIcon) => {
-        const isLeaf = DecoratedTreeNode.getDecorator(node).isLeaf();
-        return isLeaf ?
-            undefined :
-            expanded ?
-                'mat:expand_more' :
-                'mat:chevron_right';
-    };
-})(TreeLabelCellRendererComponent || (TreeLabelCellRendererComponent = {}));
-
 /**
  * Create your model:
  * @example
@@ -4455,24 +4330,19 @@ class TreeTableComponent extends AbstractTableComponent {
         return this.treeTableModel;
     }
 }
-TreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TreeTableComponent, selector: "aup-tree-table", inputs: { treeTableModel: "treeTableModel" }, providers: [
+TreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TreeTableComponent, selector: "aup-tree-table", inputs: { treeTableModel: "treeTableModel" }, providers: [
         { provide: AbstractTableComponent, useExisting: TreeTableComponent }
     ], usesInheritance: true, ngImport: i0, template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label,td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}\n"], components: [{ type: i1$c.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: TableHeaderCellRendererComponent, selector: "aup-table-header-cell-renderer", inputs: ["column"] }, { type: TableCellRendererComponent, selector: "aup-table-cell-renderer", inputs: ["row", "column", "editSession", "tableModel"] }, { type: i1$c.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$c.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$c.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i1$c.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i1$c.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i1$c.MatCellDef, selector: "[matCellDef]" }, { type: i1$c.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$c.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i1$c.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", TreeTableModel)
 ], TreeTableComponent.prototype, "treeTableModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TreeTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TreeTableComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-tree-table',
-                    templateUrl: '../table.component.html',
-                    styleUrls: ['../table.component.scss', './tree-table.component.scss'],
-                    providers: [
+            args: [{ selector: 'aup-tree-table', providers: [
                         { provide: AbstractTableComponent, useExisting: TreeTableComponent }
-                    ]
-                }]
+                    ], template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.aup-row-id]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}\n", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label,td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { treeTableModel: [{
                 type: Input
             }] } });
@@ -4509,8 +4379,8 @@ class VerticalFocusContainerComponent extends FocusContainerComponent {
     ngOnInit() {
     }
 }
-VerticalFocusContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: VerticalFocusContainerComponent, deps: [{ token: i1$7.FocusManager, self: true }], target: i0.ɵɵFactoryTarget.Component });
-VerticalFocusContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: VerticalFocusContainerComponent, selector: "aup-vertical-focus-container", inputs: { rightArrowCommand: ["command.arrowRight", "rightArrowCommand"], leftArrowCommand: ["command.arrowLeft", "leftArrowCommand"] }, host: { listeners: { "keyup.arrowLeft": "arrowLeft($event)", "keyup.arrowRight": "arrowRight($event)", "keyup.arrowDown": "arrowDown($event)", "keyup.arrowUp": "arrowUp($event)" } }, providers: [
+VerticalFocusContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: VerticalFocusContainerComponent, deps: [{ token: i1$7.FocusManager, self: true }], target: i0.ɵɵFactoryTarget.Component });
+VerticalFocusContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: VerticalFocusContainerComponent, selector: "aup-vertical-focus-container", inputs: { rightArrowCommand: ["command.arrowRight", "rightArrowCommand"], leftArrowCommand: ["command.arrowLeft", "leftArrowCommand"] }, host: { listeners: { "keyup.arrowLeft": "arrowLeft($event)", "keyup.arrowRight": "arrowRight($event)", "keyup.arrowDown": "arrowDown($event)", "keyup.arrowUp": "arrowUp($event)" } }, providers: [
         { provide: FocusManager }
     ], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
 __decorate([
@@ -4521,19 +4391,16 @@ __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
 ], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: VerticalFocusContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: VerticalFocusContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-vertical-focus-container',
-                    templateUrl: './vertical-focus-container.component.html',
-                    styleUrls: ['./vertical-focus-container.component.scss'],
-                    providers: [
+            args: [{ selector: 'aup-vertical-focus-container', providers: [
                         { provide: FocusManager }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$7.FocusManager, decorators: [{
-                    type: Self
-                }] }]; }, propDecorators: { rightArrowCommand: [{
+                    ], template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$7.FocusManager, decorators: [{
+                        type: Self
+                    }] }];
+    }, propDecorators: { rightArrowCommand: [{
                 type: Input,
                 args: ['command.arrowRight']
             }], leftArrowCommand: [{
@@ -4572,19 +4439,15 @@ class PaginatorComponent extends DisposableComponent {
         return this.pageController.nextCommand;
     }
 }
-PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PaginatorComponent, selector: "aup-paginator", inputs: { pageController: "pageController" }, usesInheritance: true, ngImport: i0, template: "<p>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-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PaginatorComponent, selector: "aup-paginator", inputs: { pageController: "pageController" }, usesInheritance: true, ngImport: i0, template: "<p>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-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", PageController)
 ], PaginatorComponent.prototype, "pageController", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-paginator',
-                    templateUrl: './paginator.component.html',
-                    styleUrls: ['./paginator.component.scss']
-                }]
+            args: [{ selector: 'aup-paginator', template: "<p>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-right:8px}:host button.md-button.md-icon-button{padding:0;margin:0;width:30px;height:30px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { pageController: [{
                 type: Input
             }] } });
@@ -4597,15 +4460,11 @@ class LabelledValueComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-LabelledValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LabelledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LabelledValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: LabelledValueComponent, selector: "aup-labelled-value", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<label>{{label}}</label>\n<ng-content></ng-content>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:flex-start}label{font-weight:400;font-size:12px;color:#00000091;margin-bottom:6px;white-space:nowrap}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LabelledValueComponent, decorators: [{
+LabelledValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LabelledValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelledValueComponent, selector: "aup-labelled-value", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<label>{{label}}</label>\n<ng-content></ng-content>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:flex-start}label{font-weight:400;font-size:12px;color:#00000091;margin-bottom:6px;white-space:nowrap}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelledValueComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-labelled-value',
-                    templateUrl: './labelled-value.component.html',
-                    styleUrls: ['./labelled-value.component.scss']
-                }]
+            args: [{ selector: 'aup-labelled-value', template: "<label>{{label}}</label>\n<ng-content></ng-content>\n", styles: [":host{display:inline-flex;flex-direction:column;align-items:flex-start}label{font-weight:400;font-size:12px;color:#00000091;margin-bottom:6px;white-space:nowrap}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }] } });
@@ -4656,8 +4515,8 @@ class MarkdownComponent extends DisposableComponent {
         }
     }
 }
-MarkdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MarkdownComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: MarkdownService }], target: i0.ɵɵFactoryTarget.Component });
-MarkdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: { content$: "content$", content: "content", inline: "inline" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}\n"] });
+MarkdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarkdownComponent, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: MarkdownService }], target: i0.ɵɵFactoryTarget.Component });
+MarkdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: { content$: "content$", content: "content", inline: "inline" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}\n"] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
@@ -4666,17 +4525,15 @@ __decorate([
     StoreInValueModel('content$'),
     __metadata("design:type", String)
 ], MarkdownComponent.prototype, "content", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: MarkdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MarkdownComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-markdown, [aupMarkdown]',
-                    templateUrl: './markdown.component.html',
-                    styleUrls: ['./markdown.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }, { type: MarkdownService }]; }, propDecorators: { content$: [{
+            args: [{ selector: 'aup-markdown, [aupMarkdown]', template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: Object, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }, { type: i0.ElementRef }, { type: MarkdownService }];
+    }, propDecorators: { content$: [{
                 type: Input
             }], content: [{
                 type: Input
@@ -4689,8 +4546,8 @@ class ComponentsModule {
         faIconLibrary.addIconPacks(fas);
     }
 }
-ComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ComponentsModule, deps: [{ token: i1$5.FaIconLibrary }], target: i0.ɵɵFactoryTarget.NgModule });
-ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ComponentsModule, declarations: [AbstractInputComponent,
+ComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ComponentsModule, deps: [{ token: i1$5.FaIconLibrary }], target: i0.ɵɵFactoryTarget.NgModule });
+ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ComponentsModule, declarations: [AbstractInputComponent,
         AbstractValueInputComponent,
         AbstractListInputComponent,
         NumberInputComponent,
@@ -4800,7 +4657,7 @@ ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         LabelledValueComponent,
         LoadingContainerComponent,
         MarkdownComponent] });
-ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ComponentsModule, providers: [
+ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ComponentsModule, providers: [
         FocusBindingFactory,
         MarkdownService
     ], imports: [[
@@ -4826,7 +4683,7 @@ ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             MatProgressSpinnerModule,
             MatProgressBarModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -5006,8 +4863,8 @@ class ActivityActionsComponent extends DisposableComponent {
         this.cdr.detectChanges();
     }
 }
-ActivityActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityActionsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ActivityActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ActivityActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityActionsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ActivityActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: { confirmCommand: "confirmCommand", cancelCommand: "cancelCommand", faces: "faces", confirmFace: "confirmFace", cancelFace: "cancelFace", style: "style", layout: "layout", align: "align" }, host: { properties: { "attr.layout": "this.layout", "attr.align": "this.align" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -5016,13 +4873,9 @@ __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
 ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityActionsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-activity-actions',
-                    templateUrl: './activity-actions.component.html',
-                    styleUrls: ['./activity-actions.component.scss']
-                }]
+            args: [{ selector: 'aup-activity-actions', template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n", styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end;--resolved-activity-actions-gap: var(--activity-actions-gap, 8px)}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=start] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=end] .confirm{margin-left:var(--resolved-activity-actions-gap)}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr}:host[layout=inline] .cancel{margin-left:var(--resolved-activity-actions-gap)}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { confirmCommand: [{
                 type: Input
             }], cancelCommand: [{
@@ -5113,8 +4966,8 @@ class Activity extends DisposableComponent {
         return !!this._activityContext;
     }
 }
-Activity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Activity, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Activity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Activity, selector: "ng-component", host: { properties: { "class": "this.class", "attr.focused": "this.isFocused" } }, viewQueries: [{ propertyName: "activityActions", first: true, predicate: ActivityActionsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+Activity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: Activity, deps: [], target: i0.ɵɵFactoryTarget.Component });
+Activity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: Activity, selector: "ng-component", host: { properties: { "class": "this.class", "attr.focused": "this.isFocused" } }, viewQueries: [{ propertyName: "activityActions", first: true, predicate: ActivityActionsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
@@ -5123,7 +4976,7 @@ __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
 ], Activity.prototype, "cancelCommand", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: Activity, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: Activity, decorators: [{
             type: Component,
             args: [{
                     template: ''
@@ -5193,17 +5046,19 @@ class AbstractDialogComponent extends Activity {
         return isFunction(this.config['destructive']) && this.config.destructive();
     }
 }
-AbstractDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractDialogComponent, deps: [{ token: ALERT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-AbstractDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractDialogComponent, decorators: [{
+AbstractDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractDialogComponent, deps: [{ token: ALERT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+AbstractDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ALERT_CONFIG]
-                }] }]; } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ALERT_CONFIG]
+                    }] }];
+    } });
 
 class AbstractConfirmDialogComponent extends AbstractDialogComponent {
     constructor(config) {
@@ -5216,17 +5071,19 @@ class AbstractConfirmDialogComponent extends AbstractDialogComponent {
         });
     }
 }
-AbstractConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractConfirmDialogComponent, deps: [{ token: ALERT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-AbstractConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractConfirmDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractConfirmDialogComponent, decorators: [{
+AbstractConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractConfirmDialogComponent, deps: [{ token: ALERT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+AbstractConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractConfirmDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ALERT_CONFIG]
-                }] }]; } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ALERT_CONFIG]
+                    }] }];
+    } });
 
 class ActivityTitleComponent extends DisposableComponent {
     /**
@@ -5248,15 +5105,11 @@ class ActivityTitleComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-ActivityTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActivityTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: { hasTransparentBackground: "hasTransparentBackground", color: "color" }, host: { properties: { "class.transparent-background": "this.hasTransparentBackground", "attr.color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityTitleComponent, decorators: [{
+ActivityTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActivityTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityTitleComponent, selector: "aup-activity-title", inputs: { hasTransparentBackground: "hasTransparentBackground", color: "color" }, host: { properties: { "class.transparent-background": "this.hasTransparentBackground", "attr.color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityTitleComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-activity-title',
-                    templateUrl: './activity-title.component.html',
-                    styleUrls: ['./activity-title.component.scss']
-                }]
+            args: [{ selector: 'aup-activity-title', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { hasTransparentBackground: [{
                 type: Input
             }, {
@@ -5277,15 +5130,11 @@ class ActivityBodyComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-ActivityBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ActivityBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: { fullWidth: "fullWidth" }, host: { properties: { "class.full-width": "this.fullWidth" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["<ng-content></ng-content>\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityBodyComponent, decorators: [{
+ActivityBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityBodyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ActivityBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityBodyComponent, selector: "aup-activity-body", inputs: { fullWidth: "fullWidth" }, host: { properties: { "class.full-width": "this.fullWidth" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["<ng-content></ng-content>\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityBodyComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-activity-body',
-                    templateUrl: './activity-body.component.html',
-                    styleUrls: ['./activity-body.component.html'],
-                }]
+            args: [{ selector: 'aup-activity-body', template: "<ng-content></ng-content>\n", styles: ["<ng-content></ng-content>\n"] }]
         }], propDecorators: { fullWidth: [{
                 type: Input
             }, {
@@ -5301,19 +5150,17 @@ class AlertDialogComponent extends AbstractDialogComponent {
         });
     }
 }
-AlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AlertDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-AlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AlertDialogComponent, selector: "aup-alert-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AlertDialogComponent, decorators: [{
+AlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AlertDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
+AlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AlertDialogComponent, selector: "aup-alert-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AlertDialogComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-alert-dialog',
-                    templateUrl: './alert-dialog.component.html',
-                    styleUrls: ['./alert-dialog.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: Alert, decorators: [{
-                    type: Inject,
-                    args: [ACTIVITY_DATA]
-                }] }]; } });
+            args: [{ selector: 'aup-alert-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: Alert, decorators: [{
+                        type: Inject,
+                        args: [ACTIVITY_DATA]
+                    }] }];
+    } });
 
 class ConfirmThenDialogComponent extends AbstractConfirmDialogComponent {
     constructor(config) {
@@ -5325,19 +5172,17 @@ class ConfirmThenDialogComponent extends AbstractConfirmDialogComponent {
         });
     }
 }
-ConfirmThenDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmThenDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmThenDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ConfirmThenDialogComponent, selector: "aup-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmThenDialogComponent, decorators: [{
+ConfirmThenDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmThenDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmThenDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ConfirmThenDialogComponent, selector: "aup-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmThenDialogComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-confirmation-dialog',
-                    templateUrl: './confirm-then-dialog.component.html',
-                    styleUrls: ['./confirm-then-dialog.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ACTIVITY_DATA]
-                }] }]; } });
+            args: [{ selector: 'aup-confirmation-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ACTIVITY_DATA]
+                    }] }];
+    } });
 
 class ConfirmThenExecuteDialogComponent extends AbstractConfirmDialogComponent {
     constructor(data) {
@@ -5353,19 +5198,17 @@ class ConfirmThenExecuteDialogComponent extends AbstractConfirmDialogComponent {
         }));
     }
 }
-ConfirmThenExecuteDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmThenExecuteDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmThenExecuteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ConfirmThenExecuteDialogComponent, selector: "aup-confirmation-execute-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmThenExecuteDialogComponent, decorators: [{
+ConfirmThenExecuteDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmThenExecuteDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmThenExecuteDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ConfirmThenExecuteDialogComponent, selector: "aup-confirmation-execute-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmThenExecuteDialogComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-confirmation-execute-dialog',
-                    templateUrl: './confirm-then-execute-dialog.component.html',
-                    styleUrls: ['./confirm-then-execute-dialog.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ACTIVITY_DATA]
-                }] }]; } });
+            args: [{ selector: 'aup-confirmation-execute-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ACTIVITY_DATA]
+                    }] }];
+    } });
 
 class ConfirmationDialogComponent extends AbstractConfirmDialogComponent {
     constructor(confirm) {
@@ -5376,19 +5219,17 @@ class ConfirmationDialogComponent extends AbstractConfirmDialogComponent {
         });
     }
 }
-ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ConfirmationDialogComponent, selector: "aup-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ConfirmationDialogComponent, selector: "aup-confirmation-dialog", usesInheritance: true, ngImport: i0, template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"], components: [{ type: ActivityTitleComponent, selector: "aup-activity-title", inputs: ["hasTransparentBackground", "color"] }, { type: MarkdownComponent, selector: "aup-markdown, [aupMarkdown]", inputs: ["content$", "content", "inline"] }, { type: ActivityBodyComponent, selector: "aup-activity-body", inputs: ["fullWidth"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-confirmation-dialog',
-                    templateUrl: './confirmation-dialog.component.html',
-                    styleUrls: ['./confirmation-dialog.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ACTIVITY_DATA]
-                }] }]; } });
+            args: [{ selector: 'aup-confirmation-dialog', template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n", styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ACTIVITY_DATA]
+                    }] }];
+    } });
 
 class AbstractInteractionContext {
     startActivity(activityType, data, options) {
@@ -5527,15 +5368,11 @@ class ActivityOutletComponent {
         return this.activityComponentRef.instance;
     }
 }
-ActivityOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityOutletComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ActivityOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: { nestedInteractionContext: "nestedInteractionContext", activityRef: "activityRef" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityOutletComponent, decorators: [{
+ActivityOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityOutletComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ActivityOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: { nestedInteractionContext: "nestedInteractionContext", activityRef: "activityRef" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityOutletComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-activity-outlet',
-                    template: '',
-                    styleUrls: ['./activity-outlet.component.scss']
-                }]
+            args: [{ selector: 'aup-activity-outlet', template: '', styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { nestedInteractionContext: [{
                 type: Input
             }], activityRef: [{
@@ -5722,15 +5559,11 @@ class ActivityContainerComponent extends AbstractInteractionContext {
         }, 75);
     }
 }
-ActivityContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActivityContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busyModel]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], components: [{ type: i1$b.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$b.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busyModel", "busy"] }, { type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ActivityContainerComponent, decorators: [{
+ActivityContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ActivityContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ActivityContainerComponent, selector: "aup-activity-container", inputs: { dynamicHeight: "dynamicHeight" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, static: true }, { propertyName: "activityOutlets", predicate: ActivityOutletComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busyModel]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"], components: [{ type: i1$b.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$b.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: BusyOverlayComponent, selector: "aup-busy-overlay", inputs: ["busyModel", "busy"] }, { type: ActivityOutletComponent, selector: "aup-activity-outlet", inputs: ["nestedInteractionContext", "activityRef"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ActivityContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-activity-container',
-                    templateUrl: './activity-container.component.html',
-                    styleUrls: ['./activity-container.component.scss']
-                }]
+            args: [{ selector: 'aup-activity-container', template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let activityRef of activityRefs; let i = index; trackBy: activityIndex\">\n    <aup-busy-overlay [busyModel]=\"busy\" cdkTrapFocus cdkTrapFocusAutoCapture>\n      <!--\n      We have issues where angular is triggering a leave animation when an\n      new activity is started, but is not running the enter animation\n      when it is scrolled back into view.  So we track the tab changes and\n      disable all animations inside the tab while we're animating.\n      -->\n      <div class=\"activity-outlet-wrapper\" [@.disabled]=\"!activityRef.focused\">\n        <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"activityRef\"></aup-activity-outlet>\n      </div>\n    </aup-busy-overlay>\n  </mat-tab>\n</mat-tab-group>\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-busy-overlay{flex:1}.activity-outlet-wrapper{flex:1}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { dynamicHeight: [{
                 type: Input
             }], tabs: [{
@@ -5768,8 +5601,8 @@ class AbstractActivityTriggerComponent extends DisposableComponent {
         return (_a = this.interactionContext) === null || _a === void 0 ? void 0 : _a.isActive();
     }
 }
-AbstractActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractActivityTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AbstractActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractActivityTriggerComponent, selector: "aup-abstract-activity-trigger", inputs: { activityClass: "activityClass", activityClassModel: "activityClassModel", activityData: "activityData", activityDataModel: "activityDataModel", face: "face", faceModel: "faceModel", alignFace: "alignFace" }, outputs: { confirmEvent: "confirmEvent", cancelEvent: "cancelEvent" }, host: { properties: { "class.active": "this.isActive" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractActivityTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AbstractActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractActivityTriggerComponent, selector: "aup-abstract-activity-trigger", inputs: { activityClass: "activityClass", activityClassModel: "activityClassModel", activityData: "activityData", activityDataModel: "activityDataModel", face: "face", faceModel: "faceModel", alignFace: "alignFace" }, outputs: { confirmEvent: "confirmEvent", cancelEvent: "cancelEvent" }, host: { properties: { "class.active": "this.isActive" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     StoreInValueModel('activityClassModel'),
     __metadata("design:type", Object)
@@ -5794,7 +5627,7 @@ __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
 ], AbstractActivityTriggerComponent.prototype, "faceModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractActivityTriggerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractActivityTriggerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'aup-abstract-activity-trigger',
@@ -5918,9 +5751,9 @@ class InteractionService {
         });
     }
 }
-InteractionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionService, deps: [{ token: ModalInteractionContextFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-InteractionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionService, decorators: [{
+InteractionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionService, deps: [{ token: ModalInteractionContextFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+InteractionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5998,15 +5831,11 @@ class ModalActivityTriggerComponent extends AbstractActivityTriggerComponent {
         return this._interactionContext;
     }
 }
-ModalActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalActivityTriggerComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-ModalActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ModalActivityTriggerComponent, selector: "aup-modal-activity-trigger", usesInheritance: true, ngImport: i0, template: "<aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n", styles: [":host{display:inline-block}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalActivityTriggerComponent, decorators: [{
+ModalActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ModalActivityTriggerComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
+ModalActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ModalActivityTriggerComponent, selector: "aup-modal-activity-trigger", usesInheritance: true, ngImport: i0, template: "<aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n", styles: [":host{display:inline-block}\n"], components: [{ type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ModalActivityTriggerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-modal-activity-trigger',
-                    templateUrl: './modal-activity-trigger.component.html',
-                    styleUrls: ['./modal-activity-trigger.component.scss']
-                }]
+            args: [{ selector: 'aup-modal-activity-trigger', template: "<aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: InteractionService }]; } });
 
 /**
@@ -6072,21 +5901,19 @@ class InPlaceInteractionContextComponent extends DisposableComponent {
         return this.activityContainerComponent.startActivity(activityType, data, options);
     }
 }
-InPlaceInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InPlaceInteractionContextComponent, deps: [{ token: InteractionService }, { token: MAT_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-InPlaceInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], components: [{ type: i1$b.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$b.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InPlaceInteractionContextComponent, decorators: [{
+InPlaceInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InPlaceInteractionContextComponent, deps: [{ token: InteractionService }, { token: MAT_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+InPlaceInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: { animateFirstActivity: "animateFirstActivity" }, host: { properties: { "class.active": "this.active" } }, viewQueries: [{ propertyName: "activityContainerComponent", first: true, predicate: ["activityContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"], components: [{ type: i1$b.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i1$b.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: ActivityContainerComponent, selector: "aup-activity-container", inputs: ["dynamicHeight"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InPlaceInteractionContextComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "aup-in-place-interaction-context",
-                    templateUrl: "./in-place-interaction-context.component.html",
-                    styleUrls: ["./in-place-interaction-context.component.scss"]
-                }]
-        }], ctorParameters: function () { return [{ type: InteractionService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_TABS_CONFIG]
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { activityContainerComponent: [{
+            args: [{ selector: "aup-in-place-interaction-context", template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\" [animationDuration]=\"animationDuration\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n", styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}aup-activity-container{flex:1}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: InteractionService }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_TABS_CONFIG]
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { activityContainerComponent: [{
                 type: ViewChild,
                 args: ["activityContainer", { static: true }]
             }], animateFirstActivity: [{
@@ -6138,15 +5965,11 @@ class AddCardActivityComponent extends AbstractActivityTriggerComponent {
         return this.interactionStyle === 'inline';
     }
 }
-AddCardActivityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AddCardActivityComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-AddCardActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AddCardActivityComponent, selector: "aup-add-card-activity", inputs: { interactionStyle: "interactionStyle", renderAs: "renderAs" }, host: { properties: { "class": "this.activityTypeClass", "class.not-card": "this.notCard" } }, viewQueries: [{ propertyName: "inlineInteractionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:#0000008a}:host[interactionStyle=modal][renderas=card]{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:#0000008a}:host-context(aup-card-container)[renderas=button]{align-self:start}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AddCardActivityComponent, decorators: [{
+AddCardActivityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddCardActivityComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
+AddCardActivityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddCardActivityComponent, selector: "aup-add-card-activity", inputs: { interactionStyle: "interactionStyle", renderAs: "renderAs" }, host: { properties: { "class": "this.activityTypeClass", "class.not-card": "this.notCard" } }, viewQueries: [{ propertyName: "inlineInteractionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:#0000008a}:host[interactionStyle=modal][renderas=card]{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:#0000008a}:host-context(aup-card-container)[renderas=button]{align-self:start}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddCardActivityComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-add-card-activity',
-                    templateUrl: './add-card-activity.component.html',
-                    styleUrls: ['./add-card-activity.component.scss'],
-                }]
+            args: [{ selector: 'aup-add-card-activity', template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=inline][renderas=card]:not(.active):hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=inline][renderas=card]:not(.active):hover{border-color:transparent;background-color:#fff;color:#0000008a}:host[interactionStyle=modal][renderas=card]{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}:host[interactionStyle=modal][renderas=card]:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host[interactionStyle=modal][renderas=card]:hover{border-color:transparent;background-color:#fff;color:#0000008a}:host-context(aup-card-container)[renderas=button]{align-self:start}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: InteractionService }]; }, propDecorators: { inlineInteractionContext: [{
                 type: ViewChild,
                 args: [InPlaceInteractionContextComponent, { static: true }]
@@ -6212,19 +6035,15 @@ class AddItemInteractionContextComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-AddItemInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AddItemInteractionContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AddItemInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AddItemInteractionContextComponent, selector: "aup-add-item-interaction-context", inputs: { label: "label", icon: "icon", activityClass: "activityClass", activityData: "activityData", addCommand: "addCommand" }, host: { properties: { "class.interaction-active": "this.active", "tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n", styles: [":host{--def-link-color: var(--link-color, currentColor);--def-link-color-hover: var(--link-color-hover, currentColor);--def-link-background: var(--link-background, transparent);--def-link-background-hover: var(--link-background-hover, rgba(0, 0, 0, .05));--def-link-border-radius: var(--link-border-radius, 4px);--def-link-padding: var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
+AddItemInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddItemInteractionContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AddItemInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AddItemInteractionContextComponent, selector: "aup-add-item-interaction-context", inputs: { label: "label", icon: "icon", activityClass: "activityClass", activityData: "activityData", addCommand: "addCommand" }, host: { properties: { "class.interaction-active": "this.active", "tabindex": "this.tabindex" } }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n", styles: [":host{--def-link-color: var(--link-color, currentColor);--def-link-color-hover: var(--link-color-hover, currentColor);--def-link-background: var(--link-background, transparent);--def-link-background-hover: var(--link-background-hover, rgba(0, 0, 0, .05));--def-link-border-radius: var(--link-border-radius, 4px);--def-link-padding: var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", Command)
 ], AddItemInteractionContextComponent.prototype, "addCommand", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AddItemInteractionContextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AddItemInteractionContextComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-add-item-interaction-context',
-                    templateUrl: './add-item-interaction-context.component.html',
-                    styleUrls: ['./add-item-interaction-context.component.scss']
-                }]
+            args: [{ selector: 'aup-add-item-interaction-context', template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\">\n    <a part=\"link\" class=\"link\" [pectinCommand]=\"clickCommand\"><aup-icon [icon]=\"icon\"></aup-icon> {{label}}</a>\n</aup-in-place-interaction-context>\n", styles: [":host{--def-link-color: var(--link-color, currentColor);--def-link-color-hover: var(--link-color-hover, currentColor);--def-link-background: var(--link-background, transparent);--def-link-background-hover: var(--link-background-hover, rgba(0, 0, 0, .05));--def-link-border-radius: var(--link-border-radius, 4px);--def-link-padding: var(--link-padding, calc(var(--aup-default-padding) / 2));display:flex;flex-direction:column;border-radius:var(--def-link-border-radius);box-sizing:border-box;outline:none}:host:hover a.link{color:var(--def-link-color-hover);background-color:var(--def-link-background-hover)}aup-in-place-interaction-context{border-radius:var(--def-link-border-radius)}a.link{display:flex;flex-direction:row;align-items:center;border-radius:var(--def-link-border-radius);color:var(--def-link-color);background:var(--def-link-background);padding:var(--def-link-padding);cursor:pointer;text-decoration:none}a.link mat-icon{margin-right:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -6254,15 +6073,11 @@ class InlineActivityTriggerComponent extends AbstractActivityTriggerComponent {
         return this._interactionContext;
     }
 }
-InlineActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InlineActivityTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InlineActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: InlineActivityTriggerComponent, selector: "aup-inline-activity-trigger", viewQueries: [{ propertyName: "_interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n", styles: [":host{display:inline-block}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InlineActivityTriggerComponent, decorators: [{
+InlineActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InlineActivityTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InlineActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InlineActivityTriggerComponent, selector: "aup-inline-activity-trigger", viewQueries: [{ propertyName: "_interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n", styles: [":host{display:inline-block}\n"], components: [{ type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InlineActivityTriggerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-inline-activity-trigger',
-                    templateUrl: './inline-activity-trigger.component.html',
-                    styleUrls: ['./inline-activity-trigger.component.scss']
-                }]
+            args: [{ selector: 'aup-inline-activity-trigger', template: "<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-in-place-interaction-context>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { _interactionContext: [{
                 type: ViewChild,
                 args: [InPlaceInteractionContextComponent, { static: true }]
@@ -6347,20 +6162,18 @@ class PopupInteractionContextComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-PopupInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupInteractionContextComponent, deps: [{ token: i0.ElementRef }, { token: i1$d.Overlay }, { token: i1$d.CdkScrollable, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-PopupInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PopupInteractionContextComponent, selector: "aup-popup-interaction-context", inputs: { anchorX: "anchorX", anchorY: "anchorY" }, host: { properties: { "class.interaction-active": "this.active" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}:host.interaction-active{background:rgba(0,0,0,.05)}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupInteractionContextComponent, decorators: [{
+PopupInteractionContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupInteractionContextComponent, deps: [{ token: i0.ElementRef }, { token: i1$d.Overlay }, { token: i1$d.CdkScrollable, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+PopupInteractionContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PopupInteractionContextComponent, selector: "aup-popup-interaction-context", inputs: { anchorX: "anchorX", anchorY: "anchorY" }, host: { properties: { "class.interaction-active": "this.active" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}:host.interaction-active{background:rgba(0,0,0,.05)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupInteractionContextComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-popup-interaction-context',
-                    templateUrl: './popup-interaction-context.component.html',
-                    styleUrls: ['./popup-interaction-context.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$d.Overlay }, { type: i1$d.CdkScrollable, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }]; }, propDecorators: { active: [{
+            args: [{ selector: 'aup-popup-interaction-context', template: "<ng-content></ng-content>\n", styles: [":host{display:inline-block}:host.interaction-active{background:rgba(0,0,0,.05)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1$d.Overlay }, { type: i1$d.CdkScrollable, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    }, propDecorators: { active: [{
                 type: HostBinding,
                 args: ['class.interaction-active']
             }], anchorX: [{
@@ -6411,9 +6224,9 @@ class InteractionContextTriggerFor extends GarbageCollector {
         return isFunction(this.activityDataFactory()) ? this.activityDataFactory() : this.activityData;
     }
 }
-InteractionContextTriggerFor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionContextTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-InteractionContextTriggerFor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: InteractionContextTriggerFor, selector: "[aupInteractionContextTriggerFor]", inputs: { aupInteractionContextTriggerFor: "aupInteractionContextTriggerFor", activityClass: "activityClass", activityData: "activityData", activityDataFactory: "activityDataFactory" }, outputs: { activityDone: "activityDone", activityCancelled: "activityCancelled" }, host: { listeners: { "keyup.enter": "onEnter($event)", "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionContextTriggerFor, decorators: [{
+InteractionContextTriggerFor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionContextTriggerFor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+InteractionContextTriggerFor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: InteractionContextTriggerFor, selector: "[aupInteractionContextTriggerFor]", inputs: { aupInteractionContextTriggerFor: "aupInteractionContextTriggerFor", activityClass: "activityClass", activityData: "activityData", activityDataFactory: "activityDataFactory" }, outputs: { activityDone: "activityDone", activityCancelled: "activityCancelled" }, host: { listeners: { "keyup.enter": "onEnter($event)", "click": "onClick($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionContextTriggerFor, decorators: [{
             type: Directive,
             args: [{
                     selector: '[aupInteractionContextTriggerFor]'
@@ -6508,15 +6321,17 @@ class InputActivity extends Activity {
             || this.data.cancelOnEscape;
     }
 }
-InputActivity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InputActivity, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-InputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: InputActivity, selector: "ng-component", inputs: { layout: "layout" }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "class": "this.additionalCssClassName", "attr.layout": "this.layout" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InputActivity, decorators: [{
+InputActivity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InputActivity, deps: [{ token: ACTIVITY_DATA }], target: i0.ɵɵFactoryTarget.Component });
+InputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InputActivity, selector: "ng-component", inputs: { layout: "layout" }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "class": "this.additionalCssClassName", "attr.layout": "this.layout" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InputActivity, decorators: [{
             type: Component,
             args: [{ template: `` }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ACTIVITY_DATA]
-                }] }]; }, propDecorators: { class: [{
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [ACTIVITY_DATA]
+                    }] }];
+    }, propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], layout: [{
@@ -6540,8 +6355,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 
 class StringInputActivity extends InputActivity {
 }
-StringInputActivity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: StringInputActivity, deps: null, target: i0.ɵɵFactoryTarget.Component });
-StringInputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: StringInputActivity, selector: "aup-string-input-activity", usesInheritance: true, ngImport: i0, template: `
+StringInputActivity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: StringInputActivity, deps: null, target: i0.ɵɵFactoryTarget.Component });
+StringInputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: StringInputActivity, selector: "aup-string-input-activity", usesInheritance: true, ngImport: i0, template: `
     <aup-string-input [valueModel]="valueModel"
                       [label]="data.label"
                       [placeholder]="data.placeholder"
@@ -6552,7 +6367,7 @@ StringInputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                           [cancelFace]="cancelFace"
     ></aup-activity-actions>
   `, isInline: true, components: [{ type: StringInputComponent, selector: "aup-string-input", inputs: ["autocomplete", "enableClearModel", "enableClear", "iconPrefix"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: StringInputActivity, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: StringInputActivity, decorators: [{
             type: Component,
             args: [{
                     selector: 'aup-string-input-activity',
@@ -6586,8 +6401,8 @@ class SelectInputActivity extends InputActivity {
         return ((_a = this.data.optionsModel) === null || _a === void 0 ? void 0 : _a.value) || this.data.options;
     }
 }
-SelectInputActivity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectInputActivity, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectInputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SelectInputActivity, selector: "aup-select-input-activity", usesInheritance: true, ngImport: i0, template: `
+SelectInputActivity.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectInputActivity, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectInputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SelectInputActivity, selector: "aup-select-input-activity", usesInheritance: true, ngImport: i0, template: `
     <aup-select-input [valueModel]="valueModel"
                       [label]="data.label"
                       [placeholder]="data.placeholder"
@@ -6601,7 +6416,7 @@ SelectInputActivity.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                           [cancelFace]="cancelFace"
     ></aup-activity-actions>
   `, isInline: true, components: [{ type: SelectInputComponent, selector: "aup-select-input", inputs: ["optionsModel", "options", "optionLabel", "allowNil", "optionLabelFormat"] }, { type: ActivityActionsComponent, selector: "aup-activity-actions", inputs: ["confirmCommand", "cancelCommand", "faces", "confirmFace", "cancelFace", "style", "layout", "align"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SelectInputActivity, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SelectInputActivity, decorators: [{
             type: Component,
             args: [{
                     selector: 'aup-select-input-activity',
@@ -6736,15 +6551,11 @@ class PopupActivityTriggerComponent extends AbstractActivityTriggerComponent {
         return this._interactionContext;
     }
 }
-PopupActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupActivityTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PopupActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PopupActivityTriggerComponent, selector: "aup-popup-activity-trigger", inputs: { anchorX: "anchorX", anchorY: "anchorY" }, viewQueries: [{ propertyName: "_interactionContext", first: true, predicate: PopupInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-popup-interaction-context [anchorX]=\"anchorX\" [anchorY]=\"anchorY\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-popup-interaction-context>\n", styles: [":host{display:inline-block}\n"], components: [{ type: PopupInteractionContextComponent, selector: "aup-popup-interaction-context", inputs: ["anchorX", "anchorY"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PopupActivityTriggerComponent, decorators: [{
+PopupActivityTriggerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupActivityTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PopupActivityTriggerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PopupActivityTriggerComponent, selector: "aup-popup-activity-trigger", inputs: { anchorX: "anchorX", anchorY: "anchorY" }, viewQueries: [{ propertyName: "_interactionContext", first: true, predicate: PopupInteractionContextComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<aup-popup-interaction-context [anchorX]=\"anchorX\" [anchorY]=\"anchorY\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-popup-interaction-context>\n", styles: [":host{display:inline-block}\n"], components: [{ type: PopupInteractionContextComponent, selector: "aup-popup-interaction-context", inputs: ["anchorX", "anchorY"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopupActivityTriggerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-popup-activity-trigger',
-                    templateUrl: './popup-activity-trigger.component.html',
-                    styleUrls: ['./popup-activity-trigger.component.scss']
-                }]
+            args: [{ selector: 'aup-popup-activity-trigger', template: "<aup-popup-interaction-context [anchorX]=\"anchorX\" [anchorY]=\"anchorY\">\n  <aup-command [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n</aup-popup-interaction-context>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { anchorX: [{
                 type: Input
             }], anchorY: [{
@@ -6901,8 +6712,8 @@ class InlineStringEditorComponent extends DisposableComponent {
         return this.empty.value;
     }
 }
-InlineStringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InlineStringEditorComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
-InlineStringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: InlineStringEditorComponent, selector: "aup-inline-string-editor", inputs: { editorModel: "editorModel", facesModel: "facesModel", faces: "faces", label: "label", placeHolder: "placeHolder", placeHolderModel: "placeHolderModel" }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field appearance=\"standard\" 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\" [faceModel]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n", components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+InlineStringEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InlineStringEditorComponent, deps: [{ token: InteractionService }], target: i0.ɵɵFactoryTarget.Component });
+InlineStringEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: InlineStringEditorComponent, selector: "aup-inline-string-editor", inputs: { editorModel: "editorModel", facesModel: "facesModel", faces: "faces", label: "label", placeHolder: "placeHolder", placeHolderModel: "placeHolderModel" }, viewQueries: [{ propertyName: "interactionContext", first: true, predicate: InPlaceInteractionContextComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field appearance=\"standard\" 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\" [faceModel]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n", components: [{ type: i1$8.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: CommandComponent, selector: "aup-command", inputs: ["command", "faceModel", "face", "busyFaceModel", "busyFace", "alignFace"] }, { type: InPlaceInteractionContextComponent, selector: "aup-in-place-interaction-context", inputs: ["animateFirstActivity"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.MatLabel, selector: "mat-label" }, { type: i5.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", InlineEditorModel)
@@ -6923,13 +6734,9 @@ __decorate([
     TrackExternal(),
     __metadata("design:type", ValueModel)
 ], InlineStringEditorComponent.prototype, "placeHolderModel", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InlineStringEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InlineStringEditorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-inline-string-editor',
-                    templateUrl: './inline-string-editor.component.html',
-                    styleUrls: [] // See assets/interaction/editor/inline-string-editor.scss
-                }]
+            args: [{ selector: 'aup-inline-string-editor', template: "<div class=\"container\" *ngIf=\"!editorModel.isEditing()\">\n  <mat-form-field appearance=\"standard\" 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\" [faceModel]=\"editFaceModel\"></aup-command>\n</div>\n<aup-in-place-interaction-context [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: InteractionService }]; }, propDecorators: { editorModel: [{
                 type: Input
             }], facesModel: [{
@@ -6962,8 +6769,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 
 class InteractionModule {
 }
-InteractionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionModule, declarations: [ActivityContainerComponent,
+InteractionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionModule, declarations: [ActivityContainerComponent,
         ConfirmationDialogComponent,
         ConfirmThenDialogComponent,
         ConfirmThenExecuteDialogComponent,
@@ -7018,7 +6825,7 @@ InteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ModalActivityTriggerComponent,
         AddCardActivityComponent,
         InlineStringEditorComponent] });
-InteractionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionModule, providers: [
+InteractionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionModule, providers: [
         InteractionService
         // {
         //   provide: MAT_TABS_CONFIG, useValue: { animationDuration: "2s" }
@@ -7040,7 +6847,7 @@ InteractionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             MatFormFieldModule,
             A11yModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: InteractionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: InteractionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7106,12 +6913,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                         AddCardActivityComponent,
                         InlineStringEditorComponent,
                     ],
-                    entryComponents: [
-                    // ActivityContainerComponent,
-                    // ConfirmationDialogComponent,
-                    // ConfirmThenDialogComponent,
-                    // AlertDialogComponent
-                    ],
                     providers: [
                         InteractionService
                         // {
@@ -7537,14 +7338,14 @@ class PlaceComponent extends DisposableComponent {
         this._parameterChangeInterceptors.push(new ParameterChangeInterceptor(parameterDef, model, callback, options));
     }
 }
-PlaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-PlaceComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: PlaceComponent, usesInheritance: true, ngImport: i0 });
+PlaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PlaceComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: PlaceComponent, usesInheritance: true, ngImport: i0 });
 __decorate([
     Memoize(),
     __metadata("design:type", PlaceDefinition),
     __metadata("design:paramtypes", [])
 ], PlaceComponent.prototype, "placeDefinition", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return []; }, propDecorators: { placeDefinition: [] } });
 (function (PlaceComponent) {
@@ -7555,25 +7356,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
     function getRouteParameters(klass) {
         return Klass.get(klass).getMetadataList(ROUTE_PARAMETER_LIST_KEY);
     }
-    PlaceComponent.getRouteParameters = getRouteParameters;
-    function getDefinition(snapshotOrConstructor) {
-        if (snapshotOrConstructor instanceof ActivatedRouteSnapshot) {
-            const component = snapshotOrConstructor.component;
-            if (!isPlaceComponentConstructor(component)) {
-                throw new Error(`ActivatedRouteSnapshot component is not a PlaceComponent, got ${component}`);
-            }
-            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, component);
-        }
-        else {
-            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, snapshotOrConstructor);
-        }
+    PlaceComponent.getRouteParameters = getRouteParameters;
+    function getDefinition(snapshotOrConstructor) {
+        if (snapshotOrConstructor instanceof ActivatedRouteSnapshot) {
+            const component = snapshotOrConstructor.component;
+            if (!isPlaceComponentConstructor(component)) {
+                throw new Error(`ActivatedRouteSnapshot component is not a PlaceComponent, got ${component}`);
+            }
+            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, component);
+        }
+        else {
+            return Reflect.getMetadata(DEFINITION_META_DATA_KEY, snapshotOrConstructor);
+        }
+    }
+    PlaceComponent.getDefinition = getDefinition;
+    function injectDefinition(klass, definition) {
+        Reflect.defineMetadata(DEFINITION_META_DATA_KEY, definition, klass);
+    }
+    PlaceComponent.injectDefinition = injectDefinition;
+})(PlaceComponent || (PlaceComponent = {}));
+
+class Visit {
+    constructor(placeDefinition, visitParameters = {}) {
+        this.placeDefinition = placeDefinition;
+        this.visitParameters = visitParameters;
+    }
+    // @Trace()
+    getRouteId() {
+        return this.placeDefinition.getRouteIdFrom(this);
+    }
+    // @Trace()
+    hasRouteId() {
+        return !isNil(this.getRouteId());
+    }
+    /**
+     * Returns the value of the place parameter with the specified name.  The parameter
+     * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
+     * same as the the ValueModel property name.
+     * @param parameter the visit parameter definition
+     */
+    getParameterValue(parameter) {
+        return isString(parameter) ? this.visitParameters[parameter] : this.visitParameters[parameter.name];
+    }
+    // @Trace()
+    hasParameter(parameterDef) {
+        return Object.keys(this.visitParameters).includes(parameterDef.name);
+    }
+    replace(parameter, value) {
+        return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), { [parameter.name]: value }));
+    }
+    mergeRouteParameters(routeParams) {
+        // todo: whitelist parameters.
+        const routeParameterKeys = Object.keys(routeParams);
+        const params = {};
+        this.placeDefinition.getVisitParameterDefs().forEach(def => {
+            if (def.isRouteId || def.isRouteParameter) {
+                if (routeParameterKeys.includes(def.name)) {
+                    params[def.name] = routeParams[def.name];
+                }
+            }
+            else {
+                // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
+                // defaults and remember sanitisation process.
+                const value = this.getParameterValue(def);
+                if (this.hasParameter(def)) {
+                    params[def.name] = value;
+                }
+            }
+        });
+        return new Visit(this.placeDefinition, params);
+    }
+    // @Trace()
+    hasRoutingChangedFrom(other) {
+        const samePlace = other.placeDefinition === this.placeDefinition;
+        const currentParams = this.placeDefinition.getFormattedRouteParameters(this, true);
+        const otherParams = this.placeDefinition.getFormattedRouteParameters(other, true);
+        // console.log({currentParams, otherParams});
+        const sameRouteParameters = isEqual(currentParams, otherParams);
+        return !samePlace || !sameRouteParameters;
+    }
+    hasChangedFrom(other) {
+        const sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
+        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+    }
+    toDebugString() {
+        return Object.keys(this.visitParameters).map(k => `${k}=${this.visitParameters[k]}`).join(',');
     }
-    PlaceComponent.getDefinition = getDefinition;
-    function injectDefinition(klass, definition) {
-        Reflect.defineMetadata(DEFINITION_META_DATA_KEY, definition, klass);
+}
+
+const AUP_PLACE_CONFIG = new InjectionToken('AUP_PLACE_CONFIG');
+
+class NotAuthorisedNoticeComponent {
+    constructor() {
     }
-    PlaceComponent.injectDefinition = injectDefinition;
-})(PlaceComponent || (PlaceComponent = {}));
+}
+NotAuthorisedNoticeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NotAuthorisedNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NotAuthorisedNoticeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: NotAuthorisedNoticeComponent, selector: "aup-not-authorised-notice", ngImport: i0, template: "<p>You are not authorised to access this page</p>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NotAuthorisedNoticeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aup-not-authorised-notice', template: "<p>You are not authorised to access this page</p>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+// Freezes the state of the components at the start of the animation.
+const animationStartStyle = style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
+const left = [
+    query(':enter, :leave', animationStartStyle, { optional: true }),
+    group([
+        query(':enter', [
+            style({ transform: 'translateX(-100%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
+        ], {
+            optional: true
+        }),
+        query(':leave', [
+            style({ transform: 'translateX(0%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(100%)' }))
+        ], {
+            optional: true
+        })
+    ])
+];
+const right = [
+    query(':enter, :leave', animationStartStyle, { optional: true }),
+    group([
+        query(':enter', [
+            style({ transform: 'translateX(100%)', minHeight: '1px' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
+        ], {
+            optional: true
+        }),
+        query(':leave', [style({ transform: 'translateX(0%)' }), animate('{{duration}} ease-out', style({
+                transform: 'translateX(-100%)',
+                minHeight: '1px'
+            }))], {
+            optional: true
+        })
+    ])
+];
+function leftRightPlaceAnimation(duration) {
+    return trigger('routeAnimations', [
+        transition(':increment', right, { params: { duration: duration } }),
+        transition(':decrement', left, { params: { duration: duration } })
+    ]);
+}
+const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
 
 /**
  * This class handles the logic around canDeactivate for a given router state transition.  It's core responsibilities are:
@@ -8354,141 +8280,6 @@ var PlaceAccessGuard;
     PlaceAccessGuard.NoAuth = NoAuth;
 })(PlaceAccessGuard || (PlaceAccessGuard = {}));
 
-class PlaceHistory {
-    constructor() {
-        this._archive = new Map();
-        this.placeHistoryDepth = 4;
-    }
-    notifyNavigationStarted() {
-        if (this._activeVisits) {
-            this.archive(this._activeVisits.visits);
-            this._previousVisits = this._activeVisits;
-        }
-    }
-    notifyNavigationFinished(visits) {
-        this._activeVisits = new PlaceHistory.VisitRecord(visits);
-    }
-    updateVisit(visit) {
-        assert.isTruthy(this._activeVisits);
-        this._activeVisits.update(visit);
-    }
-    lastVisitIncluded(placeDef) {
-        var _a;
-        return !!((_a = this._previousVisits) === null || _a === void 0 ? void 0 : _a.getVisitFor(placeDef));
-    }
-    getMostRecentVisitFor(placeDef) {
-        return first(this.getHistory(placeDef));
-    }
-    getHistory(placeDef) {
-        let history = this._archive.get(placeDef);
-        if (!history) {
-            history = [];
-            this.setHistory(placeDef, history);
-        }
-        return history;
-    }
-    setHistory(placeDef, history) {
-        this._archive.set(placeDef, history);
-    }
-    archive(visits) {
-        visits.forEach(state => {
-            const history = this.getHistory(state.placeDefinition);
-            const previousState = first(history);
-            if (!previousState || state.hasChangedFrom(previousState)) {
-                history.unshift(state); // LIFO
-                this.setHistory(state.placeDefinition, history.slice(0, this.placeHistoryDepth));
-            }
-        });
-    }
-}
-PlaceHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceHistory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PlaceHistory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceHistory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceHistory, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-(function (PlaceHistory) {
-    class VisitRecord {
-        constructor(visits) {
-            this.visits = visits;
-        }
-        update(visit) {
-            this.visits = this.visits.filter(v => v.placeDefinition !== visit.placeDefinition).concat(visit);
-        }
-        getVisitFor(placeDef) {
-            return this.visits.find(v => v.placeDefinition === placeDef);
-        }
-    }
-    PlaceHistory.VisitRecord = VisitRecord;
-    // export class Query {
-    //   private _history: Visit.State[];
-    //   private _places: Place[];
-    //   private _predicate: (visit: any) => boolean;
-    //   private _limit: number;
-    //
-    //   constructor(history, limit = history.length) {
-    //     this._history = history;
-    //     this._places = [];
-    //     this._predicate = (visit => true);
-    //     this._limit = limit;
-    //   }
-    //
-    //   to(...places:Place[]):this {
-    //     this._places = places;
-    //     return this;
-    //   }
-    //
-    //   with(parameters: { [parameter: string]: any }): this {
-    //     this.matching(state => {
-    //       return Object.keys(parameters).reduce((acc, key) => {
-    //         const matchValue = parameters[key];
-    //         const visitValue = state.get(key);
-    //         const matched = matchValue === '*' ? !isNil(visitValue) : visitValue == matchValue;
-    //         // Logger.get(this).info(`matched=${matched}`, parameters, visitValue);
-    //         return acc && matched;
-    //       }, true);
-    //     });
-    //     return this;
-    //   }
-    //
-    //   last(): Visit.State {
-    //     return findLast(this._history, visit => this._matches(visit))
-    //   }
-    //
-    //   // @trace
-    //   allThatMatch(): Visit.State[] {
-    //     return filter(this._history, visit => this._matches(visit)).slice(-this._limit);
-    //   }
-    //
-    //   // @trace
-    //   mostRecentValueOf<T=any>(param: string, defaultValue: T = null): T {
-    //     const lastStateWithParam = findLast(this.allThatMatch(), state => !isNil(state.get(param)));
-    //     return isNil(lastStateWithParam) ? defaultValue : lastStateWithParam.get(param);
-    //   }
-    //
-    //   limit(limit: number): this {
-    //     this._limit = limit;
-    //     return this;
-    //   }
-    //
-    //   matching(predicate: (visit: Visit.State) => boolean): this {
-    //     this._predicate = predicate;
-    //     return this;
-    //   }
-    //
-    //   _matches(visit: Visit.State) {
-    //     return this._isPlaceMatch(visit) && this._predicate(visit);
-    //   }
-    //
-    //   _isPlaceMatch(visit: Visit.State) {
-    //     return this._places.length < 1 || this._places.includes(visit.place)
-    //   }
-    //
-    // }
-})(PlaceHistory || (PlaceHistory = {}));
-
 /**
  * This a work around for the fact that an activated route with multiple segments doesn't
  * include the segment params in the paramMap as well as each segment returns an empty
@@ -8514,99 +8305,31 @@ class ConsolidatedParameterMap {
     has(name) {
         return !!this.paramMaps.find(m => m.has(name));
     }
-    get keys() {
-        return uniq(this.paramMaps.reduce((result, params) => result.concat(params.keys), []));
-    }
-}
-__decorate([
-    Memoize(),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [])
-], ConsolidatedParameterMap.prototype, "keys", null);
-class ParamMapAdapter {
-    constructor(params) {
-        this.params = params;
-    }
-    get(name) {
-        return this.params[name];
-    }
-    getAll(name) {
-        const value = this.get(name);
-        return Array.isArray(value) ? value : [value];
-    }
-    has(name) {
-        return this.keys.includes(name);
-    }
-    get keys() {
-        return Object.keys(this.params);
-    }
-}
-
-class Visit {
-    constructor(placeDefinition, visitParameters = {}) {
-        this.placeDefinition = placeDefinition;
-        this.visitParameters = visitParameters;
-    }
-    // @Trace()
-    getRouteId() {
-        return this.placeDefinition.getRouteIdFrom(this);
-    }
-    // @Trace()
-    hasRouteId() {
-        return !isNil(this.getRouteId());
-    }
-    /**
-     * Returns the value of the place parameter with the specified name.  The parameter
-     * name is taken from the `as` option, e.g. {as: 'aCustomName'} otherwise it is the
-     * same as the the ValueModel property name.
-     * @param parameter the visit parameter definition
-     */
-    getParameterValue(parameter) {
-        return isString(parameter) ? this.visitParameters[parameter] : this.visitParameters[parameter.name];
-    }
-    // @Trace()
-    hasParameter(parameterDef) {
-        return Object.keys(this.visitParameters).includes(parameterDef.name);
+    get keys() {
+        return uniq(this.paramMaps.reduce((result, params) => result.concat(params.keys), []));
     }
-    replace(parameter, value) {
-        return new Visit(this.placeDefinition, Object.assign(Object.assign({}, this.visitParameters), { [parameter.name]: value }));
+}
+__decorate([
+    Memoize(),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [])
+], ConsolidatedParameterMap.prototype, "keys", null);
+class ParamMapAdapter {
+    constructor(params) {
+        this.params = params;
     }
-    mergeRouteParameters(routeParams) {
-        // todo: whitelist parameters.
-        const routeParameterKeys = Object.keys(routeParams);
-        const params = {};
-        this.placeDefinition.getVisitParameterDefs().forEach(def => {
-            if (def.isRouteId || def.isRouteParameter) {
-                if (routeParameterKeys.includes(def.name)) {
-                    params[def.name] = routeParams[def.name];
-                }
-            }
-            else {
-                // copy non route params as is, but only if they already exist otherwise we'll inject nil values and break the
-                // defaults and remember sanitisation process.
-                const value = this.getParameterValue(def);
-                if (this.hasParameter(def)) {
-                    params[def.name] = value;
-                }
-            }
-        });
-        return new Visit(this.placeDefinition, params);
+    get(name) {
+        return this.params[name];
     }
-    // @Trace()
-    hasRoutingChangedFrom(other) {
-        const samePlace = other.placeDefinition === this.placeDefinition;
-        const currentParams = this.placeDefinition.getFormattedRouteParameters(this, true);
-        const otherParams = this.placeDefinition.getFormattedRouteParameters(other, true);
-        // console.log({currentParams, otherParams});
-        const sameRouteParameters = isEqual(currentParams, otherParams);
-        return !samePlace || !sameRouteParameters;
+    getAll(name) {
+        const value = this.get(name);
+        return Array.isArray(value) ? value : [value];
     }
-    hasChangedFrom(other) {
-        const sameNonRouteParameters = isEqual(this.placeDefinition.getNonRouteParameters(this), this.placeDefinition.getNonRouteParameters(other));
-        return !sameNonRouteParameters || this.hasRoutingChangedFrom(other);
+    has(name) {
+        return this.keys.includes(name);
     }
-    toDebugString() {
-        return Object.keys(this.visitParameters).map(k => `${k}=${this.visitParameters[k]}`).join(',');
+    get keys() {
+        return Object.keys(this.params);
     }
 }
 
@@ -8765,15 +8488,150 @@ class UrlService {
         this.angularLocation.back();
     }
 }
-UrlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: UrlService, deps: [{ token: i1$e.Router }, { token: i4.Location }, { token: i1$e.UrlSerializer }], target: i0.ɵɵFactoryTarget.Injectable });
-UrlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: UrlService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: UrlService, decorators: [{
+UrlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UrlService, deps: [{ token: i1$e.Router }, { token: i4.Location }, { token: i1$e.UrlSerializer }], target: i0.ɵɵFactoryTarget.Injectable });
+UrlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UrlService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UrlService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: function () { return [{ type: i1$e.Router }, { type: i4.Location }, { type: i1$e.UrlSerializer }]; } });
 
+class PlaceHistory {
+    constructor() {
+        this._archive = new Map();
+        this.placeHistoryDepth = 4;
+    }
+    notifyNavigationStarted() {
+        if (this._activeVisits) {
+            this.archive(this._activeVisits.visits);
+            this._previousVisits = this._activeVisits;
+        }
+    }
+    notifyNavigationFinished(visits) {
+        this._activeVisits = new PlaceHistory.VisitRecord(visits);
+    }
+    updateVisit(visit) {
+        assert.isTruthy(this._activeVisits);
+        this._activeVisits.update(visit);
+    }
+    lastVisitIncluded(placeDef) {
+        var _a;
+        return !!((_a = this._previousVisits) === null || _a === void 0 ? void 0 : _a.getVisitFor(placeDef));
+    }
+    getMostRecentVisitFor(placeDef) {
+        return first(this.getHistory(placeDef));
+    }
+    getHistory(placeDef) {
+        let history = this._archive.get(placeDef);
+        if (!history) {
+            history = [];
+            this.setHistory(placeDef, history);
+        }
+        return history;
+    }
+    setHistory(placeDef, history) {
+        this._archive.set(placeDef, history);
+    }
+    archive(visits) {
+        visits.forEach(state => {
+            const history = this.getHistory(state.placeDefinition);
+            const previousState = first(history);
+            if (!previousState || state.hasChangedFrom(previousState)) {
+                history.unshift(state); // LIFO
+                this.setHistory(state.placeDefinition, history.slice(0, this.placeHistoryDepth));
+            }
+        });
+    }
+}
+PlaceHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceHistory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PlaceHistory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceHistory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceHistory, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+(function (PlaceHistory) {
+    class VisitRecord {
+        constructor(visits) {
+            this.visits = visits;
+        }
+        update(visit) {
+            this.visits = this.visits.filter(v => v.placeDefinition !== visit.placeDefinition).concat(visit);
+        }
+        getVisitFor(placeDef) {
+            return this.visits.find(v => v.placeDefinition === placeDef);
+        }
+    }
+    PlaceHistory.VisitRecord = VisitRecord;
+    // export class Query {
+    //   private _history: Visit.State[];
+    //   private _places: Place[];
+    //   private _predicate: (visit: any) => boolean;
+    //   private _limit: number;
+    //
+    //   constructor(history, limit = history.length) {
+    //     this._history = history;
+    //     this._places = [];
+    //     this._predicate = (visit => true);
+    //     this._limit = limit;
+    //   }
+    //
+    //   to(...places:Place[]):this {
+    //     this._places = places;
+    //     return this;
+    //   }
+    //
+    //   with(parameters: { [parameter: string]: any }): this {
+    //     this.matching(state => {
+    //       return Object.keys(parameters).reduce((acc, key) => {
+    //         const matchValue = parameters[key];
+    //         const visitValue = state.get(key);
+    //         const matched = matchValue === '*' ? !isNil(visitValue) : visitValue == matchValue;
+    //         // Logger.get(this).info(`matched=${matched}`, parameters, visitValue);
+    //         return acc && matched;
+    //       }, true);
+    //     });
+    //     return this;
+    //   }
+    //
+    //   last(): Visit.State {
+    //     return findLast(this._history, visit => this._matches(visit))
+    //   }
+    //
+    //   // @trace
+    //   allThatMatch(): Visit.State[] {
+    //     return filter(this._history, visit => this._matches(visit)).slice(-this._limit);
+    //   }
+    //
+    //   // @trace
+    //   mostRecentValueOf<T=any>(param: string, defaultValue: T = null): T {
+    //     const lastStateWithParam = findLast(this.allThatMatch(), state => !isNil(state.get(param)));
+    //     return isNil(lastStateWithParam) ? defaultValue : lastStateWithParam.get(param);
+    //   }
+    //
+    //   limit(limit: number): this {
+    //     this._limit = limit;
+    //     return this;
+    //   }
+    //
+    //   matching(predicate: (visit: Visit.State) => boolean): this {
+    //     this._predicate = predicate;
+    //     return this;
+    //   }
+    //
+    //   _matches(visit: Visit.State) {
+    //     return this._isPlaceMatch(visit) && this._predicate(visit);
+    //   }
+    //
+    //   _isPlaceMatch(visit: Visit.State) {
+    //     return this._places.length < 1 || this._places.includes(visit.place)
+    //   }
+    //
+    // }
+})(PlaceHistory || (PlaceHistory = {}));
+
 function asArray(item) {
     return Array.isArray(item) ? item : [item];
 }
@@ -9066,9 +8924,9 @@ class PlaceRouter extends GarbageCollector {
             [def.getFormattedRouteParameters(visit)];
     }
 }
-PlaceRouter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceRouter, deps: [{ token: i1$e.Router }, { token: i4.Location }, { token: InteractionService }, { token: UrlService }, { token: PlaceHistory }], target: i0.ɵɵFactoryTarget.Injectable });
-PlaceRouter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceRouter, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceRouter, decorators: [{
+PlaceRouter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceRouter, deps: [{ token: i1$e.Router }, { token: i4.Location }, { token: InteractionService }, { token: UrlService }, { token: PlaceHistory }], target: i0.ɵɵFactoryTarget.Injectable });
+PlaceRouter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceRouter, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceRouter, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -9089,67 +8947,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
     PlaceRouter.State = State;
 })(PlaceRouter || (PlaceRouter = {}));
 
-const AUP_PLACE_CONFIG = new InjectionToken('AUP_PLACE_CONFIG');
-
-class NotAuthorisedNoticeComponent {
-    constructor() {
-    }
-}
-NotAuthorisedNoticeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NotAuthorisedNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotAuthorisedNoticeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NotAuthorisedNoticeComponent, selector: "aup-not-authorised-notice", ngImport: i0, template: "<p>You are not authorised to access this page</p>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NotAuthorisedNoticeComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'aup-not-authorised-notice',
-                    templateUrl: './not-authorised-notice.component.html',
-                    styleUrls: ['./not-authorised-notice.component.scss']
-                }]
-        }], ctorParameters: function () { return []; } });
-
-// Freezes the state of the components at the start of the animation.
-const animationStartStyle = style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
-const left = [
-    query(':enter, :leave', animationStartStyle, { optional: true }),
-    group([
-        query(':enter', [
-            style({ transform: 'translateX(-100%)' }),
-            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
-        ], {
-            optional: true
-        }),
-        query(':leave', [
-            style({ transform: 'translateX(0%)' }),
-            animate('{{duration}} ease-out', style({ transform: 'translateX(100%)' }))
-        ], {
-            optional: true
-        })
-    ])
-];
-const right = [
-    query(':enter, :leave', animationStartStyle, { optional: true }),
-    group([
-        query(':enter', [
-            style({ transform: 'translateX(100%)', minHeight: '1px' }),
-            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
-        ], {
-            optional: true
-        }),
-        query(':leave', [style({ transform: 'translateX(0%)' }), animate('{{duration}} ease-out', style({
-                transform: 'translateX(-100%)',
-                minHeight: '1px'
-            }))], {
-            optional: true
-        })
-    ])
-];
-function leftRightPlaceAnimation(duration) {
-    return trigger('routeAnimations', [
-        transition(':increment', right, { params: { duration: duration } }),
-        transition(':decrement', left, { params: { duration: duration } })
-    ]);
-}
-const LEFT_RIGHT_PLACE_ANIMATION = leftRightPlaceAnimation('0.3s');
-
 const AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = new InjectionToken('AUP_UNAUTHORISED_PLACE_COMPONENT');
 class PlaceOutletComponent extends DisposableComponent {
     constructor(router, placeRouter, placeConfig, unauthorisedPlaceNotice, parentOutlet, cdr) {
@@ -9336,8 +9133,8 @@ class PlaceOutletComponent extends DisposableComponent {
         }
     }
 }
-PlaceOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceOutletComponent, deps: [{ token: i1$e.Router }, { token: PlaceRouter }, { token: AUP_PLACE_CONFIG, optional: true }, { token: AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, optional: true }, { token: PlaceOutletComponent, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PlaceOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PlaceOutletComponent, selector: "aup-place-outlet", inputs: { animate: "animate", animateModel: "animateModel", customPlaceAnimationOrderModel: ["placeAnimationOrderModel", "customPlaceAnimationOrderModel"], customPlaceAnimationOrder: ["placeAnimationOrder", "customPlaceAnimationOrder"] }, outputs: { placeChanged: "placeChanged" }, host: { properties: { "class.authorised": "this.isAuthorised" } }, viewQueries: [{ propertyName: "routerOut", first: true, predicate: ["routeOutlet"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<div  class=\"not-authorised-component-container\" *ngIf=\"!authorised.value\">\n  <ng-template [cdkPortalOutlet]=\"notAuthorisedNoticePortal\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:auto}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: i1$e.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }, { type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [LEFT_RIGHT_PLACE_ANIMATION] });
+PlaceOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceOutletComponent, deps: [{ token: i1$e.Router }, { token: PlaceRouter }, { token: AUP_PLACE_CONFIG, optional: true }, { token: AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, optional: true }, { token: PlaceOutletComponent, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PlaceOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PlaceOutletComponent, selector: "aup-place-outlet", inputs: { animate: "animate", animateModel: "animateModel", customPlaceAnimationOrderModel: ["placeAnimationOrderModel", "customPlaceAnimationOrderModel"], customPlaceAnimationOrder: ["placeAnimationOrder", "customPlaceAnimationOrder"] }, outputs: { placeChanged: "placeChanged" }, host: { properties: { "class.authorised": "this.isAuthorised" } }, viewQueries: [{ propertyName: "routerOut", first: true, predicate: ["routeOutlet"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<div  class=\"not-authorised-component-container\" *ngIf=\"!authorised.value\">\n  <ng-template [cdkPortalOutlet]=\"notAuthorisedNoticePortal\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:auto}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: i1$e.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [LEFT_RIGHT_PLACE_ANIMATION] });
 __decorate([
     StoreInValueModel('animateModel'),
     __metadata("design:type", Boolean)
@@ -9354,29 +9151,26 @@ __decorate([
     StoreInListModel('customPlaceAnimationOrderModel'),
     __metadata("design:type", Array)
 ], PlaceOutletComponent.prototype, "customPlaceAnimationOrder", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceOutletComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-place-outlet',
-                    templateUrl: './place-outlet.component.html',
-                    styleUrls: ['./place-outlet.component.scss'],
-                    animations: [LEFT_RIGHT_PLACE_ANIMATION]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$e.Router }, { type: PlaceRouter }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AUP_PLACE_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT]
-                }] }, { type: PlaceOutletComponent, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { animate: [{
+            args: [{ selector: 'aup-place-outlet', animations: [LEFT_RIGHT_PLACE_ANIMATION], template: "<ng-container *ngIf=\"animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable\n       [@routeAnimations]=\"{value: getAnimationOrder(), params:{duration: animationDuration}}\"\n       (@routeAnimations.start)=\"animationStarted()\"\n       (@routeAnimations.done)=\"animationDone()\"\n  >\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"!animationEnabled.value\">\n  <div class=\"router-outlet-container\"\n       cdkScrollable>\n    <router-outlet #routerOutlet=\"outlet\"\n                   (activate)=\"onOutletActivated(routerOutlet, $event)\"\n                   (deactivate)=\"onOutletDeactivated()\">\n    </router-outlet>\n  </div>\n</ng-container>\n\n<div  class=\"not-authorised-component-container\" *ngIf=\"!authorised.value\">\n  <ng-template [cdkPortalOutlet]=\"notAuthorisedNoticePortal\"></ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:host:not(.authorised) .router-outlet-container{display:none}.router-outlet-container{flex:1;display:block;position:relative;min-height:0;overflow-x:hidden;overflow-y:auto}router-outlet{display:none}.not-authorised-component-container{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$e.Router }, { type: PlaceRouter }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [AUP_PLACE_CONFIG]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT]
+                    }] }, { type: PlaceOutletComponent, decorators: [{
+                        type: SkipSelf
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { animate: [{
                 type: Input
             }], animateModel: [{
                 type: Input
@@ -9443,8 +9237,8 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
     ngOnInit() {
     }
 }
-AbstractPlaceNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractPlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-AbstractPlaceNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AbstractPlaceNavigationComponent, selector: "ng-component", inputs: { places: "places", placesModel: "placesModel", placeOutlet: "placeOutlet", placeOutletModel: "placeOutletModel" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+AbstractPlaceNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractPlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
+AbstractPlaceNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AbstractPlaceNavigationComponent, selector: "ng-component", inputs: { places: "places", placesModel: "placesModel", placeOutlet: "placeOutlet", placeOutletModel: "placeOutletModel" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     StoreInListModel('placesModel'),
     __metadata("design:type", Array)
@@ -9467,7 +9261,7 @@ __decorate([
     __metadata("design:paramtypes", [PlaceDefinition]),
     __metadata("design:returntype", Object)
 ], AbstractPlaceNavigationComponent.prototype, "getNavigationFace", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AbstractPlaceNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AbstractPlaceNavigationComponent, decorators: [{
             type: Component,
             args: [{
                     template: ''
@@ -9487,15 +9281,11 @@ class ListPlaceNavComponent extends AbstractPlaceNavigationComponent {
         super(router);
     }
 }
-ListPlaceNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListPlaceNavComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-ListPlaceNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n", 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"], components: [{ type: i2$4.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListPlaceNavComponent, decorators: [{
+ListPlaceNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ListPlaceNavComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
+ListPlaceNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n", 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"], components: [{ type: i2$4.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ListPlaceNavComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-list-place-nav',
-                    templateUrl: './list-place-nav.component.html',
-                    styleUrls: ['./list-place-nav.component.scss']
-                }]
+            args: [{ selector: 'aup-list-place-nav', template: "<mat-nav-list fxFlex>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n</mat-nav-list>\n", 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"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; } });
 
 /**
@@ -9554,8 +9344,8 @@ class SidePlaceNavigationComponent extends AbstractPlaceNavigationComponent {
         this.expanded = !this.expanded;
     }
 }
-SidePlaceNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SidePlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-SidePlaceNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", 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()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-nav-item-height: var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}\n"], components: [{ type: i2$4.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SidePlaceNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SidePlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
+SidePlaceNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", 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()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-nav-item-height: var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}\n"], components: [{ type: i2$4.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: IconComponent, selector: "aup-icon", inputs: ["icon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 __decorate([
     TrackExternal(),
     __metadata("design:type", MutableValueModel)
@@ -9564,13 +9354,9 @@ __decorate([
     StoreInValueModel("expanded$"),
     __metadata("design:type", Boolean)
 ], SidePlaceNavigationComponent.prototype, "expanded", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SidePlaceNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SidePlaceNavigationComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-side-place-navigation',
-                    templateUrl: './side-place-navigation.component.html',
-                    styleUrls: ['./side-place-navigation.component.scss']
-                }]
+            args: [{ selector: 'aup-side-place-navigation', template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\" class=\"home\">\n    <aup-icon class=\"collapsed-only\" icon=\"mat:menu\"></aup-icon>\n    <aup-icon class=\"expanded-only\" icon=\"mat:arrow_back\"></aup-icon>\n    <span class=\"expanded-only\">Menu</span>\n  </a>\n  <a mat-list-item *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [class.active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-icon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-nav-item-height: var(--nav-item-height, var(--resolved-nav-item-width));--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);width:var(--resolved-nav-item-width);transition:width 125ms linear;background-color:var(--resolved-background-color);color:var(--resolved-color)}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host-context(.expanded) .expanded-only{max-width:100%}:host-context(.expanded) .collapsed-only{max-width:0}:host-context(.expanded) .mat-list-item aup-icon:not(.collapsed-only){margin-right:12px}:host-context(.expanded) .mat-list-item span{text-wrap:none;white-space:nowrap}.expanded-only{max-width:0;overflow:hidden}.collapsed-only{max-width:100%;overflow:hidden}mat-nav-list{flex:1;display:flex;flex-direction:column}.mat-list-item{width:var(--resolved-nav-item-width);height:var(--resolved-nav-item-height);color:inherit}.mat-list-item.active{background-color:#444}.mat-list-item.home{text-align:left}mat-icon{color:inherit}mat-icon.flip-horizontal{transform:scaleX(-1)}\n"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; }, propDecorators: { expanded$: [{
                 type: Input
             }], expanded: [{
@@ -9588,21 +9374,17 @@ class TabbedPlaceNavigationComponent extends AbstractPlaceNavigationComponent {
         super(router);
     }
 }
-TabbedPlaceNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TabbedPlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-TabbedPlaceNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TabbedPlaceNavigationComponent, selector: "aup-tabbed-place-navigation", usesInheritance: true, ngImport: i0, template: "<nav mat-tab-nav-bar>\n  <ng-content select=\"[nav-start]\"></ng-content>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n  <ng-content select=\"[nav-end]\"></ng-content>\n</nav>\n", styles: [":host{display:block}div.place-holder{border:1px solid green}\n"], components: [{ type: i1$b.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$b.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: TabbedPlaceNavigationComponent, decorators: [{
+TabbedPlaceNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TabbedPlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
+TabbedPlaceNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TabbedPlaceNavigationComponent, selector: "aup-tabbed-place-navigation", usesInheritance: true, ngImport: i0, template: "<nav mat-tab-nav-bar>\n  <ng-content select=\"[nav-start]\"></ng-content>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n  <ng-content select=\"[nav-end]\"></ng-content>\n</nav>\n", styles: [":host{display:block}div.place-holder{border:1px solid green}\n"], components: [{ type: i1$b.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { type: CommandFaceComponent, selector: "aup-command-face", inputs: ["faces", "face", "ignoreIcon", "ignoreText", "includeMissingIconInLayout"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$b.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TabbedPlaceNavigationComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'aup-tabbed-place-navigation',
-                    templateUrl: './tabbed-place-navigation.component.html',
-                    styleUrls: ['./tabbed-place-navigation.component.scss']
-                }]
+            args: [{ selector: 'aup-tabbed-place-navigation', template: "<nav mat-tab-nav-bar>\n  <ng-content select=\"[nav-start]\"></ng-content>\n  <a mat-tab-link *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     [pectinCommand]=\"commandFactory.create(item.place)\"\n     [active]=\"item.active\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\">\n    <aup-command-face [faces]=\"[getNavigationFace(item.place)]\"></aup-command-face>\n  </a>\n  <ng-content select=\"[nav-end]\"></ng-content>\n</nav>\n", styles: [":host{display:block}div.place-holder{border:1px solid green}\n"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; } });
 
 class PlaceModule {
 }
-PlaceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PlaceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceModule, declarations: [PlaceOutletComponent,
+PlaceModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PlaceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceModule, declarations: [PlaceOutletComponent,
         TabbedPlaceNavigationComponent,
         ListPlaceNavComponent,
         SidePlaceNavigationComponent,
@@ -9623,7 +9405,7 @@ PlaceModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ListPlaceNavComponent,
         SidePlaceNavigationComponent,
         AbstractPlaceNavigationComponent] });
-PlaceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceModule, providers: [
+PlaceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceModule, providers: [
     // {provide: AUP_PLACE_CONFIG, useValue: {animationDuration: "2000ms"}}
     ], imports: [[
             CommonModule,
@@ -9639,7 +9421,7 @@ PlaceModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             ComponentsModule,
             PortalModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -9664,7 +9446,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                         AbstractPlaceNavigationComponent,
                         NotAuthorisedNoticeComponent
                     ],
-                    entryComponents: [],
                     exports: [
                         PlaceOutletComponent,
                         TabbedPlaceNavigationComponent,
@@ -9681,8 +9462,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 // Trick @jscutlery/semver to bump the version again..
 class AngularUiPowerupsModule {
 }
-AngularUiPowerupsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularUiPowerupsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AngularUiPowerupsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularUiPowerupsModule, imports: [CommonModule,
+AngularUiPowerupsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AngularUiPowerupsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AngularUiPowerupsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AngularUiPowerupsModule, imports: [CommonModule,
         BrowserAnimationsModule,
         FormsModule,
         MatInputModule,
@@ -9697,7 +9478,7 @@ AngularUiPowerupsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         DirectivesModule,
         ComponentsModule,
         NoopComponent] });
-AngularUiPowerupsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularUiPowerupsModule, imports: [[
+AngularUiPowerupsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AngularUiPowerupsModule, imports: [[
             CommonModule,
             BrowserAnimationsModule,
             FormsModule,
@@ -9713,7 +9494,7 @@ AngularUiPowerupsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         PlaceModule,
         DirectivesModule,
         ComponentsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: AngularUiPowerupsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AngularUiPowerupsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -9838,24 +9619,26 @@ class DialogInteractionContextFactory extends ModalInteractionContextFactory {
         return new DialogInteractionContext(identifier, api, this.dialogService, config);
     }
 }
-DialogInteractionContextFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DialogInteractionContextFactory, deps: [{ token: i1$f.MatDialog }, { token: DIALOG_INTERACTION_SERVICE_DEFAULTS, optional: true }, { token: MAT_DIALOG_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-DialogInteractionContextFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DialogInteractionContextFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DialogInteractionContextFactory, decorators: [{
+DialogInteractionContextFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DialogInteractionContextFactory, deps: [{ token: i1$f.MatDialog }, { token: DIALOG_INTERACTION_SERVICE_DEFAULTS, optional: true }, { token: MAT_DIALOG_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogInteractionContextFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DialogInteractionContextFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DialogInteractionContextFactory, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$f.MatDialog }, { type: i1$f.MatDialogConfig, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [DIALOG_INTERACTION_SERVICE_DEFAULTS]
-                }] }, { type: i1$f.MatDialogConfig, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MAT_DIALOG_DEFAULT_OPTIONS]
-                }] }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1$f.MatDialog }, { type: i1$f.MatDialogConfig, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DIALOG_INTERACTION_SERVICE_DEFAULTS]
+                    }] }, { type: i1$f.MatDialogConfig, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [MAT_DIALOG_DEFAULT_OPTIONS]
+                    }] }];
+    } });
 
 /**
  * @file Automatically generated by barrelsby.
@@ -9885,9 +9668,9 @@ class NoopAuthGuard {
         });
     }
 }
-NoopAuthGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NoopAuthGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NoopAuthGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NoopAuthGuard, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NoopAuthGuard, decorators: [{
+NoopAuthGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopAuthGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NoopAuthGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopAuthGuard, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: NoopAuthGuard, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -10027,9 +9810,9 @@ class PlaceGuard {
         });
     }
 }
-PlaceGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceGuard, deps: [{ token: i1$e.Router }, { token: UrlService }, { token: PlaceRouter }, { token: PlaceHistory }, { token: InteractionService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-PlaceGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceGuard, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PlaceGuard, decorators: [{
+PlaceGuard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceGuard, deps: [{ token: i1$e.Router }, { token: UrlService }, { token: PlaceRouter }, { token: PlaceHistory }, { token: InteractionService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+PlaceGuard.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceGuard, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceGuard, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$e.Router }, { type: UrlService }, { type: PlaceRouter }, { type: PlaceHistory }, { type: InteractionService }, { type: i0.Injector }]; } });
@@ -10143,7 +9926,7 @@ class VisibilityService extends GarbageCollector {
     // private _throttledWakeEvents: Stream<Instant>;
     constructor(document) {
         super();
-        this._visibleModel = new MutableValueModel();
+        this._visible$ = new MutableValueModel();
         this.document = document; // see https://stackoverflow.com/a/53715642
         const { chain } = Dsl.disposeWith(this);
         // Set the name of the hidden property and the change event for visibility
@@ -10171,8 +9954,7 @@ class VisibilityService extends GarbageCollector {
                 this.document.removeEventListener(this.eventName, handler);
             });
         }
-        wakeEvent(() => this.updateVisibilityState());
-        this._visibleModel.value = this.isVisible();
+        this._visible$.value = this.isVisible();
         // give the network a chance to come back or we end up with a bunch of failed requests.
         // should probably also implement a connection service so that we can go
         // connectionServer.ensureConnectedThen(fireWakeEvent);
@@ -10183,11 +9965,17 @@ class VisibilityService extends GarbageCollector {
     // }
     // @trace
     updateVisibilityState() {
-        this._visibleModel.value = this.isVisible();
+        this._visible$.value = this.isVisible();
         // this._wakeEvents.publish(Instant.now());
     }
+    /**
+     * @deprecated use visible$ instead.
+     */
     get visibleModel() {
-        return this._visibleModel.readonly;
+        return this._visible$.readonly;
+    }
+    get visible$() {
+        return this._visible$.readonly;
     }
     isHidden() {
         return !!this.document[this.attributeName];
@@ -10196,15 +9984,17 @@ class VisibilityService extends GarbageCollector {
         return !this.isHidden();
     }
 }
-VisibilityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: VisibilityService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-VisibilityService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: VisibilityService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: VisibilityService, decorators: [{
+VisibilityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: VisibilityService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+VisibilityService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: VisibilityService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: VisibilityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    } });
 
 /**
  * @file Automatically generated by barrelsby.
@@ -10215,4 +10005,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
  */
 
 export { ACTIVITY_DATA, ALERT_CONFIG, AUP_PLACE_CONFIG, AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT, AbstractActivityTriggerComponent, AbstractCardContainerComponent, AbstractConfirmDialogComponent, AbstractDialogComponent, AbstractInputComponent, AbstractInteractionContext, AbstractListInputComponent, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, AbstractPopupMenuComponent, AbstractTableComponent, AbstractTableModel, AbstractValueInputComponent, Activity, ActivityActionsComponent, ActivityBodyComponent, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, ActivityTitleComponent, AddCardActivityComponent, AddItemInteractionContextComponent, Alert, AlertDialogComponent, AngularUiPowerupsModule, AutocompleteInputComponent, Bounds, BusyOverlayComponent, CELL_EDITOR_PORTAL, CELL_RENDERER_PORTAL, CardContainerComponent, CardStackComponent, CellEditorPortalRef, CellHeaderPortalRef, CellPortalRef, CellRendererPortalRef, CheckboxInputComponent, ColumnListModel, ColumnModel, ColumnTemplateDirective, CommandComponent, CommandContainer, CommandDirective, CommandFace, CommandFaceComponent, ComponentCellRendererPortalRef, ComponentsModule, ConfirmThenDialogComponent, ConfirmThenExecuteDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, CustomTemplateColumnModel, CustomValueColumnModel, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DecoratedTreeNode, DefaultCellRendererComponent, DefaultHeaderCellRendererComponent, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EditRowControls, EditSession, EditorControlColumnModel, EmptyStateComponent, EventCleanUpSession, FlattenedTreeListModel, FlexComponent, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, HEADER_CELL_RENDERER_PORTAL, HighlightPipe, HighlightTextModelDirective, HorizontalAlignment, IconComponent, InPlaceInteractionContextComponent, InlineActivityTriggerComponent, InlineEditorModel, InlineStringEditorComponent, InputActivity, InteractionContextTriggerFor, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, LabelledValueComponent, ListPlaceNavComponent, ListPropertyColumnModel, LoadingContainerComponent, MarkdownComponent, MarkdownService, ModalActivityTriggerComponent, ModalInteractionContextFactory, MoreMenuComponent, MultipleSelectInputComponent, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NotAuthorisedNoticeComponent, NumberInputComponent, POPUP_CONTAINER, PORTAL_EDITOR_COMPONENT, PORTAL_RENDERER_COMPONENT, PaginatorComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceAccessGuard, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, PopupActivityTriggerComponent, PopupAwareComponent, PopupInteractionContextComponent, PopupMenuComponent, PopupMenuRendererComponent, PropertyColumnModel, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SectionHeaderComponent, SelectCellRendererComponent, SelectHeaderCellRendererComponent, SelectInputActivity, SelectInputComponent, SelectionColumnModel, SeparatorComponent, SidePlaceNavigationComponent, StringInputActivity, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, TableCellRendererComponent, TableComponent, TableHeaderCellRendererComponent, TableModel, TableRowMenuComponent, TemplateCellRendererPortalRef, TextInputComponent, ToolBarComponent, TrackBy, TreeExpansionModel, TreeInheritanceIconComponent, TreeLabelCellRendererComponent, TreeLabelColumnModel, TreeTableComponent, TreeTableModel, UrlService, UrlSnapshot, VerticalFocusContainerComponent, VisibilityService, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, markdownPillExtension, slideDownOnEnterAnimation, slideRightOnEnterAnimation, treeNodeDecorator };
-//# sourceMappingURL=coolon-angular-ui-powerups.js.map
+//# sourceMappingURL=coolon-angular-ui-powerups.mjs.map