@elderbyte/ngx-starter 15.1.1 → 15.2.0

package/fesm2015/elderbyte-ngx-starter.mjs

@@ -1,7 +1,7 @@
 import * as i1$4 from '@angular/common';
 import { DatePipe, CommonModule, registerLocaleData, DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Injectable, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Output, Input, forwardRef, ViewChild, HostBinding, ViewChildren, ContentChild, Component, ChangeDetectionStrategy, Host, APP_INITIALIZER, EventEmitter, HostListener, ViewEncapsulation, TemplateRef, InjectionToken, ContentChildren, Self } from '@angular/core';
+import { Pipe, Injectable, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Output, Input, forwardRef, ViewChild, HostBinding, ViewChildren, ContentChild, Component, ChangeDetectionStrategy, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, ViewEncapsulation, InjectionToken, ContentChildren, Self } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
@@ -25,13 +25,15 @@ import * as i2$1 from '@elderbyte/ngx-simple-webstorage';
 import { SimpleWebStorageModule } from '@elderbyte/ngx-simple-webstorage';
 import * as i4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i2$2 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i17 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i5 from '@angular/material/button';
+import * as i5 from '@angular/material/core';
+import { MatRippleModule, mixinColor, MatCommonModule, NativeDateAdapter, MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
+import * as i5$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -39,9 +41,7 @@ import * as i6 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i1$5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i5$2 from '@angular/material/core';
-import { mixinColor, MatCommonModule, MatRippleModule, NativeDateAdapter, MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import * as i2$3 from '@angular/material/list';
+import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i5$3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -67,9 +67,9 @@ import * as i11 from '@angular/material/table';
 import { MatColumnDef, MatRowDef, MatTable, MatTableModule } from '@angular/material/table';
 import * as i1$9 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
-import * as i2$4 from '@angular/material/sort';
+import * as i2$3 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
-import * as i3$1 from '@angular/cdk/layout';
+import * as i3$2 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import * as i9 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -89,7 +89,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import * as i6$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as StreamSaver from 'streamsaver';
-import * as i2$5 from '@angular/material/expansion';
+import * as i2$4 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i1$b from '@angular/material/tabs';
 import { MatTab } from '@angular/material/tabs';
@@ -8694,7 +8694,7 @@ class ElderThemeToggleComponent {
     }
 }
 ElderThemeToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderThemeToggleComponent, deps: [{ token: ElderThemeService }, { token: ElderThemePreferenceService }], target: i0.ɵɵFactoryTarget.Component });
-ElderThemeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderThemeToggleComponent, selector: "elder-theme-toggle", inputs: { color: "color" }, ngImport: i0, template: "<div class=\"layout-row place-start-center\" *ngIf=\"activeToggleTheme$ | async as activeToggleTheme\">\n  <mat-slide-toggle [ngModel]=\"activeToggleTheme !== 'default'\"\n                    (ngModelChange)=\"onToggle($event)\"\n                    [color]=\"color\"\n  >\n  </mat-slide-toggle>\n  <mat-icon [color]=\"color\">\n    {{activeToggleTheme === 'default' ? 'light_mode' : 'brightness_2'}}\n  </mat-icon>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderThemeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderThemeToggleComponent, selector: "elder-theme-toggle", inputs: { color: "color" }, ngImport: i0, template: "<div class=\"layout-row place-start-center\" *ngIf=\"activeToggleTheme$ | async as activeToggleTheme\">\n  <mat-slide-toggle [ngModel]=\"activeToggleTheme !== 'default'\"\n                    (ngModelChange)=\"onToggle($event)\"\n                    [color]=\"color\"\n  >\n  </mat-slide-toggle>\n  <mat-icon [color]=\"color\">\n    {{activeToggleTheme === 'default' ? 'light_mode' : 'brightness_2'}}\n  </mat-icon>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderThemeToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-start-center\" *ngIf=\"activeToggleTheme$ | async as activeToggleTheme\">\n  <mat-slide-toggle [ngModel]=\"activeToggleTheme !== 'default'\"\n                    (ngModelChange)=\"onToggle($event)\"\n                    [color]=\"color\"\n  >\n  </mat-slide-toggle>\n  <mat-icon [color]=\"color\">\n    {{activeToggleTheme === 'default' ? 'light_mode' : 'brightness_2'}}\n  </mat-icon>\n</div>\n\n" }]
@@ -8822,7 +8822,7 @@ class ElderAccessDeniedComponent {
     }
 }
 ElderAccessDeniedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAccessDeniedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderAccessDeniedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAccessDeniedComponent, selector: "elder-access-denied", ngImport: i0, template: "\n<div class=\"layout-col flex p-md\">\n  <mat-card appearance=\"outlined\">\n    <div class=\"layout-row place-start-center gap-md\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span>You do not have the permission to access this resource.</span>\n    </div>\n  </mat-card>\n</div>\n\n\n\n", styles: [".padding{padding:10px}\n"], dependencies: [{ kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAccessDeniedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAccessDeniedComponent, selector: "elder-access-denied", ngImport: i0, template: "\n<div class=\"layout-col flex p-md\">\n  <mat-card appearance=\"outlined\">\n    <div class=\"layout-row place-start-center gap-md\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span>You do not have the permission to access this resource.</span>\n    </div>\n  </mat-card>\n</div>\n\n\n\n", styles: [".padding{padding:10px}\n"], dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAccessDeniedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-access-denied', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div class=\"layout-col flex p-md\">\n  <mat-card appearance=\"outlined\">\n    <div class=\"layout-row place-start-center gap-md\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span>You do not have the permission to access this resource.</span>\n    </div>\n  </mat-card>\n</div>\n\n\n\n", styles: [".padding{padding:10px}\n"] }]
@@ -8890,10 +8890,10 @@ class ElderExpandToggleButtonComponent {
     }
 }
 ElderExpandToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderExpandToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderExpandToggleButtonComponent, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<button mat-button type=\"button\" class=\"full sidenav-button\"\n        (click)=\"onToggleExpand($event)\">\n  <div class=\"layout-row flex\">\n\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderExpandToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderExpandToggleButtonComponent, selector: "elder-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "\n<a matRipple class=\"layout-row place-start-center full toggle-button\"\n        (click)=\"onToggleExpand($event)\">\n  <div class=\"layout-row place-start-center flex\">\n\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</a>\n", dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-button type=\"button\" class=\"full sidenav-button\"\n        (click)=\"onToggleExpand($event)\">\n  <div class=\"layout-row flex\">\n\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</button>\n" }]
+            args: [{ selector: 'elder-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<a matRipple class=\"layout-row place-start-center full toggle-button\"\n        (click)=\"onToggleExpand($event)\">\n  <div class=\"layout-row place-start-center flex\">\n\n    <ng-content></ng-content>\n\n    <span class=\"flex\"></span>\n\n    <div class=\"layout-col place-center-center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</a>\n" }]
         }], propDecorators: { expandedChange: [{
                 type: Output
             }], expanded: [{
@@ -8903,13 +8903,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
 class ElderExpandToggleButtonModule {
 }
 ElderExpandToggleButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderExpandToggleButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonModule, declarations: [ElderExpandToggleButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule], exports: [ElderExpandToggleButtonComponent] });
-ElderExpandToggleButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonModule, imports: [CommonModule, MatButtonModule, MatIconModule] });
+ElderExpandToggleButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonModule, declarations: [ElderExpandToggleButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule], exports: [ElderExpandToggleButtonComponent] });
+ElderExpandToggleButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonModule, imports: [CommonModule, MatButtonModule, MatIconModule, MatRippleModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExpandToggleButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule, MatButtonModule, MatIconModule
+                        CommonModule, MatButtonModule, MatIconModule, MatRippleModule
                     ],
                     declarations: [
                         ElderExpandToggleButtonComponent
@@ -9099,7 +9099,7 @@ class ElderLabelInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLabelInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLabelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLabelInputComponent, selector: "elder-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-grid>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      panelWidth=\"auto\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLabelInputComponent, selector: "elder-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-grid>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      panelWidth=\"auto\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLabelInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-label-input', providers: buildFormIntegrationProviders(ElderLabelInputComponent), changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-grid #chips>\n    <mat-chip-row *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip-row>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-grid>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      panelWidth=\"auto\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"] }]
@@ -9194,14 +9194,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
             args: [{ selector: 'elder-dialog-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col elder-dialog-panel\">\n  <ng-content></ng-content>\n</div>\n\n" }]
         }], ctorParameters: function () { return []; } });
 
+class ElderTogglePanelPrimaryDirective {
+    constructor(templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+    }
+}
+ElderTogglePanelPrimaryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelPrimaryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTogglePanelPrimaryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: ElderTogglePanelPrimaryDirective, selector: "[elderTogglePanelPrimary]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelPrimaryDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[elderTogglePanelPrimary]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+class ElderTogglePanelSecondaryDirective {
+    constructor(templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+    }
+}
+ElderTogglePanelSecondaryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelSecondaryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTogglePanelSecondaryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: ElderTogglePanelSecondaryDirective, selector: "[elderTogglePanelSecondary]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelSecondaryDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[elderTogglePanelSecondary]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+class ElderTogglePanelComponent {
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.showPrimary$ = new BehaviorSubject(true);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    showPrimary() {
+        this.showPrimary$.next(true);
+    }
+    showSecondary() {
+        this.showPrimary$.next(false);
+    }
+    toggle() {
+        this.logger.debug('Toggling elder-toggle-panel');
+        this.showPrimary$.next(!this.showPrimary$.getValue());
+    }
+}
+ElderTogglePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ElderTogglePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderTogglePanelComponent, selector: "elder-toggle-panel", queries: [{ propertyName: "primaryPanel", first: true, predicate: ElderTogglePanelPrimaryDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "secondaryPanel", first: true, predicate: ElderTogglePanelSecondaryDirective, descendants: true, read: TemplateRef, static: true }], exportAs: ["elderTogglePanel"], ngImport: i0, template: "\n<div class=\"layout-col full\">\n\n  <ng-container\n    *ngIf=\"showPrimary$ | async; then primaryPanel; else secondaryPanel\">\n  </ng-container>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-toggle-panel', exportAs: 'elderTogglePanel', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div class=\"layout-col full\">\n\n  <ng-container\n    *ngIf=\"showPrimary$ | async; then primaryPanel; else secondaryPanel\">\n  </ng-container>\n\n</div>\n" }]
+        }], propDecorators: { primaryPanel: [{
+                type: ContentChild,
+                args: [ElderTogglePanelPrimaryDirective, { read: TemplateRef, static: true }]
+            }], secondaryPanel: [{
+                type: ContentChild,
+                args: [ElderTogglePanelSecondaryDirective, { read: TemplateRef, static: true }]
+            }] } });
+
+class ElderTogglePanelTriggerDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.type = 'click';
+        this.enabled = true;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Event Listeners                                                         *
+     *                                                                         *
+     **************************************************************************/
+    handleClick(event) {
+        if (this.type === 'click') {
+            this.handleTrigger();
+        }
+    }
+    handleFocus(event) {
+        if (this.type === 'focus') {
+            this.handleTrigger();
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    handleTrigger() {
+        if (this.enabled && this.panel) {
+            this.panel.toggle();
+        }
+    }
+}
+ElderTogglePanelTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ElderTogglePanelTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: ElderTogglePanelTriggerDirective, selector: "[elderTogglePanelTrigger]", inputs: { panel: ["elderTogglePanelTrigger", "panel"], type: ["elderTogglePanelTriggerType", "type"], enabled: ["elderTogglePanelTriggerEnabled", "enabled"] }, host: { listeners: { "click": "handleClick($event)", "focus": "handleFocus($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTogglePanelTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderTogglePanelTrigger]'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { panel: [{
+                type: Input,
+                args: ['elderTogglePanelTrigger']
+            }], type: [{
+                type: Input,
+                args: ['elderTogglePanelTriggerType']
+            }], enabled: [{
+                type: Input,
+                args: ['elderTogglePanelTriggerEnabled']
+            }], handleClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], handleFocus: [{
+                type: HostListener,
+                args: ['focus', ['$event']]
+            }] } });
+
 class ElderPanelModule {
 }
 ElderPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ElderPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: ElderPanelModule, declarations: [ElderPanelComponent,
         ElderCardPanelComponent,
-        ElderDialogPanelComponent], imports: [CommonModule, MatCommonModule], exports: [ElderPanelComponent,
+        ElderDialogPanelComponent,
+        ElderTogglePanelComponent,
+        ElderTogglePanelPrimaryDirective,
+        ElderTogglePanelSecondaryDirective,
+        ElderTogglePanelTriggerDirective], imports: [CommonModule, MatCommonModule], exports: [ElderPanelComponent,
         ElderCardPanelComponent,
-        ElderDialogPanelComponent] });
+        ElderDialogPanelComponent,
+        ElderTogglePanelComponent,
+        ElderTogglePanelPrimaryDirective,
+        ElderTogglePanelSecondaryDirective,
+        ElderTogglePanelTriggerDirective] });
 ElderPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderPanelModule, imports: [CommonModule, MatCommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderPanelModule, decorators: [{
             type: NgModule,
@@ -9212,12 +9349,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                     declarations: [
                         ElderPanelComponent,
                         ElderCardPanelComponent,
-                        ElderDialogPanelComponent
+                        ElderDialogPanelComponent,
+                        ElderTogglePanelComponent,
+                        ElderTogglePanelPrimaryDirective,
+                        ElderTogglePanelSecondaryDirective,
+                        ElderTogglePanelTriggerDirective
                     ],
                     exports: [
                         ElderPanelComponent,
                         ElderCardPanelComponent,
-                        ElderDialogPanelComponent
+                        ElderDialogPanelComponent,
+                        ElderTogglePanelComponent,
+                        ElderTogglePanelPrimaryDirective,
+                        ElderTogglePanelSecondaryDirective,
+                        ElderTogglePanelTriggerDirective
                     ]
                 }]
         }] });
@@ -9396,7 +9541,7 @@ class ElderFileSelectComponent {
     }
 }
 ElderFileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderFileSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderFileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderFileSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n" }]
@@ -9460,7 +9605,7 @@ class ElderFileUploadComponent {
     }
 }
 ElderFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderFileUploadComponent, selector: "elder-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$3.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
+ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderFileUploadComponent, selector: "elder-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$2.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-upload', template: "\n\n<div class=\"layout-col\">\n\n  <div class=\"layout-row gap-md\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n" }]
@@ -9654,7 +9799,7 @@ class StandardToastComponent {
     }
 }
 StandardToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: StandardToastComponent, deps: [{ token: i1$6.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
-StandardToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: StandardToastComponent, selector: "elder-standard-toast", ngImport: i0, template: "<div class=\"layout-col gap-xs mat-mdc-snack-bar-container\">\n\n  <!-- Icon and Status -->\n  <div class=\"layout-row place-start-center gap-sm\">\n    <mat-icon class=\"noselect\">{{icon(toast.type)}}</mat-icon>\n    <span\n      class=\"toast-title mat-subtitle-2 noselect\"\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n    >{{toast.status}}</span>\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  <span class=\"mat-body noselect\" matSnackBarLabel *ngIf=\"toast.message\"\n        [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n  >{{toast.message}}</span>\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  <span class=\"mat-small noselect\" matSnackBarLabel *ngIf=\"toast.detail\"\n        [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n  >{{trimDetailText(toast.detail, 200)}}</span>\n\n  <!-- Actions -->\n  <div class=\"layout-row place-end-center\" matSnackBarActions>\n    <button mat-button matSnackBarAction type=\"button\" [color]=\"iconColor(toast.type)\" (click)=\"close()\">Ok</button>\n  </div>\n\n</div>\n", styles: [".toast-title{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: i1$6.MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: i1$6.MatSnackBarAction, selector: "[matSnackBarAction]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StandardToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: StandardToastComponent, selector: "elder-standard-toast", ngImport: i0, template: "<div class=\"layout-col gap-xs mat-mdc-snack-bar-container\">\n\n  <!-- Icon and Status -->\n  <div class=\"layout-row place-start-center gap-sm\">\n    <mat-icon class=\"noselect\">{{icon(toast.type)}}</mat-icon>\n    <span\n      class=\"toast-title mat-subtitle-2 noselect\"\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n    >{{toast.status}}</span>\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  <span class=\"mat-body noselect\" matSnackBarLabel *ngIf=\"toast.message\"\n        [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n  >{{toast.message}}</span>\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  <span class=\"mat-small noselect\" matSnackBarLabel *ngIf=\"toast.detail\"\n        [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n  >{{trimDetailText(toast.detail, 200)}}</span>\n\n  <!-- Actions -->\n  <div class=\"layout-row place-end-center\" matSnackBarActions>\n    <button mat-button matSnackBarAction type=\"button\" [color]=\"iconColor(toast.type)\" (click)=\"close()\">Ok</button>\n  </div>\n\n</div>\n", styles: [".toast-title{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: i1$6.MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: i1$6.MatSnackBarAction, selector: "[matSnackBarAction]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: StandardToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-standard-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col gap-xs mat-mdc-snack-bar-container\">\n\n  <!-- Icon and Status -->\n  <div class=\"layout-row place-start-center gap-sm\">\n    <mat-icon class=\"noselect\">{{icon(toast.type)}}</mat-icon>\n    <span\n      class=\"toast-title mat-subtitle-2 noselect\"\n      [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n    >{{toast.status}}</span>\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  <span class=\"mat-body noselect\" matSnackBarLabel *ngIf=\"toast.message\"\n        [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n  >{{toast.message}}</span>\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  <span class=\"mat-small noselect\" matSnackBarLabel *ngIf=\"toast.detail\"\n        [class.elder-warn-text]=\"toast.type === ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type === ToastType.Warning\"\n  >{{trimDetailText(toast.detail, 200)}}</span>\n\n  <!-- Actions -->\n  <div class=\"layout-row place-end-center\" matSnackBarActions>\n    <button mat-button matSnackBarAction type=\"button\" [color]=\"iconColor(toast.type)\" (click)=\"close()\">Ok</button>\n  </div>\n\n</div>\n", styles: [".toast-title{font-size:16px}\n"] }]
@@ -10654,7 +10799,7 @@ class ElderCardStackComponent {
     }
 }
 ElderCardStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderCardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n    <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span class=\"flex\"></span>\n\n    <button mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div class=\"layout-col flex card-container\">\n\n    <div class=\"layout-col gap-md scrollable p-md card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card flex-none\" padding=\"12px\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div class=\"layout-row place-between-center flex\">\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div class=\"layout-col flex\">\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderCardStackComponent, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n    <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span class=\"flex\"></span>\n\n    <button mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div class=\"layout-col flex card-container\">\n\n    <div class=\"layout-col gap-md scrollable p-md card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card flex-none\" padding=\"12px\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div class=\"layout-row place-between-center flex\">\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div class=\"layout-col flex\">\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderCardStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card-stack', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full card-stack hoverme\">\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          class=\"layout-row place-start-center flex-none gap-md stack-header p-md\">\n\n    <h3 class=\"mat-subtitle-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span class=\"flex\"></span>\n\n    <button mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div class=\"layout-col flex card-container\">\n\n    <div class=\"layout-col gap-md scrollable p-md card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card flex-none\" padding=\"12px\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div class=\"layout-row place-between-center flex\">\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div class=\"layout-col flex\">\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
@@ -11432,7 +11577,7 @@ class ElderConfirmDialogComponent {
     }
 }
 ElderConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$7.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderConfirmDialogComponent, 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 [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-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\n              (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? \"actions.no\" : \"actions.cancel\") | translate}}\n      </button>\n\n      <button type=\"submit\" mat-raised-button cdkFocusInitial\n              (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? \"actions.yes\" : \"actions.ok\") | translate}}\n      </button>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n\n\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderConfirmDialogComponent, 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 [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-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\n              (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? \"actions.no\" : \"actions.cancel\") | translate}}\n      </button>\n\n      <button type=\"submit\" mat-raised-button cdkFocusInitial\n              (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? \"actions.yes\" : \"actions.ok\") | translate}}\n      </button>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n\n\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-confirm-dialog', 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 [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-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\n              (click)=\"dialogRef.close(false)\">\n        {{ (yesNo ? \"actions.no\" : \"actions.cancel\") | translate}}\n      </button>\n\n      <button type=\"submit\" mat-raised-button cdkFocusInitial\n              (click)=\"dialogRef.close(true)\">\n        {{ (yesNo ? \"actions.yes\" : \"actions.ok\") | translate}}\n      </button>\n    </div>\n  </div>\n</div>\n\n\n\n\n\n\n\n\n" }]
@@ -11458,7 +11603,7 @@ class ElderQuestionDialogComponent {
     }
 }
 ElderQuestionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderQuestionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderQuestionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderQuestionDialogComponent, selector: "elder-question-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 [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ data.title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <form #f=\"ngForm\" class=\"layout-col flex p-md\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <div class=\"layout-col flex\">\n      <p>{{data.question}}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input matInput type=\"text\" name=\"name\" [(ngModel)]=\"answer\" cdkFocusInitial\n               placeholder=\"{{'context.name' | translate}}\" required>\n      </mat-form-field>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\">\n\n      <button mat-button type=\"button\"\n              (click)=\"cancel($event)\">\n        {{'actions.cancel' | translate}}\n      </button>\n\n      <button mat-button type=\"submit\" color=\"primary\"\n              [disabled]=\"!isValid\">\n        {{'actions.ok' | translate}}\n      </button>\n    </div>\n  </form>\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ElderQuestionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderQuestionDialogComponent, selector: "elder-question-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 [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ data.title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <form #f=\"ngForm\" class=\"layout-col flex p-md\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <div class=\"layout-col flex\">\n      <p>{{data.question}}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input matInput type=\"text\" name=\"name\" [(ngModel)]=\"answer\" cdkFocusInitial\n               placeholder=\"{{'context.name' | translate}}\" required>\n      </mat-form-field>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\">\n\n      <button mat-button type=\"button\"\n              (click)=\"cancel($event)\">\n        {{'actions.cancel' | translate}}\n      </button>\n\n      <button mat-button type=\"submit\" color=\"primary\"\n              [disabled]=\"!isValid\">\n        {{'actions.ok' | translate}}\n      </button>\n    </div>\n  </form>\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderQuestionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-question-dialog', 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 [matDialogClose]=\"false\"><mat-icon>close</mat-icon></button>\n      <h3>{{ data.title | translate }}</h3>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <form #f=\"ngForm\" class=\"layout-col flex p-md\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <div class=\"layout-col flex\">\n      <p>{{data.question}}</p>\n\n      <mat-form-field class=\"full-width\">\n        <input matInput type=\"text\" name=\"name\" [(ngModel)]=\"answer\" cdkFocusInitial\n               placeholder=\"{{'context.name' | translate}}\" required>\n      </mat-form-field>\n    </div>\n\n    <div class=\"layout-row place-end-center gap-md flex-none\">\n\n      <button mat-button type=\"button\"\n              (click)=\"cancel($event)\">\n        {{'actions.cancel' | translate}}\n      </button>\n\n      <button mat-button type=\"submit\" color=\"primary\"\n              [disabled]=\"!isValid\">\n        {{'actions.ok' | translate}}\n      </button>\n    </div>\n  </form>\n</div>\n\n\n\n" }]
@@ -11494,7 +11639,7 @@ class ElderSelectionDialogComponent {
     }
 }
 ElderSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderSelectionDialogComponent, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "\n\n<div class=\"layout-col full\">\n\n  <div class=\"layout-col flex-none\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\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\">\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n  </div>\n\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ElderSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderSelectionDialogComponent, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "\n\n<div class=\"layout-col full\">\n\n  <div class=\"layout-col flex-none\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\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\">\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n  </div>\n\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderSelectionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-selection-dialog', template: "\n\n<div class=\"layout-col full\">\n\n  <div class=\"layout-col flex-none\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\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\">\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n  </div>\n\n\n</div>\n\n" }]
@@ -11918,7 +12063,7 @@ class ElderDataToolbarComponent {
     }
 }
 ElderDataToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderDataToolbarComponent, deps: [{ token: SelectionModel, optional: true }, { token: ELDER_DATA_VIEW, optional: true }, { token: ElderDialogService }], target: i0.ɵɵFactoryTarget.Component });
-ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n  class=\"layout-row place-between-center gap-md\"\n  style=\"padding: 0 8px 0 8px\"\n  *ngIf=\"selection$ | async as selection\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n  <!-- Left column -->\n  <div class=\"layout-row place-start-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n\n  <div class=\"layout-row place-center-center flex\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n\n  <!-- Right column -->\n  <div class=\"layout-row place-end-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n  <!-- Add Action -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canAdd\"\n    (click)=\"requestNew.next($event)\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection></ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n\n  <!-- Delete Action -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canRemove\"\n    [disabled]=\"!selection?.length\"\n    (click)=\"requestRemoveItems(selection)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- More Menu -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    [matMenuTriggerFor]=\"elderTableMenu\"\n    [disabled]=\"!canMore\"\n  >\n    <mat-icon>more_vert</mat-icon>\n    <mat-menu #elderTableMenu=\"matMenu\">\n      <ng-content select=\"[mat-menu-item]\"></ng-content>\n      <!-- Placeholder for mat menu items-->\n      <ng-container\n        *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n      ></ng-container>\n    </mat-menu>\n  </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n  class=\"layout-row place-between-center gap-md\"\n  style=\"padding: 0 8px 0 8px\"\n  *ngIf=\"selection$ | async as selection\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n  <!-- Left column -->\n  <div class=\"layout-row place-start-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n\n  <div class=\"layout-row place-center-center flex\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n\n  <!-- Right column -->\n  <div class=\"layout-row place-end-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n  <!-- Add Action -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canAdd\"\n    (click)=\"requestNew.next($event)\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection></ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n\n  <!-- Delete Action -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canRemove\"\n    [disabled]=\"!selection?.length\"\n    (click)=\"requestRemoveItems(selection)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- More Menu -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    [matMenuTriggerFor]=\"elderTableMenu\"\n    [disabled]=\"!canMore\"\n  >\n    <mat-icon>more_vert</mat-icon>\n    <mat-menu #elderTableMenu=\"matMenu\">\n      <ng-content select=\"[mat-menu-item]\"></ng-content>\n      <!-- Placeholder for mat menu items-->\n      <ng-container\n        *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n      ></ng-container>\n    </mat-menu>\n  </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderDataToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Table Toolbar -->\n<div\n  class=\"layout-row place-between-center gap-md\"\n  style=\"padding: 0 8px 0 8px\"\n  *ngIf=\"selection$ | async as selection\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n  <!-- Left column -->\n  <div class=\"layout-row place-start-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n\n  <div class=\"layout-row place-center-center flex\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n\n  <!-- Right column -->\n  <div class=\"layout-row place-end-center\">\n    <ng-container\n      *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n  <!-- Add Action -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canAdd\"\n    (click)=\"requestNew.next($event)\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection></ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n  <!-- Placeholder for additional actions -->\n  <ng-container\n    *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n  ></ng-container>\n\n  <!-- Delete Action -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    *ngIf=\"canRemove\"\n    [disabled]=\"!selection?.length\"\n    (click)=\"requestRemoveItems(selection)\"\n  >\n    <mat-icon>delete</mat-icon>\n  </button>\n\n  <!-- More Menu -->\n  <button\n    mat-icon-button type=\"button\"\n    color=\"primary\"\n    [matMenuTriggerFor]=\"elderTableMenu\"\n    [disabled]=\"!canMore\"\n  >\n    <mat-icon>more_vert</mat-icon>\n    <mat-menu #elderTableMenu=\"matMenu\">\n      <ng-content select=\"[mat-menu-item]\"></ng-content>\n      <!-- Placeholder for mat menu items-->\n      <ng-container\n        *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n      ></ng-container>\n    </mat-menu>\n  </button>\n</ng-template>\n" }]
@@ -12017,7 +12162,7 @@ class ElderSingleSortComponent {
     }
 }
 ElderSingleSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderSingleSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" class=\"layout-row place-start-center flex-none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" class=\"layout-row place-start-center flex-none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderSingleSortComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-single-sort', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(sort$ | async) as sort\" class=\"layout-row place-start-center flex-none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n" }]
@@ -12195,7 +12340,7 @@ class DataContextStateIndicatorComponent {
     }
 }
 DataContextStateIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DataContextStateIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: { dataContext: "dataContext" }, ngImport: i0, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div class=\"layout-col place-center-center full elder-dc-indicator-container mat-body-2\">\n    <div class=\"layout-row place-center-center gap-lg\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-2\">{{text | translate}}</span>\n    </div>\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: { dataContext: "dataContext" }, ngImport: i0, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div class=\"layout-col place-center-center full elder-dc-indicator-container mat-body-2\">\n    <div class=\"layout-row place-center-center gap-lg\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-2\">{{text | translate}}</span>\n    </div>\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: DataContextStateIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-context-state-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div class=\"layout-col place-center-center full elder-dc-indicator-container mat-body-2\">\n    <div class=\"layout-row place-center-center gap-lg\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-2\">{{text | translate}}</span>\n    </div>\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"] }]
@@ -12946,7 +13091,7 @@ class ElderTableExtensionDirective {
         return this._extensionGroupIndex;
     }
 }
-ElderTableExtensionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTableExtensionDirective, deps: [{ token: ElderTableModel }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTableExtensionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTableExtensionDirective, deps: [{ token: ElderTableModel }, { token: i2$3.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderTableExtensionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: ElderTableExtensionDirective, selector: "[elderTableExtension]", inputs: { columnsPosition: "columnsPosition" }, providers: [
         ElderTableProviders.ExistingOrNewTableModel
     ], queries: [{ propertyName: "columnDefsQuery", predicate: MatColumnDef }, { propertyName: "elderColumnsQuery", predicate: ElderTableColumnDirective }, { propertyName: "rowDefsQuery", predicate: MatRowDef }], ngImport: i0 });
@@ -12959,7 +13104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                     ]
                 }]
         }], ctorParameters: function () {
-        return [{ type: ElderTableModel }, { type: i2$4.MatSort, decorators: [{
+        return [{ type: ElderTableModel }, { type: i2$3.MatSort, decorators: [{
                         type: Optional
                     }] }, { type: ElderTableExtensionDirective, decorators: [{
                         type: Optional
@@ -13432,14 +13577,14 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
         });
     }
 }
-ElderTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ElderTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i2$3.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ElderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderTableComponent, selector: "elder-table", inputs: { idField: "idField", removingField: "removingField", hiddenField: "hiddenField", pageSizeOptions: "pageSizeOptions", keepSelection: "keepSelection", showFooter: "showFooter", toolbarTemplate: "toolbarTemplate", data: "data", displayedColumns: "displayedColumns", selectionVisible: "selectionVisible" }, providers: [
         ElderTableProviders.ExistingOrNewTableModel,
         {
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderTableComponent)
         }
-    ], queries: [{ 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: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <div class=\"layout-col elder-table full\">\n    <!-- Toolbar Rows -->\n    <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n      <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n      </ng-template>\n    </ng-container>\n\n    <!-- Scrollable Table -->\n    <div class=\"layout-col scrollable elder-table-scroll\"\n         infiniteScroll\n         [eventThrottle]=\"150\"\n         [offsetFactor]=\"2\"\n         [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n         (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\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            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                          [checked]=\"selectionModel.observeSelection(entity) | async\"\n                          [disabled]=\"!selectionModel.isSelectable(entity)\"\n                          class=\"elder-table-checkbox\"\n                          [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n            >\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr mat-row class=\"elder-table-row\"\n              *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n              [elderTableRow]=\"entity\"\n              [class.dense]=\"dense\"\n              [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n              [class.elder-row-removing]=\"removingField && entity[removingField]\"\n              [class.elder-table-row-selected]=\"interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\"\n              (click)=\"onItemClick(entity)\"\n              (dblclick)=\"onItemDoubleClick(entity)\"\n          >\n          </tr>\n          <ng-container *ngIf=\"showFooter\">\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          </ng-container>\n        </ng-container>\n      </table>\n    </div>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dataContext\">\n    </elder-data-context-state-indicator>\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Optional Paginator Toolbar -->\n    <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                   class=\"flex-none\"\n                   [length]=\"dataContext?.total | async\"\n                   [pageIndex]=\"page?.index\"\n                   [pageSize]=\"page?.size\"\n                   [pageSizeOptions]=\"pageSizeOptions\">\n    </mat-paginator>\n\n    <!-- Optional Continuation Footer -->\n    <div *ngIf=\"isContinuable\" class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n\n      <span class=\"mat-caption noselect\" style=\"color: gray\">\n        {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n      </span>\n\n      <button mat-icon-button type=\"button\" color=\"primary\"\n              [disabled]=\"!(canLoadMore$ | async)\"\n              (click)=\"dataContinuable.loadMore()\">\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      </button>\n    </div>\n  </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;max-width:48px;width:48px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-mdc-table .mat-mdc-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-header-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.mat-mdc-table .mat-mdc-header-cell>.mat-sort-header-container{display:inline-flex}.mat-mdc-table .mat-mdc-cell{padding-left:8px;padding-right:12px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.mat-mdc-table .mat-mdc-footer-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-footer-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell .mat-mdc-paginator{margin-left:-8px;margin-right:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i11.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i11.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ 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: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <div class=\"layout-col elder-table full\">\n    <!-- Toolbar Rows -->\n    <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n      <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n      </ng-template>\n    </ng-container>\n\n    <!-- Scrollable Table -->\n    <div class=\"layout-col scrollable elder-table-scroll\"\n         infiniteScroll\n         [eventThrottle]=\"150\"\n         [offsetFactor]=\"2\"\n         [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n         (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\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            <mat-checkbox (click)=\"$event.stopPropagation()\"\n                          (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                          [checked]=\"selectionModel.observeSelection(entity) | async\"\n                          [disabled]=\"!selectionModel.isSelectable(entity)\"\n                          class=\"elder-table-checkbox\"\n                          [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n            >\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr mat-row class=\"elder-table-row\"\n              *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n              [elderTableRow]=\"entity\"\n              [class.dense]=\"dense\"\n              [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n              [class.elder-row-removing]=\"removingField && entity[removingField]\"\n              [class.elder-table-row-selected]=\"interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\"\n              (click)=\"onItemClick(entity)\"\n              (dblclick)=\"onItemDoubleClick(entity)\"\n          >\n          </tr>\n          <ng-container *ngIf=\"showFooter\">\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          </ng-container>\n        </ng-container>\n      </table>\n    </div>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dataContext\">\n    </elder-data-context-state-indicator>\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Optional Paginator Toolbar -->\n    <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                   class=\"flex-none\"\n                   [length]=\"dataContext?.total | async\"\n                   [pageIndex]=\"page?.index\"\n                   [pageSize]=\"page?.size\"\n                   [pageSizeOptions]=\"pageSizeOptions\">\n    </mat-paginator>\n\n    <!-- Optional Continuation Footer -->\n    <div *ngIf=\"isContinuable\" class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n\n      <span class=\"mat-caption noselect\" style=\"color: gray\">\n        {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n      </span>\n\n      <button mat-icon-button type=\"button\" color=\"primary\"\n              [disabled]=\"!(canLoadMore$ | async)\"\n              (click)=\"dataContinuable.loadMore()\">\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      </button>\n    </div>\n  </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;max-width:48px;width:48px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-mdc-table .mat-mdc-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-header-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.mat-mdc-table .mat-mdc-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.mat-mdc-table .mat-mdc-header-cell>.mat-sort-header-container{display:inline-flex}.mat-mdc-table .mat-mdc-cell{padding-left:8px;padding-right:12px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.mat-mdc-table .mat-mdc-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.mat-mdc-table .mat-mdc-footer-cell:first-of-type{padding-left:20px}.mat-mdc-table .mat-mdc-footer-cell:last-of-type{padding-right:8px}.mat-mdc-table .mat-mdc-footer-cell .mat-mdc-paginator{margin-left:-8px;margin-right:-8px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i11.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i11.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -13456,7 +13601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                         type: Optional
                     }, {
                         type: SkipSelf
-                    }] }, { type: i2$4.MatSort, decorators: [{
+                    }] }, { type: i2$3.MatSort, decorators: [{
                         type: Optional
                     }] }, { type: ElderTableExtensionDirective, decorators: [{
                         type: Optional
@@ -15119,7 +15264,7 @@ class ElderNumberCellDirective {
         }
     }
 }
-ElderNumberCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i2$4.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderNumberCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i2$3.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderNumberCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: ElderNumberCellDirective, selector: "[elderNumberCell]", host: { properties: { "class.elder-number-cell": "true" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderNumberCellDirective, decorators: [{
             type: Directive,
@@ -15130,7 +15275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                     }
                 }]
         }], ctorParameters: function () {
-        return [{ type: i2$4.MatSortHeader, decorators: [{
+        return [{ type: i2$3.MatSortHeader, decorators: [{
                         type: Optional
                     }] }];
     } });
@@ -15802,13 +15947,13 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         return columnCount;
     }
 }
-ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderGridComponent, selector: "elder-grid", inputs: { toolbarVisible: "toolbarVisible", footerVisible: "footerVisible", itemHeight: "itemHeight", responsiveColumnCount: "responsiveColumnCount", availableSorts: "availableSorts", sortTranslationPrefix: "sortTranslationPrefix", hiddenField: "hiddenField", idField: "idField", selectionVisible: "selectionVisible", pageSizeOptions: "pageSizeOptions", tileTemplate: "tileTemplate", toolbarTemplate: "toolbarTemplate", data: "data", columnCount: "columnCount" }, providers: [
         {
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderGridComponent)
         }
-    ], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <!-- Grid Browser -->\n  <div class=\"layout-col full elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n\n      <div class=\"layout-col flex-none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox class=\"flex-none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         class=\"flex-none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"layout-col flex elder-grid-browser\"\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      infiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <mat-card appearance=\"outlined\" *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <div class=\"elder-grid-tile-content\"\n                 (click)=\"onItemClick(tile)\"\n                 (dblclick)=\"onItemDoubleClick(tile)\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                     class=\"elder-grid-tile-overlay elder-click-through\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </mat-card>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Footer -->\n    <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\"\n         *ngIf=\"footerVisible\"\n         style=\"padding-right: 12px\">\n\n      <!-- Continuable -->\n      <ng-container *ngIf=\"isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n          </span>\n\n        <button mat-icon-button type=\"button\"\n                color=\"primary\"\n                [disabled]=\"!(canLoadMore$ | async)\"\n                (click)=\"dataSnapshot.loadMore()\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </ng-container>\n\n      <!-- Paged -->\n      <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                     class=\"flex-none\"\n                     [length]=\"dataContext?.total | async\"\n                     [pageIndex]=\"page?.index\"\n                     [pageSize]=\"page?.size\"\n                     [pageSizeOptions]=\"pageSizeOptions\">\n      </mat-paginator>\n\n      <!-- Local Source -->\n      <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}}\n          </span>\n      </ng-container>\n\n    </div>\n\n\n  </div>\n</mat-card>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.elder-grid-tile-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-click-through{pointer-events:none}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <!-- Grid Browser -->\n  <div class=\"layout-col full elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n\n      <div class=\"layout-col flex-none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox class=\"flex-none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         class=\"flex-none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"layout-col flex elder-grid-browser\"\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      infiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <mat-card appearance=\"outlined\" *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <div class=\"elder-grid-tile-content\"\n                 (click)=\"onItemClick(tile)\"\n                 (dblclick)=\"onItemDoubleClick(tile)\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                     class=\"elder-grid-tile-overlay elder-click-through\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </mat-card>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Footer -->\n    <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\"\n         *ngIf=\"footerVisible\"\n         style=\"padding-right: 12px\">\n\n      <!-- Continuable -->\n      <ng-container *ngIf=\"isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n          </span>\n\n        <button mat-icon-button type=\"button\"\n                color=\"primary\"\n                [disabled]=\"!(canLoadMore$ | async)\"\n                (click)=\"dataSnapshot.loadMore()\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </ng-container>\n\n      <!-- Paged -->\n      <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                     class=\"flex-none\"\n                     [length]=\"dataContext?.total | async\"\n                     [pageIndex]=\"page?.index\"\n                     [pageSize]=\"page?.size\"\n                     [pageSizeOptions]=\"pageSizeOptions\">\n      </mat-paginator>\n\n      <!-- Local Source -->\n      <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}}\n          </span>\n      </ng-container>\n\n    </div>\n\n\n  </div>\n</mat-card>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.elder-grid-tile-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-click-through{pointer-events:none}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -15824,7 +15969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                         type: Optional
                     }, {
                         type: SkipSelf
-                    }] }, { type: i3$1.BreakpointObserver }];
+                    }] }, { type: i3$2.BreakpointObserver }];
     }, propDecorators: { tileTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderGridTileDirective, { read: TemplateRef, static: true }]
@@ -16285,7 +16430,7 @@ class ElderLanguageSwitcherComponent {
     }
 }
 ElderLanguageSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLanguageSwitcherComponent, deps: [{ token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher", inputs: { slimMode: "slimMode" }, ngImport: i0, template: "\n\n<mat-menu #languageMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let lang of languages\" (click)=\"currentLanguage = lang\">\n    <mat-icon>language</mat-icon>\n    <span [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\"\n        *ngIf=\"slimMode\"  [matMenuTriggerFor]=\"languageMenu\">\n  <div class=\"layout-row place-start-center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{currentLanguage}}</span>\n  </div>\n</button>\n\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select placeholder=\"{{'language.language' | translate}}\" name=\"language\" [(ngModel)]=\"currentLanguage\">\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{ 'language.' + lang | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher", inputs: { slimMode: "slimMode" }, ngImport: i0, template: "\n\n<mat-menu #languageMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let lang of languages\" (click)=\"currentLanguage = lang\">\n    <mat-icon>language</mat-icon>\n    <span [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\"\n        *ngIf=\"slimMode\"  [matMenuTriggerFor]=\"languageMenu\">\n  <div class=\"layout-row place-start-center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{currentLanguage}}</span>\n  </div>\n</button>\n\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select placeholder=\"{{'language.language' | translate}}\" name=\"language\" [(ngModel)]=\"currentLanguage\">\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{ 'language.' + lang | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-language-switcher', template: "\n\n<mat-menu #languageMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let lang of languages\" (click)=\"currentLanguage = lang\">\n    <mat-icon>language</mat-icon>\n    <span [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\"\n        *ngIf=\"slimMode\"  [matMenuTriggerFor]=\"languageMenu\">\n  <div class=\"layout-row place-start-center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{currentLanguage}}</span>\n  </div>\n</button>\n\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select placeholder=\"{{'language.language' | translate}}\" name=\"language\" [(ngModel)]=\"currentLanguage\">\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{ 'language.' + lang | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"] }]
@@ -16855,7 +17000,7 @@ class ElderNavLinkComponent {
     }
 }
 ElderNavLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderNavLinkComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component });
-ElderNavLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderNavLinkComponent, 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" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n  <a *ngIf=\"model.routerLink as routerLink\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n         mdc-list-item mdc-list-item--with-one-line\"\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  <a *ngIf=\"model.href as href\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n              mdc-list-item mdc-list-item--with-one-line\"\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  <a *ngIf=\"!model.href && !model.routerLink\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n            mdc-list-item mdc-list-item--with-one-line\"\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</ng-container>\n\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center gap-md noselect\">\n    <mat-icon *ngIf=\"!(!icon && !title)\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n    <mat-icon *ngIf=\"svgIcon\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n    <span *ngIf=\"title\" class=\"noselect\">\n      {{ title | translate}}\n    </span>\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:48px;border-radius:4px;overflow:hidden;transition:background .5s}.nav-link .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderNavLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderNavLinkComponent, 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" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n  <a *ngIf=\"model.routerLink as routerLink\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n         mdc-list-item mdc-list-item--with-one-line\"\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  <a *ngIf=\"model.href as href\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n              mdc-list-item mdc-list-item--with-one-line\"\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  <a *ngIf=\"!model.href && !model.routerLink\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n            mdc-list-item mdc-list-item--with-one-line\"\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</ng-container>\n\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center gap-md noselect\">\n    <mat-icon *ngIf=\"!(!icon && !title)\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n    <mat-icon *ngIf=\"svgIcon\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n    <span *ngIf=\"title\" class=\"noselect\">\n      {{ title | translate}}\n    </span>\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:48px;border-radius:4px;overflow:hidden;transition:background .5s}.nav-link .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderNavLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n  <a *ngIf=\"model.routerLink as routerLink\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n         mdc-list-item mdc-list-item--with-one-line\"\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  <a *ngIf=\"model.href as href\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n              mdc-list-item mdc-list-item--with-one-line\"\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  <a *ngIf=\"!model.href && !model.routerLink\"\n     matRipple [matRippleDisabled]=\"disabled\"\n     class=\"layout-row place-start-center nav-link\n            mdc-list-item mdc-list-item--with-one-line\"\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</ng-container>\n\n\n<ng-template #defaultLinkTemplate>\n  <div class=\"layout-row place-start-center gap-md noselect\">\n    <mat-icon *ngIf=\"!(!icon && !title)\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n    <mat-icon *ngIf=\"svgIcon\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n    <span *ngIf=\"title\" class=\"noselect\">\n      {{ title | translate}}\n    </span>\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:48px;border-radius:4px;overflow:hidden;transition:background .5s}.nav-link .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}\n"] }]
@@ -16961,7 +17106,7 @@ class ElderNavGroupComponent {
     }
 }
 ElderNavGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderNavGroupComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component });
-ElderNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderNavGroupComponent, selector: "elder-nav-group", inputs: { value: "value" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "\n<ng-container *ngIf=\"(state$ | async) as state\">\n  <div class=\"layout-col nav-group\">\n    <a matRipple\n       class=\"layout-row place-start-center nav-group-button mat-button-fill\n              mdc-list-item\n              mdc-list-item--with-one-line\"\n       [class.nav-group-button-open]=\"state.isOpen\"\n       [class.nav-group-button-closed]=\"!state.isOpen\"\n       [class.nav-group-button-active]=\"active$ | async\"\n       (click)=\"itemClick($event)\"\n    >\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        <mat-icon>{{state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n      </div>\n    </a>\n\n    <!-- Nested Items projection -->\n    <div class=\"layout-col nav-group-items-container p-sm gap-sm\"\n         [@openClose]=\"state.isOpen ? 'open' : 'closed'\">\n      <ng-content select=\"elder-nav-link\"></ng-content>\n    </div>\n\n  </div>\n</ng-container>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:48px}.nav-group-button{padding-right:16px;min-height:48px;font-size:16px;font-weight:400;border-radius:4px;cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], animations: [
+ElderNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderNavGroupComponent, selector: "elder-nav-group", inputs: { value: "value" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "\n<ng-container *ngIf=\"(state$ | async) as state\">\n  <div class=\"layout-col nav-group\">\n    <a matRipple\n       class=\"layout-row place-start-center nav-group-button mat-button-fill\n              mdc-list-item\n              mdc-list-item--with-one-line\"\n       [class.nav-group-button-open]=\"state.isOpen\"\n       [class.nav-group-button-closed]=\"!state.isOpen\"\n       [class.nav-group-button-active]=\"active$ | async\"\n       (click)=\"itemClick($event)\"\n    >\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        <mat-icon>{{state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n      </div>\n    </a>\n\n    <!-- Nested Items projection -->\n    <div class=\"layout-col nav-group-items-container p-sm gap-sm\"\n         [@openClose]=\"state.isOpen ? 'open' : 'closed'\">\n      <ng-content select=\"elder-nav-link\"></ng-content>\n    </div>\n\n  </div>\n</ng-container>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:48px}.nav-group-button{padding-right:16px;min-height:48px;font-size:16px;font-weight:400;border-radius:4px;cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], animations: [
         trigger('openClose', [
             state('open', style({
                 height: '*',
@@ -17207,7 +17352,7 @@ class ElderBreadCrumbsComponent {
     }
 }
 ElderBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderBreadCrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderBreadCrumbsComponent, selector: "elder-bread-crumbs", inputs: { root: "root", rootTranslation: "rootTranslation", rootIcon: "rootIcon", backgroundColor: "backgroundColor", editModeEnabled: "editModeEnabled", path: "path" }, outputs: { pathChange: "pathChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<!-- main container-->\n<div class=\"layout-row place-start-center full breadcrumb-bar\"\n     [style.background-color]=\"backgroundColor\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\"\n       class=\"layout-row place-start-center flex breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n  >\n      <!-- path edit control (if editMode:enabled) -->\n      <mat-form-field class=\"flex\" *ngIf=\"editMode.enabled\" elderDense >\n        {{ pathInput.focus() }}\n        <input matInput type=\"text\" name=\"pathInput\" #pathInput\n               [ngModel]=\"path\" (ngModelChange)=\"onPathInputChange($event)\"\n               (blur)=\"onPathEditBlur($event)\"\n               elderKeyEvent [elderKeyEventFilter]=\"'Enter'\" (onElderKeyEvent)=\"onEnter()\">\n      </mat-form-field>\n\n      <!-- navigation control (if editMode:disabled) -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n        <div class=\"layout-row place-center-center flex-none\"\n             *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n          <!-- arrow right icon as path element delimiter -->\n          <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n          <!-- root element (case root icon) -->\n          <a *ngIf=\"isFirst && rootIcon\"\n             mat-icon-button class=\"breadcrumb\"\n             (click)=\"goToPath(node)\" elderStopEventPropagation\n          >\n            <mat-icon>{{rootIcon}}</mat-icon>\n          </a>\n\n          <!-- intermediate elements (not last and (not first or root icon)) -->\n          <a *ngIf=\"!isLast && (!isFirst || !rootIcon)\"\n             mat-button class=\"breadcrumb\"\n             (click)=\"goToPath(node)\" elderStopEventPropagation\n          >\n            <span>{{node.name}}</span>\n          </a>\n\n          <!-- last element (is last and (not first or root icon)) -->\n          <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!isFirst || !rootIcon)\"\n             (click)=\"null\" elderStopEventPropagation\n          >\n            {{node.name}}\n            <mat-icon>arrow_drop_down</mat-icon>\n          </a>\n\n        </div>\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb action menu button -->\n  <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    <mat-icon style=\"font-size: 22px\">arrow_drop_down</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n\n      <button mat-menu-item type=\"button\" [elderClipboardPut]=\"path\">\n        <mat-icon>content_copy</mat-icon>\n        <span>{{'Pfad kopieren'}}</span>\n      </button>\n\n      <button mat-menu-item type=\"button\" (click)=\"onMenuEditPathClick($event)\" elderStopEventPropagation>\n        <mat-icon *ngIf=\"!editMode.enabled\">edit</mat-icon>\n        <mat-icon *ngIf=\"editMode.enabled\">done</mat-icon>\n        <span *ngIf=\"!editMode.enabled\">{{'Pfad editieren'}}</span>\n        <span *ngIf=\"editMode.enabled\">{{'Pfad best\u00E4tigen'}}</span>\n      </button>\n\n    </mat-menu>\n\n  </button>\n</div>\n\n\n", styles: [".breadcrumb-path{padding:0 8px}.breadcrumb{padding-left:4px;padding-right:4px;font-size:18px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderKeyEventDirective, selector: "[elderKeyEvent]", inputs: ["elderKeyEventFilter", "elderKeyEventDown", "elderKeyEventChildren", "elderKeyEventCallback"], outputs: ["onElderKeyEvent"] }, { kind: "directive", type: ElderClipboardPutDirective, selector: "[elderClipboardPut]", inputs: ["elderClipboardPut"], outputs: ["clipboardCopied"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderBreadCrumbsComponent, selector: "elder-bread-crumbs", inputs: { root: "root", rootTranslation: "rootTranslation", rootIcon: "rootIcon", backgroundColor: "backgroundColor", editModeEnabled: "editModeEnabled", path: "path" }, outputs: { pathChange: "pathChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<!-- main container-->\n<div class=\"layout-row place-start-center full breadcrumb-bar\"\n     [style.background-color]=\"backgroundColor\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\"\n       class=\"layout-row place-start-center flex breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n  >\n      <!-- path edit control (if editMode:enabled) -->\n      <mat-form-field class=\"flex\" *ngIf=\"editMode.enabled\" elderDense >\n        {{ pathInput.focus() }}\n        <input matInput type=\"text\" name=\"pathInput\" #pathInput\n               [ngModel]=\"path\" (ngModelChange)=\"onPathInputChange($event)\"\n               (blur)=\"onPathEditBlur($event)\"\n               elderKeyEvent [elderKeyEventFilter]=\"'Enter'\" (onElderKeyEvent)=\"onEnter()\">\n      </mat-form-field>\n\n      <!-- navigation control (if editMode:disabled) -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n        <div class=\"layout-row place-center-center flex-none\"\n             *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n          <!-- arrow right icon as path element delimiter -->\n          <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n          <!-- root element (case root icon) -->\n          <a *ngIf=\"isFirst && rootIcon\"\n             mat-icon-button class=\"breadcrumb\"\n             (click)=\"goToPath(node)\" elderStopEventPropagation\n          >\n            <mat-icon>{{rootIcon}}</mat-icon>\n          </a>\n\n          <!-- intermediate elements (not last and (not first or root icon)) -->\n          <a *ngIf=\"!isLast && (!isFirst || !rootIcon)\"\n             mat-button class=\"breadcrumb\"\n             (click)=\"goToPath(node)\" elderStopEventPropagation\n          >\n            <span>{{node.name}}</span>\n          </a>\n\n          <!-- last element (is last and (not first or root icon)) -->\n          <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!isFirst || !rootIcon)\"\n             (click)=\"null\" elderStopEventPropagation\n          >\n            {{node.name}}\n            <mat-icon>arrow_drop_down</mat-icon>\n          </a>\n\n        </div>\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb action menu button -->\n  <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    <mat-icon style=\"font-size: 22px\">arrow_drop_down</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n\n      <button mat-menu-item type=\"button\" [elderClipboardPut]=\"path\">\n        <mat-icon>content_copy</mat-icon>\n        <span>{{'Pfad kopieren'}}</span>\n      </button>\n\n      <button mat-menu-item type=\"button\" (click)=\"onMenuEditPathClick($event)\" elderStopEventPropagation>\n        <mat-icon *ngIf=\"!editMode.enabled\">edit</mat-icon>\n        <mat-icon *ngIf=\"editMode.enabled\">done</mat-icon>\n        <span *ngIf=\"!editMode.enabled\">{{'Pfad editieren'}}</span>\n        <span *ngIf=\"editMode.enabled\">{{'Pfad best\u00E4tigen'}}</span>\n      </button>\n\n    </mat-menu>\n\n  </button>\n</div>\n\n\n", styles: [".breadcrumb-path{padding:0 8px}.breadcrumb{padding-left:4px;padding-right:4px;font-size:18px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderKeyEventDirective, selector: "[elderKeyEvent]", inputs: ["elderKeyEventFilter", "elderKeyEventDown", "elderKeyEventChildren", "elderKeyEventCallback"], outputs: ["onElderKeyEvent"] }, { kind: "directive", type: ElderClipboardPutDirective, selector: "[elderClipboardPut]", inputs: ["elderClipboardPut"], outputs: ["clipboardCopied"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderBreadCrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-bread-crumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- main container-->\n<div class=\"layout-row place-start-center full breadcrumb-bar\"\n     [style.background-color]=\"backgroundColor\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\"\n       class=\"layout-row place-start-center flex breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n  >\n      <!-- path edit control (if editMode:enabled) -->\n      <mat-form-field class=\"flex\" *ngIf=\"editMode.enabled\" elderDense >\n        {{ pathInput.focus() }}\n        <input matInput type=\"text\" name=\"pathInput\" #pathInput\n               [ngModel]=\"path\" (ngModelChange)=\"onPathInputChange($event)\"\n               (blur)=\"onPathEditBlur($event)\"\n               elderKeyEvent [elderKeyEventFilter]=\"'Enter'\" (onElderKeyEvent)=\"onEnter()\">\n      </mat-form-field>\n\n      <!-- navigation control (if editMode:disabled) -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n        <div class=\"layout-row place-center-center flex-none\"\n             *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n          <!-- arrow right icon as path element delimiter -->\n          <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n          <!-- root element (case root icon) -->\n          <a *ngIf=\"isFirst && rootIcon\"\n             mat-icon-button class=\"breadcrumb\"\n             (click)=\"goToPath(node)\" elderStopEventPropagation\n          >\n            <mat-icon>{{rootIcon}}</mat-icon>\n          </a>\n\n          <!-- intermediate elements (not last and (not first or root icon)) -->\n          <a *ngIf=\"!isLast && (!isFirst || !rootIcon)\"\n             mat-button class=\"breadcrumb\"\n             (click)=\"goToPath(node)\" elderStopEventPropagation\n          >\n            <span>{{node.name}}</span>\n          </a>\n\n          <!-- last element (is last and (not first or root icon)) -->\n          <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!isFirst || !rootIcon)\"\n             (click)=\"null\" elderStopEventPropagation\n          >\n            {{node.name}}\n            <mat-icon>arrow_drop_down</mat-icon>\n          </a>\n\n        </div>\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb action menu button -->\n  <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    <mat-icon style=\"font-size: 22px\">arrow_drop_down</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n\n      <button mat-menu-item type=\"button\" [elderClipboardPut]=\"path\">\n        <mat-icon>content_copy</mat-icon>\n        <span>{{'Pfad kopieren'}}</span>\n      </button>\n\n      <button mat-menu-item type=\"button\" (click)=\"onMenuEditPathClick($event)\" elderStopEventPropagation>\n        <mat-icon *ngIf=\"!editMode.enabled\">edit</mat-icon>\n        <mat-icon *ngIf=\"editMode.enabled\">done</mat-icon>\n        <span *ngIf=\"!editMode.enabled\">{{'Pfad editieren'}}</span>\n        <span *ngIf=\"editMode.enabled\">{{'Pfad best\u00E4tigen'}}</span>\n      </button>\n\n    </mat-menu>\n\n  </button>\n</div>\n\n\n", styles: [".breadcrumb-path{padding:0 8px}.breadcrumb{padding-left:4px;padding-right:4px;font-size:18px;font-weight:400}\n"] }]
@@ -17799,7 +17944,7 @@ class ElderShellComponent {
     }
 }
 ElderShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderShellComponent, selector: "elder-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", menuColor: "menuColor", menuIconColor: "menuIconColor" }, 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\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\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 mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\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\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\" class=\"flex-none\" style=\"max-width: 100%; min-width: 100%\" >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\"\n                 [color]=\"menuColor$ | async\"\n                 class=\"flex-none\" style=\"width: auto\"\n    >\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i6$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderShellComponent, selector: "elder-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", menuColor: "menuColor", menuIconColor: "menuIconColor" }, 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\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\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 mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\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\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\" class=\"flex-none\" style=\"max-width: 100%; min-width: 100%\" >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\"\n                 [color]=\"menuColor$ | async\"\n                 class=\"flex-none\" style=\"width: auto\"\n    >\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\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}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i6$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\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 mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\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\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\" class=\"flex-none\" style=\"max-width: 100%; min-width: 100%\" >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\"\n                 [color]=\"menuColor$ | async\"\n                 class=\"flex-none\" style=\"width: auto\"\n    >\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\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}\n"] }]
@@ -17946,7 +18091,7 @@ class ElderShellNavigationToggleComponent {
     }
 }
 ElderShellNavigationToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderShellNavigationToggleComponent, deps: [{ token: i1$3.Router }, { token: ElderShellService }], target: i0.ɵɵFactoryTarget.Component });
-ElderShellNavigationToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderShellNavigationToggleComponent, selector: "elder-shell-nav-toggle", inputs: { roots: "roots", hide: "hide" }, ngImport: i0, template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
+ElderShellNavigationToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderShellNavigationToggleComponent, selector: "elder-shell-nav-toggle", inputs: { roots: "roots", hide: "hide" }, ngImport: i0, template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderShellNavigationToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell-nav-toggle', template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n" }]
@@ -18043,7 +18188,7 @@ class ElderAppHeaderComponent {
     }
 }
 ElderAppHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAppHeaderComponent, deps: [{ token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ElderAppHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAppHeaderComponent, selector: "elder-app-header", inputs: { icon: "icon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAppHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAppHeaderComponent, selector: "elder-app-header", inputs: { icon: "icon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-panel [color]=\"color$ | async\" class=\"layout-col full light\">\n  <div class=\"layout-row flex-none p-lg\">\n    <div class=\"layout-row place-center-center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div class=\"layout-col place-center-start\">\n      <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n        <div class=\"layout-row place-start-end gap-xs\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div class=\"layout-row place-start-center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"] }]
@@ -18139,7 +18284,9 @@ ElderShellModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         MatListModule,
         MatButtonModule,
         ElderToolbarModule,
-        TranslateModule, ElderPanelModule, ElderThemeModule], exports: [ElderShellComponent,
+        ElderPanelModule,
+        ElderThemeModule,
+        TranslateModule], exports: [ElderShellComponent,
         ElderShellSideLeftDirective,
         ElderShellSideRightDirective,
         ElderShellCenterDirective,
@@ -18153,7 +18300,9 @@ ElderShellModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
         MatListModule,
         MatButtonModule,
         ElderToolbarModule,
-        TranslateModule, ElderPanelModule, ElderThemeModule] });
+        ElderPanelModule,
+        ElderThemeModule,
+        TranslateModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderShellModule, decorators: [{
             type: NgModule,
             args: [{
@@ -18165,7 +18314,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                         MatListModule,
                         MatButtonModule,
                         ElderToolbarModule,
-                        TranslateModule, ElderPanelModule, ElderThemeModule
+                        ElderPanelModule,
+                        ElderThemeModule,
+                        TranslateModule,
                     ],
                     declarations: [
                         ElderShellComponent,
@@ -18520,7 +18671,7 @@ class ElderLocalDateInputComponent extends ElderFormFieldControlBase {
 ElderLocalDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalDateInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
 ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: { zone: "zone", autoDatePicker: "autoDatePicker", arrows: "arrows", today: "today", center: "center", datePickerTouchUi: "datePickerTouchUi", allowNull: "allowNull", datePickerEnabled: "datePickerEnabled", isoValue: "isoValue", dateValue: "dateValue", isoDateValue: "isoDateValue" }, outputs: { blurred: "blurred", valueUpdatedBlur: "valueUpdatedBlur", isoValueChange: "isoValueChange", dateValueChange: "dateValueChange", isoDateValueChange: "isoDateValueChange" }, providers: [
         { provide: MatFormFieldControl, useExisting: ElderLocalDateInputComponent },
-    ], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"layout-row place-start-center elder-flex-control\"\n>\n\n  <button mat-icon-button type=\"button\" *ngIf=\"arrows\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked || !value\"\n          (click)=\"previousDay()\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <input matInput elderNoSpinner class=\"flex elder-mdc-input-fix elder-local-date-input\" #input\n         type=\"date\"\n         [name]=\"ngControl?.name + '-inner-input'\"\n         [required]=\"!!required\"\n         [readonly]=\"readonly || autoDatePicker\"\n         [disabled]=\"!!disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"date$ | async | date: 'yyyy-MM-dd'\"\n         (ngModelChange)=\"onDateInputChanged($event)\"\n         (blur)=\"blurred.next($event)\"\n         [class.elder-auto-date-picker]=\"autoDatePicker\"\n         [class.noselect]=\"autoDatePicker\"\n         [class.center]=\"center || arrows\"\n         (click)=\"onDateInputClicked($event)\"\n  >\n  <input style=\"display: none\" [matDatepicker]=\"picker\" (dateChange)=\"onDatepickerInputChange($event)\">\n\n  <button mat-icon-button type=\"button\" *ngIf=\"arrows\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked || !value\"\n          (click)=\"nextDay()\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n\n  <button mat-icon-button type=\"button\" *ngIf=\"today\"\n          class=\"elder-control-icon-button\" style=\"margin-left: 4px\"\n          [disabled]=\"isLocked\"\n          (click)=\"currentDay()\">\n    <mat-icon>today</mat-icon>\n  </button>\n\n  <mat-datepicker-toggle class=\"elder-control-icon-button\"\n    *ngIf=\"datePickerEnabled && (!allowNull || (value$ | async) === null)\"\n    [disabled]=\"isLocked\"\n    [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon>calendar_month</mat-icon>\n  </mat-datepicker-toggle>\n\n  <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n          *ngIf=\"allowNull && (value$ | async)\"\n          [disabled]=\"isLocked\"\n          (click)=\"clear($event)\" aria-label=\"Clear\"\n          elderStopEventPropagation\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-datepicker [touchUi]=\"datePickerTouchUi\" #picker></mat-datepicker>\n\n</div>\n\n\n\n", styles: ["input::-webkit-calendar-picker-indicator{display:none}.elder-auto-date-picker{cursor:pointer}.elder-local-date-input.center{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true, static: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"layout-row place-start-center elder-flex-control\"\n>\n\n  <button mat-icon-button type=\"button\" *ngIf=\"arrows\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked || !value\"\n          (click)=\"previousDay()\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n  <input matInput elderNoSpinner class=\"flex elder-mdc-input-fix elder-local-date-input\" #input\n         type=\"date\"\n         [name]=\"ngControl?.name + '-inner-input'\"\n         [required]=\"!!required\"\n         [readonly]=\"readonly || autoDatePicker\"\n         [disabled]=\"!!disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"date$ | async | date: 'yyyy-MM-dd'\"\n         (ngModelChange)=\"onDateInputChanged($event)\"\n         (blur)=\"blurred.next($event)\"\n         [class.elder-auto-date-picker]=\"autoDatePicker\"\n         [class.noselect]=\"autoDatePicker\"\n         [class.center]=\"center || arrows\"\n         (click)=\"onDateInputClicked($event)\"\n  >\n  <input style=\"display: none\" [matDatepicker]=\"picker\" (dateChange)=\"onDatepickerInputChange($event)\">\n\n  <button mat-icon-button type=\"button\" *ngIf=\"arrows\"\n          class=\"elder-control-icon-button\"\n          [disabled]=\"isLocked || !value\"\n          (click)=\"nextDay()\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n\n  <button mat-icon-button type=\"button\" *ngIf=\"today\"\n          class=\"elder-control-icon-button\" style=\"margin-left: 4px\"\n          [disabled]=\"isLocked\"\n          (click)=\"currentDay()\">\n    <mat-icon>today</mat-icon>\n  </button>\n\n  <mat-datepicker-toggle class=\"elder-control-icon-button\"\n    *ngIf=\"datePickerEnabled && (!allowNull || (value$ | async) === null)\"\n    [disabled]=\"isLocked\"\n    [for]=\"picker\">\n    <mat-icon matDatepickerToggleIcon>calendar_month</mat-icon>\n  </mat-datepicker-toggle>\n\n  <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n          *ngIf=\"allowNull && (value$ | async)\"\n          [disabled]=\"isLocked\"\n          (click)=\"clear($event)\" aria-label=\"Clear\"\n          elderStopEventPropagation\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <mat-datepicker [touchUi]=\"datePickerTouchUi\" #picker></mat-datepicker>\n\n</div>\n\n\n\n", styles: ["input::-webkit-calendar-picker-indicator{display:none}.elder-auto-date-picker{cursor:pointer}.elder-local-date-input.center{text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalDateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-local-date-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -18963,7 +19114,7 @@ class ElderIntervalInputComponent extends ElderFormFieldControlBase {
 ElderIntervalInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderIntervalInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
 ElderIntervalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderIntervalInputComponent, selector: "elder-interval-input", inputs: { zone: "zone", mode: "mode", isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: [
         { provide: MatFormFieldControl, useExisting: ElderIntervalInputComponent },
-    ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\n\n  <!-- DATE_TIME_RANGE -->\n  <div *ngSwitchCase=\"'date-time-range'\"\n       class=\"layout-row\">\n    <elder-date-time-input class=\"flex\" center\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('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 class=\"flex\" center\n      [value]=\"(value$ | async)?.end\"\n      (valueUpdated)=\"onEndChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-date-time-input>\n  </div>\n\n  <!-- DAY_TIME_RANGE -->\n  <div *ngSwitchCase=\"'day-time-range'\"\n       class=\"layout-row gap-xs elder-flex-interval-control\">\n\n    <!--  [name]=\"name + '-day-start'\" -->\n    <elder-date-time-input\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onDayTimeStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('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]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-time-input>\n  </div>\n\n  <!-- DATE_RANGE -->\n  <div *ngSwitchCase=\"'date-range'\"\n       class=\"layout-row gap-xs elder-flex-interval-control\">\n\n    <mat-date-range-input\n      [rangePicker]=\"picker\"\n      [disabled]=\"!!disabled\"\n    >\n      <input matStartDate\n             placeholder=\"dd.mm.yyy\"\n             [ngModel]=\"startDate$ | async\" name=\"date-range.start\"\n             [ngModelOptions]=\"{ standalone: true, updateOn: 'blur'}\"\n             (ngModelChange)=\"onStartDateChanged($event)\"\n             [readonly]=\"readonly\"\n             [disabled]=\"!!disabled\"\n      >\n      <input matEndDate\n             placeholder=\"dd.mm.yyy\"\n             [ngModel]=\"endDate$ | async\" 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    <mat-datepicker-toggle class=\"elder-control-icon-button\"\n                           [disabled]=\"isLocked\"\n                           [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon>calendar_month</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <!--\n    <elder-local-date-input\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onStartDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-local-date-input>\n    <elder-local-date-input\n      [value]=\"endDate$ | async\"\n      (valueUpdated)=\"onEndDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-date-input>\n    -->\n  </div>\n\n  <!-- SINGLE_DAY -->\n  <div *ngSwitchCase=\"'single-day'\"\n       class=\"layout-row elder-flex-control\">\n\n    <!-- [name]=\"name\" -->\n    <elder-local-date-input class=\"flex\" center\n      [value]=\"startLocalDate$ | async\"\n      (valueUpdated)=\"onSingleDayDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '')\"\n    ></elder-local-date-input>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".elder-flex-interval-control{flex:1 1 auto;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\n\n  <!-- DATE_TIME_RANGE -->\n  <div *ngSwitchCase=\"'date-time-range'\"\n       class=\"layout-row\">\n    <elder-date-time-input class=\"flex\" center\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('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 class=\"flex\" center\n      [value]=\"(value$ | async)?.end\"\n      (valueUpdated)=\"onEndChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-date-time-input>\n  </div>\n\n  <!-- DAY_TIME_RANGE -->\n  <div *ngSwitchCase=\"'day-time-range'\"\n       class=\"layout-row gap-xs elder-flex-interval-control\">\n\n    <!--  [name]=\"name + '-day-start'\" -->\n    <elder-date-time-input\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onDayTimeStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('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]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-time-input>\n  </div>\n\n  <!-- DATE_RANGE -->\n  <div *ngSwitchCase=\"'date-range'\"\n       class=\"layout-row gap-xs elder-flex-interval-control\">\n\n    <mat-date-range-input\n      [rangePicker]=\"picker\"\n      [disabled]=\"!!disabled\"\n    >\n      <input matStartDate\n             placeholder=\"dd.mm.yyy\"\n             [ngModel]=\"startDate$ | async\" name=\"date-range.start\"\n             [ngModelOptions]=\"{ standalone: true, updateOn: 'blur'}\"\n             (ngModelChange)=\"onStartDateChanged($event)\"\n             [readonly]=\"readonly\"\n             [disabled]=\"!!disabled\"\n      >\n      <input matEndDate\n             placeholder=\"dd.mm.yyy\"\n             [ngModel]=\"endDate$ | async\" 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    <mat-datepicker-toggle class=\"elder-control-icon-button\"\n                           [disabled]=\"isLocked\"\n                           [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon>calendar_month</mat-icon>\n    </mat-datepicker-toggle>\n    <mat-date-range-picker #picker></mat-date-range-picker>\n\n    <!--\n    <elder-local-date-input\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onStartDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-local-date-input>\n    <elder-local-date-input\n      [value]=\"endDate$ | async\"\n      (valueUpdated)=\"onEndDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-date-input>\n    -->\n  </div>\n\n  <!-- SINGLE_DAY -->\n  <div *ngSwitchCase=\"'single-day'\"\n       class=\"layout-row elder-flex-control\">\n\n    <!-- [name]=\"name\" -->\n    <elder-local-date-input class=\"flex\" center\n      [value]=\"startLocalDate$ | async\"\n      (valueUpdated)=\"onSingleDayDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '')\"\n    ></elder-local-date-input>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".elder-flex-interval-control{flex:1 1 auto;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i5$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$5.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$5.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderIntervalInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-interval-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -19499,7 +19650,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table matSort class=\"flex\"\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set><mat-chip>{{localized.locale}}</mat-chip></mat-chip-set>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n              [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n\n\n\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, mat-chip", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table matSort class=\"flex\"\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set><mat-chip>{{localized.locale}}</mat-chip></mat-chip-set>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n              [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n\n\n\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, mat-chip", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalizedInputTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), template: "<div class=\"layout-col full\">\n  <elder-table matSort class=\"flex\"\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set><mat-chip>{{localized.locale}}</mat-chip></mat-chip-set>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n              [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n\n\n\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n" }]
@@ -19527,7 +19678,7 @@ class ElderLocalizedInputDialogComponent {
     }
 }
 ElderLocalizedInputDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalizedInputDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLocalizedInputDialogComponent, selector: "elder-localized-input-dialog", ngImport: i0, template: "\n<div class=\"layout-col full\">\n\n  <mat-toolbar color=\"primary\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <mat-icon class=\"noselect\">translate</mat-icon>\n      <h2 class=\"noselect\" translate>{{data.title}}</h2>\n      <span class=\"flex\"></span>\n      <button *ngIf=\"data.explicitSave\"\n              mat-icon-button type=\"submit\"\n              [disabled]=\"data.readonly\"\n              [mat-dialog-close]=\"data.localizables\"\n      >\n        <mat-icon>save</mat-icon>\n      </button>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-sm\">\n    <elder-localized-input-table\n      [float]=\"true\" class=\"flex\"\n      [textColumns]=\"data.textColumns\"\n      [(value)]=\"data.localizables\"\n      [readonly]=\"data.readonly\"\n      [disabled]=\"data.disabled\"\n      [required]=\"data.required\"\n    >\n    </elder-localized-input-table>\n  </div>\n</div>\n\n\n\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: ["dense", "float", "embedded", "textColumns", "defaultLanguageTags"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLocalizedInputDialogComponent, selector: "elder-localized-input-dialog", ngImport: i0, template: "\n<div class=\"layout-col full\">\n\n  <mat-toolbar color=\"primary\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <mat-icon class=\"noselect\">translate</mat-icon>\n      <h2 class=\"noselect\" translate>{{data.title}}</h2>\n      <span class=\"flex\"></span>\n      <button *ngIf=\"data.explicitSave\"\n              mat-icon-button type=\"submit\"\n              [disabled]=\"data.readonly\"\n              [mat-dialog-close]=\"data.localizables\"\n      >\n        <mat-icon>save</mat-icon>\n      </button>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-sm\">\n    <elder-localized-input-table\n      [float]=\"true\" class=\"flex\"\n      [textColumns]=\"data.textColumns\"\n      [(value)]=\"data.localizables\"\n      [readonly]=\"data.readonly\"\n      [disabled]=\"data.disabled\"\n      [required]=\"data.required\"\n    >\n    </elder-localized-input-table>\n  </div>\n</div>\n\n\n\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4$1.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { kind: "component", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: ["dense", "float", "embedded", "textColumns", "defaultLanguageTags"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalizedInputDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div class=\"layout-col full\">\n\n  <mat-toolbar color=\"primary\">\n    <mat-toolbar-row class=\"gap-sm\">\n      <mat-icon class=\"noselect\">translate</mat-icon>\n      <h2 class=\"noselect\" translate>{{data.title}}</h2>\n      <span class=\"flex\"></span>\n      <button *ngIf=\"data.explicitSave\"\n              mat-icon-button type=\"submit\"\n              [disabled]=\"data.readonly\"\n              [mat-dialog-close]=\"data.localizables\"\n      >\n        <mat-icon>save</mat-icon>\n      </button>\n    </mat-toolbar-row>\n  </mat-toolbar>\n\n  <div class=\"layout-col flex p-sm\">\n    <elder-localized-input-table\n      [float]=\"true\" class=\"flex\"\n      [textColumns]=\"data.textColumns\"\n      [(value)]=\"data.localizables\"\n      [readonly]=\"data.readonly\"\n      [disabled]=\"data.disabled\"\n      [required]=\"data.required\"\n    >\n    </elder-localized-input-table>\n  </div>\n</div>\n\n\n\n\n\n\n" }]
@@ -19741,7 +19892,7 @@ class ElderLocalizedInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalizedInputComponent, deps: [{ token: ElderLocalizedInputDialogService }, { token: LocalisationPickerService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLocalizedInputComponent, selector: "elder-localized-input", inputs: { textColumns: "textColumns" }, host: { classAttribute: "elder-form-field-host" }, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex full\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <ng-container matPrefix>\n    <mat-icon *ngIf=\"icon\"\n              class=\"leading-icon prefix-padding noselect\"\n              [color]=\"color\">\n      {{icon}}\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input\n    matInput type=\"text\" class=\"flex-grow\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [placeholder]=\"placeholder | translate\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true}\"\n  >\n\n  <ng-container matSuffix>\n    <button mat-icon-button type=\"button\"\n            (click)=\"openTranslationPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon>translate</mat-icon>\n    </button>\n  </ng-container>\n\n  <mat-hint>{{hintText$ | async}}</mat-hint>\n\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderLocalizedInputComponent, selector: "elder-localized-input", inputs: { textColumns: "textColumns" }, host: { classAttribute: "elder-form-field-host" }, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"flex full\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <ng-container matPrefix>\n    <mat-icon *ngIf=\"icon\"\n              class=\"leading-icon prefix-padding noselect\"\n              [color]=\"color\">\n      {{icon}}\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input\n    matInput type=\"text\" class=\"flex-grow\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [placeholder]=\"placeholder | translate\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true}\"\n  >\n\n  <ng-container matSuffix>\n    <button mat-icon-button type=\"button\"\n            (click)=\"openTranslationPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon>translate</mat-icon>\n    </button>\n  </ng-container>\n\n  <mat-hint>{{hintText$ | async}}</mat-hint>\n\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderLocalizedInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'elder-form-field-host' }, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), template: "<mat-form-field class=\"flex full\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <ng-container matPrefix>\n    <mat-icon *ngIf=\"icon\"\n              class=\"leading-icon prefix-padding noselect\"\n              [color]=\"color\">\n      {{icon}}\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input\n    matInput type=\"text\" class=\"flex-grow\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [placeholder]=\"placeholder | translate\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true}\"\n  >\n\n  <ng-container matSuffix>\n    <button mat-icon-button type=\"button\"\n            (click)=\"openTranslationPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon>translate</mat-icon>\n    </button>\n  </ng-container>\n\n  <mat-hint>{{hintText$ | async}}</mat-hint>\n\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"] }]
@@ -20537,7 +20688,7 @@ class ElderSearchBoxComponent {
     }
 }
 ElderSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component });
-ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matIconPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", appearance: "appearance", dense: "dense" }, host: { classAttribute: "elder-form-field-host" }, queries: [{ propertyName: "advancedSearch", first: true, predicate: ElderSearchPanelComponent, descendants: true }], viewQueries: [{ propertyName: "search", first: true, predicate: ["search"], descendants: true }], exportAs: ["elderSearchBox"], ngImport: i0, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matIconPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "directive", type: ElderOverlayOriginDirective, selector: "[elderOverlayOrigin]", inputs: ["elderOverlayOrigin"] }, { kind: "component", type: ElderDialogPanelComponent, selector: "elder-dialog-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', host: { 'class': 'elder-form-field-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row place-stretch-center full flex\" style=\"overflow: hidden\">\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    [appearance]=\"appearance\"\n    class=\"elder-search-box-field flex-auto\" subscriptSizing=\"dynamic\"\n    [elderDense]=\"dense\">\n\n    <button matIconPrefix mat-icon-button type=\"button\"\n            [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n    >\n      <mat-icon>search</mat-icon>\n    </button>\n\n    <input matInput type=\"text\" [name]=\"name\" [placeholder]=\"placeholder\" #search cdkFocusInitial\n           ngModel\n           elderSearchInput [elderSearchInputKey]=\"queryKey\" #searchInput=\"elderSearchInput\"\n           [autocomplete]=\"(autoPanel && overlayState.hasOverlay) ? 'off' : autocomplete\"\n           [elderOverlayOrigin]=\"searchPanel\"\n           [elderOverlayTrigger]=\"searchPanel\"\n           [elderOverlayTriggerType]=\"'focus'\"\n           [elderOverlayTriggerEnabled]=\"autoPanel && overlayState.hasOverlay && (searchInput?.state$ | async)?.pristine\"\n    >\n    <mat-hint *ngIf=\"hint\">{{hint}}</mat-hint>\n\n    <div class=\"layout-row\" matSuffix *ngIf=\"searchModel.userDefinedAttributes$ | async as userDefinedFilters\">\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"userDefinedFilters.length > 0\"\n              (click)=\"clearSearch($event)\"\n              name=\"clear\" aria-label=\"Clear\">\n        <mat-icon>close</mat-icon>\n      </button>\n\n      <button mat-icon-button type=\"button\"\n              *ngIf=\"overlayState.hasOverlay\" name=\"openPanel\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon\n          [matBadge]=\"userDefinedFilters.length\"\n          matBadgeSize=\"small\"\n          [matBadgeOverlap]=\"true\"\n          [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n          matBadgeColor=\"accent\"\n          [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\"\n        >\n          filter_list\n        </mat-icon>\n      </button>\n    </div>\n  </mat-form-field>\n</div>\n\n\n<!-- Overlay Panel for advanced search -->\n<elder-overlay #searchPanel=\"elderOverlay\">\n  <elder-dialog-panel class=\"elder-search-panel-container\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div class=\"layout-row place-between-center\">\n      <button mat-raised-button type=\"button\" name=\"clear\"\n              (click)=\"clearSearch($event)\">{{'context.reset' | translate}}\n      </button>\n\n      <button mat-raised-button type=\"button\" name=\"ok\" color=\"primary\"\n              (click)=\"searchPanel.closeOverlay()\">Ok\n      </button>\n    </div>\n  </elder-dialog-panel>\n</elder-overlay>\n", styles: [".elder-search-box-field{margin-top:4px;margin-bottom:4px}.elder-search-panel-container{min-width:250px}\n"] }]
@@ -21086,7 +21237,7 @@ class HttpDataTransferComponent {
     }
 }
 HttpDataTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: HttpDataTransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <mat-icon class=\"noselect\">\n      {{state.isCompleted ? 'check' : 'attachment'}}\n    </mat-icon>\n\n    <!--\n    <mat-icon\n      *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n      class=\"green-icon\"\n    >check</mat-icon>\n    -->\n\n  </div>\n\n\n  <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n    <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n    <mat-progress-bar\n      [matTooltip]=\"state.error?.message\"\n      [color]=\"(state.error ? 'warn' : '')\"\n      mode=\"determinate\"\n      [value]=\"state.progress.percentDone\"\n    ></mat-progress-bar>\n\n    <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n  </div>\n\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <button mat-icon-button type=\"button\"\n            (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n      <mat-icon>\n        close\n      </mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <mat-icon class=\"noselect\">\n      {{state.isCompleted ? 'check' : 'attachment'}}\n    </mat-icon>\n\n    <!--\n    <mat-icon\n      *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n      class=\"green-icon\"\n    >check</mat-icon>\n    -->\n\n  </div>\n\n\n  <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n    <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n    <mat-progress-bar\n      [matTooltip]=\"state.error?.message\"\n      [color]=\"(state.error ? 'warn' : '')\"\n      mode=\"determinate\"\n      [value]=\"state.progress.percentDone\"\n    ></mat-progress-bar>\n\n    <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n  </div>\n\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <button mat-icon-button type=\"button\"\n            (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n      <mat-icon>\n        close\n      </mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: HttpDataTransferComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-transfer', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  class=\"layout-row place-start-center gap-lg flex p-md transfer\"\n>\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <mat-icon class=\"noselect\">\n      {{state.isCompleted ? 'check' : 'attachment'}}\n    </mat-icon>\n\n    <!--\n    <mat-icon\n      *ngIf=\"!(statusOf(file)?.error | async) && (statusOf(file)?.progress | async) === 100\"\n      class=\"green-icon\"\n    >check</mat-icon>\n    -->\n\n  </div>\n\n\n  <div class=\"layout-col flex-80\" style=\"overflow: hidden\">\n\n    <span class=\"mat-subtitle-2 noselect title\">{{transfer.name}}</span>\n\n    <mat-progress-bar\n      [matTooltip]=\"state.error?.message\"\n      [color]=\"(state.error ? 'warn' : '')\"\n      mode=\"determinate\"\n      [value]=\"state.progress.percentDone\"\n    ></mat-progress-bar>\n\n    <span class=\"mat-caption noselect\">{{($detail | async)}}</span>\n\n  </div>\n\n\n  <div class=\"layout-col place-center-center flex-10\">\n    <button mat-icon-button type=\"button\"\n            (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n      <mat-icon>\n        close\n      </mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\n"] }]
@@ -21258,7 +21409,7 @@ class HttpDataTransferIndicatorComponent {
     }
 }
 HttpDataTransferIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: HttpDataTransferIndicatorComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: HttpDataTransferIndicatorComponent, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <button mat-icon-button type=\"button\"\n          class=\"layout-row place-center-center\"\n          [elderOverlayTrigger]=\"overlay\">\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"24\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\">\n  </elder-data-transfer-overview>\n</elder-overlay>\n\n", styles: [".panel{width:380px;height:350px;border-radius:4px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: HttpDataTransferIndicatorComponent, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <button mat-icon-button type=\"button\"\n          class=\"layout-row place-center-center\"\n          [elderOverlayTrigger]=\"overlay\">\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"24\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\">\n  </elder-data-transfer-overview>\n</elder-overlay>\n\n", styles: [".panel{width:380px;height:350px;border-radius:4px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: HttpDataTransferIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-transfer-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n  <button mat-icon-button type=\"button\"\n          class=\"layout-row place-center-center\"\n          [elderOverlayTrigger]=\"overlay\">\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"24\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\">\n  </elder-data-transfer-overview>\n</elder-overlay>\n\n", styles: [".panel{width:380px;height:350px;border-radius:4px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"] }]
@@ -21410,7 +21561,7 @@ class ElderOfflineIndicatorComponent {
     }
 }
 ElderOfflineIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderOfflineIndicatorComponent, deps: [{ token: ElderConnectivityService }], target: i0.ɵɵFactoryTarget.Component });
-ElderOfflineIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderOfflineIndicatorComponent, selector: "elder-offline-indicator", ngImport: i0, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderOfflineIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderOfflineIndicatorComponent, selector: "elder-offline-indicator", ngImport: i0, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderOfflineIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-offline-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n" }]
@@ -21710,7 +21861,7 @@ class ElderGlobalSearchComponent {
     }
 }
 ElderGlobalSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderGlobalSearchComponent, deps: [{ token: i1$3.Router }, { token: ElderGlobalSearchService }], target: i0.ɵɵFactoryTarget.Component });
-ElderGlobalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderGlobalSearchComponent, selector: "elder-global-search", inputs: { hideWhenDisabled: "hideWhenDisabled", searchCollapsed: "searchCollapsed" }, outputs: { searchCollapsedChange: "searchCollapsedChange" }, viewQueries: [{ propertyName: "txtSearch", first: true, predicate: ["txtSearch"], descendants: true }], ngImport: i0, template: "<div class=\"layout-row place-center-center\">\n\n  <span *ngIf=\"searchCollapsed\" class=\"flex\"></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" class=\"layout-row place-center-center flex\">\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" class=\"flex\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input matInput type=\"search\"\n             (keyup)=\"onQueryChanged()\"\n             #txtSearch>\n    </mat-form-field>\n\n    <!-- Sort -->\n    <mat-menu #sortMenu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let sort of availableSort\"\n              class=\"layout-row place-between-center\"\n              (click)=\"sortBy(sort)\"\n      >\n        {{sort.name | translate}}\n        <mat-icon *ngIf=\"selectedSort?.id==sort.id\">check</mat-icon>\n      </button>\n    </mat-menu>\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            [matMenuTriggerFor]=\"sortMenu\">\n      <mat-icon>sort</mat-icon>\n    </button>\n\n    <!-- Sort Asc/Desc-->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            (click)=\"toggleSortAsc()\">\n      <mat-icon>{{sortAsc ? \"arrow_downward\" : \"arrow_upward\"}}</mat-icon>\n    </button>\n  </div>\n\n\n  <!-- Toggle Global Search -->\n  <button mat-icon-button type=\"button\"\n          *ngIf=\"!isSearchHidden\"\n          (click)=\"toggleSearch()\"\n          [disabled]=\"globalSearchDisabled\" >\n    <mat-icon>{{toggleIcon}}</mat-icon>\n  </button>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ElderGlobalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderGlobalSearchComponent, selector: "elder-global-search", inputs: { hideWhenDisabled: "hideWhenDisabled", searchCollapsed: "searchCollapsed" }, outputs: { searchCollapsedChange: "searchCollapsedChange" }, viewQueries: [{ propertyName: "txtSearch", first: true, predicate: ["txtSearch"], descendants: true }], ngImport: i0, template: "<div class=\"layout-row place-center-center\">\n\n  <span *ngIf=\"searchCollapsed\" class=\"flex\"></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" class=\"layout-row place-center-center flex\">\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" class=\"flex\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input matInput type=\"search\"\n             (keyup)=\"onQueryChanged()\"\n             #txtSearch>\n    </mat-form-field>\n\n    <!-- Sort -->\n    <mat-menu #sortMenu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let sort of availableSort\"\n              class=\"layout-row place-between-center\"\n              (click)=\"sortBy(sort)\"\n      >\n        {{sort.name | translate}}\n        <mat-icon *ngIf=\"selectedSort?.id==sort.id\">check</mat-icon>\n      </button>\n    </mat-menu>\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            [matMenuTriggerFor]=\"sortMenu\">\n      <mat-icon>sort</mat-icon>\n    </button>\n\n    <!-- Sort Asc/Desc-->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            (click)=\"toggleSortAsc()\">\n      <mat-icon>{{sortAsc ? \"arrow_downward\" : \"arrow_upward\"}}</mat-icon>\n    </button>\n  </div>\n\n\n  <!-- Toggle Global Search -->\n  <button mat-icon-button type=\"button\"\n          *ngIf=\"!isSearchHidden\"\n          (click)=\"toggleSearch()\"\n          [disabled]=\"globalSearchDisabled\" >\n    <mat-icon>{{toggleIcon}}</mat-icon>\n  </button>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderGlobalSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-global-search', template: "<div class=\"layout-row place-center-center\">\n\n  <span *ngIf=\"searchCollapsed\" class=\"flex\"></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" class=\"layout-row place-center-center flex\">\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" class=\"flex\">\n      <mat-icon matPrefix>search</mat-icon>\n      <input matInput type=\"search\"\n             (keyup)=\"onQueryChanged()\"\n             #txtSearch>\n    </mat-form-field>\n\n    <!-- Sort -->\n    <mat-menu #sortMenu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let sort of availableSort\"\n              class=\"layout-row place-between-center\"\n              (click)=\"sortBy(sort)\"\n      >\n        {{sort.name | translate}}\n        <mat-icon *ngIf=\"selectedSort?.id==sort.id\">check</mat-icon>\n      </button>\n    </mat-menu>\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            [matMenuTriggerFor]=\"sortMenu\">\n      <mat-icon>sort</mat-icon>\n    </button>\n\n    <!-- Sort Asc/Desc-->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            (click)=\"toggleSortAsc()\">\n      <mat-icon>{{sortAsc ? \"arrow_downward\" : \"arrow_upward\"}}</mat-icon>\n    </button>\n  </div>\n\n\n  <!-- Toggle Global Search -->\n  <button mat-icon-button type=\"button\"\n          *ngIf=\"!isSearchHidden\"\n          (click)=\"toggleSearch()\"\n          [disabled]=\"globalSearchDisabled\" >\n    <mat-icon>{{toggleIcon}}</mat-icon>\n  </button>\n</div>\n\n\n" }]
@@ -21799,7 +21950,7 @@ class TemplatedSelectionDialogComponent {
     }
 }
 TemplatedSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SelectionModel }], target: i0.ɵɵFactoryTarget.Component });
-TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-templated-selection-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full\">\n  <mat-toolbar elderTheme class=\"flex-none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span class=\"flex\"></span>\n    <button mat-stroked-button type=\"submit\" color=\"accent\"\n            *ngIf=\"selectionModel.selection | async as selection\"\n            [disabled]=\"!selection || selection.length === 0\"\n            [mat-dialog-close]=\"selection\"\n    >\n      {{'actions.select' | translate}}\n    </button>\n  </mat-toolbar>\n  <div class=\"layout-col flex\" style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n" }]
@@ -22402,7 +22553,7 @@ class ElderAutocompleteComponent {
     }
 }
 ElderAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", optionValueConverterFn: "optionValueConverterFn", enabled: "enabled", valueTemplate: "valueTemplate", dataContext: "dataContext", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderAutocomplete"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div class=\"layout-row place-start-center gap-sm\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"mat-caption\">DataContext Closed!</span>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"availableSuggestions$ | async as suggestions\">\n\n      <mat-option *ngIf=\"suggestions.length === 0\" disabled>\n        No Data.\n      </mat-option>\n\n      <ng-container *ngFor=\"let suggestion of suggestions\">\n        <mat-option\n          *ngIf=\"isOptionVisible(suggestion)\"\n          [value]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", optionValueConverterFn: "optionValueConverterFn", enabled: "enabled", valueTemplate: "valueTemplate", dataContext: "dataContext", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderAutocomplete"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div class=\"layout-row place-start-center gap-sm\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"mat-caption\">DataContext Closed!</span>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"availableSuggestions$ | async as suggestions\">\n\n      <mat-option *ngIf=\"suggestions.length === 0\" disabled>\n        No Data.\n      </mat-option>\n\n      <ng-container *ngFor=\"let suggestion of suggestions\">\n        <mat-option\n          *ngIf=\"isOptionVisible(suggestion)\"\n          [value]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-autocomplete', exportAs: 'elderAutocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div class=\"layout-row place-start-center gap-sm\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"mat-caption\">DataContext Closed!</span>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"availableSuggestions$ | async as suggestions\">\n\n      <mat-option *ngIf=\"suggestions.length === 0\" disabled>\n        No Data.\n      </mat-option>\n\n      <ng-container *ngFor=\"let suggestion of suggestions\">\n        <mat-option\n          *ngIf=\"isOptionVisible(suggestion)\"\n          [value]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n" }]
@@ -23033,7 +23184,7 @@ ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderSelectComponent)
         }
-    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"layout-row place-start-center elder-flex-control\"\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\"\n         class=\"elder-input-prefix-icon-container flex-none\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-mdc-control-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" class=\"flex-grow elder-select-input mdc-text-field__input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [dataContext]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div class=\"layout-row place-start-center flex-none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete && !entityWrapper.displayRemove\"\n      class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"selectionPopup && !entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n    </button>\n\n\n  </div>\n</div>\n\n\n\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataContext", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"layout-row place-start-center elder-flex-control\"\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\"\n         class=\"elder-input-prefix-icon-container flex-none\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-mdc-control-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" class=\"flex-grow elder-select-input mdc-text-field__input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [dataContext]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div class=\"layout-row place-start-center flex-none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete && !entityWrapper.displayRemove\"\n      class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"selectionPopup && !entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n    </button>\n\n\n  </div>\n</div>\n\n\n\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataContext", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -24009,7 +24160,7 @@ ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
         }
-    ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n\n  <mat-chip-set #chips>\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" disabled\n                  class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.color\"\n                [removable]=\"chipModel.removeable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removeable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n\n  <mat-chip-set #chips>\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" disabled\n                  class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.color\"\n                [removable]=\"chipModel.removeable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removeable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: i4$6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -24763,7 +24914,7 @@ class ElderQuantityFormFieldComponent extends ElderFromFieldCustomizableBase {
     }
 }
 ElderQuantityFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderQuantityFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderQuantityFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderQuantityFormFieldComponent, selector: "elder-quantity-form-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <span matIconPrefix *ngIf=\"showIcon && icon\">\n      <mat-icon [inline]=\"true\">{{icon}}</mat-icon>\n  </span>\n\n  <ng-content></ng-content>\n\n  <mat-hint *ngIf=\"showHint\" align=\"end\">\n    <span *ngIf=\"hint\">{{hint}}</span>\n  </mat-hint>\n\n  <mat-error elderValidationError></mat-error>\n\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderValidationErrorDirective, selector: "mat-error[elderValidationError]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderQuantityFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderQuantityFormFieldComponent, selector: "elder-quantity-form-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <span matIconPrefix *ngIf=\"showIcon && icon\">\n      <mat-icon [inline]=\"true\">{{icon}}</mat-icon>\n  </span>\n\n  <ng-content></ng-content>\n\n  <mat-hint *ngIf=\"showHint\" align=\"end\">\n    <span *ngIf=\"hint\">{{hint}}</span>\n  </mat-hint>\n\n  <mat-error elderValidationError></mat-error>\n\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: ElderValidationErrorDirective, selector: "mat-error[elderValidationError]" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderQuantityFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-quantity-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <span matIconPrefix *ngIf=\"showIcon && icon\">\n      <mat-icon [inline]=\"true\">{{icon}}</mat-icon>\n  </span>\n\n  <ng-content></ng-content>\n\n  <mat-hint *ngIf=\"showHint\" align=\"end\">\n    <span *ngIf=\"hint\">{{hint}}</span>\n  </mat-hint>\n\n  <mat-error elderValidationError></mat-error>\n\n</mat-form-field>\n" }]
@@ -26022,7 +26173,7 @@ class ElderUrlFragmentSwitcherComponent {
     }
 }
 ElderUrlFragmentSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderUrlFragmentSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderUrlFragmentSwitcherComponent, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div class=\"layout-col\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderUrlFragmentSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderUrlFragmentSwitcherComponent, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div class=\"layout-col\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-url-fragment-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div class=\"layout-col\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"] }]
@@ -26496,7 +26647,7 @@ class ElderCsvExportBtnComponent {
     }
 }
 ElderCsvExportBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderCsvExportBtnComponent, deps: [{ token: CsvStreamExporterBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-ElderCsvExportBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderCsvExportBtnComponent, selector: "elder-csv-export-btn", inputs: { dataSource: "dataSource", csvSpec: "csvSpec", filters: "filters", sorts: "sorts", chunkSize: "chunkSize" }, ngImport: i0, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderCsvExportBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderCsvExportBtnComponent, selector: "elder-csv-export-btn", inputs: { dataSource: "dataSource", csvSpec: "csvSpec", filters: "filters", sorts: "sorts", chunkSize: "chunkSize" }, ngImport: i0, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderCsvExportBtnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-csv-export-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n" }]
@@ -26680,7 +26831,7 @@ class IframeHostComponent {
     }
 }
 IframeHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: IframeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IframeHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { message: "message", close: "close" }, host: { listeners: { "window:message": "onWindowMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div class=\"layout-col full\">\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             class=\"layout-row place-center-center flex\"\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe flex\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n      <mat-toolbar *ngIf=\"!ctx.params.hideActionBar\" elderTheme class=\"layout-row place-between-center flex-none elder-dense-toolbar\">\n\n        <a mat-icon-button (click)=\"doClose($event)\" class=\"elder-icon-button-sm\">\n          <mat-icon>close</mat-icon>\n        </a>\n\n        <a mat-icon-button class=\"elder-icon-button-sm\"\n           [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n          <mat-icon>open_in_new</mat-icon>\n        </a>\n      </mat-toolbar>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}.elder-dense-toolbar,.elder-dense-toolbar .mat-toolbar-row{height:40px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IframeHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { message: "message", close: "close" }, host: { listeners: { "window:message": "onWindowMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div class=\"layout-col full\">\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             class=\"layout-row place-center-center flex\"\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe flex\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n      <mat-toolbar *ngIf=\"!ctx.params.hideActionBar\" elderTheme class=\"layout-row place-between-center flex-none elder-dense-toolbar\">\n\n        <a mat-icon-button (click)=\"doClose($event)\" class=\"elder-icon-button-sm\">\n          <mat-icon>close</mat-icon>\n        </a>\n\n        <a mat-icon-button class=\"elder-icon-button-sm\"\n           [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n          <mat-icon>open_in_new</mat-icon>\n        </a>\n      </mat-toolbar>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}.elder-dense-toolbar,.elder-dense-toolbar .mat-toolbar-row{height:40px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: IframeHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div class=\"layout-col full\">\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             class=\"layout-row place-center-center flex\"\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe #iframe\n                *ngIf=\"!ctx.state.hasError\"\n                (load)=\"onIframeLoadEvent($event)\"\n                (error)=\"onIframeErrorEvent($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe flex\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n      <mat-toolbar *ngIf=\"!ctx.params.hideActionBar\" elderTheme class=\"layout-row place-between-center flex-none elder-dense-toolbar\">\n\n        <a mat-icon-button (click)=\"doClose($event)\" class=\"elder-icon-button-sm\">\n          <mat-icon>close</mat-icon>\n        </a>\n\n        <a mat-icon-button class=\"elder-icon-button-sm\"\n           [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n          <mat-icon>open_in_new</mat-icon>\n        </a>\n      </mat-toolbar>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}.elder-dense-toolbar,.elder-dense-toolbar .mat-toolbar-row{height:40px}\n"] }]
@@ -27262,7 +27413,7 @@ class ElderExceptionDetailComponent {
     }
 }
 ElderExceptionDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExceptionDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderExceptionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderExceptionDetailComponent, selector: "elder-exception-detail", inputs: { expanded: "expanded", stacktraceRows: "stacktraceRows", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"errorCtx$ | async as errorCtx\">\n\n  <mat-accordion *ngIf=\"errorCtx.detail as error\" class=\"full\">\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\" class=\"noselect\">warning</mat-icon>\n          <span class=\"noselect\">{{errorCtx.panelTitle}}</span>\n        </mat-panel-title>\n        <mat-panel-description class=\"noselect\">\n          <span class=\"mat-caption\">{{errorCtx.panelDescription}}</span>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n\n      <div class=\"layout-col flex\" style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n", styles: [".stacktrace{font-size:11px;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll;background-color:#575757;color:#d0b795}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderExceptionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderExceptionDetailComponent, selector: "elder-exception-detail", inputs: { expanded: "expanded", stacktraceRows: "stacktraceRows", error: "error" }, ngImport: i0, template: "<ng-container *ngIf=\"errorCtx$ | async as errorCtx\">\n\n  <mat-accordion *ngIf=\"errorCtx.detail as error\" class=\"full\">\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\" class=\"noselect\">warning</mat-icon>\n          <span class=\"noselect\">{{errorCtx.panelTitle}}</span>\n        </mat-panel-title>\n        <mat-panel-description class=\"noselect\">\n          <span class=\"mat-caption\">{{errorCtx.panelDescription}}</span>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n\n      <div class=\"layout-col flex\" style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n", styles: [".stacktrace{font-size:11px;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll;background-color:#575757;color:#d0b795}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderExceptionDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-exception-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"errorCtx$ | async as errorCtx\">\n\n  <mat-accordion *ngIf=\"errorCtx.detail as error\" class=\"full\">\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\" class=\"noselect\">warning</mat-icon>\n          <span class=\"noselect\">{{errorCtx.panelTitle}}</span>\n        </mat-panel-title>\n        <mat-panel-description class=\"noselect\">\n          <span class=\"mat-caption\">{{errorCtx.panelDescription}}</span>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n\n      <div class=\"layout-col flex\" style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n", styles: [".stacktrace{font-size:11px;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll;background-color:#575757;color:#d0b795}\n"] }]
@@ -27324,7 +27475,7 @@ class ElderAuditedEntityComponent {
     }
 }
 ElderAuditedEntityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAuditedEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderAuditedEntityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAuditedEntityComponent, selector: "elder-audited-entity", inputs: { appearance: "appearance", dateFormat: "dateFormat", audited: "audited" }, ngImport: i0, template: "<section class=\"layout-row wrap gap-sm\" *ngIf=\"auditedCtx$ | async as ctx\">\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label class=\"layout-row place-start-center gap-xs\">\n      <mat-icon class=\"decent noselect\" inline>add_circle_outline</mat-icon>\n      <span>{{'context.createdAt' | translate}} {{ctx.audited?.createdAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"created\"\n           [value]=\"ctx.audited?.createdAt | date:dateFormat\"\n           readonly>\n    <mat-hint>{{ctx.audited?.createdBy}}</mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label class=\"layout-row place-start-center gap-xs\">\n      <mat-icon class=\"decent noselect\">mode_edit_outline</mat-icon>\n      <span>{{'context.modifiedAt' | translate}} {{ctx.audited?.modifiedAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"modified\"\n           [value]=\"ctx.audited?.modifiedAt | date:dateFormat\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n</section>\n", styles: [".decent{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAuditedEntityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ElderAuditedEntityComponent, selector: "elder-audited-entity", inputs: { appearance: "appearance", dateFormat: "dateFormat", audited: "audited" }, ngImport: i0, template: "<section class=\"layout-row wrap gap-sm\" *ngIf=\"auditedCtx$ | async as ctx\">\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label class=\"layout-row place-start-center gap-xs\">\n      <mat-icon class=\"decent noselect\" inline>add_circle_outline</mat-icon>\n      <span>{{'context.createdAt' | translate}} {{ctx.audited?.createdAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"created\"\n           [value]=\"ctx.audited?.createdAt | date:dateFormat\"\n           readonly>\n    <mat-hint>{{ctx.audited?.createdBy}}</mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label class=\"layout-row place-start-center gap-xs\">\n      <mat-icon class=\"decent noselect\">mode_edit_outline</mat-icon>\n      <span>{{'context.modifiedAt' | translate}} {{ctx.audited?.modifiedAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"modified\"\n           [value]=\"ctx.audited?.modifiedAt | date:dateFormat\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n</section>\n", styles: [".decent{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ElderAuditedEntityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-audited-entity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"layout-row wrap gap-sm\" *ngIf=\"auditedCtx$ | async as ctx\">\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label class=\"layout-row place-start-center gap-xs\">\n      <mat-icon class=\"decent noselect\" inline>add_circle_outline</mat-icon>\n      <span>{{'context.createdAt' | translate}} {{ctx.audited?.createdAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"created\"\n           [value]=\"ctx.audited?.createdAt | date:dateFormat\"\n           readonly>\n    <mat-hint>{{ctx.audited?.createdBy}}</mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label class=\"layout-row place-start-center gap-xs\">\n      <mat-icon class=\"decent noselect\">mode_edit_outline</mat-icon>\n      <span>{{'context.modifiedAt' | translate}} {{ctx.audited?.modifiedAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"modified\"\n           [value]=\"ctx.audited?.modifiedAt | date:dateFormat\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n</section>\n", styles: [".decent{opacity:.5}\n"] }]
@@ -28340,5 +28491,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map