@elderbyte/ngx-starter 20.5.0-alpha.6 → 20.5.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -22,13 +22,13 @@ import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i1$3 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 { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i1$5 from '@angular/material/toolbar';
 import { MatToolbar, MatToolbarRow, MatToolbarModule } from '@angular/material/toolbar';
 import { MatCard, MatCardModule, MatCardContent } from '@angular/material/card';
-import * as i1$d from '@angular/material/core';
+import * as i1$c from '@angular/material/core';
 import { MatRipple, MatRippleModule, MatOption, MatCommonModule, 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';
@@ -53,7 +53,7 @@ import * as i1$b 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';
-import { MatColumnDef, MatRowDef, MatTable, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
+import { MatColumnDef, MatRowDef, MatTable, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRow, MatFooterRowDef, MatFooterRow, MatRecycleRows, MatTableModule } from '@angular/material/table';
 import * as i1$8 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
@@ -64,12 +64,12 @@ import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, S
 import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i1$c 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 * as i1$f from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
 import localeDECH from '@angular/common/locales/de-CH';
 import * as StreamSaver from 'streamsaver';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelDescription, MatExpansionModule } from '@angular/material/expansion';
@@ -2036,54 +2036,54 @@ class PhoneFormatService {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    formatPhoneNumber(number, countryCode, config) {
-        if (!config || !config.dialingCode) {
-            return this.handleWithoutConfig(number, countryCode);
-        }
-        else {
-            return this.applyFormattingPerConfig(number, config);
+    formatPhoneNumber(nr, config) {
+        if (!config?.countryCode) {
+            return nr;
         }
+        const phoneNrBody = this.preparePhoneNumberBody(nr, config);
+        const transformedBody = this.applyRegexTransform(phoneNrBody, config);
+        return this.addPrefix(transformedBody, config);
     }
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    applyFormattingPerConfig(number, config) {
-        let phoneNrBody = this.preparePhoneNumberBody(number, config);
-        if (config.bodyFormat) {
-            const [regex, format] = config.bodyFormat;
-            phoneNrBody = phoneNrBody.replace(regex, format);
+    addPrefix(body, config) {
+        let prefix = '';
+        if (config.customPrefix !== undefined && config.customPrefix !== null) {
+            prefix = config.customPrefix;
         }
-        const prefix = config.customPrefix ?? `${config.dialingCode} `;
-        return `${prefix}${phoneNrBody}`;
+        else {
+            prefix = config.countryCode + ' ';
+        }
+        return `${prefix}${body}`;
     }
     preparePhoneNumberBody(number, config) {
         const clean = this.cleanNumberString(number);
-        const withoutDialingCode = this.removeDialingCode(clean, config.dialingCode);
-        return withoutDialingCode.replace(/^0+/, ''); // remove leading zeros
+        const withoutDialingCode = this.removeDialingCode(clean, config.countryCode);
+        const withoutLeadingZeros = withoutDialingCode.replace(/^0+/, '');
+        return withoutLeadingZeros;
     }
     cleanNumberString(number) {
-        const regex = /[^0-9+]/g; //
-        return number.replace(regex, '');
+        return number.replace(/[^0-9+]/g, '');
     }
-    handleWithoutConfig(number, countryCode) {
-        if (!countryCode) {
-            return number;
-        }
-        else {
-            return countryCode + ' ' + number;
-        }
-    }
-    removeDialingCode(phoneNr, dialingCode) {
-        const dialingCodeWithDoubleZero = dialingCode.replace('+', '00');
-        for (const prefix of [dialingCode, dialingCodeWithDoubleZero]) {
+    removeDialingCode(phoneNr, countryCode) {
+        const dialingCodeWithDoubleZero = countryCode.replace('+', '00');
+        for (const prefix of [countryCode, dialingCodeWithDoubleZero]) {
             if (phoneNr.startsWith(prefix)) {
                 return phoneNr.slice(prefix.length);
             }
         }
         return phoneNr;
     }
+    applyRegexTransform(phoneNrBody, config) {
+        if (!config?.bodyFormat) {
+            return phoneNrBody;
+        }
+        const [regex, format] = config.bodyFormat;
+        return phoneNrBody.replace(regex, format);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PhoneFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PhoneFormatService, providedIn: 'root' }); }
 }
@@ -2099,48 +2099,59 @@ class CountryPhoneFormatService {
         this.countryPhoneFormats = {
             '+41': {
                 country: 'CH',
-                dialingCode: '+41',
-                bodyFormat: [/^(\d{2})(\d{3})(\d{2})(\d{2})$/, '$1 $2 $3 $4'],
-                customPrefix: '0',
-            },
-            '0041': {
-                country: 'CH',
-                dialingCode: '+41',
+                countryCode: '+41',
                 bodyFormat: [/^(\d{2})(\d{3})(\d{2})(\d{2})$/, '$1 $2 $3 $4'],
                 customPrefix: '0',
             },
             '+423': {
                 country: 'LI',
-                dialingCode: '+423',
+                countryCode: '+423',
                 bodyFormat: [/^(\d{3})(\d{4})$/, '$1 $2'],
             },
             '+49': {
                 country: 'DE',
-                dialingCode: '+49',
+                countryCode: '+49',
             },
             '+43': {
                 country: 'AT',
-                dialingCode: '+43',
+                countryCode: '+43',
             },
             '+33': {
                 country: 'FR',
-                dialingCode: '+33',
+                countryCode: '+33',
             },
             '+44': {
                 country: 'GB',
-                dialingCode: '+44',
+                countryCode: '+44',
             },
             '+1': {
                 country: 'US',
-                dialingCode: '+1',
+                countryCode: '+1',
             },
         };
     }
-    getCountryPhoneFormat(dialingCode) {
-        return this.countryPhoneFormats[dialingCode] ?? null;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    getCountryPhoneFormat(countryCode) {
+        if (!countryCode) {
+            return null;
+        }
+        const cleanedCode = countryCode.replace(/^00/, '+');
+        if (this.countryPhoneFormats[cleanedCode]) {
+            return this.countryPhoneFormats[cleanedCode];
+        }
+        return {
+            country: null,
+            countryCode: cleanedCode,
+            bodyFormat: null,
+        };
     }
-    getCountry(dialingCode) {
-        return this.countryPhoneFormats[dialingCode]?.country ?? null;
+    getCountry(countryCode) {
+        const countryFormat = this.countryPhoneFormats[countryCode];
+        return countryFormat?.country || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CountryPhoneFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CountryPhoneFormatService, providedIn: 'root' }); }
@@ -2158,8 +2169,13 @@ class PhonePipe {
         this.phoneFormat = inject(PhoneFormatService);
     }
     transform(phoneNumber) {
-        const countryPhoneFormat = this.countryPhoneFormats.getCountryPhoneFormat(phoneNumber.countryCode);
-        return this.phoneFormat.formatPhoneNumber(phoneNumber.number, phoneNumber.countryCode, countryPhoneFormat);
+        if (phoneNumber) {
+            const countryPhoneFormat = this.countryPhoneFormats.getCountryPhoneFormat(phoneNumber.countryCode);
+            return this.phoneFormat.formatPhoneNumber(phoneNumber.number, countryPhoneFormat);
+        }
+        else {
+            return '';
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PhonePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: PhonePipe, isStandalone: true, name: "phone" }); }
@@ -10635,11 +10651,11 @@ class ElderExpandToggleButtonComponent {
         this.expanded = !this.expanded;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderExpandToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderExpandToggleButtonComponent, isStandalone: true, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderExpandToggleButtonComponent, isStandalone: true, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderExpandToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon, AsyncPipe], template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"] }]
+            args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon, AsyncPipe], template: "<a\n  matRipple\n  class=\"layout-row place-start-center full toggle-button\"\n  (click)=\"onToggleExpand($event)\"\n  tabindex=\"0\"\n>\n  <div class=\"layout-row place-start-center flex\">\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{\n        (expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\n      }}</mat-icon>\n    </div>\n  </div>\n</a>\n", styles: [".toggle-button{text-decoration:none;padding-left:16px;padding-right:16px;min-height:48px;border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s}.toggle-button:hover{background-color:var(--md-sys-color-ternary-fixed);cursor:pointer}\n"] }]
         }], propDecorators: { expandedChange: [{
                 type: Output
             }], expanded: [{
@@ -11051,6 +11067,16 @@ class ElderTogglePanelTriggerDirective {
             this.handleTrigger();
         }
     }
+    handleKeyDown(event) {
+        // on click type handle also keydown events
+        if (this.type === 'click') {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.handleTrigger();
+            }
+        }
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -11062,7 +11088,7 @@ class ElderTogglePanelTriggerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderTogglePanelTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderTogglePanelTriggerDirective, isStandalone: true, selector: "[elderTogglePanelTrigger]", inputs: { panel: ["elderTogglePanelTrigger", "panel"], type: ["elderTogglePanelTriggerType", "type"], enabled: ["elderTogglePanelTriggerEnabled", "enabled"] }, host: { listeners: { "click": "handleClick($event)", "focus": "handleFocus($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderTogglePanelTriggerDirective, isStandalone: true, selector: "[elderTogglePanelTrigger]", inputs: { panel: ["elderTogglePanelTrigger", "panel"], type: ["elderTogglePanelTriggerType", "type"], enabled: ["elderTogglePanelTriggerEnabled", "enabled"] }, host: { listeners: { "click": "handleClick($event)", "focus": "handleFocus($event)", "keydown": "handleKeyDown($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderTogglePanelTriggerDirective, decorators: [{
             type: Directive,
@@ -11085,6 +11111,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             }], handleFocus: [{
                 type: HostListener,
                 args: ['focus', ['$event']]
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
 class ElderPanelModule {
@@ -13393,11 +13422,11 @@ class ElderCardHeaderComponent {
         this.padding = '15px 15px 5px 15px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderCardHeaderComponent, isStandalone: true, selector: "elder-card-header", inputs: { padding: "padding" }, ngImport: i0, template: "<!-- Card Header -->\n<div class=\"layout-row place-start-center elder-card-header\" [ngStyle]=\"{ padding: padding }\">\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\"> </ng-content>\n\n  <span class=\"flex\"></span>\n\n  <!-- Card Header Actions -->\n  <div class=\"layout-row place-end-center gap-md\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderCardHeaderComponent, isStandalone: true, selector: "elder-card-header", inputs: { padding: "padding" }, ngImport: i0, template: "<!-- Card Header -->\n<div class=\"layout-row place-start-center elder-card-header\" [ngStyle]=\"{ padding: padding }\">\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\"> </ng-content>\n\n  <span class=\"flex\"></span>\n\n  <!-- Card Header Actions -->\n  <div class=\"layout-row place-end-center gap-md\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderCardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-card-header', encapsulation: ViewEncapsulation.None, imports: [NgStyle], template: "<!-- Card Header -->\n<div class=\"layout-row place-start-center elder-card-header\" [ngStyle]=\"{ padding: padding }\">\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\"> </ng-content>\n\n  <span class=\"flex\"></span>\n\n  <!-- Card Header Actions -->\n  <div class=\"layout-row place-end-center gap-md\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'elder-card-header', encapsulation: ViewEncapsulation.None, imports: [NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Card Header -->\n<div class=\"layout-row place-start-center elder-card-header\" [ngStyle]=\"{ padding: padding }\">\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\"> </ng-content>\n\n  <span class=\"flex\"></span>\n\n  <!-- Card Header Actions -->\n  <div class=\"layout-row place-end-center gap-md\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { padding: [{
                 type: Input
             }] } });
@@ -14720,7 +14749,7 @@ class ElderConfirmDialogComponent {
         this.yesNo = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$7.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderConfirmDialogComponent, isStandalone: true, selector: "elder-confirm-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md gap-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "directive", type: MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderConfirmDialogComponent, isStandalone: true, selector: "elder-confirm-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md gap-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "directive", type: MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderConfirmDialogComponent, decorators: [{
             type: Component,
@@ -14734,7 +14763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         TranslateModule,
                         CdkTrapFocus,
                         MatButton,
-                    ], template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md gap-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <button mat-icon-button type=\"button\" [matDialogClose]=\"false\">\n        <mat-icon>close</mat-icon>\n      </button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-md gap-md\">\n    <div class=\"flex\">\n      <p translate>{{ message }}</p>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\" cdkTrapFocus>\n      <button type=\"button\" mat-button (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? 'actions.no' : 'actions.cancel') | translate }}\n      </button>\n\n      <button type=\"submit\" mat-flat-button cdkFocusInitial (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? 'actions.yes' : 'actions.ok') | translate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$7.MatDialogRef }] });
 
 class QuestionDialogConfig extends ElderDialogConfig {
@@ -14801,11 +14830,11 @@ class ElderSelectionDialogComponent {
         // this.dialogRef.updateSize('20vw', '20vh');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderSelectionDialogComponent, isStandalone: true, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"layout-col full\">\n  <div class=\"layout-col flex-none\">\n    @if (title) {\n      <h2>{{ title | translate }}</h2>\n    }\n  </div>\n\n  <div class=\"layout-col flex\">\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n  </div>\n\n  <div class=\"layout-row place-end-center gap-md\">\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{ 'actions.cancel' | translate }}\n    </button>\n\n    <button\n      mat-flat-button\n      type=\"button\"\n      [disabled]=\"data.selectionModel.isEmpty()\"\n      (click)=\"confirmSelection()\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderSelectionDialogComponent, isStandalone: true, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"layout-col full\">\n  <div class=\"layout-col flex-none\">\n    @if (title) {\n      <h2>{{ title | translate }}</h2>\n    }\n  </div>\n\n  <div class=\"layout-col flex\">\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n  </div>\n\n  <div class=\"layout-row place-end-center gap-md\">\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{ 'actions.cancel' | translate }}\n    </button>\n\n    <button\n      mat-flat-button\n      type=\"button\"\n      [disabled]=\"data.selectionModel.isEmpty()\"\n      (click)=\"confirmSelection()\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderSelectionDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-selection-dialog', imports: [NgTemplateOutlet, MatButton, MatDialogClose, TranslateModule], template: "<div class=\"layout-col full\">\n  <div class=\"layout-col flex-none\">\n    @if (title) {\n      <h2>{{ title | translate }}</h2>\n    }\n  </div>\n\n  <div class=\"layout-col flex\">\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n  </div>\n\n  <div class=\"layout-row place-end-center gap-md\">\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{ 'actions.cancel' | translate }}\n    </button>\n\n    <button\n      mat-flat-button\n      type=\"button\"\n      [disabled]=\"data.selectionModel.isEmpty()\"\n      (click)=\"confirmSelection()\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'elder-selection-dialog', imports: [NgTemplateOutlet, MatButton, MatDialogClose, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full\">\n  <div class=\"layout-col flex-none\">\n    @if (title) {\n      <h2>{{ title | translate }}</h2>\n    }\n  </div>\n\n  <div class=\"layout-col flex\">\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n  </div>\n\n  <div class=\"layout-row place-end-center gap-md\">\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{ 'actions.cancel' | translate }}\n    </button>\n\n    <button\n      mat-flat-button\n      type=\"button\"\n      [disabled]=\"data.selectionModel.isEmpty()\"\n      (click)=\"confirmSelection()\"\n    >\n      {{ 'actions.select' | translate }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -14863,6 +14892,13 @@ class ElderHeaderComponent {
      *                                                                         *
      **************************************************************************/
     constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.header = input.required(...(ngDevMode ? [{ debugName: "header" }] : []));
+        this.subheader = input(...(ngDevMode ? [undefined, { debugName: "subheader" }] : []));
         this.truncateHeader = input(false, ...(ngDevMode ? [{ debugName: "truncateHeader", transform: booleanTransformFn }] : [{ transform: booleanTransformFn }]));
     }
     /***************************************************************************
@@ -14872,16 +14908,12 @@ class ElderHeaderComponent {
      **************************************************************************/
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: ElderHeaderComponent, isStandalone: true, selector: "elder-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: false, isRequired: false, transformFunction: null }, truncateHeader: { classPropertyName: "truncateHeader", publicName: "truncateHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-col\">\n  <h2 [class]=\"[truncateHeader() ? 'truncate-line' : undefined]\">\n    {{ header ? header : ('-' | translate) }}\n  </h2>\n  <span [class]=\"['mat-caption', truncateHeader() ? 'truncate-line' : undefined]\">{{\n    subheader ? subheader : ('-' | translate)\n  }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: ElderHeaderComponent, isStandalone: true, selector: "elder-header", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, truncateHeader: { classPropertyName: "truncateHeader", publicName: "truncateHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-col\">\n  <h2 [class]=\"[truncateHeader() ? 'truncate-line' : undefined]\">\n    {{ header() ? (header() | translate) : '-' }}\n  </h2>\n  <span [class]=\"['mat-caption', truncateHeader() ? 'truncate-line' : undefined]\">{{\n    subheader() ? (subheader() | translate) : ' '\n  }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-header', imports: [TranslateModule], template: "<div class=\"layout-col\">\n  <h2 [class]=\"[truncateHeader() ? 'truncate-line' : undefined]\">\n    {{ header ? header : ('-' | translate) }}\n  </h2>\n  <span [class]=\"['mat-caption', truncateHeader() ? 'truncate-line' : undefined]\">{{\n    subheader ? subheader : ('-' | translate)\n  }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { header: [{
-                type: Input
-            }], subheader: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'elder-header', imports: [TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col\">\n  <h2 [class]=\"[truncateHeader() ? 'truncate-line' : undefined]\">\n    {{ header() ? (header() | translate) : '-' }}\n  </h2>\n  <span [class]=\"['mat-caption', truncateHeader() ? 'truncate-line' : undefined]\">{{\n    subheader() ? (subheader() | translate) : ' '\n  }}</span>\n</div>\n", styles: ["h2{margin:0;font:var(--md-sys-typescale-title-large);letter-spacing:var(--md-sys-typescale-title-large-tracking)}\n"] }]
+        }], ctorParameters: () => [] });
 
 class ElderHeaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -18017,7 +18049,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
                 provide: ELDER_DATA_VIEW,
                 useExisting: forwardRef(() => ElderTableComponent),
             },
-        ], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, hostDirectives: [{ directive: DataViewInteractionControllerDirective }], ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <div class=\"layout-row flex-none place-end-center gap-md elder-table-navigation-bar\">\n    <elder-table-navigation></elder-table-navigation>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderDataViewItemDrag]", inputs: ["elderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]" }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }, { kind: "component", type: TableNavigationComponent, selector: "elder-table-navigation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "navigationBar", first: true, predicate: ElderTableNavigationBarDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, hostDirectives: [{ directive: DataViewInteractionControllerDirective }], ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        recycleRows\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <div class=\"layout-row flex-none place-end-center gap-md elder-table-navigation-bar\">\n    <elder-table-navigation></elder-table-navigation>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderDataViewItemDrag]", inputs: ["elderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]" }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }, { kind: "component", type: TableNavigationComponent, selector: "elder-table-navigation" }, { kind: "directive", type: MatRecycleRows, selector: "mat-table[recycleRows], table[mat-table][recycleRows]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
@@ -18053,7 +18085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         ElderTableDropListConnectorDirective,
                         ElderTableSelectionCellComponent,
                         TableNavigationComponent,
-                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <div class=\"layout-row flex-none place-end-center gap-md elder-table-navigation-bar\">\n    <elder-table-navigation></elder-table-navigation>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
+                        MatRecycleRows,
+                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        recycleRows\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\n      >\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        @if (!hideHeaderRow()) {\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity, $event)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooterRow()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <ng-template\n      *ngTemplateOutlet=\"navigationBar() ?? defaultNavigationBar; context: { $implicit: this }\"\n    ></ng-template>\n  </div>\n</div>\n\n<ng-template #defaultNavigationBar>\n  <div class=\"layout-row flex-none place-end-center gap-md elder-table-navigation-bar\">\n    <elder-table-navigation></elder-table-navigation>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
         }], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: ElderDataViewOptionsProvider, decorators: [{
@@ -20407,11 +20440,11 @@ class ElderSimpleSelectionViewComponent {
     constructor(selectionModel) { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderSimpleSelectionViewComponent, deps: [{ token: SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderSimpleSelectionViewComponent, isStandalone: true, selector: "elder-simple-selection-view", ngImport: i0, template: "<p>elder-simple-selection-view works!</p>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderSimpleSelectionViewComponent, isStandalone: true, selector: "elder-simple-selection-view", ngImport: i0, template: "<p>elder-simple-selection-view works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderSimpleSelectionViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-simple-selection-view', standalone: true, template: "<p>elder-simple-selection-view works!</p>\n" }]
+            args: [{ selector: 'elder-simple-selection-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>elder-simple-selection-view works!</p>\n" }]
         }], ctorParameters: () => [{ type: SelectionModel, decorators: [{
                     type: Optional
                 }] }] });
@@ -25924,8 +25957,10 @@ class ElderMultiSelectBase extends ElderSelectBase {
             return valueLoadRequest$.pipe(map((loaded) => {
                 loaded.forEach((v, k) => existing.set(k, v));
                 return existing;
-            }), map((allValuesMap) => Array.from(allValuesMap.values())) // TODO Sort?
-            );
+            }), map((allValuesMap) => {
+                // Sort entities by id order
+                return ids.map((id) => allValuesMap.get(id)).filter((entity) => !!entity);
+            }));
         }
         else {
             this.logger.warn('Failed to select value by Ids: ' + ids + ' - DataContext not available.');
@@ -26340,7 +26375,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     drop(event) {
         const reordered = [...this.entities];
         moveItemInArray(reordered, event.previousIndex, event.currentIndex);
-        this.entities = reordered;
+        this.updateValueByEntities(reordered);
     }
     resolveChipValue(e1) {
         return this.getEntityId(e1);
@@ -28697,11 +28732,11 @@ class ElderNavListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n  <div\n    class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\">\n  <div\n    class=\"layout-col p-sm flex scrollable\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n  <div\n    class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"] }]
+            args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\">\n  <div\n    class=\"layout-col p-sm flex scrollable\"\n    style=\"overflow-y: scroll\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { compareWith: [{
                 type: Input
             }], valueChange: [{
@@ -28717,7 +28752,7 @@ class NavItemModel {
         this.hrefTarget = hrefTarget;
     }
 }
-class NavItemClicked {
+class NavItemActivated {
     constructor(event, value) {
         this.event = event;
         this.value = value;
@@ -28729,63 +28764,100 @@ class ElderNavLinkComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor() {
+    constructor(navList) {
+        this.navList = navList;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.navList = inject(ElderNavListComponent);
-        // reference to the value of the nav item
-        // (used to check if the item is active in non-router links)
-        this.value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.fontIcon = input('', ...(ngDevMode ? [{ debugName: "fontIcon" }] : []));
-        this.fontSet = input('', ...(ngDevMode ? [{ debugName: "fontSet" }] : []));
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
-        this.routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
-        this.queryParams = input({}, ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
-        this.queryParamsHandling = input('', ...(ngDevMode ? [{ debugName: "queryParamsHandling" }] : []));
-        this.href = input('', ...(ngDevMode ? [{ debugName: "href" }] : []));
-        this.target = input('', ...(ngDevMode ? [{ debugName: "target" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanTransformFn }] : [{ transform: booleanTransformFn }]));
-        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
-        this.clicked = output();
-        this.model = computed(() => {
-            return new NavItemModel(this.routerLink(), this.href(), this.target());
-        }, ...(ngDevMode ? [{ debugName: "model" }] : []));
-        this.navLinkClasses = computed(() => ({
-            'nav-link-clickable': !this.disabled(),
-            'nav-link-disabled': this.disabled(),
-            'nav-link-active': this.active(),
-            'nav-link-inactive': !this.active(),
-        }), ...(ngDevMode ? [{ debugName: "navLinkClasses" }] : []));
-        this.navList.valueChange.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.active.set(this.isCurrentValueActive);
-        });
+        this.tabIndex = -1;
+        this.queryParams = {};
+        this.activated = new Subject();
+        this._disabled = false;
+        this._routerLink$ = new BehaviorSubject('');
+        this._href$ = new BehaviorSubject('');
+        this._target$ = new BehaviorSubject('_blank');
+        this._routerLinkActive$ = new BehaviorSubject(undefined);
+        this._active$ = new BehaviorSubject(false);
+        this.destroy$ = new Subject();
+        this.model$ = this._routerLink$.pipe(combineLatestWith(this._href$), combineLatestWith(this._target$), map(([[routerLink, href], target]) => new NavItemModel(routerLink, href, target)));
     }
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngAfterViewInit() {
-        if (this.value() !== null && this.value() !== undefined) {
-            this.active.set(this.isCurrentValueActive);
+    ngOnInit() {
+        this._routerLinkActive$
+            .pipe(takeUntil(this.destroy$), filter((rla) => !!rla), switchMap((rla) => {
+            return rla.isActiveChange.pipe(startWith(rla.isActive));
+        }))
+            .subscribe((active) => this._active$.next(active));
+        this.navList.valueChange
+            .pipe(takeUntil(this.destroy$), map((value) => this.isCurrentValueActive))
+            .subscribe((active) => this._active$.next(active));
+        if (this.value) {
+            this._active$.next(this.isCurrentValueActive);
         }
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get active$() {
+        return this._active$;
+    }
+    set routerLinkActive(rla) {
+        this._routerLinkActive$.next(rla);
+    }
+    set routerLink(value) {
+        this._routerLink$.next(value);
+    }
+    set href(value) {
+        this._href$.next(value);
+    }
+    set target(value) {
+        this._target$.next(value);
+    }
+    set value(v) {
+        this._value = v;
+    }
+    get value() {
+        return this._value;
+    }
+    set disabled(v) {
+        this._disabled = coerceBooleanProperty(v);
+    }
+    get disabled() {
+        return this._disabled;
+    }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    handleRouterLinkActiveChange(active) {
-        this.active.set(active);
+    itemActivated(event) {
+        if (!this._disabled) {
+            this.activated.next(new NavItemActivated(event, this.value));
+            if (this.value !== null) {
+                this.navList.value = this.value;
+            }
+        }
     }
     itemClick(event) {
-        if (!this.disabled()) {
-            this.clicked.emit(new NavItemClicked(event, this.value()));
-            this.navList.value = this.value();
+        this.itemActivated(event);
+    }
+    itemKeyDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === 'Enter' || event.key === ' ') {
+            this.itemActivated(event);
         }
     }
     /***************************************************************************
@@ -28794,43 +28866,57 @@ class ElderNavLinkComponent {
      *                                                                         *
      **************************************************************************/
     get isCurrentValueActive() {
-        return this.navList.isActive(this.value());
+        return this.navList.isActive(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, fontIcon: { classPropertyName: "fontIcon", publicName: "fontIcon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.tabindex": "-1" } }, ngImport: i0, template: "<!-- Router Link -->\n@if (model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [routerLink]=\"model().routerLink\"\n    [queryParamsHandling]=\"queryParamsHandling()\"\n    [queryParams]=\"queryParams()\"\n    (isActiveChange)=\"handleRouterLinkActiveChange($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Href Link -->\n@if (model().href) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [href]=\"model().href\"\n    [target]=\"model().hrefTarget\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Simple Button -->\n@if (!model().href && !model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    (click)=\"itemClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    <!-- We render the empty icon if there is a title, to keep the layout consistent -->\n    @if (title() || icon() || fontIcon()) {\n      <mat-icon [fontIcon]=\"fontIcon()\" [fontSet]=\"fontSet()\">\n        {{ icon() }}\n      </mat-icon>\n    }\n    <!-- Simple Button Links Sometimes don't have a title -->\n    @if (title()) {\n      <span class=\"noselect\">\n        {{ title() | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { title: "title", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon", routerLink: "routerLink", href: "href", target: "target", value: "value", disabled: "disabled" }, outputs: { clicked: "clicked", activated: "activated" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n@if (model$ | async; as model) {\n  @if (model.routerLink; as routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [routerLink]=\"routerLink\"\n      [queryParamsHandling]=\"queryParamsHandling\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"dummy\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Href Link -->\n  @if (model.href; as href) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [href]=\"href\"\n      [target]=\"model.hrefTarget\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Simple Button -->\n  @if (!model.href && !model.routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      (click)=\"itemClick($event)\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    @if (!(!icon && !title)) {\n      <mat-icon [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n        {{ icon }}\n      </mat-icon>\n    }\n    @if (svgIcon) {\n      <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\n    }\n    @if (title) {\n      <span class=\"noselect\">\n        {{ title | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.tabindex]': '-1',
-                    }, imports: [
+            args: [{ selector: 'elder-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatRipple,
                         RouterLinkActive,
                         RouterLink,
+                        NgTemplateOutlet,
                         MatIcon,
+                        AsyncPipe,
                         TranslateModule,
-                        NgTemplateOutlet,
-                        NgClass,
-                    ], template: "<!-- Router Link -->\n@if (model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [routerLink]=\"model().routerLink\"\n    [queryParamsHandling]=\"queryParamsHandling()\"\n    [queryParams]=\"queryParams()\"\n    (isActiveChange)=\"handleRouterLinkActiveChange($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Href Link -->\n@if (model().href) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    [href]=\"model().href\"\n    [target]=\"model().hrefTarget\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n<!-- Simple Button -->\n@if (!model().href && !model().routerLink) {\n  <a\n    matRipple\n    [matRippleDisabled]=\"disabled()\"\n    class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n    [ngClass]=\"navLinkClasses()\"\n    routerLinkActive=\"dummy\"\n    (click)=\"itemClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n  </a>\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    <!-- We render the empty icon if there is a title, to keep the layout consistent -->\n    @if (title() || icon() || fontIcon()) {\n      <mat-icon [fontIcon]=\"fontIcon()\" [fontSet]=\"fontSet()\">\n        {{ icon() }}\n      </mat-icon>\n    }\n    <!-- Simple Button Links Sometimes don't have a title -->\n    @if (title()) {\n      <span class=\"noselect\">\n        {{ title() | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"] }]
-        }], ctorParameters: () => [] });
-
-class ElderStaticNavDirective {
-    constructor() {
-        this.elderStaticNav = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderStaticNavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderStaticNavDirective, isStandalone: true, selector: "[elderStaticNav]", host: { classAttribute: "elder-static-nav" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderStaticNavDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderStaticNav]',
-                    standalone: true,
-                    host: {
-                        class: 'elder-static-nav',
-                    },
-                }]
-        }] });
+                    ], template: "<!-- Router Link -->\n@if (model$ | async; as model) {\n  @if (model.routerLink; as routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [routerLink]=\"routerLink\"\n      [queryParamsHandling]=\"queryParamsHandling\"\n      [queryParams]=\"queryParams\"\n      routerLinkActive=\"dummy\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Href Link -->\n  @if (model.href; as href) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      [href]=\"href\"\n      [target]=\"model.hrefTarget\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n  <!-- Simple Button -->\n  @if (!model.href && !model.routerLink) {\n    <a\n      matRipple\n      [matRippleDisabled]=\"disabled\"\n      class=\"layout-row place-start-center nav-link\"\n      (click)=\"itemClick($event)\"\n      [class.nav-link-clickable]=\"!disabled\"\n      [class.nav-link-disabled]=\"disabled\"\n      [class.nav-link-active]=\"active$ | async\"\n      [class.nav-link-inactive]=\"(active$ | async) === false\"\n    >\n      <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n    </a>\n  }\n}\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center flex gap-md noselect\">\n    @if (!(!icon && !title)) {\n      <mat-icon [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n        {{ icon }}\n      </mat-icon>\n    }\n    @if (svgIcon) {\n      <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\n    }\n    @if (title) {\n      <span class=\"noselect\">\n        {{ title | translate }}\n      </span>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"] }]
+        }], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], title: [{
+                type: Input
+            }], queryParamsHandling: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], fontIcon: [{
+                type: Input
+            }], fontSet: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], activated: [{
+                type: Output
+            }], routerLinkActive: [{
+                type: ViewChild,
+                args: [RouterLinkActive, { static: false }]
+            }], routerLink: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
 
 const animations = [
     trigger('openClose', [
@@ -28847,26 +28933,6 @@ const animations = [
         transition('closed => open', [animate('200ms')]),
     ]),
 ];
-const overlayPositions = [
-    {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-    },
-    {
-        originX: 'end',
-        originY: 'center',
-        overlayX: 'start',
-        overlayY: 'center',
-    },
-    {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'bottom',
-    },
-];
 class ElderNavGroupComponent {
     /***************************************************************************
      *                                                                         *
@@ -28874,8 +28940,8 @@ class ElderNavGroupComponent {
      *                                                                         *
      **************************************************************************/
     constructor() {
+        this.destroyRef = inject(DestroyRef);
         this.navList = inject(ElderNavListComponent);
-        this.staticNav = inject(ElderStaticNavDirective, { optional: true });
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
@@ -28884,59 +28950,69 @@ class ElderNavGroupComponent {
         this.children = contentChildren(ElderNavLinkComponent, ...(ngDevMode ? [{ debugName: "children" }] : []));
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         this.clicked = output();
-        this._childrenActiveState = signal(false, ...(ngDevMode ? [{ debugName: "_childrenActiveState" }] : []));
-        this.overlayPositions = overlayPositions;
+        this.childrenActiveState = signal(false, ...(ngDevMode ? [{ debugName: "childrenActiveState" }] : []));
         /***************************************************************************
          *                                                                         *
          * Computed Properties                                                     *
          *                                                                         *
          **************************************************************************/
-        this.active = computed(() => this._childrenActiveState(), ...(ngDevMode ? [{ debugName: "active" }] : []));
-        this.isStaticNav = !!this.staticNav?.elderStaticNav;
+        this.active = computed(() => this.childrenActiveState(), ...(ngDevMode ? [{ debugName: "active" }] : []));
         // Effect to monitor children's active states
         effect(() => {
             const childComponents = this.children();
-            const isChildActive = childComponents.some((child) => child.active());
-            this._childrenActiveState.set(isChildActive);
+            if (this.childSubscription) {
+                this.childSubscription.unsubscribe();
+            }
+            const childActiveObservables = childComponents.map((child) => child.active$);
+            this.childSubscription = combineLatest(childActiveObservables).subscribe((active) => {
+                this.childrenActiveState.set(active.some((active) => active));
+            });
         });
         // Effect to open the group if any child becomes active: important for page load
         effect(() => {
             const isActive = this.active();
-            // Static nav groups are not opened automatically on page load
-            if (this.isStaticNav) {
-                return;
-            }
             const isOpen = untracked(this.isOpen);
             if (isActive && !isOpen) {
                 this.isOpen.set(true);
             }
         });
     }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() { }
+    ngOnDestroy() {
+        if (this.childSubscription) {
+            this.childSubscription.unsubscribe();
+        }
+    }
     /***************************************************************************
      *                                                                         *
      * Public Api                                                              *
      *                                                                         *
      **************************************************************************/
     itemClick(event) {
-        this.clicked.emit(new NavItemClicked(event, undefined));
+        this.clicked.emit(new NavItemActivated(event, undefined));
         this.toggle();
     }
     toggle() {
         this.isOpen.set(!this.isOpen());
     }
+    itemKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.itemClick(event);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <a\n    matRipple\n    class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"active()\"\n    (click)=\"itemClick($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      @if (!isStaticNav) {\n        <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n      }\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  @if (!isStaticNav) {\n    <div\n      class=\"layout-col nav-group-items-container p-sm\"\n      [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n    >\n      <ng-content select=\"elder-nav-link\"></ng-content>\n    </div>\n  } @else {\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n      (backdropClick)=\"isOpen.set(false)\"\n      (detach)=\"isOpen.set(false)\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    >\n      <div class=\"nav-group-in-menu\">\n        <div class=\"layout-col nav-group-items-container p-sm\">\n          @for (child of children(); track child) {\n            <elder-nav-link\n              [title]=\"child.title()\"\n              [icon]=\"child.icon()\"\n              [routerLink]=\"child.routerLink()\"\n              [href]=\"child.href()\"\n              [target]=\"child.target()\"\n              [queryParams]=\"child.queryParams()\"\n              [queryParamsHandling]=\"child.queryParamsHandling()\"\n              (click)=\"isOpen.set(false)\"\n            ></elder-nav-link>\n          }\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:32px;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-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color)!important;color:var(--md-sys-color-primary)}.nav-group-in-menu{--elder-nav-item-height: 38px !important;width:auto;border:solid 1px #ccc;border-radius:5px;background:var(--md-sys-color-surface-container-lowest);text-align:center;padding:4px 0;margin:0 0 0 18px;min-width:280px;box-shadow:0 0 8px #00000026;overflow-y:auto}.nav-group-in-menu *{font-size:14px!important}\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: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }, { 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"], 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: "component", type: ElderNavLinkComponent, selector: "elder-nav-link", inputs: ["value", "title", "fontIcon", "fontSet", "icon", "routerLink", "queryParams", "queryParamsHandling", "href", "target", "disabled"], outputs: ["clicked"] }], animations: animations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent, isSignal: true }], ngImport: i0, template: "<div class=\"layout-col nav-group\">\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]=\"active()\"\n    (click)=\"itemClick($event)\"\n    (keydown)=\"itemKeyDown($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  <div\n    class=\"layout-col nav-group-items-container p-sm\"\n    [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n    [inert]=\"!isOpen()\"\n  >\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </div>\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: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-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\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"] }], animations: animations, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderNavGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-nav-group', animations: animations, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatRipple,
-                        MatIcon,
-                        MatButtonModule,
-                        MatMenuModule,
-                        OverlayModule,
-                        ElderNavLinkComponent,
-                    ], template: "<div class=\"layout-col nav-group\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <a\n    matRipple\n    class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n    [class.nav-group-button-open]=\"isOpen()\"\n    [class.nav-group-button-closed]=\"!isOpen()\"\n    [class.nav-group-button-active]=\"active()\"\n    (click)=\"itemClick($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      @if (!isStaticNav) {\n        <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n      }\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  @if (!isStaticNav) {\n    <div\n      class=\"layout-col nav-group-items-container p-sm\"\n      [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n    >\n      <ng-content select=\"elder-nav-link\"></ng-content>\n    </div>\n  } @else {\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen()\"\n      [cdkConnectedOverlayHasBackdrop]=\"true\"\n      [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n      (backdropClick)=\"isOpen.set(false)\"\n      (detach)=\"isOpen.set(false)\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    >\n      <div class=\"nav-group-in-menu\">\n        <div class=\"layout-col nav-group-items-container p-sm\">\n          @for (child of children(); track child) {\n            <elder-nav-link\n              [title]=\"child.title()\"\n              [icon]=\"child.icon()\"\n              [routerLink]=\"child.routerLink()\"\n              [href]=\"child.href()\"\n              [target]=\"child.target()\"\n              [queryParams]=\"child.queryParams()\"\n              [queryParamsHandling]=\"child.queryParamsHandling()\"\n              (click)=\"isOpen.set(false)\"\n            ></elder-nav-link>\n          }\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:32px;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-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color)!important;color:var(--md-sys-color-primary)}.nav-group-in-menu{--elder-nav-item-height: 38px !important;width:auto;border:solid 1px #ccc;border-radius:5px;background:var(--md-sys-color-surface-container-lowest);text-align:center;padding:4px 0;margin:0 0 0 18px;min-width:280px;box-shadow:0 0 8px #00000026;overflow-y:auto}.nav-group-in-menu *{font-size:14px!important}\n"] }]
+            args: [{ selector: 'elder-nav-group', animations: animations, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatRipple, MatIcon], template: "<div class=\"layout-col nav-group\">\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]=\"active()\"\n    (click)=\"itemClick($event)\"\n    (keydown)=\"itemKeyDown($event)\"\n  >\n    <div class=\"layout-row place-start-center gap-lg full noselect\">\n      <ng-content></ng-content>\n      <span class=\"flex\"></span>\n      <mat-icon>{{ isOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n    </div>\n  </a>\n  <!-- Nested Items projection -->\n  <div\n    class=\"layout-col nav-group-items-container p-sm\"\n    [@openClose]=\"isOpen() ? 'open' : 'closed'\"\n    [inert]=\"!isOpen()\"\n  >\n    <ng-content select=\"elder-nav-link\"></ng-content>\n  </div>\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: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-button-open{padding-left:11px!important}.nav-group-button-active:not(.nav-group-button-open){background-color:var(--elder-nav-link-hover-color);color:var(--md-sys-color-primary)}\n"] }]
         }], ctorParameters: () => [] });
 
 class ElderNavModule {
@@ -29354,7 +29430,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * This is usually the left side which is a 'side nav' and the right side which shows detail information.
  */
 class ElderShellService {
-    static { this.STATIC_NAV_STORAGE_KEY = 'elderShell.staticNavOpen'; }
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -29372,42 +29447,13 @@ class ElderShellService {
         this._navigationOpen = new BehaviorSubject(false);
         this._clickOutsideToClose = true;
         this.detailContentOutlet = 'side';
-        this._staticNavOpen = signal(this.getStaticNavInitialState(), ...(ngDevMode ? [{ debugName: "_staticNavOpen" }] : []));
-        this.staticNavOpen = computed(() => this._staticNavOpen(), ...(ngDevMode ? [{ debugName: "staticNavOpen" }] : []));
         this.slotManager = new TemplateSlotManager(['header', 'center', 'footer']);
-        // Persist staticNavOpen state changes to localStorage
-        effect(() => {
-            const isOpen = this._staticNavOpen();
-            try {
-                localStorage.setItem(ElderShellService.STATIC_NAV_STORAGE_KEY, JSON.stringify(isOpen));
-            }
-            catch (error) {
-                this.logger.warn('Failed to save staticNavOpen state to localStorage', error);
-            }
-        });
         this.router.events
             .pipe(filter((event) => event instanceof NavigationEnd), map((event) => event))
             .subscribe((event) => {
             this.closeSideNav();
         });
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private Methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    getStaticNavInitialState() {
-        try {
-            const stored = localStorage.getItem(ElderShellService.STATIC_NAV_STORAGE_KEY);
-            if (stored !== null) {
-                return JSON.parse(stored) === true;
-            }
-        }
-        catch (error) {
-            this.logger.warn('Failed to read staticNavOpen state from localStorage', error);
-        }
-        return false; // Default value
-    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -29492,18 +29538,6 @@ class ElderShellService {
     isSideContentActive() {
         return this.routerOutletService.isActive(this.detailContentOutlet);
     }
-    /**
-     * Static sidenav
-     */
-    toggleStaticNav() {
-        this._staticNavOpen.set(!this._staticNavOpen());
-    }
-    openStaticNav() {
-        this._staticNavOpen.set(true);
-    }
-    closeStaticNav() {
-        this._staticNavOpen.set(false);
-    }
     /**
      * Shows the side content
      * @param args The route arguments / path
@@ -29683,21 +29717,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                     standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
-class ElderShellStaticNavSlotDirective {
-    constructor(templateRef, viewContainer) {
-        this.templateRef = templateRef;
-        this.viewContainer = viewContainer;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellStaticNavSlotDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ElderShellStaticNavSlotDirective, isStandalone: true, selector: "[elderShellStaticNavSlot]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellStaticNavSlotDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderShellStaticNavSlot]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
 class ElderShellComponent {
     /***************************************************************************
      *                                                                         *
@@ -29727,7 +29746,6 @@ class ElderShellComponent {
         this.navMenuSvgIcon = input('menu-icon-owl-stripes-white', ...(ngDevMode ? [{ debugName: "navMenuSvgIcon" }] : []));
         this.menuColor = input('primary', ...(ngDevMode ? [{ debugName: "menuColor" }] : []));
         this.menuIconColor = input(undefined, ...(ngDevMode ? [{ debugName: "menuIconColor" }] : []));
-        this.staticNavOpen = computed(() => this.shellService.staticNavOpen(), ...(ngDevMode ? [{ debugName: "staticNavOpen" }] : []));
         this.headerTemplate = toSignal(shellService.activeSlotTemplate('header'));
         this.centerTemplate = toSignal(shellService.activeSlotTemplate('center'));
         this.footerTemplate = toSignal(shellService.activeSlotTemplate('footer'));
@@ -29784,9 +29802,6 @@ class ElderShellComponent {
             }
         }
     }
-    toggleStaticNav() {
-        this.shellService.toggleStaticNav();
-    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -29811,7 +29826,7 @@ class ElderShellComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }, { token: GlobalDragDropService }, { token: i0.Renderer2 }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderShellComponent, isStandalone: true, selector: "elder-shell", inputs: { sideNavToggleEnabled: { classPropertyName: "sideNavToggleEnabled", publicName: "sideNavToggleEnabled", isSignal: true, isRequired: false, transformFunction: null }, leftSideAutoFocus: { classPropertyName: "leftSideAutoFocus", publicName: "leftSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, rightSideAutoFocus: { classPropertyName: "rightSideAutoFocus", publicName: "rightSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, navMenuSvgIcon: { classPropertyName: "navMenuSvgIcon", publicName: "navMenuSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, menuColor: { classPropertyName: "menuColor", publicName: "menuColor", isSignal: true, isRequired: false, transformFunction: null }, menuIconColor: { classPropertyName: "menuIconColor", publicName: "menuIconColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "staticNavContent", first: true, predicate: ElderShellStaticNavSlotDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    @if (staticNavOpen() && staticNavContent) {\n      <div class=\"layout-row flex\">\n        <div class=\"layout-col elder-static-nav-container\">\n          <!-- static-nav -->\n          <ng-container *ngTemplateOutlet=\"staticNavContent\"></ng-container>\n        </div>\n        <div class=\"layout-col flex\">\n          <ng-container\n            *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"\n          ></ng-container>\n        </div>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n    }\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"], dependencies: [{ kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderShellComponent, isStandalone: true, selector: "elder-shell", inputs: { sideNavToggleEnabled: { classPropertyName: "sideNavToggleEnabled", publicName: "sideNavToggleEnabled", isSignal: true, isRequired: false, transformFunction: null }, leftSideAutoFocus: { classPropertyName: "leftSideAutoFocus", publicName: "leftSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, rightSideAutoFocus: { classPropertyName: "rightSideAutoFocus", publicName: "rightSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, navMenuSvgIcon: { classPropertyName: "navMenuSvgIcon", publicName: "navMenuSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, menuColor: { classPropertyName: "menuColor", publicName: "menuColor", isSignal: true, isRequired: false, transformFunction: null }, menuIconColor: { classPropertyName: "menuIconColor", publicName: "menuIconColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"], dependencies: [{ kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
@@ -29826,7 +29841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         MatToolbar,
                         MatIconButton,
                         MatIcon,
-                    ], template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    @if (staticNavOpen() && staticNavContent) {\n      <div class=\"layout-row flex\">\n        <div class=\"layout-col elder-static-nav-container\">\n          <!-- static-nav -->\n          <ng-container *ngTemplateOutlet=\"staticNavContent\"></ng-container>\n        </div>\n        <div class=\"layout-col flex\">\n          <ng-container\n            *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"\n          ></ng-container>\n        </div>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n    }\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"] }]
+                    ], template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"] }]
         }], ctorParameters: () => [{ type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: ElderThemeService }, { type: GlobalDragDropService }, { type: i0.Renderer2 }, { type: i0.DestroyRef }], propDecorators: { sideContentLeft: [{
                 type: ContentChild,
                 args: [ElderShellSideLeftDirective, { read: TemplateRef, static: true }]
@@ -29836,9 +29851,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             }], centerContent: [{
                 type: ContentChild,
                 args: [ElderShellCenterDirective, { read: TemplateRef, static: true }]
-            }], staticNavContent: [{
-                type: ContentChild,
-                args: [ElderShellStaticNavSlotDirective, { read: TemplateRef, static: true }]
             }], rightSideDrawer: [{
                 type: ViewChild,
                 args: ['rightSideDetail', { static: true }]
@@ -29859,9 +29871,18 @@ class ElderShellNavigationToggleComponent {
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._icon = new BehaviorSubject('menu');
-        this.roots = [];
-        this.hide = [];
+        this.icon = signal('menu', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.currentUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "currentUrl" }] : []));
+        this.roots = input([], ...(ngDevMode ? [{ debugName: "roots" }] : []));
+        this.hide = input([], ...(ngDevMode ? [{ debugName: "hide" }] : []));
+        this.showComponent = computed(() => {
+            const url = this.currentUrl();
+            const hide = this.hide();
+            if (url && hide && hide.length > 0) {
+                return !this.isPartOfHiddenRoute(url, hide);
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "showComponent" }] : []));
     }
     /***************************************************************************
      *                                                                         *
@@ -29872,7 +29893,7 @@ class ElderShellNavigationToggleComponent {
         this.sub = this.router.events.subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 const navEnd = event;
-                this._currentUrl = navEnd.url;
+                this.currentUrl.set(navEnd.url);
                 this.updateIcon();
             }
         });
@@ -29887,21 +29908,12 @@ class ElderShellNavigationToggleComponent {
      **************************************************************************/
     onClick() {
         if (this.showNavigateBack) {
-            this.goBack(this._currentUrl);
+            this.goBack(this.currentUrl());
         }
         else {
             this.toggleSideContent();
         }
     }
-    get icon() {
-        return this._icon;
-    }
-    showComponent() {
-        if (this._currentUrl && this.hide && this.hide.length > 0) {
-            return !this.isPartOfHiddenRoute(this._currentUrl);
-        }
-        return true;
-    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -29909,12 +29921,11 @@ class ElderShellNavigationToggleComponent {
      **************************************************************************/
     updateIcon() {
         const icon = this.showNavigateBack ? 'arrow_back' : 'menu';
-        this.logger.debug('updating icon to ' + icon);
-        this._icon.next(icon);
+        this.icon.set(icon);
     }
     get showNavigateBack() {
-        if (this._currentUrl && this.roots && this.roots.length > 0) {
-            return !this.isRootRoute(this._currentUrl);
+        if (this.currentUrl() && this.roots() && this.roots().length > 0) {
+            return !this.isRootRoute(this.currentUrl());
         }
         return false;
     }
@@ -29926,10 +29937,10 @@ class ElderShellNavigationToggleComponent {
         this.router.navigate([rootUrl]);
     }
     isRootRoute(url) {
-        return !!this.roots.find((r) => r === url);
+        return !!this.roots().find((r) => r === url);
     }
-    isPartOfHiddenRoute(url) {
-        return !!this.hide.find((r) => url.indexOf(r) >= 0);
+    isPartOfHiddenRoute(url, hidden) {
+        return !!hidden.find((r) => url.indexOf(r) >= 0);
     }
     /**
      * Find the parent root url of a given url:
@@ -29960,16 +29971,12 @@ class ElderShellNavigationToggleComponent {
         return parts.join('/');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellNavigationToggleComponent, deps: [{ token: i1$3.Router }, { token: ElderShellService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderShellNavigationToggleComponent, isStandalone: true, selector: "elder-shell-nav-toggle", inputs: { roots: "roots", hide: "hide" }, ngImport: i0, template: "@if (showComponent()) {\n  <button mat-icon-button type=\"button\" (click)=\"onClick()\">\n    <mat-icon>{{ icon | async }}</mat-icon>\n  </button>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderShellNavigationToggleComponent, isStandalone: true, selector: "elder-shell-nav-toggle", inputs: { roots: { classPropertyName: "roots", publicName: "roots", isSignal: true, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showComponent()) {\n  <button mat-icon-button type=\"button\" (click)=\"onClick()\">\n    <mat-icon>{{ icon() }}</mat-icon>\n  </button>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellNavigationToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-shell-nav-toggle', imports: [MatIconButton, MatIcon, AsyncPipe], template: "@if (showComponent()) {\n  <button mat-icon-button type=\"button\" (click)=\"onClick()\">\n    <mat-icon>{{ icon | async }}</mat-icon>\n  </button>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1$3.Router }, { type: ElderShellService }], propDecorators: { roots: [{
-                type: Input
-            }], hide: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'elder-shell-nav-toggle', imports: [MatIconButton, MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showComponent()) {\n  <button mat-icon-button type=\"button\" (click)=\"onClick()\">\n    <mat-icon>{{ icon() }}</mat-icon>\n  </button>\n}\n" }]
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: ElderShellService }] });
 
 class ElderShellSlotDirective {
     /***************************************************************************
@@ -30029,27 +30036,11 @@ class ElderAppHeaderComponent {
         this.version = input(undefined, ...(ngDevMode ? [{ debugName: "version" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderAppHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleLink: { classPropertyName: "subTitleLink", publicName: "subTitleLink", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n            title()\n          }}</a>\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, subTitleLink: { classPropertyName: "subTitleLink", publicName: "subTitleLink", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a\n            routerLink=\"/\"\n            id=\"title\"\n            class=\"noselect link-unstyled\"\n            style=\"font-size: 28px\"\n            tabindex=\"-1\"\n            >{{ title() }}</a\n          >\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              tabindex=\"-1\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n            title()\n          }}</a>\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"] }]
-        }] });
-
-class ElderStaticNavToggleComponent {
-    constructor() {
-        this.shellService = inject(ElderShellService);
-        this.staticNavOpen = computed(() => this.shellService.staticNavOpen(), ...(ngDevMode ? [{ debugName: "staticNavOpen" }] : []));
-    }
-    onToggle(tggl) {
-        this.shellService.toggleStaticNav();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderStaticNavToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ElderStaticNavToggleComponent, isStandalone: true, selector: "elder-static-nav-toggle", ngImport: i0, template: "<div class=\"layout-row place-start-center gap-xs\">\n  <mat-slide-toggle\n    [ngModel]=\"staticNavOpen()\"\n    (ngModelChange)=\"onToggle($event)\"\n    [color]=\"'primary'\"\n  ></mat-slide-toggle>\n  <span>{{ 'staticNav.show_static_nav' | translate }}</span>\n</div>", dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderStaticNavToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-static-nav-toggle', imports: [MatSlideToggle, FormsModule, TranslateModule], template: "<div class=\"layout-row place-start-center gap-xs\">\n  <mat-slide-toggle\n    [ngModel]=\"staticNavOpen()\"\n    (ngModelChange)=\"onToggle($event)\"\n    [color]=\"'primary'\"\n  ></mat-slide-toggle>\n  <span>{{ 'staticNav.show_static_nav' | translate }}</span>\n</div>" }]
+            args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n  <div class=\"layout-row flex-none p-lg pb-sm\">\n    <div class=\"layout-row place-center-center\">\n      <a routerLink=\"/\" class=\"link-unstyled\">\n        <mat-icon class=\"service-icon noselect svg-icon-inherit-color\" [svgIcon]=\"svgIcon()\">{{\n          icon()\n        }}</mat-icon>\n      </a>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <a\n            routerLink=\"/\"\n            id=\"title\"\n            class=\"noselect link-unstyled\"\n            style=\"font-size: 28px\"\n            tabindex=\"-1\"\n            >{{ title() }}</a\n          >\n          <span class=\"mat-caption noselect\">\n            <small>{{ version() }}</small>\n          </span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          @if (subTitleLink()) {\n            <a\n              [href]=\"subTitleLink()\"\n              target=\"_blank\"\n              style=\"text-decoration: none; color: inherit\"\n              tabindex=\"-1\"\n              >{{ subTitle() }}</a\n            >\n          } @else {\n            <span>{{ subTitle() }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n</div>\n", styles: [".link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}.service-icon{font-size:42px;width:82px;height:82px;padding:20px;color:var(--md-sys-color-on-primary)}:host-context(.elder-dark-theme) .service-icon{color:var(--md-sys-color-tertiary)}\n"] }]
         }] });
 
 class DrawerOutletBinding {
@@ -30135,15 +30126,13 @@ class ElderShellModule {
             ElderShellCenterDirective,
             ElderShellNavigationToggleComponent,
             ElderShellSlotDirective,
-            ElderAppHeaderComponent,
-            ElderStaticNavToggleComponent], exports: [ElderShellComponent,
+            ElderAppHeaderComponent], exports: [ElderShellComponent,
             ElderShellSideLeftDirective,
             ElderShellSideRightDirective,
             ElderShellCenterDirective,
             ElderShellNavigationToggleComponent,
             ElderShellSlotDirective,
-            ElderAppHeaderComponent,
-            ElderStaticNavToggleComponent] }); }
+            ElderAppHeaderComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellModule, imports: [CommonModule,
             RouterModule,
             MatSidenavModule,
@@ -30157,8 +30146,7 @@ class ElderShellModule {
             TranslateModule,
             ElderShellComponent,
             ElderShellNavigationToggleComponent,
-            ElderAppHeaderComponent,
-            ElderStaticNavToggleComponent] }); }
+            ElderAppHeaderComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderShellModule, decorators: [{
             type: NgModule,
@@ -30182,7 +30170,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         ElderShellNavigationToggleComponent,
                         ElderShellSlotDirective,
                         ElderAppHeaderComponent,
-                        ElderStaticNavToggleComponent,
                     ],
                     exports: [
                         ElderShellComponent,
@@ -30192,7 +30179,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         ElderShellNavigationToggleComponent,
                         ElderShellSlotDirective,
                         ElderAppHeaderComponent,
-                        ElderStaticNavToggleComponent,
                     ],
                 }]
         }] });
@@ -31121,7 +31107,7 @@ class ElderIntervalInputComponent extends ElderFormFieldControlBase {
             return coerceInterval(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", 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: "20.1.3", 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: "20.1.3", 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: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderIntervalInputComponent, decorators: [{
@@ -31141,7 +31127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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: [{
@@ -32275,7 +32261,7 @@ class ElderIntervalPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: CommonModule }, { 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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: TranslateModule }, { 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: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: CommonModule }, { 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$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: TranslateModule }, { 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: i2.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -32620,7 +32606,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: "20.1.3", 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: "20.1.3", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$f.Overlay }, { token: i1$f.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", 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,
@@ -32657,7 +32643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$c.Overlay }, { type: i1$c.OverlayPositionBuilder }], propDecorators: { templateRef: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$f.Overlay }, { type: i1$f.OverlayPositionBuilder }], propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], originX: [{
@@ -38056,7 +38042,7 @@ class NamedColorDirective {
             return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", 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: "20.1.3", 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: "20.1.3", 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: "20.1.3", ngImport: i0, type: NamedColorDirective, decorators: [{
@@ -38068,7 +38054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         '[style.background-color]': 'hostBackgroundColor()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i1$f.MatIcon, decorators: [{
+        }], ctorParameters: () => [{ type: i1$e.MatIcon, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -39002,5 +38988,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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, 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, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, 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, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderShellStaticNavSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStaticNavDirective, ElderStaticNavToggleComponent, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, 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, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, 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, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, 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, 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, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, 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, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, 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, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, 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, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map