@elderbyte/ngx-starter 21.9.0 → 21.11.0-beta.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -7,7 +7,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal as Temporal$1 } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
 import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, tap as tap$1, takeUntil as takeUntil$1, NEVER } from 'rxjs';
-import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, combineLatestWith, startWith, skip, delay, share, skipWhile, timeout } from 'rxjs/operators';
+import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, combineLatestWith, startWith, skip, delay, share, skipWhile, debounce, timeout } from 'rxjs/operators';
 import { Temporal } from '@js-temporal/polyfill';
 import * as i1$1 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS, HttpBackend } from '@angular/common/http';
@@ -17,19 +17,18 @@ import * as i1$3 from '@angular/forms';
 import { ControlContainer, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl, NgModel, FormsModule, UntypedFormControl, ReactiveFormsModule, NgForm, Validators } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { FocusMonitor, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
-import * as i1$a from '@angular/material/form-field';
+import * as i1$9 from '@angular/material/form-field';
 import { MatFormField, MatFormFieldControl, MAT_FORM_FIELD_DEFAULT_OPTIONS, MatLabel, MatFormFieldModule, MatPrefix, MatHint, MatError, MatSuffix } from '@angular/material/form-field';
-import * as i1$9 from '@ngx-translate/core';
-import { TranslateService, TranslatePipe, TranslateModule, provideTranslateService, TranslateLoader } from '@ngx-translate/core';
+import { TranslateService, TranslatePipe, provideTranslateService, TranslateLoader } from '@ngx-translate/core';
 import * as i1$2 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet, convertToParamMap, EventType } from '@angular/router';
-import * as i1$f from '@angular/material/icon';
+import * as i1$e from '@angular/material/icon';
 import { MatIconRegistry, MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i1$4 from '@angular/material/toolbar';
 import { MatToolbar, MatToolbarRow, MatToolbarModule } from '@angular/material/toolbar';
 import { MatCard, MatCardModule } from '@angular/material/card';
-import * as i1$d from '@angular/material/core';
+import * as i1$c from '@angular/material/core';
 import { MatRipple, MatRippleModule, MatOption, NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MatNativeDateModule } from '@angular/material/core';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton, MatIconAnchor, MatAnchor } from '@angular/material/button';
@@ -50,7 +49,7 @@ import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/ma
 import * as i1$6 from '@angular/material/dialog';
 import { MatDialogClose, MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatBadge, MatBadgeModule } from '@angular/material/badge';
-import * as i1$b from '@angular/material/checkbox';
+import * as i1$a from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { MatSelect, MatOption as MatOption$1, MatSelectModule } from '@angular/material/select';
@@ -65,15 +64,15 @@ import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, S
 import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatExpansionPanel, MatAccordion, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelDescription, MatExpansionModule } from '@angular/material/expansion';
-import * as i1$c from '@angular/cdk/overlay';
+import * as i1$b from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { MatSidenavContainer, MatSidenav, MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$e from '@angular/material/datepicker';
+import * as i1$d from '@angular/material/datepicker';
 import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, DateRange, MatDatepickerModule, MatCalendar } from '@angular/material/datepicker';
 import { TemplatePortal } from '@angular/cdk/portal';
 import localeDECH from '@angular/common/locales/de-CH';
 import * as StreamSaver from 'streamsaver';
-import * as i1$g from '@angular/material/tabs';
+import * as i1$f from '@angular/material/tabs';
 import { MatTab } from '@angular/material/tabs';
 import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source';
 
@@ -4083,6 +4082,47 @@ class SortContext {
     }
 }
 
+/***************************************************************************
+ *                                                                         *
+ * Type Predicates                                                         *
+ *                                                                         *
+ **************************************************************************/
+function isDataSource(object) {
+    if (!object) {
+        return false;
+    }
+    return (object.dataChanged !== undefined &&
+        object.findById !== undefined &&
+        object.getId !== undefined);
+}
+function isListDataSource(object) {
+    return object.findAllFiltered !== undefined;
+}
+function isLocalListDataSource(object) {
+    return (isListDataSource(object) &&
+        object.delete !== undefined &&
+        object.save !== undefined &&
+        object.replaceAll !== undefined);
+}
+function isLocalPagedDataSource(object) {
+    return (isPagedDataSource(object) &&
+        object.findAllPaged !== undefined &&
+        object.findById !== undefined &&
+        object.findByIds !== undefined);
+}
+function isLocalDataSource(object) {
+    if (!object) {
+        return false;
+    }
+    return isLocalListDataSource(object) || isLocalPagedDataSource(object);
+}
+function isPagedDataSource(object) {
+    return object.findAllPaged !== undefined;
+}
+function isContinuableDataSource(object) {
+    return object.findAllContinuable !== undefined;
+}
+
 class ReloadRequest {
     constructor(number, reason) {
         this.number = number;
@@ -4138,7 +4178,7 @@ class DataContextBase extends DataSource {
             .pipe(filter(() => this.started), takeUntil(this.destroy$))
             .subscribe((sorts) => this.onSortsChanged(sorts));
         this._reloadQueue
-            .pipe(takeUntil(this.destroy$), filter((request) => this.started), debounceTime(50), switchMap((request) => this.reloadNow(request).pipe(map((result) => new AfterReload(request, result)), catchError((err) => {
+            .pipe(takeUntil(this.destroy$), filter((request) => this.started), debounceTime(this.getDebounceTime()), switchMap((request) => this.reloadNow(request).pipe(map((result) => new AfterReload(request, result)), catchError((err) => {
             // Dont die on errors
             this.baselog.error(this.id + ': Reload queue detected error, bad!', err);
             return of(new AfterReload(request, err));
@@ -4367,6 +4407,12 @@ class DataContextBase extends DataSource {
     getItemId(item) {
         return this.dataSource.getId(item);
     }
+    getDebounceTime() {
+        if (isLocalDataSource(this.dataSource)) {
+            return 0;
+        }
+        return 50; // Default debounce time
+    }
     /***************************************************************************
      *                                                                         *
      * Event handler                                                           *
@@ -5847,35 +5893,6 @@ class LocalPagedDataSource {
     }
 }
 
-/***************************************************************************
- *                                                                         *
- * Type Predicates                                                         *
- *                                                                         *
- **************************************************************************/
-function isDataSource(object) {
-    if (!object) {
-        return false;
-    }
-    return (object.dataChanged !== undefined &&
-        object.findById !== undefined &&
-        object.getId !== undefined);
-}
-function isListDataSource(object) {
-    return object.findAllFiltered !== undefined;
-}
-function isLocalListDataSource(object) {
-    return (isListDataSource(object) &&
-        object.delete !== undefined &&
-        object.save !== undefined &&
-        object.replaceAll !== undefined);
-}
-function isPagedDataSource(object) {
-    return object.findAllPaged !== undefined;
-}
-function isContinuableDataSource(object) {
-    return object.findAllContinuable !== undefined;
-}
-
 class DelegateDataSource {
     /***************************************************************************
      *                                                                         *
@@ -18462,14 +18479,14 @@ class ElderPaginatorIntl extends MatPaginatorIntl {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(translate) {
+    constructor() {
         super();
-        this.translate = translate;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
+        this.translate = inject(ElderTranslateService);
         this._itemCountSeparatorKey = 'paginator.itemCountSeparator';
         this._itemsPerPageKey = 'paginator.itemsPerPage';
         this._firstPageLabelKey = 'paginator.firstPage';
@@ -18490,7 +18507,7 @@ class ElderPaginatorIntl extends MatPaginatorIntl {
             const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
             return `${startIndex + 1} - ${endIndex} ${this.itemCountSeparatorLabel} ${length}`;
         };
-        this.translate.onLangChange.subscribe((e) => {
+        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
             this.translateLabels();
         });
         this.translateLabels();
@@ -18517,12 +18534,12 @@ class ElderPaginatorIntl extends MatPaginatorIntl {
             previousPageLabel !== this._previousPageKey ? previousPageLabel : 'Previous page';
         this.changes.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderPaginatorIntl, deps: [{ token: i1$9.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderPaginatorIntl }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderPaginatorIntl, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$9.TranslateService }] });
+        }], ctorParameters: () => [] });
 
 class ElderDelayedFocusDirective {
     constructor(el) {
@@ -18777,7 +18794,7 @@ class ElderFormFieldLabelDirective {
             this._matFormField.subscriptSizing = 'dynamic'; // Auto collapse hint/error line
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldLabelDirective, deps: [{ token: i1$a.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldLabelDirective, deps: [{ token: i1$9.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderFormFieldLabelDirective, isStandalone: true, selector: "mat-form-field[elderFormFieldLabel]", inputs: { enabled: ["elderFormFieldLabel", "enabled"] }, host: { properties: { "class.elder-form-field-label": "this.getFormFieldLabelStyle" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldLabelDirective, decorators: [{
@@ -18785,7 +18802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'mat-form-field[elderFormFieldLabel]',
                 }]
-        }], ctorParameters: () => [{ type: i1$a.MatFormField }], propDecorators: { getFormFieldLabelStyle: [{
+        }], ctorParameters: () => [{ type: i1$9.MatFormField }], propDecorators: { getFormFieldLabelStyle: [{
                 type: HostBinding,
                 args: ['class.elder-form-field-label']
             }], enabled: [{
@@ -19079,7 +19096,7 @@ class ElderFormFieldDenseDirective extends ElderClassHostBindingBase {
             this._matFormField.floatLabel = this._floatLabel; // Always float label so it is not out of bounds
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldDenseDirective, deps: [{ token: i1$a.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldDenseDirective, deps: [{ token: i1$9.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderFormFieldDenseDirective, isStandalone: true, selector: "mat-form-field[elderDense]", inputs: { elderDense: "elderDense", subscriptSizing: "subscriptSizing", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldDenseDirective, decorators: [{
@@ -19087,7 +19104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'mat-form-field[elderDense]',
                 }]
-        }], ctorParameters: () => [{ type: i1$a.MatFormField }], propDecorators: { elderDense: [{
+        }], ctorParameters: () => [{ type: i1$9.MatFormField }], propDecorators: { elderDense: [{
                 type: Input
             }], subscriptSizing: [{
                 type: Input
@@ -19551,7 +19568,7 @@ class ElderTripleStateCheckboxDirective {
     toggleNextState() {
         this.controller.toggleNextState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$b.MatCheckbox }, { token: i1$3.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$a.MatCheckbox }, { token: i1$3.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderTripleStateCheckboxDirective, isStandalone: true, selector: "mat-checkbox[elderTripleStateCheckbox]", outputs: { valueChange: "valueChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTripleStateCheckboxDirective, decorators: [{
@@ -19559,7 +19576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'mat-checkbox[elderTripleStateCheckbox]',
                 }]
-        }], ctorParameters: () => [{ type: i1$b.MatCheckbox }, { type: i1$3.NgModel, decorators: [{
+        }], ctorParameters: () => [{ type: i1$a.MatCheckbox }, { type: i1$3.NgModel, decorators: [{
                     type: Optional
                 }] }], propDecorators: { valueChange: [{
                 type: Output
@@ -19739,7 +19756,7 @@ class ElderFormFieldNoHintDirective extends ElderClassHostBindingBase {
             this._matFormField.subscriptSizing = 'dynamic'; // Auto collapse hint/error line
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldNoHintDirective, deps: [{ token: i1$a.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldNoHintDirective, deps: [{ token: i1$9.MatFormField }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderFormFieldNoHintDirective, isStandalone: true, selector: "mat-form-field[elderNoHint]", inputs: { elderNoHint: "elderNoHint" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormFieldNoHintDirective, decorators: [{
@@ -19747,7 +19764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'mat-form-field[elderNoHint]',
                 }]
-        }], ctorParameters: () => [{ type: i1$a.MatFormField }], propDecorators: { elderNoHint: [{
+        }], ctorParameters: () => [{ type: i1$9.MatFormField }], propDecorators: { elderNoHint: [{
                 type: Input
             }] } });
 
@@ -20037,7 +20054,7 @@ class ElderValidationErrorDirective {
             this.ref.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderValidationErrorDirective, deps: [{ token: ValidationMessageRendererService }, { token: i1$a.MatFormField }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderValidationErrorDirective, deps: [{ token: ValidationMessageRendererService }, { token: i1$9.MatFormField }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderValidationErrorDirective, isStandalone: true, selector: "mat-error[elderValidationError]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderValidationErrorDirective, decorators: [{
@@ -20045,7 +20062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'mat-error[elderValidationError]',
                 }]
-        }], ctorParameters: () => [{ type: ValidationMessageRendererService }, { type: i1$a.MatFormField }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: ValidationMessageRendererService }, { type: i1$9.MatFormField }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }] });
 
 var ElderCheckboxState;
 (function (ElderCheckboxState) {
@@ -20173,7 +20190,7 @@ class ElderSingleStateCheckboxDirective {
     toggleNextState() {
         this.controller.toggleNextState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSingleStateCheckboxDirective, deps: [{ token: i1$b.MatCheckbox }, { token: i1$3.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSingleStateCheckboxDirective, deps: [{ token: i1$a.MatCheckbox }, { token: i1$3.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderSingleStateCheckboxDirective, isStandalone: true, selector: "mat-checkbox[elderSingleStateCheckbox]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSingleStateCheckboxDirective, decorators: [{
@@ -20181,7 +20198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'mat-checkbox[elderSingleStateCheckbox]',
                 }]
-        }], ctorParameters: () => [{ type: i1$b.MatCheckbox }, { type: i1$3.NgModel }] });
+        }], ctorParameters: () => [{ type: i1$a.MatCheckbox }, { type: i1$3.NgModel }] });
 
 class ElderFormsDirectivesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderFormsDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -20545,7 +20562,6 @@ class ElderTableModule {
             MatTooltipModule,
             MatMenuModule,
             // translations
-            TranslateModule,
             ElderDataCommonModule,
             ElderInfiniteScrollModule,
             ElderFormsDirectivesModule,
@@ -20575,7 +20591,7 @@ class ElderTableModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTableModule, providers: [
             {
                 provide: MatPaginatorIntl,
-                deps: [TranslateService],
+                deps: [ElderTranslateService],
                 useClass: ElderPaginatorIntl,
             },
         ], imports: [CommonModule,
@@ -20597,7 +20613,6 @@ class ElderTableModule {
             MatTooltipModule,
             MatMenuModule,
             // translations
-            TranslateModule,
             ElderDataCommonModule,
             ElderInfiniteScrollModule,
             ElderFormsDirectivesModule,
@@ -20627,7 +20642,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatTooltipModule,
                         MatMenuModule,
                         // translations
-                        TranslateModule,
                         ElderDataCommonModule,
                         ElderInfiniteScrollModule,
                         ElderFormsDirectivesModule,
@@ -20661,7 +20675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     providers: [
                         {
                             provide: MatPaginatorIntl,
-                            deps: [TranslateService],
+                            deps: [ElderTranslateService],
                             useClass: ElderPaginatorIntl,
                         },
                     ],
@@ -21162,6 +21176,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
                 provide: ELDER_DATA_VIEW,
                 useExisting: forwardRef(() => ElderGridComponent),
             },
+            {
+                provide: MatPaginatorIntl,
+                useClass: ElderPaginatorIntl,
+            },
         ], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderGridNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "tiles", predicate: ElderTileComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "elderContinuator", first: true, predicate: ElderContinuatorComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: DataViewInteractionControllerDirective }], ngImport: i0, template: "<div class=\"full elder-grid-component\">\n  @if (dc(); as dc) {\n    <!-- Grid Browser -->\n    <div\n      class=\"layout-col full elder-grid-container\"\n      [elderDataContextSelection]=\"dc\"\n      #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n      <!-- Toolbar Row -->\n      @if (toolbarVisible()) {\n        <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n          @if (selectionVisible) {\n            <div class=\"layout-col flex-none px-sm\">\n              <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n            </div>\n          }\n\n          <!-- Toolbar -->\n          @if (toolbarTemplate) {\n            <ng-template\n              *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n            ></ng-template>\n          }\n\n          @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n            <elder-composite-sort\n              class=\"flex-none\"\n              [availableSorts]=\"availableCompositeSorts\"\n              [translationPrefix]=\"sortTranslationPrefix\"\n              [elderCompositeSortDc]=\"dc\"\n            >\n            </elder-composite-sort>\n          }\n        </div>\n\n        <mat-divider></mat-divider>\n      }\n\n      <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n      </elder-data-context-state-indicator>\n\n      <!-- [cdkDropListSortingDisabled]=\"true\" -->\n      <!-- cdkDropList -->\n      <cdk-virtual-scroll-viewport\n        class=\"layout-col flex elder-grid-browser\"\n        id=\"{{ scrollContainerId }}\"\n        [itemSize]=\"itemHeight()\"\n        [minBufferPx]=\"itemHeight() * 2\"\n        [maxBufferPx]=\"itemHeight() * 3\"\n        #virtualScrollViewPort\n        elderInfiniteScroll\n        [eventThrottle]=\"200\"\n        [offsetFactor]=\"2\"\n        [ignoreScrollEvent]=\"dcStatus()?.loading\"\n        [containerId]=\"scrollContainerId\"\n        [listenToHost]=\"false\"\n        (closeToEnd)=\"requestMoreDataZoned($event)\"\n        (elderResizeObserver)=\"containerDimensions$.next($event)\"\n      >\n        <!-- (scrolling)=\"onScrolling($event)\" -->\n\n        <div\n          *cdkVirtualFor=\"\n            let gridRow of dataRows$;\n            trackBy: TrackGridRowByIdFn;\n            templateCacheSize: 50\n          \"\n          class=\"elder-grid-tile-row\"\n          [style.height]=\"itemHeight() + 'px'\"\n          [style.--elder-grid-column-count]=\"activeColumnCount()\"\n        >\n          @for (tile of gridRow.cells; track trackCellId($index, tile)) {\n            <!-- Tile Cell -->\n            @if (isTileVisible(tile)) {\n              <elder-tile\n                class=\"elder-grid-tile\"\n                [value]=\"tile\"\n                [selectionEnabled]=\"selectionVisible\"\n                [outlined]=\"tileOutlined()\"\n                (click)=\"onItemClick(tile, $event)\"\n                (dblclick)=\"onItemDoubleClick(tile)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tileTemplate || simpleTileTemplate;\n                    context: { $implicit: tile }\n                  \"\n                ></ng-container>\n              </elder-tile>\n            } @else {\n              <div class=\"elder-grid-tile-hidden\"></div>\n            }\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\n      <mat-progress-bar\n        class=\"flex-none\"\n        [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n        [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n      >\n      </mat-progress-bar>\n\n      <!-- Footer -->\n      <ng-template\n        *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n      ></ng-template>\n    </div>\n  }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  @if (tile) {\n    <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n      <p class=\"noselect\">Tile: {{ tile }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultNavigationBar>\n  <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":root{--elder-grid-tile-gap: 16px}.elder-grid-tile{width:100%;height:100%;cursor:pointer;overflow:hidden}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;overflow:hidden;--elder-grid-column-count: 1;padding:calc(var(--elder-grid-tile-gap) / 2) var(--elder-grid-tile-gap);grid-template-columns:repeat(var(--elder-grid-column-count),minmax(0,1fr))}.elder-grid-tile-row:first-child{padding-top:var(--elder-grid-tile-gap)}.elder-grid-tile-row{column-gap:var(--elder-grid-tile-gap)}.elder-grid-tile-hidden{flex:0 1 100%;margin:calc(var(--elder-grid-tile-gap) / 2);width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"], dependencies: [{ kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderCompositeSortComponent, selector: "elder-composite-sort", inputs: ["availableSorts", "sorts", "translationPrefix"], outputs: ["sortsChange"] }, { kind: "directive", type: ElderCompositeSortDcDirective, selector: "[elderCompositeSortDc]", inputs: ["elderCompositeSortDc"] }, { kind: "component", type: ElderTileComponent, selector: "elder-tile", inputs: ["value", "selectionEnabled", "interactionMode", "outlined"] }, { kind: "directive", type: ResizeObserverDirective, selector: "[elderResizeObserver]", inputs: ["enabled"], outputs: ["dimensionChange", "elderResizeObserver"] }, { kind: "component", type: ElderDataNavigationComponent, selector: "elder-data-navigation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderGridComponent, decorators: [{
@@ -21171,6 +21189,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: ELDER_DATA_VIEW,
                             useExisting: forwardRef(() => ElderGridComponent),
                         },
+                        {
+                            provide: MatPaginatorIntl,
+                            useClass: ElderPaginatorIntl,
+                        },
                     ], hostDirectives: [DataViewInteractionControllerDirective], imports: [
                         DataContextSelectionDirective,
                         ElderSelectionMasterCheckboxComponent,
@@ -21182,11 +21204,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ElderInfiniteScrollDirective,
                         CdkVirtualForOf,
                         MatProgressBar,
-                        MatPaginator,
                         ElderCompositeSortComponent,
                         ElderCompositeSortDcDirective,
                         ElderTileComponent,
-                        ElderContinuatorComponent,
                         ResizeObserverDirective,
                         ElderDataNavigationComponent,
                     ], template: "<div class=\"full elder-grid-component\">\n  @if (dc(); as dc) {\n    <!-- Grid Browser -->\n    <div\n      class=\"layout-col full elder-grid-container\"\n      [elderDataContextSelection]=\"dc\"\n      #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n      <!-- Toolbar Row -->\n      @if (toolbarVisible()) {\n        <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n          @if (selectionVisible) {\n            <div class=\"layout-col flex-none px-sm\">\n              <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n            </div>\n          }\n\n          <!-- Toolbar -->\n          @if (toolbarTemplate) {\n            <ng-template\n              *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n            ></ng-template>\n          }\n\n          @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n            <elder-composite-sort\n              class=\"flex-none\"\n              [availableSorts]=\"availableCompositeSorts\"\n              [translationPrefix]=\"sortTranslationPrefix\"\n              [elderCompositeSortDc]=\"dc\"\n            >\n            </elder-composite-sort>\n          }\n        </div>\n\n        <mat-divider></mat-divider>\n      }\n\n      <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n      </elder-data-context-state-indicator>\n\n      <!-- [cdkDropListSortingDisabled]=\"true\" -->\n      <!-- cdkDropList -->\n      <cdk-virtual-scroll-viewport\n        class=\"layout-col flex elder-grid-browser\"\n        id=\"{{ scrollContainerId }}\"\n        [itemSize]=\"itemHeight()\"\n        [minBufferPx]=\"itemHeight() * 2\"\n        [maxBufferPx]=\"itemHeight() * 3\"\n        #virtualScrollViewPort\n        elderInfiniteScroll\n        [eventThrottle]=\"200\"\n        [offsetFactor]=\"2\"\n        [ignoreScrollEvent]=\"dcStatus()?.loading\"\n        [containerId]=\"scrollContainerId\"\n        [listenToHost]=\"false\"\n        (closeToEnd)=\"requestMoreDataZoned($event)\"\n        (elderResizeObserver)=\"containerDimensions$.next($event)\"\n      >\n        <!-- (scrolling)=\"onScrolling($event)\" -->\n\n        <div\n          *cdkVirtualFor=\"\n            let gridRow of dataRows$;\n            trackBy: TrackGridRowByIdFn;\n            templateCacheSize: 50\n          \"\n          class=\"elder-grid-tile-row\"\n          [style.height]=\"itemHeight() + 'px'\"\n          [style.--elder-grid-column-count]=\"activeColumnCount()\"\n        >\n          @for (tile of gridRow.cells; track trackCellId($index, tile)) {\n            <!-- Tile Cell -->\n            @if (isTileVisible(tile)) {\n              <elder-tile\n                class=\"elder-grid-tile\"\n                [value]=\"tile\"\n                [selectionEnabled]=\"selectionVisible\"\n                [outlined]=\"tileOutlined()\"\n                (click)=\"onItemClick(tile, $event)\"\n                (dblclick)=\"onItemDoubleClick(tile)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tileTemplate || simpleTileTemplate;\n                    context: { $implicit: tile }\n                  \"\n                ></ng-container>\n              </elder-tile>\n            } @else {\n              <div class=\"elder-grid-tile-hidden\"></div>\n            }\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\n      <mat-progress-bar\n        class=\"flex-none\"\n        [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n        [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n      >\n      </mat-progress-bar>\n\n      <!-- Footer -->\n      <ng-template\n        *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n      ></ng-template>\n    </div>\n  }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  @if (tile) {\n    <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n      <p class=\"noselect\">Tile: {{ tile }}</p>\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultNavigationBar>\n  <elder-data-navigation></elder-data-navigation>\n</ng-template>\n", styles: [":root{--elder-grid-tile-gap: 16px}.elder-grid-tile{width:100%;height:100%;cursor:pointer;overflow:hidden}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;overflow:hidden;--elder-grid-column-count: 1;padding:calc(var(--elder-grid-tile-gap) / 2) var(--elder-grid-tile-gap);grid-template-columns:repeat(var(--elder-grid-column-count),minmax(0,1fr))}.elder-grid-tile-row:first-child{padding-top:var(--elder-grid-tile-gap)}.elder-grid-tile-row{column-gap:var(--elder-grid-tile-gap)}.elder-grid-tile-hidden{flex:0 1 100%;margin:calc(var(--elder-grid-tile-gap) / 2);width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"] }]
@@ -23372,6 +23392,7 @@ class ElderSelectBase extends ElderFormFieldControlBase {
         this.pageSize = 10;
         this.queryFilter = 'query';
         this.sorts = [];
+        this.tabSelectAfterTextInput = false;
         /**
          * Emits an event when the user has clicked on the current
          * selected entity.
@@ -23562,7 +23583,7 @@ class ElderSelectBase extends ElderFormFieldControlBase {
         return typeof val === 'function' || typeof val === 'object';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSelectBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: ElderSelectBase, isStandalone: true, inputs: { cleanUp: { classPropertyName: "cleanUp", publicName: "cleanUp", isSignal: false, isRequired: false, transformFunction: null }, displayPropertyResolverS: { classPropertyName: "displayPropertyResolverS", publicName: "displayPropertyResolver", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: false, isRequired: false, transformFunction: null }, sorts: { classPropertyName: "sorts", publicName: "sorts", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, isOptionDisabledFn: { classPropertyName: "isOptionDisabledFn", publicName: "isOptionDisabledFn", isSignal: false, isRequired: false, transformFunction: null }, isOptionHiddenFn: { classPropertyName: "isOptionHiddenFn", publicName: "isOptionHiddenFn", isSignal: false, isRequired: false, transformFunction: null }, valueAsId: { classPropertyName: "valueAsId", publicName: "valueAsId", isSignal: false, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: false, isRequired: false, transformFunction: null }, displayPropertyResolver: { classPropertyName: "displayPropertyResolver", publicName: "displayPropertyResolver", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { displayPropertyResolverS: "displayPropertyResolverChange", currentClicked: "currentClicked" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionPopup", first: true, predicate: SelectionModelPopupDirective, descendants: true }, { propertyName: "templateOptions$", predicate: ElderSelectOptionComponent }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: ElderSelectBase, isStandalone: true, inputs: { cleanUp: { classPropertyName: "cleanUp", publicName: "cleanUp", isSignal: false, isRequired: false, transformFunction: null }, displayPropertyResolverS: { classPropertyName: "displayPropertyResolverS", publicName: "displayPropertyResolver", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, queryFilter: { classPropertyName: "queryFilter", publicName: "queryFilter", isSignal: false, isRequired: false, transformFunction: null }, sorts: { classPropertyName: "sorts", publicName: "sorts", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, tabSelectAfterTextInput: { classPropertyName: "tabSelectAfterTextInput", publicName: "tabSelectAfterTextInput", isSignal: false, isRequired: false, transformFunction: null }, isOptionDisabledFn: { classPropertyName: "isOptionDisabledFn", publicName: "isOptionDisabledFn", isSignal: false, isRequired: false, transformFunction: null }, isOptionHiddenFn: { classPropertyName: "isOptionHiddenFn", publicName: "isOptionHiddenFn", isSignal: false, isRequired: false, transformFunction: null }, valueAsId: { classPropertyName: "valueAsId", publicName: "valueAsId", isSignal: false, isRequired: false, transformFunction: null }, displayProperty: { classPropertyName: "displayProperty", publicName: "displayProperty", isSignal: false, isRequired: false, transformFunction: null }, displayPropertyResolver: { classPropertyName: "displayPropertyResolver", publicName: "displayPropertyResolver", isSignal: false, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { displayPropertyResolverS: "displayPropertyResolverChange", currentClicked: "currentClicked" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionPopup", first: true, predicate: SelectionModelPopupDirective, descendants: true }, { propertyName: "templateOptions$", predicate: ElderSelectOptionComponent }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSelectBase, decorators: [{
             type: Directive
@@ -23576,6 +23597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], icon: [{
                 type: Input
+            }], tabSelectAfterTextInput: [{
+                type: Input
             }], valueTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderSelectValueDirective, { read: TemplateRef, static: true }]
@@ -23646,7 +23669,7 @@ class ElderAutocompleteDirective {
      *                                                                         *
      **************************************************************************/
     ngOnInit() {
-        merge(this.inputKeyup$.pipe(skipWhile((e) => !this._elderAutocomplete.enabled), debounceTime(150), map((e) => e?.target?.value)), this.autocomplete.triggerReload$)
+        merge(this.inputKeyup$.pipe(skipWhile((e) => !this._elderAutocomplete.enabled), debounce(() => timer(this.getDebounceTime())), map((e) => e?.target?.value)), this.autocomplete.triggerReload$)
             .pipe(takeUntil(this.destroy$), filter((value) => !value || typeof value === 'string' || typeof value === 'number'))
             .subscribe((value) => this.updateSuggestions(value));
     }
@@ -23696,6 +23719,12 @@ class ElderAutocompleteDirective {
             this.logger.warn('No DataContext available to update suggestions!');
         }
     }
+    getDebounceTime() {
+        if (isLocalDataSource(this.dataContext?.dataSource)) {
+            return 0;
+        }
+        return 150; // Default debounce time
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderAutocompleteDirective, deps: [{ token: i1$8.MatAutocompleteTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderAutocompleteDirective, isStandalone: true, selector: "[elderAutocomplete]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", autocomplete: ["elderAutocomplete", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
 }
@@ -23727,13 +23756,14 @@ class ElderSelectOnTabDirective {
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
         this.autoTrigger = inject(MatAutocompleteTrigger);
-        this.elderSelectBase = inject(ELDER_SELECT_BASE, {
+        this.elderSelect = inject(ElderSelectComponent, {
             skipSelf: true,
         });
         this.destroy$ = new Subject$1();
-        this.controlValueAccessor = this.elderSelectBase;
+        this.controlValueAccessor = this.elderSelect;
         this.panelOpen = false;
-        this.userInteracted = false;
+        this.autocompleteTextTyped = false;
+        this.panelNavigatedWithArrowKeys = false;
     }
     /***************************************************************************
      *                                                                         *
@@ -23741,13 +23771,16 @@ class ElderSelectOnTabDirective {
      *                                                                         *
      **************************************************************************/
     handleVerticalArrowKeyPress() {
-        this.userInteracted = true;
+        this.panelNavigatedWithArrowKeys = true;
+    }
+    handleInputTyping() {
+        this.autocompleteTextTyped = true;
     }
     handleTabKeyPress() {
         if (!this.panelOpen) {
             return;
         }
-        if (this.userInteracted || this.isRequiredAndEmpty()) {
+        if (this.userInteracted() || this.isRequiredAndEmpty()) {
             this.selectActiveOption();
         }
     }
@@ -23770,10 +23803,11 @@ class ElderSelectOnTabDirective {
      *                                                                         *
      **************************************************************************/
     isRequiredAndEmpty() {
-        return !this.controlValueAccessor.value && this.elderSelectBase.required;
+        return !this.controlValueAccessor.value && this.elderSelect.required;
     }
     resetInteractionState() {
-        this.userInteracted = false;
+        this.autocompleteTextTyped = false;
+        this.panelNavigatedWithArrowKeys = false;
     }
     observePanelOpen() {
         const autocomplete = this.autoTrigger.autocomplete;
@@ -23786,18 +23820,38 @@ class ElderSelectOnTabDirective {
             }
         });
     }
+    /**
+     * This method seems obsolete, probably once was intended to detect user input from the autocomplete.
+     */
     observeAutocompleteSelection() {
         this.autoTrigger.optionSelections
             .pipe(
         // TODO https://github.com/angular/components/pull/14813
         takeUntil(this.destroy$), tap((opt) => this.logger.debug('[optionSelections] CHANGED ', opt)), map((opt) => opt.isUserInput))
-            .subscribe((isUserInput) => (this.userInteracted = isUserInput));
+            .subscribe((isUserInput) => (this.autocompleteTextTyped = isUserInput));
     }
     selectActiveOption() {
-        const activeOption = this.autoTrigger.activeOption;
-        if (activeOption) {
-            const entity = activeOption.value;
-            this.writeEntity(entity);
+        // keyboard navigation has precedence over text input
+        if (this.panelNavigatedWithArrowKeys) {
+            const activeOption = this.autoTrigger.activeOption;
+            if (activeOption) {
+                const entity = activeOption.value;
+                this.writeEntity(entity);
+            }
+            return;
+        }
+        // text input check
+        if (this.textTypedAndSettingRespected()) {
+            const matchedOption = this.findMatchingOptionByInputText();
+            if (matchedOption) {
+                this.writeEntity(matchedOption.value);
+                return;
+            }
+            const activeOption = this.autoTrigger.activeOption;
+            if (activeOption) {
+                const entity = activeOption.value;
+                this.writeEntity(entity);
+            }
         }
     }
     writeEntity(entity) {
@@ -23818,8 +23872,32 @@ class ElderSelectOnTabDirective {
             return entity;
         }
     }
+    textTypedAndSettingRespected() {
+        return this.autocompleteTextTyped && this.elderSelect.tabSelectAfterTextInput;
+    }
+    userInteracted() {
+        return this.panelNavigatedWithArrowKeys || this.textTypedAndSettingRespected();
+    }
+    findMatchingOptionByInputText() {
+        const inputText = this.elderSelect.inputRef?.nativeElement?.value;
+        if (!inputText) {
+            return null;
+        }
+        const normalizedInput = inputText.trim().toLowerCase();
+        if (!normalizedInput) {
+            return null;
+        }
+        const options = this.autoTrigger.autocomplete?.options?.toArray() ?? [];
+        return (options.find((option) => {
+            if (option.disabled) {
+                return false;
+            }
+            const optionText = (option.viewValue ?? '').trim().toLowerCase();
+            return optionText.startsWith(normalizedInput);
+        }) ?? null);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSelectOnTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderSelectOnTabDirective, isStandalone: true, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "handleVerticalArrowKeyPress()", "keydown.arrowdown": "handleVerticalArrowKeyPress()", "keydown.tab": "handleTabKeyPress()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderSelectOnTabDirective, isStandalone: true, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "handleVerticalArrowKeyPress()", "keydown.arrowdown": "handleVerticalArrowKeyPress()", "input": "handleInputTyping()", "keydown.tab": "handleTabKeyPress()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSelectOnTabDirective, decorators: [{
             type: Directive,
@@ -23832,6 +23910,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }, {
                 type: HostListener,
                 args: ['keydown.arrowdown']
+            }], handleInputTyping: [{
+                type: HostListener,
+                args: ['input']
             }], handleTabKeyPress: [{
                 type: HostListener,
                 args: ['keydown.tab']
@@ -23873,6 +23954,7 @@ class ElderSuggestionPanelComponent {
          * The underlying Material Autocomplete
          */
         this.matAutocomplete$ = new BehaviorSubject(null);
+        this.activeEntity = input(null, ...(ngDevMode ? [{ debugName: "activeEntity" }] : /* istanbul ignore next */ []));
         /**
          * The DataContext which holds the autocomplete suggestions.
          */
@@ -23986,6 +24068,25 @@ class ElderSuggestionPanelComponent {
             return false;
         }
     }
+    isOptionActive(option) {
+        const activeEntity = this.activeEntity();
+        if (!activeEntity) {
+            return false;
+        }
+        // Prefer stable id comparison for object entities.
+        const activeId = this.safeId(activeEntity);
+        const optionId = this.safeId(option);
+        if (activeId !== undefined && optionId !== undefined) {
+            return activeId === optionId;
+        }
+        // Fallback for non-id data (e.g. translated display-only options).
+        const resolver = this.displayPropertyResolver$.getValue();
+        const activeLabel = resolver
+            ? resolver(activeEntity)
+            : this.propertyStringValue(activeEntity, null);
+        const optionLabel = resolver ? resolver(option) : this.propertyStringValue(option, null);
+        return activeLabel === optionLabel;
+    }
     toOptionValue(option) {
         if (this.optionValueConverterFn) {
             return this.optionValueConverterFn(option);
@@ -24020,8 +24121,19 @@ class ElderSuggestionPanelComponent {
     calculatePageSize() {
         return this.PAGE_SIZE + this.hiddenOptionsCount$.getValue();
     }
+    safeId(value) {
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        try {
+            return this.getId(value);
+        }
+        catch {
+            return undefined;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", 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: "21.2.9", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderSuggestionPanelComponent, isStandalone: true, selector: "elder-suggestion-panel", inputs: { isOptionDisabledFn: { classPropertyName: "isOptionDisabledFn", publicName: "isOptionDisabledFn", isSignal: false, isRequired: false, transformFunction: null }, isOptionHiddenFn: { classPropertyName: "isOptionHiddenFn", publicName: "isOptionHiddenFn", isSignal: false, isRequired: false, transformFunction: null }, optionValueConverterFn: { classPropertyName: "optionValueConverterFn", publicName: "optionValueConverterFn", isSignal: false, isRequired: false, transformFunction: null }, activeEntity: { classPropertyName: "activeEntity", publicName: "activeEntity", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: false, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, displayPropertyResolver: { classPropertyName: "displayPropertyResolver", publicName: "displayPropertyResolver", isSignal: false, isRequired: false, transformFunction: null } }, 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            [class.active-option]=\"isOptionActive(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      <div style=\"position: relative\">\n        <div style=\"position: absolute; right: 0; bottom: -8px; left: 0\">\n          <mat-progress-bar\n            [value]=\"100\"\n            [mode]=\"state.loading ? 'query' : 'determinate'\"\n            [color]=\"state.error ? 'warn' : 'primary'\"\n          ></mat-progress-bar>\n        </div>\n      </div>\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: [".active-option.active-option{font-weight:700}.active-option.active-option:before{font-family:Material Icons;content:\"check\";font-size:13px;position:absolute;top:50%;left:1px;transform:translateY(-50%)}\n"], 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: "21.2.9", ngImport: i0, type: ElderSuggestionPanelComponent, decorators: [{
             type: Component,
@@ -24034,7 +24146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         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  @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" }]
+                    ], 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            [class.active-option]=\"isOptionActive(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      <div style=\"position: relative\">\n        <div style=\"position: absolute; right: 0; bottom: -8px; left: 0\">\n          <mat-progress-bar\n            [value]=\"100\"\n            [mode]=\"state.loading ? 'query' : 'determinate'\"\n            [color]=\"state.error ? 'warn' : 'primary'\"\n          ></mat-progress-bar>\n        </div>\n      </div>\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: [".active-option.active-option{font-weight:700}.active-option.active-option:before{font-family:Material Icons;content:\"check\";font-size:13px;position:absolute;top:50%;left:1px;transform:translateY(-50%)}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.DestroyRef }], propDecorators: { valueTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderSelectValueDirective, { read: TemplateRef, static: true }]
@@ -24047,7 +24159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], optionValueConverterFn: [{
                 type: Input
-            }], optionSelected: [{
+            }], activeEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeEntity", required: false }] }], optionSelected: [{
                 type: Output
             }], enabled: [{
                 type: Input
@@ -24294,15 +24406,10 @@ class ElderSelectComponent extends ElderSelectBase {
     }
     get isOptionDisabledInternalFn() {
         return (option) => {
-            if (!this.isEntitySelected(option)) {
-                if (this.isOptionDisabledFn) {
-                    return this.isOptionDisabledFn(option);
-                }
-                else {
-                    return false;
-                }
+            if (this.isOptionDisabledFn) {
+                return this.isOptionDisabledFn(option);
             }
-            return true;
+            return false;
         };
     }
     get isOptionHiddenInternalFn() {
@@ -24353,9 +24460,17 @@ class ElderSelectComponent extends ElderSelectBase {
         }
         const selectedEntity = optionSelected.entity;
         if (this.isEntitySelected(selectedEntity)) {
-            this.writeValueInternal(null); // HACK: Ensure we trigger view redraw
+            // Force signal emission when re-selecting the same entity.
+            // Signals skip emission when the value hasn't changed (by reference),
+            // so we reset to null and then restore the value to trigger subscribers.
+            this.writeValueInternal(null);
+            queueMicrotask(() => {
+                this.updateValueByEntity(selectedEntity);
+            });
+        }
+        else {
+            this.updateValueByEntity(selectedEntity);
         }
-        this.updateValueByEntity(selectedEntity);
     }
     openSelectionPopup(event) {
         if (this.selectionPopup) {
@@ -24507,7 +24622,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(); as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state(); 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]=\"controlName + '-inner-input'\"\n      [placeholder]=\"placeholderS() | 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()\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"dataContextS()?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolverS()\"\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 && !this.readonlyS()) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLockedS()\"\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,.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", "disabledInteractive"], 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: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderAutoSelectSuggestFirstDirective, selector: "[elderAutoSelectSuggestFirst]" }, { kind: "pipe", type: ElderTranslatePipe, 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(); as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state(); 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]=\"controlName + '-inner-input'\"\n      [placeholder]=\"placeholderS() | 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()\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"dataContextS()?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolverS()\"\n      [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n      [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n      elderAutoSelectSuggestFirst\n      (optionSelected)=\"onOptionSelected($any($event))\"\n      [activeEntity]=\"entityS()\"\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 && !this.readonlyS()) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLockedS()\"\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,.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", "disabledInteractive"], 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: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.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", "activeEntity", "enabled", "valueTemplate", "dataSource", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderSuggestionPanel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderAutoSelectSuggestFirstDirective, selector: "[elderAutoSelectSuggestFirst]" }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
@@ -24530,7 +24645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ElderStopEventPropagationDirective,
                         ElderTranslatePipe,
                         ElderAutoSelectSuggestFirstDirective,
-                    ], template: "@if (entityWrapped(); as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state(); 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]=\"controlName + '-inner-input'\"\n      [placeholder]=\"placeholderS() | 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()\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"dataContextS()?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolverS()\"\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 && !this.readonlyS()) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLockedS()\"\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,.elder-select-dropdown-input{cursor:pointer}\n"] }]
+                    ], template: "@if (entityWrapped(); as entityWrapper) {\n  <div class=\"layout-row place-start-center elder-flex-control\">\n    @if (state(); 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]=\"controlName + '-inner-input'\"\n      [placeholder]=\"placeholderS() | 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()\"\n      [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus(autoTrigger)\"\n      (click)=\"onInputClicked(autoTrigger)\"\n    />\n\n    <elder-suggestion-panel\n      #elderAuto=\"elderSuggestionPanel\"\n      [dataSource]=\"dataContextS()?.dataSource\"\n      [valueTemplate]=\"valueTemplate\"\n      enabled\n      [displayPropertyResolver]=\"displayPropertyResolverS()\"\n      [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n      [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n      elderAutoSelectSuggestFirst\n      (optionSelected)=\"onOptionSelected($any($event))\"\n      [activeEntity]=\"entityS()\"\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 && !this.readonlyS()) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLockedS()\"\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,.elder-select-dropdown-input{cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['input']
@@ -25728,7 +25843,8 @@ class ElderMultiSelectBase extends ElderSelectBase {
     }
     set entities(entities) {
         if (!this.equalEntitiesExactOrder(this.entities, entities)) {
-            this.writeValueInternalFromItemModel(entities.map((e) => this.toItemModel(e)));
+            const entitiesOrEmpty = entities ?? [];
+            this.writeValueInternalFromItemModel(entitiesOrEmpty.map((e) => this.toItemModel(e)));
         }
     }
     get entities() {
@@ -25856,7 +25972,7 @@ class ElderMultiSelectBase extends ElderSelectBase {
         else {
             // Value was written as entity, ensure entity is updated
             const currentEntities = this.entities;
-            const newEntities = value;
+            const newEntities = value ?? [];
             this.logger.debug('writeToControl: value was written as entities (size): ' + newEntities?.length, value);
             if (!this.equalEntities(currentEntities, newEntities)) {
                 this.writeItemModelSorted(newEntities.map((e) => this.toItemModel(e)));
@@ -28908,7 +29024,7 @@ class ElderNavGroupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <a\n    matRipple\n    tabindex=\"0\"\n    class=\"layout-row place-start-center nav-group-button\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"isActive()\"\n    (click)=\"onItemClicked($event)\"\n    (keydown)=\"onItemKeyDown($event)\"\n  >\n    <div class=\"elder-nav-group-button-content layout-row place-start-center gap-lg full noselect\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      @if (!isRailNav()) {\n        <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n      }\n    </div>\n  </a>\n\n  <!-- Template for nav links content. Necessary to project nav links content into the overlay. -->\n  <ng-template #navLinksTemplate>\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </ng-template>\n\n  <!-- Nested Items projection -->\n  @if (!isRailNav()) {\n    <elder-nav-expansion-panel [isOpen]=\"isOpen()\">\n      <div class=\"layout-col nav-group-items-container p-sm\">\n        <ng-container *ngTemplateOutlet=\"navLinksTemplate\"></ng-container>\n      </div>\n    </elder-nav-expansion-panel>\n  } @else {\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n      (backdropClick)=\"close()\"\n      (detach)=\"close()\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    >\n      <div class=\"nav-group-in-overlay\" (click)=\"handleClickInOverlay($event)\">\n        <div class=\"layout-col nav-group-items-container p-sm\">\n          <ng-container *ngTemplateOutlet=\"navLinksTemplate\"></ng-container>\n        </div>\n      </div>\n    </ng-template>\n  }\n</div>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:0 4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group .nav-group-button.nav-group-button-open{padding-left:11px}.nav-group .nav-group-button.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}.nav-group-in-overlay{--elder-nav-item-height: 38px;width:auto;border:solid 1px var(--md-sys-color-outline-variant);border-radius:5px;background:var(--md-sys-color-surface-container-lowest);text-align:center;padding:4px 0;margin:0 0 0 10px;min-width:280px;box-shadow:0 0 8px #00000026;overflow-y:auto}.nav-group-in-overlay .nav-group-items-container{font-size:14px}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$c.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$c.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ElderNavExpansionPanelComponent, selector: "elder-nav-expansion-panel", inputs: ["isOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <a\n    matRipple\n    tabindex=\"0\"\n    class=\"layout-row place-start-center nav-group-button\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"isActive()\"\n    (click)=\"onItemClicked($event)\"\n    (keydown)=\"onItemKeyDown($event)\"\n  >\n    <div class=\"elder-nav-group-button-content layout-row place-start-center gap-lg full noselect\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      @if (!isRailNav()) {\n        <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n      }\n    </div>\n  </a>\n\n  <!-- Template for nav links content. Necessary to project nav links content into the overlay. -->\n  <ng-template #navLinksTemplate>\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </ng-template>\n\n  <!-- Nested Items projection -->\n  @if (!isRailNav()) {\n    <elder-nav-expansion-panel [isOpen]=\"isOpen()\">\n      <div class=\"layout-col nav-group-items-container p-sm\">\n        <ng-container *ngTemplateOutlet=\"navLinksTemplate\"></ng-container>\n      </div>\n    </elder-nav-expansion-panel>\n  } @else {\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n      (backdropClick)=\"close()\"\n      (detach)=\"close()\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    >\n      <div class=\"nav-group-in-overlay\" (click)=\"handleClickInOverlay($event)\">\n        <div class=\"layout-col nav-group-items-container p-sm\">\n          <ng-container *ngTemplateOutlet=\"navLinksTemplate\"></ng-container>\n        </div>\n      </div>\n    </ng-template>\n  }\n</div>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:0 4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group .nav-group-button.nav-group-button-open{padding-left:11px}.nav-group .nav-group-button.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}.nav-group-in-overlay{--elder-nav-item-height: 38px;width:auto;border:solid 1px var(--md-sys-color-outline-variant);border-radius:5px;background:var(--md-sys-color-surface-container-lowest);text-align:center;padding:4px 0;margin:0 0 0 10px;min-width:280px;box-shadow:0 0 8px #00000026;overflow-y:auto}.nav-group-in-overlay .nav-group-items-container{font-size:14px}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$b.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$b.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ElderNavExpansionPanelComponent, selector: "elder-nav-expansion-panel", inputs: ["isOpen"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderNavGroupComponent, decorators: [{
             type: Component,
@@ -31137,7 +31253,7 @@ class ElderIntervalInputComponent extends ElderFormFieldControlBase {
             return coerceInterval(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderIntervalInputComponent, deps: [{ token: i1$d.DateAdapter }, { token: MAT_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderIntervalInputComponent, deps: [{ token: i1$c.DateAdapter }, { token: MAT_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderIntervalInputComponent, isStandalone: true, selector: "elder-interval-input", inputs: { zone: "zone", valueAsIsoStr: "valueAsIsoStr", mode: "mode", isDefaultDatePickerDisabled: "isDefaultDatePickerDisabled", isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: [{ provide: MatFormFieldControl, useExisting: ElderIntervalInputComponent }], usesInheritance: true, ngImport: i0, template: "@switch (mode) {\n  @case ('date-time-range') {\n    <div class=\"layout-row\">\n      <elder-date-time-input\n        class=\"flex\"\n        center\n        [value]=\"(interval$ | async)?.start\"\n        (valueUpdated)=\"onStartChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.from' | translate)\"\n      ></elder-date-time-input>\n      <span class=\"mat-date-range-input-separator flex-none\">\u2013</span>\n      <elder-date-time-input\n        class=\"flex\"\n        center\n        [value]=\"(interval$ | async)?.end\"\n        (valueUpdated)=\"onEndChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.to' | translate)\"\n      ></elder-date-time-input>\n    </div>\n  }\n  @case ('day-time-range') {\n    <div class=\"layout-row gap-xs elder-flex-interval-control\">\n      <!--  [name]=\"name + '-day-start'\" -->\n      <elder-date-time-input\n        [value]=\"(interval$ | async)?.start\"\n        (valueUpdated)=\"onDayTimeStartChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.from' | translate)\"\n      ></elder-date-time-input>\n\n      <!-- [name]=\"name + '-day-end'\" -->\n      <elder-local-time-input\n        [value]=\"endTime$ | async\"\n        (valueUpdated)=\"onDayTimeEndTimeChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.to' | translate)\"\n      ></elder-local-time-input>\n    </div>\n  }\n\n  @case ('date-range') {\n    <div class=\"layout-row gap-xs elder-flex-interval-control\">\n      <mat-date-range-input\n        class=\"mdc-text-field__input\"\n        [rangePicker]=\"picker\"\n        [disabled]=\"!!disabled\"\n      >\n        <input\n          matStartDate\n          [placeholder]=\"dateformat\"\n          [ngModel]=\"startDate$ | async\"\n          name=\"date-range.start\"\n          [ngModelOptions]=\"{ standalone: true, updateOn: 'blur' }\"\n          (ngModelChange)=\"onStartDateChanged($event)\"\n          [readonly]=\"readonly\"\n          [disabled]=\"!!disabled\"\n        />\n        <input\n          matEndDate\n          [placeholder]=\"dateformat\"\n          [ngModel]=\"endDate$ | async\"\n          name=\"date-range.end\"\n          [ngModelOptions]=\"{ standalone: true, updateOn: 'blur' }\"\n          (ngModelChange)=\"onEndDateChanged($event)\"\n          [readonly]=\"readonly\"\n          [disabled]=\"!!disabled\"\n        />\n      </mat-date-range-input>\n\n      @if (!isDefaultDatePickerDisabled) {\n        <mat-datepicker-toggle\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          [for]=\"picker\"\n        >\n          <mat-icon matDatepickerToggleIcon>calendar_month</mat-icon>\n        </mat-datepicker-toggle>\n      }\n      <mat-date-range-picker #picker></mat-date-range-picker>\n    </div>\n  }\n\n  @case ('single-day') {\n    <div class=\"layout-row elder-flex-control\">\n      <!-- [name]=\"name\" -->\n      <elder-local-date-input\n        class=\"flex\"\n        center\n        [value]=\"startLocalDate$ | async\"\n        (valueUpdated)=\"onSingleDayDateChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeHolderOrEmpty() | translate\"\n      ></elder-local-date-input>\n    </div>\n  }\n}\n", styles: [".elder-flex-interval-control{flex:1 1 auto;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderDateTimeInputComponent, selector: "elder-date-time-input", inputs: ["center", "isoValue"], outputs: ["isoValueChange"] }, { kind: "component", type: ElderLocalTimeInputComponent, selector: "elder-local-time-input", inputs: ["isoValue"], outputs: ["isoValueChange"] }, { kind: "component", type: MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: ["zone", "autoDatePicker", "arrows", "today", "center", "datePickerTouchUi", "allowNull", "datePickerEnabled", "isoValue", "dateValue", "isoDateValue"], outputs: ["blurred", "valueUpdatedBlur", "isoValueChange", "dateValueChange", "isoDateValueChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderIntervalInputComponent, decorators: [{
@@ -31157,7 +31273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatDateRangePicker,
                         ElderLocalDateInputComponent,
                     ], template: "@switch (mode) {\n  @case ('date-time-range') {\n    <div class=\"layout-row\">\n      <elder-date-time-input\n        class=\"flex\"\n        center\n        [value]=\"(interval$ | async)?.start\"\n        (valueUpdated)=\"onStartChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.from' | translate)\"\n      ></elder-date-time-input>\n      <span class=\"mat-date-range-input-separator flex-none\">\u2013</span>\n      <elder-date-time-input\n        class=\"flex\"\n        center\n        [value]=\"(interval$ | async)?.end\"\n        (valueUpdated)=\"onEndChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.to' | translate)\"\n      ></elder-date-time-input>\n    </div>\n  }\n  @case ('day-time-range') {\n    <div class=\"layout-row gap-xs elder-flex-interval-control\">\n      <!--  [name]=\"name + '-day-start'\" -->\n      <elder-date-time-input\n        [value]=\"(interval$ | async)?.start\"\n        (valueUpdated)=\"onDayTimeStartChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.from' | translate)\"\n      ></elder-date-time-input>\n\n      <!-- [name]=\"name + '-day-end'\" -->\n      <elder-local-time-input\n        [value]=\"endTime$ | async\"\n        (valueUpdated)=\"onDayTimeEndTimeChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"(placeHolderOrEmpty() | translate) + ' ' + ('interval.to' | translate)\"\n      ></elder-local-time-input>\n    </div>\n  }\n\n  @case ('date-range') {\n    <div class=\"layout-row gap-xs elder-flex-interval-control\">\n      <mat-date-range-input\n        class=\"mdc-text-field__input\"\n        [rangePicker]=\"picker\"\n        [disabled]=\"!!disabled\"\n      >\n        <input\n          matStartDate\n          [placeholder]=\"dateformat\"\n          [ngModel]=\"startDate$ | async\"\n          name=\"date-range.start\"\n          [ngModelOptions]=\"{ standalone: true, updateOn: 'blur' }\"\n          (ngModelChange)=\"onStartDateChanged($event)\"\n          [readonly]=\"readonly\"\n          [disabled]=\"!!disabled\"\n        />\n        <input\n          matEndDate\n          [placeholder]=\"dateformat\"\n          [ngModel]=\"endDate$ | async\"\n          name=\"date-range.end\"\n          [ngModelOptions]=\"{ standalone: true, updateOn: 'blur' }\"\n          (ngModelChange)=\"onEndDateChanged($event)\"\n          [readonly]=\"readonly\"\n          [disabled]=\"!!disabled\"\n        />\n      </mat-date-range-input>\n\n      @if (!isDefaultDatePickerDisabled) {\n        <mat-datepicker-toggle\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked\"\n          [for]=\"picker\"\n        >\n          <mat-icon matDatepickerToggleIcon>calendar_month</mat-icon>\n        </mat-datepicker-toggle>\n      }\n      <mat-date-range-picker #picker></mat-date-range-picker>\n    </div>\n  }\n\n  @case ('single-day') {\n    <div class=\"layout-row elder-flex-control\">\n      <!-- [name]=\"name\" -->\n      <elder-local-date-input\n        class=\"flex\"\n        center\n        [value]=\"startLocalDate$ | async\"\n        (valueUpdated)=\"onSingleDayDateChanged($event)\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeHolderOrEmpty() | translate\"\n      ></elder-local-date-input>\n    </div>\n  }\n}\n", styles: [".elder-flex-interval-control{flex:1 1 auto;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i1$d.DateAdapter }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$c.DateAdapter }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DATE_LOCALE]
                 }] }], propDecorators: { zone: [{
@@ -32277,7 +32393,7 @@ class ElderIntervalPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 type=\"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 type=\"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\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\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 type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"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          type=\"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          type=\"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              type=\"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              type=\"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 type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"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                type=\"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                type=\"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                type=\"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                type=\"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                type=\"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                type=\"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                  type=\"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                  type=\"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                  type=\"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                  type=\"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              type=\"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              type=\"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              type=\"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              type=\"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              type=\"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      type=\"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 type=\"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$e.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: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$f.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 type=\"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 type=\"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\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\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 type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"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          type=\"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          type=\"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              type=\"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              type=\"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 type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"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                type=\"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                type=\"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                type=\"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                type=\"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                type=\"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                type=\"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                  type=\"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                  type=\"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                  type=\"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                  type=\"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              type=\"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              type=\"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              type=\"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              type=\"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              type=\"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      type=\"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 type=\"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$d.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: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$e.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -32619,7 +32735,7 @@ class ElderOverlayComponent {
         const searchPanelPortal = new TemplatePortal(this.templateRef, this.viewContainer);
         return this._overlayRef.attach(searchPanelPortal);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$c.Overlay }, { token: i1$c.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$b.Overlay }, { token: i1$b.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ElderOverlayComponent, isStandalone: true, selector: "elder-overlay", inputs: { originX: "originX", originY: "originY", overlayX: "overlayX", overlayY: "overlayY", offsetY: "offsetY", offsetX: "offsetX", backdrop: "backdrop", backdropVisible: "backdropVisible", origin: "origin", positionStrategy: "positionStrategy", overlaySize: "overlaySize" }, outputs: { keydownEvents: "keydownEvents", attachedChange: "attachedChange" }, providers: [
             {
                 provide: ElderOverlayRef,
@@ -32641,7 +32757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             deps: [ElderOverlayComponent],
                         },
                     ], template: "<ng-template>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$c.Overlay }, { type: i1$c.OverlayPositionBuilder }], propDecorators: { templateRef: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$b.Overlay }, { type: i1$b.OverlayPositionBuilder }], propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], originX: [{
@@ -33780,7 +33896,7 @@ class ElderSearchBoxComponent {
         this.searchContextDirective.reset();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderSearchBoxComponent, isStandalone: true, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "customSearchPanel", first: true, predicate: ElderSearchPanelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "overlayComponent", first: true, predicate: ElderOverlayComponent, descendants: true, isSignal: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n              aria-hidden=\"false\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: "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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderSearchBoxComponent, isStandalone: true, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "customSearchPanel", first: true, predicate: ElderSearchPanelComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "overlayComponent", first: true, predicate: ElderOverlayComponent, descendants: true, isSignal: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n            data-testid=\"elder-search-box-open-search-panel-button\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n              aria-hidden=\"false\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: "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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback", "valueAsId", "elderSearchInputKey"], exportAs: ["elderSearchInput"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
@@ -33803,7 +33919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatButton,
                         AsyncPipe,
                         ElderTranslatePipe,
-                    ], template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n              aria-hidden=\"false\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"] }]
+                    ], template: "<div class=\"layout-row place-stretch-center full flex\">\n  <mat-form-field\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto my-xs\"\n    [class]=\"'elder-round-form-field'\"\n    subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\"\n  >\n    <button\n      matPrefix\n      mat-icon-button\n      type=\"button\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input\n      matInput\n      type=\"text\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      #search\n      cdkFocusInitial\n      ngModel\n      elderSearchInput\n      [elderSearchInputKey]=\"queryKey\"\n      #searchInput=\"elderSearchInput\"\n      [autocomplete]=\"autoPanel && customSearchPanel() ? 'off' : autocomplete\"\n      [elderOverlayOrigin]=\"searchPanel\"\n      [elderOverlayTrigger]=\"searchPanel\"\n      [elderOverlayTriggerType]=\"'focus'\"\n      [elderOverlayTriggerEnabled]=\"\n        autoPanel && customSearchPanel() && (searchInput?.state$ | async)?.pristine\n      \"\n    />\n\n    @if (hint) {\n      <mat-hint>{{ hint }}</mat-hint>\n    }\n\n    <div class=\"layout-row\" matSuffix>\n      @if (touchedSearchInputs$ | async; as touchedInputs) {\n        @if (touchedInputs.length > 0) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            (click)=\"clearSearch($event)\"\n            name=\"clear\"\n            aria-label=\"Clear\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (customSearchPanel()) {\n          <button\n            mat-icon-button\n            type=\"button\"\n            name=\"openPanel\"\n            [elderOverlayTrigger]=\"searchPanel\"\n            (click)=\"blurFocus($event)\"\n            data-testid=\"elder-search-box-open-search-panel-button\"\n          >\n            <mat-icon\n              [matBadge]=\"touchedInputs.length\"\n              matBadgeSize=\"small\"\n              [matBadgeOverlap]=\"true\"\n              [matBadgeHidden]=\"touchedInputs.length === 0\"\n              matBadgeColor=\"accent\"\n              [color]=\"touchedInputs.length > 0 ? 'accent' : undefined\"\n              aria-hidden=\"false\"\n            >\n              filter_list\n            </mat-icon>\n          </button>\n        }\n      }\n    </div>\n  </mat-form-field>\n</div>\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n    <!-- Project the users custom search panel here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-button type=\"button\" name=\"clear\" (click)=\"clearSearch($event)\">\n        {{ 'context.reset' | translate }}\n      </button>\n\n      <button\n        mat-flat-button\n        type=\"button\"\n        name=\"ok\"\n        color=\"primary\"\n        (click)=\"searchPanel.closeOverlay()\"\n      >\n        Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-panel-container{min-width:250px;border-radius:var(--elder-pane-border-radius)}\n"] }]
         }], ctorParameters: () => [{ type: ElderSearchContextDirective }], propDecorators: { search: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], overlayComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ElderOverlayComponent), { isSignal: true }] }], customSearchPanel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ElderSearchPanelComponent), { isSignal: true }] }], autoPanel: [{
                 type: Input
             }], name: [{
@@ -35245,7 +35361,7 @@ class ElderPopoverComponent {
         this._isOpen.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ElderPopoverComponent, isStandalone: true, selector: "elder-popover", inputs: { positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["elderPopover"], ngImport: i0, template: "<div\n  class=\"elder-popover-trigger\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"open()\"\n  (mouseleave)=\"close()\"\n  (click)=\"handleTriggerClick()\"\n>\n  <ng-content select=\"[elderPopoverTrigger]\"></ng-content>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPanelClass]=\"'elder-popover-overlay-panel'\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayPush]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"8\"\n>\n  <div class=\"elder-popover-content\" (mouseenter)=\"open()\" (mouseleave)=\"close()\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".elder-popover-content{--elder-popover-content-bg: var(--md-sys-color-surface-container-low);--elder-popover-padding: 30px;padding:var(--elder-popover-padding);border-radius:8px;border:1px solid var(--md-sys-color-surface-container);background-color:var(--elder-popover-content-bg);box-shadow:0 2px 5px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$c.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$c.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ElderPopoverComponent, isStandalone: true, selector: "elder-popover", inputs: { positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["elderPopover"], ngImport: i0, template: "<div\n  class=\"elder-popover-trigger\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  (mouseenter)=\"open()\"\n  (mouseleave)=\"close()\"\n  (click)=\"handleTriggerClick()\"\n>\n  <ng-content select=\"[elderPopoverTrigger]\"></ng-content>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPanelClass]=\"'elder-popover-overlay-panel'\"\n  [cdkConnectedOverlayPositions]=\"positions()\"\n  [cdkConnectedOverlayPush]=\"true\"\n  [cdkConnectedOverlayViewportMargin]=\"8\"\n>\n  <div class=\"elder-popover-content\" (mouseenter)=\"open()\" (mouseleave)=\"close()\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".elder-popover-content{--elder-popover-content-bg: var(--md-sys-color-surface-container-low);--elder-popover-padding: 30px;padding:var(--elder-popover-padding);border-radius:8px;border:1px solid var(--md-sys-color-surface-container);background-color:var(--elder-popover-content-bg);box-shadow:0 2px 5px #00000026}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$b.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$b.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderPopoverComponent, decorators: [{
             type: Component,
@@ -37750,7 +37866,7 @@ class ElderTabDirective {
     constructor(tab) {
         this.tab = tab;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$g.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$f.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderTabDirective, isStandalone: true, selector: "[elderTab]", inputs: { id: ["elderTab", "id"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTabDirective, decorators: [{
@@ -37758,7 +37874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: '[elderTab]',
                 }]
-        }], ctorParameters: () => [{ type: i1$g.MatTab }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i1$f.MatTab }], propDecorators: { id: [{
                 type: Input,
                 args: ['elderTab']
             }] } });
@@ -38026,7 +38142,7 @@ class ElderTabGroupRoutingDirective {
     serializeIndexMarker(index) {
         return ElderTabGroupRoutingDirective.TAB_INDEX_PREFIX + String(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$g.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$f.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.9", type: ElderTabGroupRoutingDirective, isStandalone: true, selector: "[elderTabGroupRouting]", inputs: { tabGroupQueryParamKey: { classPropertyName: "tabGroupQueryParamKey", publicName: "elderTabGroupRouting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabActivationFailed: "tabActivationFailed" }, queries: [{ propertyName: "tabs", predicate: MatTab, isSignal: true }, { propertyName: "elderTabs", predicate: ElderTabDirective, isSignal: true }], exportAs: ["elderTabGroupRouting"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTabGroupRoutingDirective, decorators: [{
@@ -38035,7 +38151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: '[elderTabGroupRouting]',
                     exportAs: 'elderTabGroupRouting',
                 }]
-        }], ctorParameters: () => [{ type: ElderUrlFragmentParamsService }, { type: i1$g.MatTabGroup }], propDecorators: { tabGroupQueryParamKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "elderTabGroupRouting", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatTab), { isSignal: true }] }], elderTabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ElderTabDirective), { isSignal: true }] }], tabActivationFailed: [{ type: i0.Output, args: ["tabActivationFailed"] }] } });
+        }], ctorParameters: () => [{ type: ElderUrlFragmentParamsService }, { type: i1$f.MatTabGroup }], propDecorators: { tabGroupQueryParamKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "elderTabGroupRouting", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatTab), { isSignal: true }] }], elderTabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ElderTabDirective), { isSignal: true }] }], tabActivationFailed: [{ type: i0.Output, args: ["tabActivationFailed"] }] } });
 
 class ElderTabModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -38537,7 +38653,7 @@ class NamedColorDirective {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NamedColorDirective, deps: [{ token: i1$f.MatIcon, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NamedColorDirective, deps: [{ token: i1$e.MatIcon, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NamedColorDirective, isStandalone: true, selector: "[elderNamedColor]", inputs: { namedColor: { classPropertyName: "namedColor", publicName: "elderNamedColor", isSignal: true, isRequired: true, transformFunction: null }, backgroundRole: { classPropertyName: "backgroundRole", publicName: "backgroundRole", isSignal: true, isRequired: false, transformFunction: null }, frontRole: { classPropertyName: "frontRole", publicName: "frontRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundRole: "backgroundRoleChange", frontRole: "frontRoleChange" }, host: { properties: { "style.color": "hostColor()", "style.background-color": "hostBackgroundColor()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NamedColorDirective, decorators: [{
@@ -38549,7 +38665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[style.background-color]': 'hostBackgroundColor()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i1$f.MatIcon, decorators: [{
+        }], ctorParameters: () => [{ type: i1$e.MatIcon, decorators: [{
                     type: Optional
                 }] }], propDecorators: { namedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "elderNamedColor", required: true }] }], backgroundRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundRole", required: false }] }, { type: i0.Output, args: ["backgroundRoleChange"] }], frontRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "frontRole", required: false }] }, { type: i0.Output, args: ["frontRoleChange"] }] } });
 
@@ -39484,5 +39600,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAppearanceSettingsComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeDirective, ElderBasicPaneLayoutComponent, 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, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataActivationDirective, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, 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, ElderGenericResizableLayoutComponent, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridNavigationBarDirective, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderLock, ElderLockContext, ElderLockContextDirective, ElderLockManagerService, ElderLockWarningService, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPopoverComponent, ElderPopoverTriggerDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRailNavDirective, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderResizableDirective, ElderResizablePaneLayoutComponent, ElderResizeBehaviorDirective, ElderResizeContainerComponent, 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, ElderShellStaticNavSlotDirective, ElderSinglePaneWrapperComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStaticNavToggleComponent, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTranslatePipe, ElderTranslateService, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, 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, ItemModel, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, 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, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createElderDefaultTranslateLoader, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, provideElderBrandAssets, provideElderDefaults, provideElderLanguage, provideElderTranslate, proxyControlContainer, registerLocale, runInZone, someSignal, themeInit };
+export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAppearanceSettingsComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeDirective, ElderBasicPaneLayoutComponent, 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, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataActivationDirective, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, 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, ElderGenericResizableLayoutComponent, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridNavigationBarDirective, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderLock, ElderLockContext, ElderLockContextDirective, ElderLockManagerService, ElderLockWarningService, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPopoverComponent, ElderPopoverTriggerDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRailNavDirective, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderResizableDirective, ElderResizablePaneLayoutComponent, ElderResizeBehaviorDirective, ElderResizeContainerComponent, 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, ElderShellStaticNavSlotDirective, ElderSinglePaneWrapperComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStaticNavToggleComponent, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTranslatePipe, ElderTranslateService, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, 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, ItemModel, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, 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, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createElderDefaultTranslateLoader, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalDataSource, isLocalListDataSource, isLocalPagedDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, provideElderBrandAssets, provideElderDefaults, provideElderLanguage, provideElderTranslate, proxyControlContainer, registerLocale, runInZone, someSignal, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map