@elderbyte/ngx-starter 18.13.0-beta.1 → 18.13.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -8737,6 +8737,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i2.TranslateService }] });
 
+class UnreachableCaseError {
+    constructor(value) {
+        this.value = value;
+    }
+}
+
 class CsvSerializer {
     constructor(csvSpec, translateService) {
         this._csvSpec = csvSpec;
@@ -11183,11 +11189,11 @@ class StandardToastComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: StandardToastComponent, deps: [{ token: i1$5.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: StandardToastComponent, isStandalone: true, selector: "elder-standard-toast", ngImport: i0, template: "<div class=\"layout-col place-start-stretch gap-xs mat-mdc-snack-bar-container elder-toast\" \n  [class.elder-toast-type-warn]=\"toast.type === ToastType.Warning\"\n  [class.elder-toast-type-error]=\"toast.type === ToastType.Error\"\n  >\n  <!-- Icon and Status -->\n  <div class=\"layout-row place-start-center gap-sm\">\n    <mat-icon class=\"noselect\">{{ icon(toast.type) }}</mat-icon>\n    <span\n      class=\"toast-title mat-subtitle-2 noselect\"\n      >{{ toast.status }}</span\n    >\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  @if (toast.message) {\n    <span\n      class=\"mat-body noselect\"\n      matSnackBarLabel\n      >{{ toast.message }}</span\n    >\n  }\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  @if (toast.detail) {\n    <span\n      class=\"mat-small noselect\"\n      matSnackBarLabel\n      >{{ trimDetailText(toast.detail, 200) }}</span\n    >\n  }\n\n  <!-- Actions -->\n  <div class=\"layout-row place-end-center\" matSnackBarActions>\n    <button\n      mat-button\n      matSnackBarAction\n      type=\"button\"\n      [color]=\"iconColor(toast.type)\"\n      (click)=\"close()\"\n    >\n      Ok\n    </button>\n  </div>\n</div>\n", styles: [".elder-toast{--mat-snack-bar-button-color: var(--md-sys-color-on-primary-container)}.elder-toast button{background-color:var(--md-sys-color-primary-container)}.elder-toast .toast-title,.elder-toast .mat-icon{color:var(--md-sys-color-primary-fixed)}.elder-toast.elder-toast-type-warn button{background-color:var(--md-sys-color-tertiary-container)}.elder-toast.elder-toast-type-warn .toast-title,.elder-toast.elder-toast-type-warn .mat-icon{color:var(--md-sys-color-tertiary-fixed)}.elder-toast.elder-toast-type-error button{background-color:var(--md-sys-color-error-container)}.elder-toast.elder-toast-type-error .toast-title,.elder-toast.elder-toast-type-error .mat-icon{color:var(--md-sys-color-error)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatSnackBarAction, selector: "[matSnackBarAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: StandardToastComponent, isStandalone: true, selector: "elder-standard-toast", ngImport: i0, template: "<div class=\"layout-col place-start-stretch gap-xs mat-mdc-snack-bar-container\">\n  <!-- Icon and Status -->\n  <div class=\"layout-row place-start-center gap-sm\">\n    <mat-icon class=\"noselect\">{{ icon(toast.type) }}</mat-icon>\n    <span\n      class=\"toast-title mat-subtitle-2 noselect\"\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n      >{{ toast.status }}</span\n    >\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  @if (toast.message) {\n    <span\n      class=\"mat-body noselect\"\n      matSnackBarLabel\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n      [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n      >{{ toast.message }}</span\n    >\n  }\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  @if (toast.detail) {\n    <span\n      class=\"mat-small noselect\"\n      matSnackBarLabel\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n      [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n      >{{ trimDetailText(toast.detail, 200) }}</span\n    >\n  }\n\n  <!-- Actions -->\n  <div class=\"layout-row place-end-center\" matSnackBarActions>\n    <button\n      mat-button\n      matSnackBarAction\n      type=\"button\"\n      [color]=\"iconColor(toast.type)\"\n      (click)=\"close()\"\n    >\n      Ok\n    </button>\n  </div>\n</div>\n", styles: [".toast-title{font-size:16px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatSnackBarAction, selector: "[matSnackBarAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: StandardToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-standard-toast', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIcon, MatSnackBarLabel, MatSnackBarActions, MatButton, MatSnackBarAction], template: "<div class=\"layout-col place-start-stretch gap-xs mat-mdc-snack-bar-container elder-toast\" \n  [class.elder-toast-type-warn]=\"toast.type === ToastType.Warning\"\n  [class.elder-toast-type-error]=\"toast.type === ToastType.Error\"\n  >\n  <!-- Icon and Status -->\n  <div class=\"layout-row place-start-center gap-sm\">\n    <mat-icon class=\"noselect\">{{ icon(toast.type) }}</mat-icon>\n    <span\n      class=\"toast-title mat-subtitle-2 noselect\"\n      >{{ toast.status }}</span\n    >\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  @if (toast.message) {\n    <span\n      class=\"mat-body noselect\"\n      matSnackBarLabel\n      >{{ toast.message }}</span\n    >\n  }\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  @if (toast.detail) {\n    <span\n      class=\"mat-small noselect\"\n      matSnackBarLabel\n      >{{ trimDetailText(toast.detail, 200) }}</span\n    >\n  }\n\n  <!-- Actions -->\n  <div class=\"layout-row place-end-center\" matSnackBarActions>\n    <button\n      mat-button\n      matSnackBarAction\n      type=\"button\"\n      [color]=\"iconColor(toast.type)\"\n      (click)=\"close()\"\n    >\n      Ok\n    </button>\n  </div>\n</div>\n", styles: [".elder-toast{--mat-snack-bar-button-color: var(--md-sys-color-on-primary-container)}.elder-toast button{background-color:var(--md-sys-color-primary-container)}.elder-toast .toast-title,.elder-toast .mat-icon{color:var(--md-sys-color-primary-fixed)}.elder-toast.elder-toast-type-warn button{background-color:var(--md-sys-color-tertiary-container)}.elder-toast.elder-toast-type-warn .toast-title,.elder-toast.elder-toast-type-warn .mat-icon{color:var(--md-sys-color-tertiary-fixed)}.elder-toast.elder-toast-type-error button{background-color:var(--md-sys-color-error-container)}.elder-toast.elder-toast-type-error .toast-title,.elder-toast.elder-toast-type-error .mat-icon{color:var(--md-sys-color-error)}\n"] }]
+            args: [{ selector: 'elder-standard-toast', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIcon, MatSnackBarLabel, MatSnackBarActions, MatButton, MatSnackBarAction], template: "<div class=\"layout-col place-start-stretch gap-xs mat-mdc-snack-bar-container\">\n  <!-- Icon and Status -->\n  <div class=\"layout-row place-start-center gap-sm\">\n    <mat-icon class=\"noselect\">{{ icon(toast.type) }}</mat-icon>\n    <span\n      class=\"toast-title mat-subtitle-2 noselect\"\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n      >{{ toast.status }}</span\n    >\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  @if (toast.message) {\n    <span\n      class=\"mat-body noselect\"\n      matSnackBarLabel\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n      [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n      >{{ toast.message }}</span\n    >\n  }\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  @if (toast.detail) {\n    <span\n      class=\"mat-small noselect\"\n      matSnackBarLabel\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n      [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n      >{{ trimDetailText(toast.detail, 200) }}</span\n    >\n  }\n\n  <!-- Actions -->\n  <div class=\"layout-row place-end-center\" matSnackBarActions>\n    <button\n      mat-button\n      matSnackBarAction\n      type=\"button\"\n      [color]=\"iconColor(toast.type)\"\n      (click)=\"close()\"\n    >\n      Ok\n    </button>\n  </div>\n</div>\n", styles: [".toast-title{font-size:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.MatSnackBarRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
@@ -11641,11 +11647,11 @@ class ElderBlobViewerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderBlobViewerComponent, deps: [{ token: HttpClientPristine }, { token: i1.DomSanitizer }, { token: ElderToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ElderBlobViewerComponent, isStandalone: true, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: { classPropertyName: "displayUnknownAsText", publicName: "displayUnknownAsText", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: false, isRequired: false, transformFunction: null }, blobUrl: { classPropertyName: "blobUrl", publicName: "blobUrl", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, mimeType: { classPropertyName: "mimeType", publicName: "mimeType", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-col full place-center-center document-viewer\">\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\" [src]=\"blobContext.safeUrl\" alt=\"blob image\" />\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed\n          class=\"embedded\"\n          [src]=\"blobContext.safeUrl\"\n          [type]=\"blobContext.mimeType.value\"\n          width=\"100%\"\n          height=\"100%\"\n        />\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\"\n        wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{ blobContext.mimeType.value }}!</p>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:var(--md-sys-color-surface-dim);color:var(--md-sys-color-on-surface)}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #fff;border-bottom:1px solid #fff}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ElderBlobViewerComponent, isStandalone: true, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: { classPropertyName: "displayUnknownAsText", publicName: "displayUnknownAsText", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: false, isRequired: false, transformFunction: null }, blobUrl: { classPropertyName: "blobUrl", publicName: "blobUrl", isSignal: false, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, mimeType: { classPropertyName: "mimeType", publicName: "mimeType", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-col full place-center-center document-viewer\">\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\" [src]=\"blobContext.safeUrl\" alt=\"blob image\" />\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed\n          class=\"embedded\"\n          [src]=\"blobContext.safeUrl\"\n          [type]=\"blobContext.mimeType.value\"\n          width=\"100%\"\n          height=\"100%\"\n        />\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\"\n        wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{ blobContext.mimeType.value }}!</p>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-border-radius:12px;border-radius:0;-webkit-box-shadow:0px 2px 14px #000;box-shadow:0 2px 14px #000;border-top:1px solid #fff;border-bottom:1px solid #fff}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderBlobViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, AsyncPipe], template: "<div class=\"layout-col full place-center-center document-viewer\">\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\" [src]=\"blobContext.safeUrl\" alt=\"blob image\" />\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed\n          class=\"embedded\"\n          [src]=\"blobContext.safeUrl\"\n          [type]=\"blobContext.mimeType.value\"\n          width=\"100%\"\n          height=\"100%\"\n        />\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\"\n        wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{ blobContext.mimeType.value }}!</p>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:var(--md-sys-color-surface-dim);color:var(--md-sys-color-on-surface)}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #fff;border-bottom:1px solid #fff}\n"] }]
+            args: [{ selector: 'elder-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, AsyncPipe], template: "<div class=\"layout-col full place-center-center document-viewer\">\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n    <!-- Video -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isVideo\">\n      <video class=\"video\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.mimeType.isAudio\">\n      <audio class=\"audio\" controls autoplay loop>\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" />\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\">\n      <img class=\"cover flex\" [src]=\"blobContext.safeUrl\" alt=\"blob image\" />\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayEmbedded\">\n      <div class=\"full\">\n        <embed\n          class=\"embedded\"\n          [src]=\"blobContext.safeUrl\"\n          [type]=\"blobContext.mimeType.value\"\n          width=\"100%\"\n          height=\"100%\"\n        />\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div class=\"layout-col full\" *ngIf=\"blobContext.displayAsText\">\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\"\n        wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div class=\"layout-col place-center-center full\" *ngIf=\"blobContext.cantDisplay\">\n      <p>Cant display {{ blobContext.mimeType.value }}!</p>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div class=\"layout-col place-center-center full\">\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-border-radius:12px;border-radius:0;-webkit-box-shadow:0px 2px 14px #000;box-shadow:0 2px 14px #000;border-top:1px solid #fff;border-bottom:1px solid #fff}\n"] }]
         }], ctorParameters: () => [{ type: HttpClientPristine }, { type: i1.DomSanitizer }, { type: ElderToastService }], propDecorators: { blob: [{
                 type: Input
             }], blobUrl: [{
@@ -14259,7 +14265,7 @@ class ElderBadgeComponent {
         return this.chipAvatarTemplate$.getValue();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ElderBadgeComponent, isStandalone: true, selector: "elder-badge", inputs: { appearance: "appearance", value: "value", colorSpec: "colorSpec", badgeColor: "badgeColor", avatarSpec: "avatarSpec", setCssClass: ["cssClass", "setCssClass"], chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate" }, queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderBadgeChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderBadgeChipAvatarDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;box-sizing:border-box;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ElderBadgeComponent, isStandalone: true, selector: "elder-badge", inputs: { appearance: "appearance", value: "value", colorSpec: "colorSpec", badgeColor: "badgeColor", avatarSpec: "avatarSpec", setCssClass: ["cssClass", "setCssClass"], chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate" }, queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderBadgeChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderBadgeChipAvatarDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;box-sizing:border-box}.elder-badge.mat-mdc-standard-chip{height:var(--mat-badge-text-size, 12px)4}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderBadgeComponent, decorators: [{
             type: Component,
@@ -14272,7 +14278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         MatIcon,
                         AsyncPipe,
                         ElderTruncatePipe,
-                    ], template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;box-sizing:border-box;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"] }]
+                    ], template: "<ng-container *ngIf=\"templates$ | async as templates\">\n  <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n    <mat-chip\n      elderChipLabel\n      [appearance]=\"appearance\"\n      [color]=\"badgeModel.colorSpec?.theme\"\n      [stateColor]=\"badgeModel.colorSpec?.state\"\n      [levelColor]=\"badgeModel.colorSpec?.level\"\n      [class]=\"'elder-badge fill ' + elementClass\"\n    >\n      <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.avatar || simpleAvatarTemplate;\n            context: { $implicit: badgeModel }\n          \"\n        >\n        </ng-container>\n      </mat-chip-avatar>\n\n      <ng-container\n        *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n      >\n      </ng-container>\n\n      <ng-content></ng-content>\n    </mat-chip>\n  </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n  <!--\n  <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n  -->\n  {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n  <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;box-sizing:border-box}.elder-badge.mat-mdc-standard-chip{height:var(--mat-badge-text-size, 12px)4}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{
                 type: Input
             }], value: [{
@@ -17059,13 +17065,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-var ElderCheckboxState;
-(function (ElderCheckboxState) {
-    ElderCheckboxState[ElderCheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
-    ElderCheckboxState[ElderCheckboxState["CHECKED"] = 1] = "CHECKED";
-    ElderCheckboxState[ElderCheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
-})(ElderCheckboxState || (ElderCheckboxState = {}));
-class ElderTripleStateCheckboxDirective {
+var TripleCheckboxState;
+(function (TripleCheckboxState) {
+    TripleCheckboxState[TripleCheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
+    TripleCheckboxState[TripleCheckboxState["CHECKED"] = 1] = "CHECKED";
+    TripleCheckboxState[TripleCheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
+})(TripleCheckboxState || (TripleCheckboxState = {}));
+class ElderTripleStateCheckboxController {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -17074,74 +17080,62 @@ class ElderTripleStateCheckboxDirective {
     constructor(checkbox, ngModel) {
         this.checkbox = checkbox;
         this.ngModel = ngModel;
-        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._stateChange = this.ngModel.valueChanges.pipe(takeUntilDestroyed(), map((value) => this.controlValueToState(value)));
+        this.stateChange.subscribe((value) => this.writeState(value));
     }
     /***************************************************************************
      *                                                                         *
-     * Life Cycle                                                              *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() {
-        this.state = this.state;
-        this.checkbox.registerOnChange(() => this.toggleNextState());
-        this.ngModel.valueChanges.subscribe((value) => (this.state = this.controlValueToState(value)));
+    get stateChange() {
+        return this._stateChange;
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    get state() {
-        return this.controlValueToState(this.readControlValue());
+    toggleNextState() {
+        const current = this.readState();
+        this.writeState((current + 1) % 3);
     }
-    set state(newState) {
-        switch (newState) {
-            case ElderCheckboxState.UNCHECKED:
-                this.setCheckboxUnchecked();
+    writeState(state) {
+        switch (state) {
+            case TripleCheckboxState.UNCHECKED:
+                this.writeValueToControlAndModel(false);
                 break;
-            case ElderCheckboxState.CHECKED:
-                this.setCheckboxChecked();
+            case TripleCheckboxState.CHECKED:
+                this.writeValueToControlAndModel(true);
                 break;
-            case ElderCheckboxState.INDETERMINATE:
-                this.setCheckboxIndeterminate();
+            case TripleCheckboxState.INDETERMINATE:
+                this.writeValueToControlAndModel(undefined);
                 break;
+            default:
+                throw new UnreachableCaseError(state);
         }
     }
+    readState() {
+        return this.controlValueToState(this.readControlValue());
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
     controlValueToState(value) {
-        switch (ParseUtil.parseBoolOrUndefined(value)) {
+        const state = ParseUtil.parseBoolOrUndefined(value);
+        switch (state) {
             case false:
-                return ElderCheckboxState.UNCHECKED;
+                return TripleCheckboxState.UNCHECKED;
             case true:
-                return ElderCheckboxState.CHECKED;
+                return TripleCheckboxState.CHECKED;
             case undefined:
-                return ElderCheckboxState.INDETERMINATE;
+                return TripleCheckboxState.INDETERMINATE;
+            default:
+                throw new UnreachableCaseError(state);
         }
     }
-    toggleNextState() {
-        this.state = (this.state + 1) % 3;
-    }
-    setCheckboxUnchecked() {
-        this.checkbox.value = 'false';
-        this.checkbox.checked = false;
-        this.checkbox.indeterminate = false;
-        this.updateModelIfPresent(false);
-    }
-    setCheckboxChecked() {
-        this.checkbox.value = 'true';
-        this.checkbox.checked = true;
-        this.checkbox.indeterminate = false;
-        this.updateModelIfPresent(true);
-    }
-    setCheckboxIndeterminate() {
-        this.checkbox.value = undefined;
-        this.checkbox.indeterminate = true;
-        this.updateModelIfPresent(undefined);
-    }
     readControlValue() {
         if (this.ngModel) {
             return this.ngModel.viewModel;
@@ -17150,6 +17144,13 @@ class ElderTripleStateCheckboxDirective {
             return this.checkbox.value;
         }
     }
+    writeValueToControlAndModel(value) {
+        const isDefined = value !== undefined;
+        this.checkbox.value = isDefined ? String(value) : undefined;
+        this.checkbox.checked = !!value;
+        this.checkbox.indeterminate = !isDefined;
+        this.updateModelIfPresent(value);
+    }
     updateModelIfPresent(val) {
         if (this.ngModel !== null && this.ngModel.viewModel !== val) {
             this.ngModel.control.setValue(val, {
@@ -17160,7 +17161,42 @@ class ElderTripleStateCheckboxDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$b.MatCheckbox }, { token: i3.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+}
+
+class ElderTripleStateCheckboxDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(checkbox, ngModel) {
+        this.checkbox = checkbox;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.controller = new ElderTripleStateCheckboxController(checkbox, ngModel);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+        this.controller.writeState(this.controller.readState());
+        this.checkbox.registerOnChange(() => this.toggleNextState());
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    toggleNextState() {
+        this.controller.toggleNextState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$b.MatCheckbox }, { token: i3.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ElderTripleStateCheckboxDirective, isStandalone: true, selector: "mat-checkbox[elderTripleStateCheckbox]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderTripleStateCheckboxDirective, decorators: [{
@@ -17169,9 +17205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     selector: 'mat-checkbox[elderTripleStateCheckbox]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$b.MatCheckbox }, { type: i3.NgModel, decorators: [{
-                    type: Optional
-                }] }] });
+        }], ctorParameters: () => [{ type: i1$b.MatCheckbox }, { type: i3.NgModel }] });
 
 /**
  * Traps tab focus inside the host elements children.
@@ -17664,6 +17698,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: ValidationMessageRendererService }, { type: i1$a.MatFormField }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
 
+var ElderCheckboxState;
+(function (ElderCheckboxState) {
+    ElderCheckboxState[ElderCheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
+    ElderCheckboxState[ElderCheckboxState["CHECKED"] = 1] = "CHECKED";
+})(ElderCheckboxState || (ElderCheckboxState = {}));
+class ElderSingleStateCheckboxController {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(checkbox, ngModel) {
+        this.checkbox = checkbox;
+        this.ngModel = ngModel;
+        this._stateChange = this.ngModel.valueChanges.pipe(takeUntilDestroyed(), map((value) => this.controlValueToState(value)));
+        this.stateChange.subscribe((value) => this.writeState(value));
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get stateChange() {
+        return this._stateChange;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    toggleNextState() {
+        const current = this.readState();
+        this.writeState((current + 1) % 2);
+    }
+    writeState(state) {
+        switch (state) {
+            case ElderCheckboxState.UNCHECKED:
+                this.writeValueToControlAndModel(undefined);
+                break;
+            case ElderCheckboxState.CHECKED:
+                this.writeValueToControlAndModel(true);
+                break;
+            default:
+                throw new UnreachableCaseError(state);
+        }
+    }
+    readState() {
+        return this.controlValueToState(this.readControlValue());
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    controlValueToState(value) {
+        const state = ParseUtil.parseBoolOrUndefined(value);
+        switch (state) {
+            case undefined:
+            case false:
+                return ElderCheckboxState.UNCHECKED;
+            case true:
+                return ElderCheckboxState.CHECKED;
+            default:
+                throw new UnreachableCaseError(state);
+        }
+    }
+    readControlValue() {
+        if (this.ngModel) {
+            return this.ngModel.viewModel;
+        }
+        else {
+            return this.checkbox.value;
+        }
+    }
+    writeValueToControlAndModel(value) {
+        const isTrue = value === true;
+        this.checkbox.value = isTrue ? String(value) : undefined;
+        this.checkbox.checked = isTrue;
+        this.checkbox.indeterminate = false;
+        this.updateModelIfPresent(value);
+    }
+    updateModelIfPresent(val) {
+        if (this.ngModel !== null && this.ngModel.viewModel !== val) {
+            this.ngModel.control.setValue(val, {
+                onlySelf: false,
+                emitEvent: true,
+                emitModelToViewChange: true,
+                emitViewToModelChange: true,
+            });
+        }
+    }
+}
+
+class ElderSingleStateCheckboxDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(checkbox, ngModel) {
+        this.checkbox = checkbox;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.controller = new ElderSingleStateCheckboxController(checkbox, ngModel);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+        this.controller.writeState(this.controller.readState());
+        this.checkbox.registerOnChange(() => this.toggleNextState());
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    toggleNextState() {
+        this.controller.toggleNextState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderSingleStateCheckboxDirective, deps: [{ token: i1$b.MatCheckbox }, { token: i3.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ElderSingleStateCheckboxDirective, isStandalone: true, selector: "mat-checkbox[elderSingleStateCheckbox]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderSingleStateCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-checkbox[elderSingleStateCheckbox]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1$b.MatCheckbox }, { type: i3.NgModel }] });
+
 class ElderFormsDirectivesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderFormsDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: ElderFormsDirectivesModule, imports: [CommonModule,
@@ -17683,6 +17854,7 @@ class ElderFormsDirectivesModule {
             ElderMultipleOfValidator,
             ElderNextFocusableDirective,
             ElderTripleStateCheckboxDirective,
+            ElderSingleStateCheckboxDirective,
             ElderTabFocusTrapDirective,
             ElderFormFieldNoHintDirective,
             ElderInputPatternDirective,
@@ -17701,6 +17873,7 @@ class ElderFormsDirectivesModule {
             ElderMultipleOfValidator,
             ElderNextFocusableDirective,
             ElderTripleStateCheckboxDirective,
+            ElderSingleStateCheckboxDirective,
             ElderTabFocusTrapDirective,
             ElderFormFieldNoHintDirective,
             ElderInputPatternDirective,
@@ -17729,6 +17902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ElderMultipleOfValidator,
                         ElderNextFocusableDirective,
                         ElderTripleStateCheckboxDirective,
+                        ElderSingleStateCheckboxDirective,
                         ElderTabFocusTrapDirective,
                         ElderFormFieldNoHintDirective,
                         ElderInputPatternDirective,
@@ -17750,6 +17924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ElderMultipleOfValidator,
                         ElderNextFocusableDirective,
                         ElderTripleStateCheckboxDirective,
+                        ElderSingleStateCheckboxDirective,
                         ElderTabFocusTrapDirective,
                         ElderFormFieldNoHintDirective,
                         ElderInputPatternDirective,
@@ -20788,7 +20963,7 @@ class TemplatedSelectionDialogComponent {
      **************************************************************************/
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1$6.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SelectionModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: TemplatedSelectionDialogComponent, isStandalone: true, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button\n      mat-stroked-button\n      type=\"submit\"\n      *ngIf=\"selectionModel.selection | async as selection\"\n      [disabled]=\"!selection || selection.length === 0\"\n      [mat-dialog-close]=\"selection\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: TemplatedSelectionDialogComponent, isStandalone: true, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button\n      mat-stroked-button\n      type=\"submit\"\n      color=\"accent\"\n      *ngIf=\"selectionModel.selection | async as selection\"\n      [disabled]=\"!selection || selection.length === 0\"\n      [mat-dialog-close]=\"selection\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
             type: Component,
@@ -20803,7 +20978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         NgTemplateOutlet,
                         AsyncPipe,
                         TranslateModule,
-                    ], template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button\n      mat-stroked-button\n      type=\"submit\"\n      *ngIf=\"selectionModel.selection | async as selection\"\n      [disabled]=\"!selection || selection.length === 0\"\n      [mat-dialog-close]=\"selection\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button\n      mat-stroked-button\n      type=\"submit\"\n      color=\"accent\"\n      *ngIf=\"selectionModel.selection | async as selection\"\n      [disabled]=\"!selection || selection.length === 0\"\n      [mat-dialog-close]=\"selection\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$6.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -21553,9 +21728,6 @@ class ElderSuggestionPanelComponent {
     get valueTemplate() {
         return this._valueTemplate || this.valueTemplateQuery;
     }
-    set dataContext(data) {
-        this.dataContext$.next(data);
-    }
     get dataContext() {
         return this.dataContext$.getValue();
     }
@@ -21583,7 +21755,7 @@ class ElderSuggestionPanelComponent {
     getEntityById(id) {
         const dc = this.dataContext;
         if (dc) {
-            return dc.snapshot.data.find((e) => this.getId(e) == id);
+            return dc.snapshot.data.find((e) => this.getId(e) === id);
         }
         return undefined;
     }
@@ -21668,7 +21840,7 @@ class ElderSuggestionPanelComponent {
         return this.PAGE_SIZE + this.hiddenOptionsCount$.getValue();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderSuggestionPanelComponent, deps: [{ token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderSuggestionPanelComponent, isStandalone: true, selector: "elder-suggestion-panel", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", optionValueConverterFn: "optionValueConverterFn", enabled: "enabled", valueTemplate: "valueTemplate", dataContext: "dataContext", dataSource: "dataSource", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderSuggestionPanel"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderSuggestionPanelComponent, isStandalone: true, selector: "elder-suggestion-panel", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", optionValueConverterFn: "optionValueConverterFn", enabled: "enabled", valueTemplate: "valueTemplate", dataSource: "dataSource", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderSuggestionPanel"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  @if (dataState$ | async; as state) {\n    @if (!state.idle || state.loading) {\n      <mat-option disabled>\n        <mat-progress-bar\n          [value]=\"100\"\n          [mode]=\"state.loading ? 'query' : 'determinate'\"\n          [color]=\"state.error ? 'warn' : 'primary'\"\n        ></mat-progress-bar>\n      </mat-option>\n    }\n  }\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  @if (displayPropertyResolver$ | async; as propertyResolver) {\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderSuggestionPanelComponent, decorators: [{
             type: Component,
@@ -21676,14 +21848,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         MatAutocomplete,
                         ElderInfiniteAutocompleteDirective,
                         ElderInfiniteScrollDirective,
-                        NgIf,
                         MatOption,
                         MatIcon,
-                        NgFor,
                         NgTemplateOutlet,
                         MatProgressBar,
                         AsyncPipe,
-                    ], template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  </ng-container>\n</ng-template>\n" }]
+                    ], template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  @if (dataState$ | async; as state) {\n    @if (!state.idle || state.loading) {\n      <mat-option disabled>\n        <mat-progress-bar\n          [value]=\"100\"\n          [mode]=\"state.loading ? 'query' : 'determinate'\"\n          [color]=\"state.error ? 'warn' : 'primary'\"\n        ></mat-progress-bar>\n      </mat-option>\n    }\n  }\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  @if (displayPropertyResolver$ | async; as propertyResolver) {\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.DestroyRef }], propDecorators: { valueTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderSelectValueDirective, { read: TemplateRef, static: true }]
@@ -21702,14 +21872,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 type: Input
             }], valueTemplate: [{
                 type: Input
-            }], dataContext: [{
-                type: Input
             }], dataSource: [{
                 type: Input
             }], displayPropertyResolver: [{
                 type: Input
             }] } });
 
+// shared.service.ts
+class ElderAutoSelectFirstService {
+    constructor() {
+        this._firstItem$ = new BehaviorSubject(null);
+        this._enabled$ = new BehaviorSubject(false);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    suggestFirstItem(entity) {
+        this._firstItem$.next(entity);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set enabled(enabled) {
+        this._enabled$.next(enabled);
+    }
+    get enabled$() {
+        return this._enabled$.asObservable();
+    }
+    get firstItem$() {
+        return this._firstItem$;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectFirstService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectFirstService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectFirstService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class ElderAutoSelectSuggestFirstDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderAutoComplete, autoSelectFirstService, destroyRef) {
+        this.elderAutoComplete = elderAutoComplete;
+        this.autoSelectFirstService = autoSelectFirstService;
+        this.destroyRef = destroyRef;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        if (autoSelectFirstService) {
+            this.subscribeToAutoSelectFirstService();
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    subscribeToAutoSelectFirstService() {
+        this.autoSelectFirstService.enabled$
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((enabled) => enabled))
+            .subscribe((enabled) => this.suggestFirstItem());
+    }
+    suggestFirstItem() {
+        this.log.debug('Suggesting first item to be selected...');
+        this.selectFirstItemInDataContext(this.elderAutoComplete.dataContext).subscribe((entity) => this.autoSelectFirstService.suggestFirstItem(entity));
+    }
+    selectFirstItemInDataContext(suggestionsDc) {
+        return suggestionsDc?.isStarted ? this.firstItemInDataContextSoon(suggestionsDc) : of(null);
+    }
+    firstItemInDataContextSoon(dataContext) {
+        return dataContext.data.pipe(filter((data) => data && data.length > 0), map((data) => data[0]), timeout(250), catchError((timeoutError) => {
+            this.log.warn('Gave up waiting for DataContext items, timeout reached. Falling back to sugestion lookup.', timeoutError);
+            return of(null);
+        }), first());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectSuggestFirstDirective, deps: [{ token: ElderSuggestionPanelComponent }, { token: ElderAutoSelectFirstService, optional: true }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ElderAutoSelectSuggestFirstDirective, isStandalone: true, selector: "[elderAutoSelectSuggestFirst]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectSuggestFirstDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderAutoSelectSuggestFirst]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: ElderSuggestionPanelComponent }, { type: ElderAutoSelectFirstService, decorators: [{
+                    type: Optional
+                }] }, { type: i0.DestroyRef }] });
+
 class EntityContext {
     constructor(value, displayText, displayRemove) {
         this.value = value;
@@ -22082,7 +22341,7 @@ class ElderSelectComponent extends ElderSelectBase {
                 provide: ELDER_SELECT_BASE,
                 useExisting: forwardRef(() => ElderSelectComponent),
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (entityWrapped$ | async; as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state$ | async; as state) {\n      @if (state?.error || icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          @if (icon) {\n            <mat-icon\n              disabled\n              class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n              (click)=\"onCurrentClicked(entity)\"\n            >\n              {{ icon }}\n            </mat-icon>\n          } @else if (state?.error) {\n            <mat-icon\n              class=\"elder-mdc-control-icon elder-icon-small noselect\"\n              color=\"warn\"\n              [matTooltip]=\"state?.error\"\n            >\n              warning\n            </mat-icon>\n          }\n        </div>\n      }\n    }\n\n    <!-- A dynamic input -->\n    <input\n      #input\n      matInput\n      type=\"text\"\n      class=\"flex-grow elder-select-input mdc-text-field__input\"\n      [disabled]=\"!!disabled\"\n      [required]=\"!!required\"\n      [readonly]=\"readonly || !autocomplete\"\n      [name]=\"ngControl?.name + '-inner-input'\"\n      [placeholder]=\"placeholder | translate\"\n      [matAutocomplete]\n      #autoTrigger=\"matAutocompleteTrigger\"\n      [elderAutocomplete]=\"elderAuto\"\n      [queryFilter]=\"queryFilter\"\n      [filters]=\"filters\"\n      [sorts]=\"sorts\"\n      elderSelectOnTab\n      [class.elder-select-dropdown-input]=\"!autocomplete\"\n      [ngModel]=\"inputText$ | async\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"(dataContext$ | async)?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n      [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n      [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n      elderAutoSelectSuggestFirst\n      (optionSelected)=\"onOptionSelected($any($event))\"\n    ></elder-suggestion-panel>\n\n    <div class=\"layout-row place-start-center flex-none\">\n      @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n        <mat-icon\n          class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n          (click)=\"onInputClicked(autoTrigger)\"\n        >\n          arrow_drop_down\n        </mat-icon>\n      }\n\n      @if (selectionPopup && !entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n\n      @if (entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"clear($event)\"\n          aria-label=\"Clear\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "component", type: ElderSuggestionPanelComponent, selector: "elder-suggestion-panel", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataContext", "dataSource", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderSuggestionPanel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (entityWrapped$ | async; as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state$ | async; as state) {\n      @if (state?.error || icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          @if (icon) {\n            <mat-icon\n              disabled\n              class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n              (click)=\"onCurrentClicked(entity)\"\n            >\n              {{ icon }}\n            </mat-icon>\n          } @else if (state?.error) {\n            <mat-icon\n              class=\"elder-mdc-control-icon elder-icon-small noselect\"\n              color=\"warn\"\n              [matTooltip]=\"state?.error\"\n            >\n              warning\n            </mat-icon>\n          }\n        </div>\n      }\n    }\n\n    <!-- A dynamic input -->\n    <input\n      #input\n      matInput\n      type=\"text\"\n      class=\"flex-grow elder-select-input mdc-text-field__input\"\n      [disabled]=\"!!disabled\"\n      [required]=\"!!required\"\n      [readonly]=\"readonly || !autocomplete\"\n      [name]=\"ngControl?.name + '-inner-input'\"\n      [placeholder]=\"placeholder | translate\"\n      [matAutocomplete]\n      #autoTrigger=\"matAutocompleteTrigger\"\n      [elderAutocomplete]=\"elderAuto\"\n      [queryFilter]=\"queryFilter\"\n      [filters]=\"filters\"\n      [sorts]=\"sorts\"\n      elderSelectOnTab\n      [class.elder-select-dropdown-input]=\"!autocomplete\"\n      [ngModel]=\"inputText$ | async\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"(dataContext$ | async)?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n      [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n      [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n      elderAutoSelectSuggestFirst\n      (optionSelected)=\"onOptionSelected($any($event))\"\n    ></elder-suggestion-panel>\n\n    <div class=\"layout-row place-start-center flex-none\">\n      @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n        <mat-icon\n          class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n          (click)=\"onInputClicked(autoTrigger)\"\n        >\n          arrow_drop_down\n        </mat-icon>\n      }\n\n      @if (selectionPopup && !entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n\n      @if (entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"clear($event)\"\n          aria-label=\"Clear\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "component", type: ElderSuggestionPanelComponent, selector: "elder-suggestion-panel", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataSource", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderSuggestionPanel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: ElderAutoSelectSuggestFirstDirective, selector: "[elderAutoSelectSuggestFirst]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
@@ -22105,7 +22364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ElderStopEventPropagationDirective,
                         AsyncPipe,
                         TranslateModule,
-                    ], template: "@if (entityWrapped$ | async; as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state$ | async; as state) {\n      @if (state?.error || icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          @if (icon) {\n            <mat-icon\n              disabled\n              class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n              (click)=\"onCurrentClicked(entity)\"\n            >\n              {{ icon }}\n            </mat-icon>\n          } @else if (state?.error) {\n            <mat-icon\n              class=\"elder-mdc-control-icon elder-icon-small noselect\"\n              color=\"warn\"\n              [matTooltip]=\"state?.error\"\n            >\n              warning\n            </mat-icon>\n          }\n        </div>\n      }\n    }\n\n    <!-- A dynamic input -->\n    <input\n      #input\n      matInput\n      type=\"text\"\n      class=\"flex-grow elder-select-input mdc-text-field__input\"\n      [disabled]=\"!!disabled\"\n      [required]=\"!!required\"\n      [readonly]=\"readonly || !autocomplete\"\n      [name]=\"ngControl?.name + '-inner-input'\"\n      [placeholder]=\"placeholder | translate\"\n      [matAutocomplete]\n      #autoTrigger=\"matAutocompleteTrigger\"\n      [elderAutocomplete]=\"elderAuto\"\n      [queryFilter]=\"queryFilter\"\n      [filters]=\"filters\"\n      [sorts]=\"sorts\"\n      elderSelectOnTab\n      [class.elder-select-dropdown-input]=\"!autocomplete\"\n      [ngModel]=\"inputText$ | async\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"(dataContext$ | async)?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n      [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n      [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n      elderAutoSelectSuggestFirst\n      (optionSelected)=\"onOptionSelected($any($event))\"\n    ></elder-suggestion-panel>\n\n    <div class=\"layout-row place-start-center flex-none\">\n      @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n        <mat-icon\n          class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n          (click)=\"onInputClicked(autoTrigger)\"\n        >\n          arrow_drop_down\n        </mat-icon>\n      }\n\n      @if (selectionPopup && !entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n\n      @if (entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"clear($event)\"\n          aria-label=\"Clear\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n        </button>\n      }\n    </div>\n  </div>\n}\n" }]
+                        ElderAutoSelectSuggestFirstDirective,
+                    ], template: "@if (entityWrapped$ | async; as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state$ | async; as state) {\n      @if (state?.error || icon) {\n        <div class=\"elder-input-prefix-icon-container flex-none\">\n          @if (icon) {\n            <mat-icon\n              disabled\n              class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n              (click)=\"onCurrentClicked(entity)\"\n            >\n              {{ icon }}\n            </mat-icon>\n          } @else if (state?.error) {\n            <mat-icon\n              class=\"elder-mdc-control-icon elder-icon-small noselect\"\n              color=\"warn\"\n              [matTooltip]=\"state?.error\"\n            >\n              warning\n            </mat-icon>\n          }\n        </div>\n      }\n    }\n\n    <!-- A dynamic input -->\n    <input\n      #input\n      matInput\n      type=\"text\"\n      class=\"flex-grow elder-select-input mdc-text-field__input\"\n      [disabled]=\"!!disabled\"\n      [required]=\"!!required\"\n      [readonly]=\"readonly || !autocomplete\"\n      [name]=\"ngControl?.name + '-inner-input'\"\n      [placeholder]=\"placeholder | translate\"\n      [matAutocomplete]\n      #autoTrigger=\"matAutocompleteTrigger\"\n      [elderAutocomplete]=\"elderAuto\"\n      [queryFilter]=\"queryFilter\"\n      [filters]=\"filters\"\n      [sorts]=\"sorts\"\n      elderSelectOnTab\n      [class.elder-select-dropdown-input]=\"!autocomplete\"\n      [ngModel]=\"inputText$ | async\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"(dataContext$ | async)?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n      [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n      [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n      elderAutoSelectSuggestFirst\n      (optionSelected)=\"onOptionSelected($any($event))\"\n    ></elder-suggestion-panel>\n\n    <div class=\"layout-row place-start-center flex-none\">\n      @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n        <mat-icon\n          class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n          (click)=\"onInputClicked(autoTrigger)\"\n        >\n          arrow_drop_down\n        </mat-icon>\n      }\n\n      @if (selectionPopup && !entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n\n      @if (entityWrapper.displayRemove) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          (click)=\"clear($event)\"\n          aria-label=\"Clear\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -23927,7 +24187,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
                 provide: ELDER_SELECT_BASE,
                 useExisting: forwardRef(() => ElderMultiSelectChipsComponent),
             },
-        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"selectChips$ | async as chipValues\"\n  class=\"elder-flex-control\"\n  [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    <ng-container *ngIf=\"state$ | async as state\">\n      <div *ngIf=\"icon\" class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          *ngIf=\"icon\"\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row\n        elderChipLabel\n        *ngFor=\"let chipModel of chipValues\"\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec?.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\"\n        >\n          <ng-container *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        <mat-icon\n          matChipTrailingIcon\n          class=\"elder-trailing-icon\"\n          *ngIf=\"chipModel.trailingSpec?.icon\"\n          [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n          >{{ chipModel.trailingSpec?.icon }}</mat-icon\n        >\n\n        <mat-icon\n          matChipRemove\n          *ngIf=\"chipModel.removable\"\n          (click)=\"onClickRemoveChip($event, chipModel.value)\"\n        >\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container *ngTemplateOutlet=\"templates.input || selectInput\"> </ng-container>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          *ngIf=\"selectionPopup\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContext$ | async\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholder\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"selectChips$ | async as chipValues\"\n  class=\"elder-flex-control\"\n  [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    <ng-container *ngIf=\"state$ | async as state\">\n      <div *ngIf=\"icon\" class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          *ngIf=\"icon\"\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row\n        elderChipLabel\n        *ngFor=\"let chipModel of chipValues\"\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec?.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\"\n        >\n          <ng-container *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        <mat-icon\n          matChipTrailingIcon\n          class=\"elder-trailing-icon\"\n          *ngIf=\"chipModel.trailingSpec?.icon\"\n          [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n          >{{ chipModel.trailingSpec?.icon }}</mat-icon\n        >\n\n        <mat-icon\n          matChipRemove\n          *ngIf=\"chipModel.removable\"\n          (click)=\"onClickRemoveChip($event, chipModel.value)\"\n        >\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container *ngTemplateOutlet=\"templates.input || selectInput\"> </ng-container>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          *ngIf=\"selectionPopup\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContext$ | async\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholder\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
@@ -23957,7 +24217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ElderClearSelectDirective,
                         AsyncPipe,
                         ElderTruncatePipe,
-                    ], template: "<div\n  *ngIf=\"selectChips$ | async as chipValues\"\n  class=\"elder-flex-control\"\n  [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    <ng-container *ngIf=\"state$ | async as state\">\n      <div *ngIf=\"icon\" class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          *ngIf=\"icon\"\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row\n        elderChipLabel\n        *ngFor=\"let chipModel of chipValues\"\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec?.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\"\n        >\n          <ng-container *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        <mat-icon\n          matChipTrailingIcon\n          class=\"elder-trailing-icon\"\n          *ngIf=\"chipModel.trailingSpec?.icon\"\n          [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n          >{{ chipModel.trailingSpec?.icon }}</mat-icon\n        >\n\n        <mat-icon\n          matChipRemove\n          *ngIf=\"chipModel.removable\"\n          (click)=\"onClickRemoveChip($event, chipModel.value)\"\n        >\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container *ngTemplateOutlet=\"templates.input || selectInput\"> </ng-container>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          *ngIf=\"selectionPopup\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContext$ | async\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholder\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n" }]
+                    ], template: "<div\n  *ngIf=\"selectChips$ | async as chipValues\"\n  class=\"elder-flex-control\"\n  [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    <ng-container *ngIf=\"state$ | async as state\">\n      <div *ngIf=\"icon\" class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          *ngIf=\"icon\"\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row\n        elderChipLabel\n        *ngFor=\"let chipModel of chipValues\"\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec?.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\"\n        >\n          <ng-container *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        <mat-icon\n          matChipTrailingIcon\n          class=\"elder-trailing-icon\"\n          *ngIf=\"chipModel.trailingSpec?.icon\"\n          [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n          >{{ chipModel.trailingSpec?.icon }}</mat-icon\n        >\n\n        <mat-icon\n          matChipRemove\n          *ngIf=\"chipModel.removable\"\n          (click)=\"onClickRemoveChip($event, chipModel.value)\"\n        >\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container *ngTemplateOutlet=\"templates.input || selectInput\"> </ng-container>\n\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          *ngIf=\"selectionPopup\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContext$ | async\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"!!readonly\"\n    [placeholder]=\"placeholder\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: ElderDialogService }, { type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -24045,41 +24305,6 @@ class ElderSelectFirstUtil {
     }
 }
 
-// shared.service.ts
-class ElderAutoSelectFirstService {
-    constructor() {
-        this._firstItem$ = new BehaviorSubject(null);
-        this._enabled$ = new BehaviorSubject(false);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Public API                                                              *
-     *                                                                         *
-     **************************************************************************/
-    suggestFirstItem(entity) {
-        this._firstItem$.next(entity);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    set enabled(enabled) {
-        this._enabled$.next(enabled);
-    }
-    get enabled$() {
-        return this._enabled$.asObservable();
-    }
-    get firstItem$() {
-        return this._firstItem$;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectFirstService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectFirstService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectFirstService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 class ElderAutoSelectFirstDirective {
     /***************************************************************************
      *                                                                         *
@@ -24549,7 +24774,7 @@ class ElderMultiSelectChipOptionsComponent extends ElderMultiSelectBase {
                 provide: ELDER_SELECT_BASE,
                 useExisting: forwardRef(() => ElderMultiSelectChipOptionsComponent),
             },
-        ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_listBox", first: true, predicate: MatChipListbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (selectChips$ | async; as selectChips) {\n  <div class=\"elder-flex-control\" [matTooltip]=\"(state$ | async)?.error\">\n    <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n      @if (state$ | async; as state) {\n        @if (icon) {\n          <div class=\"elder-input-prefix-icon-container flex-none\">\n            <mat-icon\n              disabled\n              class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n              [class.loading]=\"state.loading\"\n            >\n              {{ icon }}\n            </mat-icon>\n          </div>\n        }\n      }\n\n      @if (templates$ | async; as templates) {\n        <ng-content></ng-content>\n\n        @for (chipModel of selectChips; track chipModel.value) {\n          <mat-chip-option\n            class=\"noselect\"\n            [value]=\"resolveChipValue(chipModel.value)\"\n            elderChipLabel\n            [levelColor]=\"chipModel.colorSpec?.levelColor\"\n            [stateColor]=\"chipModel.colorSpec?.stateColor\"\n            [color]=\"chipModel.colorSpec?.themeColor\"\n            [selectable]=\"!chipModel.locked\"\n            [disabled]=\"chipModel.locked\"\n            [selected]=\"chipModel.selected\"\n            (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n          >\n            @if (templates.avatar && !chipModel.avatarSpec?.hide) {\n              <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n                <ng-container\n                  *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\"\n                >\n                </ng-container>\n              </mat-chip-avatar>\n            }\n\n            <ng-container\n              *ngTemplateOutlet=\"\n                templates.chip || simpleChipTemplate;\n                context: { $implicit: chipModel }\n              \"\n            >\n            </ng-container>\n\n            @if (chipModel.trailingSpec?.icon) {\n              <mat-icon\n                matChipTrailingIcon\n                class=\"elder-trailing-icon\"\n                [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n                >{{ chipModel.trailingSpec?.icon }}\n              </mat-icon>\n            }\n          </mat-chip-option>\n        }\n\n        <div class=\"layout-row place-start-center elder-chip-input\">\n          @if (selectionPopup) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"elder-control-icon-button elder-browse-icon\"\n              [disabled]=\"isLocked\"\n              (click)=\"openSelectionPopup($event)\"\n              aria-label=\"Search\"\n              elderStopEventPropagation\n              tabIndex=\"-1\"\n            >\n              <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </mat-chip-listbox>\n  </div>\n}\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_listBox", first: true, predicate: MatChipListbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (selectChips$ | async; as selectChips) {\n  <div class=\"elder-flex-control\" [matTooltip]=\"(state$ | async)?.error\">\n    <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n      @if (state$ | async; as state) {\n        @if (icon) {\n          <div class=\"elder-input-prefix-icon-container flex-none\">\n            <mat-icon\n              disabled\n              class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n              [class.loading]=\"state.loading\"\n            >\n              {{ icon }}\n            </mat-icon>\n          </div>\n        }\n      }\n\n      @if (templates$ | async; as templates) {\n        <ng-content></ng-content>\n\n        @for (chipModel of selectChips; track chipModel.value) {\n          <mat-chip-option\n            class=\"noselect\"\n            [value]=\"resolveChipValue(chipModel.value)\"\n            elderChipLabel\n            [levelColor]=\"chipModel.colorSpec?.levelColor\"\n            [stateColor]=\"chipModel.colorSpec?.stateColor\"\n            [color]=\"chipModel.colorSpec?.themeColor\"\n            [selectable]=\"!chipModel.locked\"\n            [disabled]=\"chipModel.locked\"\n            [selected]=\"chipModel.selected\"\n            (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n          >\n            @if (templates.avatar && !chipModel.avatarSpec?.hide) {\n              <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n                <ng-container\n                  *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\"\n                >\n                </ng-container>\n              </mat-chip-avatar>\n            }\n\n            <ng-container\n              *ngTemplateOutlet=\"\n                templates.chip || simpleChipTemplate;\n                context: { $implicit: chipModel }\n              \"\n            >\n            </ng-container>\n\n            @if (chipModel.trailingSpec?.icon) {\n              <mat-icon\n                matChipTrailingIcon\n                class=\"elder-trailing-icon\"\n                [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n                >{{ chipModel.trailingSpec?.icon }}\n              </mat-icon>\n            }\n          </mat-chip-option>\n        }\n\n        <div class=\"layout-row place-start-center elder-chip-input\">\n          @if (selectionPopup) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"elder-control-icon-button elder-browse-icon\"\n              [disabled]=\"isLocked\"\n              (click)=\"openSelectionPopup($event)\"\n              aria-label=\"Search\"\n              elderStopEventPropagation\n              tabIndex=\"-1\"\n            >\n              <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </mat-chip-listbox>\n  </div>\n}\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderMultiSelectChipOptionsComponent, decorators: [{
             type: Component,
@@ -24572,7 +24797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ElderStopEventPropagationDirective,
                         AsyncPipe,
                         ElderTruncatePipe,
-                    ], template: "@if (selectChips$ | async; as selectChips) {\n  <div class=\"elder-flex-control\" [matTooltip]=\"(state$ | async)?.error\">\n    <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n      @if (state$ | async; as state) {\n        @if (icon) {\n          <div class=\"elder-input-prefix-icon-container flex-none\">\n            <mat-icon\n              disabled\n              class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n              [class.loading]=\"state.loading\"\n            >\n              {{ icon }}\n            </mat-icon>\n          </div>\n        }\n      }\n\n      @if (templates$ | async; as templates) {\n        <ng-content></ng-content>\n\n        @for (chipModel of selectChips; track chipModel.value) {\n          <mat-chip-option\n            class=\"noselect\"\n            [value]=\"resolveChipValue(chipModel.value)\"\n            elderChipLabel\n            [levelColor]=\"chipModel.colorSpec?.levelColor\"\n            [stateColor]=\"chipModel.colorSpec?.stateColor\"\n            [color]=\"chipModel.colorSpec?.themeColor\"\n            [selectable]=\"!chipModel.locked\"\n            [disabled]=\"chipModel.locked\"\n            [selected]=\"chipModel.selected\"\n            (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n          >\n            @if (templates.avatar && !chipModel.avatarSpec?.hide) {\n              <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n                <ng-container\n                  *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\"\n                >\n                </ng-container>\n              </mat-chip-avatar>\n            }\n\n            <ng-container\n              *ngTemplateOutlet=\"\n                templates.chip || simpleChipTemplate;\n                context: { $implicit: chipModel }\n              \"\n            >\n            </ng-container>\n\n            @if (chipModel.trailingSpec?.icon) {\n              <mat-icon\n                matChipTrailingIcon\n                class=\"elder-trailing-icon\"\n                [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n                >{{ chipModel.trailingSpec?.icon }}\n              </mat-icon>\n            }\n          </mat-chip-option>\n        }\n\n        <div class=\"layout-row place-start-center elder-chip-input\">\n          @if (selectionPopup) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"elder-control-icon-button elder-browse-icon\"\n              [disabled]=\"isLocked\"\n              (click)=\"openSelectionPopup($event)\"\n              aria-label=\"Search\"\n              elderStopEventPropagation\n              tabIndex=\"-1\"\n            >\n              <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </mat-chip-listbox>\n  </div>\n}\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n" }]
+                    ], template: "@if (selectChips$ | async; as selectChips) {\n  <div class=\"elder-flex-control\" [matTooltip]=\"(state$ | async)?.error\">\n    <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n      @if (state$ | async; as state) {\n        @if (icon) {\n          <div class=\"elder-input-prefix-icon-container flex-none\">\n            <mat-icon\n              disabled\n              class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n              [class.loading]=\"state.loading\"\n            >\n              {{ icon }}\n            </mat-icon>\n          </div>\n        }\n      }\n\n      @if (templates$ | async; as templates) {\n        <ng-content></ng-content>\n\n        @for (chipModel of selectChips; track chipModel.value) {\n          <mat-chip-option\n            class=\"noselect\"\n            [value]=\"resolveChipValue(chipModel.value)\"\n            elderChipLabel\n            [levelColor]=\"chipModel.colorSpec?.levelColor\"\n            [stateColor]=\"chipModel.colorSpec?.stateColor\"\n            [color]=\"chipModel.colorSpec?.themeColor\"\n            [selectable]=\"!chipModel.locked\"\n            [disabled]=\"chipModel.locked\"\n            [selected]=\"chipModel.selected\"\n            (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n          >\n            @if (templates.avatar && !chipModel.avatarSpec?.hide) {\n              <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n                <ng-container\n                  *ngTemplateOutlet=\"templates.avatar; context: { $implicit: chipModel }\"\n                >\n                </ng-container>\n              </mat-chip-avatar>\n            }\n\n            <ng-container\n              *ngTemplateOutlet=\"\n                templates.chip || simpleChipTemplate;\n                context: { $implicit: chipModel }\n              \"\n            >\n            </ng-container>\n\n            @if (chipModel.trailingSpec?.icon) {\n              <mat-icon\n                matChipTrailingIcon\n                class=\"elder-trailing-icon\"\n                [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n                >{{ chipModel.trailingSpec?.icon }}\n              </mat-icon>\n            }\n          </mat-chip-option>\n        }\n\n        <div class=\"layout-row place-start-center elder-chip-input\">\n          @if (selectionPopup) {\n            <button\n              mat-icon-button\n              type=\"button\"\n              class=\"elder-control-icon-button elder-browse-icon\"\n              [disabled]=\"isLocked\"\n              (click)=\"openSelectionPopup($event)\"\n              aria-label=\"Search\"\n              elderStopEventPropagation\n              tabIndex=\"-1\"\n            >\n              <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n            </button>\n          }\n        </div>\n      }\n    </mat-chip-listbox>\n  </div>\n}\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: ElderDialogService }, { type: i0.DestroyRef }, { type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -24628,62 +24853,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     type: Optional
                 }] }, { type: i0.DestroyRef }] });
 
-class ElderAutoSelectSuggestFirstDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(elderAutoComplete, autoSelectFirstService, destroyRef) {
-        this.elderAutoComplete = elderAutoComplete;
-        this.autoSelectFirstService = autoSelectFirstService;
-        this.destroyRef = destroyRef;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-        if (autoSelectFirstService) {
-            this.subscribeToAutoSelectFirstService();
-        }
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    subscribeToAutoSelectFirstService() {
-        this.autoSelectFirstService.enabled$
-            .pipe(takeUntilDestroyed(this.destroyRef), filter((enabled) => enabled))
-            .subscribe((enabled) => this.suggestFirstItem());
-    }
-    suggestFirstItem() {
-        this.log.debug('Suggesting first item to be selected...');
-        this.selectFirstItemInDataContext(this.elderAutoComplete.dataContext).subscribe((entity) => this.autoSelectFirstService.suggestFirstItem(entity));
-    }
-    selectFirstItemInDataContext(suggestionsDc) {
-        return suggestionsDc?.isStarted ? this.firstItemInDataContextSoon(suggestionsDc) : of(null);
-    }
-    firstItemInDataContextSoon(dataContext) {
-        return dataContext.data.pipe(filter((data) => data && data.length > 0), map((data) => data[0]), timeout(250), catchError((timeoutError) => {
-            this.log.warn('Gave up waiting for DataContext items, timeout reached. Falling back to sugestion lookup.', timeoutError);
-            return of(null);
-        }), first());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectSuggestFirstDirective, deps: [{ token: ElderSuggestionPanelComponent }, { token: ElderAutoSelectFirstService, optional: true }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: ElderAutoSelectSuggestFirstDirective, isStandalone: true, selector: "[elderAutoSelectSuggestFirst]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAutoSelectSuggestFirstDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderAutoSelectSuggestFirst]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: ElderSuggestionPanelComponent }, { type: ElderAutoSelectFirstService, decorators: [{
-                    type: Optional
-                }] }, { type: i0.DestroyRef }] });
-
 class ElderFilterChipTemplateComponent {
     constructor() {
         /***************************************************************************
@@ -24720,11 +24889,11 @@ class ElderFilterChipTemplateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderFilterChipTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ElderFilterChipTemplateComponent, isStandalone: true, selector: "elder-filter-chip-template", inputs: { avatarResolverFn: { classPropertyName: "avatarResolverFn", publicName: "avatarResolverFn", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "avatarRef", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<mat-icon *elderSelectChipAvatar=\"let chipModel\" class=\"material-icons-outlined\">\n  {{ currentIcon(chipModel?.value?.id) }}\n</mat-icon>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--mat-app-elevation-shadow-level-8)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderSelectChipAvatarDirective, selector: "[elderSelectChipAvatar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", type: ElderFilterChipTemplateComponent, isStandalone: true, selector: "elder-filter-chip-template", inputs: { avatarResolverFn: { classPropertyName: "avatarResolverFn", publicName: "avatarResolverFn", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "avatarRef", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<mat-icon *elderSelectChipAvatar=\"let chipModel\" class=\"material-icons-outlined\">\n  {{ currentIcon(chipModel?.value?.id) }}\n</mat-icon>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderSelectChipAvatarDirective, selector: "[elderSelectChipAvatar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderFilterChipTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-filter-chip-template', standalone: true, imports: [MatIcon, ElderSelectChipAvatarDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-icon *elderSelectChipAvatar=\"let chipModel\" class=\"material-icons-outlined\">\n  {{ currentIcon(chipModel?.value?.id) }}\n</mat-icon>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--mat-app-elevation-shadow-level-8)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'elder-filter-chip-template', standalone: true, imports: [MatIcon, ElderSelectChipAvatarDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-icon *elderSelectChipAvatar=\"let chipModel\" class=\"material-icons-outlined\">\n  {{ currentIcon(chipModel?.value?.id) }}\n</mat-icon>\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elder-trailing-icon{color:var(--mdc-chip-with-trailing-icon-trailing-icon-color);opacity:.54}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { avatarRef: [{
                 type: ViewChild,
                 args: [ElderSelectChipAvatarDirective, { read: TemplateRef, static: true }]
@@ -27613,11 +27782,11 @@ class ElderAppHeaderComponent {
         this.iconColor$.next(c);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAppHeaderComponent, deps: [{ token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: "icon", svgIcon: "svgIcon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon\n        class=\"noselect title-icon svg-icon-inherit-color\"\n        [svgIcon]=\"svgIcon\"\n        [color]=\"iconColor$ | async\"\n        >{{ icon }}</mat-icon\n      >\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{ title }}</span>\n          <span class=\"mat-caption noselect\"\n            ><small>{{ version }}</small></span\n          >\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n          <a\n            *ngIf=\"subTitleLink\"\n            [href]=\"subTitleLink\"\n            target=\"_blank\"\n            style=\"text-decoration: none; color: inherit\"\n            >{{ subTitle }}</a\n          >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], dependencies: [{ kind: "component", type: ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: "icon", svgIcon: "svgIcon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon svg-icon-inherit-color\" [svgIcon]=\"svgIcon\" [color]=\"iconColor$ | async\">{{ icon }}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{ title }}</span>\n          <span class=\"mat-caption noselect\"\n            ><small>{{ version }}</small></span\n          >\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n          <a\n            *ngIf=\"subTitleLink\"\n            [href]=\"subTitleLink\"\n            target=\"_blank\"\n            style=\"text-decoration: none; color: inherit\"\n            >{{ subTitle }}</a\n          >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], dependencies: [{ kind: "component", type: ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ElderPanelComponent, MatIcon, NgIf, AsyncPipe], template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon\n        class=\"noselect title-icon svg-icon-inherit-color\"\n        [svgIcon]=\"svgIcon\"\n        [color]=\"iconColor$ | async\"\n        >{{ icon }}</mat-icon\n      >\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{ title }}</span>\n          <span class=\"mat-caption noselect\"\n            ><small>{{ version }}</small></span\n          >\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n          <a\n            *ngIf=\"subTitleLink\"\n            [href]=\"subTitleLink\"\n            target=\"_blank\"\n            style=\"text-decoration: none; color: inherit\"\n            >{{ subTitle }}</a\n          >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"] }]
+            args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ElderPanelComponent, MatIcon, NgIf, AsyncPipe], template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon svg-icon-inherit-color\" [svgIcon]=\"svgIcon\" [color]=\"iconColor$ | async\">{{ icon }}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{ title }}</span>\n          <span class=\"mat-caption noselect\"\n            ><small>{{ version }}</small></span\n          >\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n          <a\n            *ngIf=\"subTitleLink\"\n            [href]=\"subTitleLink\"\n            target=\"_blank\"\n            style=\"text-decoration: none; color: inherit\"\n            >{{ subTitle }}</a\n          >\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"] }]
         }], ctorParameters: () => [{ type: ElderThemeService }], propDecorators: { icon: [{
                 type: Input
             }], svgIcon: [{
@@ -29780,7 +29949,7 @@ class ElderIntervalPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastSevenDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLast365daysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$c.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$a.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$a.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$a.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastSevenDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLast365daysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button color=\"primary\" mat-raised-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$c.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$a.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$a.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$a.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -29802,7 +29971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         TranslateModule,
                         MatMenuModule,
                         ElderIntervalInputComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastSevenDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLast365daysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastSevenDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button mat-button (click)=\"controller.select.selectLast365daysIncludingToday()\">\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button color=\"primary\" mat-raised-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"] }]
         }], ctorParameters: () => [], propDecorators: { intervalChange: [{
                 type: Output
             }], calendarStart: [{
@@ -32484,7 +32653,7 @@ class HttpDataTransferOverviewComponent {
         this.transfers$ = this.transferService.transfers;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: HttpDataTransferOverviewComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: HttpDataTransferOverviewComponent, isStandalone: true, selector: "elder-data-transfer-overview", ngImport: i0, template: "<mat-card class=\"layout-col full elevated-card\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none toolbar-dark-bg\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</mat-card>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}.elevated-card{margin-top:4px;box-shadow:var(--mat-app-elevation-shadow-level-5, none)!important;background-color:var(--md-sys-color-surface-container-low)!important}.toolbar-dark-bg{background-color:var(--md-sys-color-surface-container);border-radius:10px}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: HttpDataTransferOverviewComponent, isStandalone: true, selector: "elder-data-transfer-overview", ngImport: i0, template: "<mat-card appearance=\"raised\" class=\"layout-col full\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none mat-elevation-z5\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</mat-card>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: HttpDataTransferOverviewComponent, decorators: [{
             type: Component,
@@ -32496,7 +32665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         MatToolbar,
                         HttpDataTransferAggregateComponent,
                         AsyncPipe,
-                    ], template: "<mat-card class=\"layout-col full elevated-card\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none toolbar-dark-bg\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</mat-card>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}.elevated-card{margin-top:4px;box-shadow:var(--mat-app-elevation-shadow-level-5, none)!important;background-color:var(--md-sys-color-surface-container-low)!important}.toolbar-dark-bg{background-color:var(--md-sys-color-surface-container);border-radius:10px}\n"] }]
+                    ], template: "<mat-card appearance=\"raised\" class=\"layout-col full\">\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n    <div *ngIf=\"transfers.length > 0; else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer\n        class=\"flex-none\"\n        *ngFor=\"let transfer of transfers\"\n        [transfer]=\"transfer\"\n      >\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-subtitle-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n  </div>\n\n  <mat-toolbar class=\"flex-none mat-elevation-z5\">\n    <elder-data-transfer-aggregate\n      class=\"flex\"\n      [hiddenWhenInactive]=\"false\"\n    ></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</mat-card>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}\n"] }]
         }], ctorParameters: () => [{ type: ElderDataTransferService }] });
 
 class HttpDataTransferIndicatorComponent {
@@ -32524,7 +32693,7 @@ class HttpDataTransferIndicatorComponent {
         this.aggregate$ = this.transferService.transferAggregate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: HttpDataTransferIndicatorComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: HttpDataTransferIndicatorComponent, isStandalone: true, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"layout-row place-center-center\"\n    [elderOverlayTrigger]=\"overlay\"\n  >\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"24\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\"> </elder-data-transfer-overview>\n</elder-overlay>\n", styles: [".panel{width:380px;height:350px;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "component", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: HttpDataTransferIndicatorComponent, isStandalone: true, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"layout-row place-center-center\"\n    [elderOverlayTrigger]=\"overlay\"\n  >\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"24\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\"> </elder-data-transfer-overview>\n</elder-overlay>\n", styles: [".panel{width:380px;height:350px;border-radius:4px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "component", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: HttpDataTransferIndicatorComponent, decorators: [{
             type: Component,
@@ -32538,7 +32707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         ElderOverlayComponent,
                         HttpDataTransferOverviewComponent,
                         AsyncPipe,
-                    ], template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"layout-row place-center-center\"\n    [elderOverlayTrigger]=\"overlay\"\n  >\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"24\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\"> </elder-data-transfer-overview>\n</elder-overlay>\n", styles: [".panel{width:380px;height:350px;border-radius:4px}\n"] }]
+                    ], template: "<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"layout-row place-center-center\"\n    [elderOverlayTrigger]=\"overlay\"\n  >\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"24\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\"> </elder-data-transfer-overview>\n</elder-overlay>\n", styles: [".panel{width:380px;height:350px;border-radius:4px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"] }]
         }], ctorParameters: () => [{ type: ElderDataTransferService }], propDecorators: { activeColor: [{
                 type: Input
             }], inactiveColor: [{
@@ -35432,11 +35601,11 @@ class ElderPageExitLockIndicatorComponent {
         this.locks = toSignal(this.pageExitGuardService.locks$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderPageExitLockIndicatorComponent, deps: [{ token: PageExitGuardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderPageExitLockIndicatorComponent, isStandalone: true, selector: "elder-page-exit-lock-indicator", ngImport: i0, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:4px;overflow:hidden;box-shadow:var(--mat-app-elevation-shadow-level-8)}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ElderOverlayModule }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: ElderPageExitLockOverviewComponent, selector: "elder-page-exit-lock-overview", inputs: ["locks"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ElderPageExitLockIndicatorComponent, isStandalone: true, selector: "elder-page-exit-lock-indicator", ngImport: i0, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:4px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ElderOverlayModule }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: ElderPageExitLockOverviewComponent, selector: "elder-page-exit-lock-overview", inputs: ["locks"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ElderPageExitLockIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-page-exit-lock-indicator', standalone: true, imports: [MatIconButton, MatIcon, ElderOverlayModule, ElderPageExitLockOverviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:4px;overflow:hidden;box-shadow:var(--mat-app-elevation-shadow-level-8)}\n"] }]
+            args: [{ selector: 'elder-page-exit-lock-indicator', standalone: true, imports: [MatIconButton, MatIcon, ElderOverlayModule, ElderPageExitLockOverviewComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isPageExitBlocked()) {\n  <button mat-icon-button [elderOverlayTrigger]=\"overlay\">\n    <mat-icon color=\"accent\">lock_clock</mat-icon>\n  </button>\n}\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-page-exit-lock-overview [locks]=\"locks()\" class=\"panel\"> </elder-page-exit-lock-overview>\n</elder-overlay>\n", styles: [".panel{width:250px;height:250px;border-radius:4px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"] }]
         }], ctorParameters: () => [{ type: PageExitGuardService }] });
 
 class PageExitGuardModule {
@@ -35453,15 +35622,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 
-class LoaderBackgroundComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LoaderBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: LoaderBackgroundComponent, isStandalone: true, selector: "elder-loader-background", ngImport: i0, template: "<div class=\"loader-background\">\n  <div class=\"spinner\">\n    <div class=\"bounce1 circle\"></div>\n    <div class=\"bounce2 logo\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"var(--md-sys-color-tertiary-fixed)\"\n        viewBox=\"0 0 284.34 272.09\"\n      >\n        <g>\n          <path\n            d=\"M141.92,11A125,125,0,0,1,247,68.35q4.46-2.76,8.67-5.93a135.38,135.38,0,0,0-227.43,0q4.21,3.17,8.67,5.93A125,125,0,0,1,141.92,11Z\"\n          />\n          <path\n            d=\"M267,136.05a125,125,0,1,1-246-31.53c-2.44-3.48-5.11-7-7.85-10.47a135.11,135.11,0,0,0-6.69,42c0,74.74,60.8,135.54,135.54,135.54s135.55-60.8,135.55-135.54a135.11,135.11,0,0,0-6.69-42c-2.74,3.52-5.41,7-7.85,10.47A124.65,124.65,0,0,1,267,136.05Z\"\n          />\n          <g id=\"main-logo\">\n            <path\n              d=\"M151.24,188.12a41.39,41.39,0,0,1-5.06-12.27H138.1A41.13,41.13,0,0,1,133,188.12a37.86,37.86,0,0,1-9.67,10.31l16.83,44.43,20.48-44.6A38,38,0,0,1,151.24,188.12Z\"\n            />\n            <path\n              d=\"M205.38,95.82c-3,.39-6.16.67-9.48,1v14.75H181V98.24c-16.68,2.2-32.74,7.35-36.46,25.82.34,12.92-.48,26.37,2.58,38.89A50.81,50.81,0,0,0,153.34,178a46.35,46.35,0,0,0,11.6,12.45,61.34,61.34,0,0,0,32.73,11.65c25.65,1.59,38.9-16.32,40.73-40.34,1-13.61-.4-27.57,3.28-40.71,7.17-25.61,32.12-42.78,41.25-67.76C263.36,75.89,235.14,91.93,205.38,95.82ZM191.3,184.64a33.51,33.51,0,1,1,33.5-33.51A33.51,33.51,0,0,1,191.3,184.64Z\"\n            />\n            <path\n              d=\"M79,95.82C49.2,91.93,21,75.89,1.4,53.31c9.14,25,34.09,42.15,41.26,67.76,3.68,13.14,2.23,27.1,3.27,40.71,1.84,24,15.09,41.93,40.73,40.34a61.58,61.58,0,0,0,32.45-11.43A46.73,46.73,0,0,0,131,178,50.57,50.57,0,0,0,137.21,163c3.06-12.52,2.24-26,2.58-38.89C134.18,96.2,100.46,98.63,79,95.82ZM93,184.64a33.51,33.51,0,1,1,33.5-33.51A33.5,33.5,0,0,1,93,184.64Z\"\n            />\n          </g>\n        </g>\n      </svg>\n    </div>\n    <div class=\"bounce3 circle\"></div>\n  </div>\n</div>\n", styles: [".loader-background{--loader-bg-surface: var(--md-sys-color-surface);--loader-bg-color: var(--md-sys-color-primary);--logo-color: var(--md-sys-color-tertiary-fixed);position:relative;height:100vh;width:100vw;margin:0;padding:0;background:linear-gradient(200deg,var(--loader-bg-surface) 40%,var(--loader-bg-color) 0%)}.spinner{position:absolute;top:50vh;left:45vw;width:200px;text-align:center}.logo{width:50px;height:48px;border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.logo svg{fill:var(--logo-color)!important}.circle{border:1.5px solid var(--logo-color);height:25px;border-radius:50%;width:25px;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LoaderBackgroundComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-loader-background', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loader-background\">\n  <div class=\"spinner\">\n    <div class=\"bounce1 circle\"></div>\n    <div class=\"bounce2 logo\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"var(--md-sys-color-tertiary-fixed)\"\n        viewBox=\"0 0 284.34 272.09\"\n      >\n        <g>\n          <path\n            d=\"M141.92,11A125,125,0,0,1,247,68.35q4.46-2.76,8.67-5.93a135.38,135.38,0,0,0-227.43,0q4.21,3.17,8.67,5.93A125,125,0,0,1,141.92,11Z\"\n          />\n          <path\n            d=\"M267,136.05a125,125,0,1,1-246-31.53c-2.44-3.48-5.11-7-7.85-10.47a135.11,135.11,0,0,0-6.69,42c0,74.74,60.8,135.54,135.54,135.54s135.55-60.8,135.55-135.54a135.11,135.11,0,0,0-6.69-42c-2.74,3.52-5.41,7-7.85,10.47A124.65,124.65,0,0,1,267,136.05Z\"\n          />\n          <g id=\"main-logo\">\n            <path\n              d=\"M151.24,188.12a41.39,41.39,0,0,1-5.06-12.27H138.1A41.13,41.13,0,0,1,133,188.12a37.86,37.86,0,0,1-9.67,10.31l16.83,44.43,20.48-44.6A38,38,0,0,1,151.24,188.12Z\"\n            />\n            <path\n              d=\"M205.38,95.82c-3,.39-6.16.67-9.48,1v14.75H181V98.24c-16.68,2.2-32.74,7.35-36.46,25.82.34,12.92-.48,26.37,2.58,38.89A50.81,50.81,0,0,0,153.34,178a46.35,46.35,0,0,0,11.6,12.45,61.34,61.34,0,0,0,32.73,11.65c25.65,1.59,38.9-16.32,40.73-40.34,1-13.61-.4-27.57,3.28-40.71,7.17-25.61,32.12-42.78,41.25-67.76C263.36,75.89,235.14,91.93,205.38,95.82ZM191.3,184.64a33.51,33.51,0,1,1,33.5-33.51A33.51,33.51,0,0,1,191.3,184.64Z\"\n            />\n            <path\n              d=\"M79,95.82C49.2,91.93,21,75.89,1.4,53.31c9.14,25,34.09,42.15,41.26,67.76,3.68,13.14,2.23,27.1,3.27,40.71,1.84,24,15.09,41.93,40.73,40.34a61.58,61.58,0,0,0,32.45-11.43A46.73,46.73,0,0,0,131,178,50.57,50.57,0,0,0,137.21,163c3.06-12.52,2.24-26,2.58-38.89C134.18,96.2,100.46,98.63,79,95.82ZM93,184.64a33.51,33.51,0,1,1,33.5-33.51A33.5,33.5,0,0,1,93,184.64Z\"\n            />\n          </g>\n        </g>\n      </svg>\n    </div>\n    <div class=\"bounce3 circle\"></div>\n  </div>\n</div>\n", styles: [".loader-background{--loader-bg-surface: var(--md-sys-color-surface);--loader-bg-color: var(--md-sys-color-primary);--logo-color: var(--md-sys-color-tertiary-fixed);position:relative;height:100vh;width:100vw;margin:0;padding:0;background:linear-gradient(200deg,var(--loader-bg-surface) 40%,var(--loader-bg-color) 0%)}.spinner{position:absolute;top:50vh;left:45vw;width:200px;text-align:center}.logo{width:50px;height:48px;border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.logo svg{fill:var(--logo-color)!important}.circle{border:1.5px solid var(--logo-color);height:25px;border-radius:50%;width:25px;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
-        }] });
-
 /**
  * This class provides a reactive wrapper around an event source.
  *
@@ -36408,5 +36568,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivationEventSource, Arrays, AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderCheckboxState, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LoaderBackgroundComponent, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchInputState, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { ActivationEventSource, Arrays, AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchInputState, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map