@elderbyte/ngx-starter 14.12.0-beta → 14.12.0-beta2

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -17,7 +17,7 @@ import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as i4$1 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormField, MatFormFieldModule } from '@angular/material/form-field';
 import * as i1$4 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
@@ -27,7 +27,7 @@ import * as i4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/toolbar';
+import * as i4$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i2$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -35,15 +35,15 @@ import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i6$1 from '@angular/material/chips';
+import * as i6 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i1$6 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3 from '@angular/material/core';
+import * as i3$1 from '@angular/material/core';
 import { mixinColor, MatCommonModule, MatRippleModule, NativeDateAdapter, MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i2$4 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i3$1 from '@angular/material/progress-bar';
+import * as i3$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$7 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
@@ -69,14 +69,14 @@ import * as i1$a from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import * as i2$5 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
-import * as i3$2 from '@angular/cdk/layout';
+import * as i3$3 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import * as i9 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i4$5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i6$2 from '@angular/material/sidenav';
+import * as i6$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
@@ -86,7 +86,7 @@ import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1$b from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i6$3 from '@angular/material/progress-spinner';
+import * as i6$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as StreamSaver from 'streamsaver';
 import * as i2$6 from '@angular/material/expansion';
@@ -8674,14 +8674,14 @@ class ElderThemeDirective {
         }
     }
 }
-ElderThemeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderThemeDirective, deps: [{ token: i6.MatToolbar, host: true, optional: true }, { token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Directive });
+ElderThemeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderThemeDirective, deps: [{ token: i4$1.MatToolbar, host: true, optional: true }, { token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Directive });
 ElderThemeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.10", type: ElderThemeDirective, selector: "[elderTheme]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderThemeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderTheme]'
                 }]
-        }], ctorParameters: function () { return [{ type: i6.MatToolbar, decorators: [{
+        }], ctorParameters: function () { return [{ type: i4$1.MatToolbar, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -9028,7 +9028,7 @@ class ElderLabelInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLabelInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLabelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLabelInputComponent, selector: "elder-label-input, ebs-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-list #chips>\n    <mat-chip *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [selectable]=\"selectable\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\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-list>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.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: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { 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: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLabelInputComponent, selector: "elder-label-input, ebs-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-list #chips>\n    <mat-chip *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [selectable]=\"selectable\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\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-list>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.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: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { 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: i1$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLabelInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-label-input, ebs-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-list #chips>\n    <mat-chip *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [selectable]=\"selectable\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\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-list>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\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"] }]
@@ -9389,7 +9389,7 @@ class ElderFileUploadComponent {
     }
 }
 ElderFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderFileUploadComponent, selector: "elder-file-upload, ebs-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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i3.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i2$4.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
+ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderFileUploadComponent, selector: "elder-file-upload, ebs-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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i2$4.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i2$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-upload, ebs-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" }]
@@ -11385,10 +11385,10 @@ class ElderConfirmDialogComponent {
     }
 }
 ElderConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$8.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderConfirmDialogComponent, selector: "elder-confirm-dialog", ngImport: i0, template: "\n<h2 matDialogTitle translate>{{ title }}</h2>\n\n\n<mat-dialog-content>\n  <p translate>{{ message }}</p>\n</mat-dialog-content>\n\n\n<mat-dialog-actions class=\"layout-row place-end-center\" cdkTrapFocus>\n\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\n</mat-dialog-actions>\n\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$8.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$8.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$8.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$8.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: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-confirm-dialog', template: "\n<h2 matDialogTitle translate>{{ title }}</h2>\n\n\n<mat-dialog-content>\n  <p translate>{{ message }}</p>\n</mat-dialog-content>\n\n\n<mat-dialog-actions class=\"layout-row place-end-center\" cdkTrapFocus>\n\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\n</mat-dialog-actions>\n\n" }]
+            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 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" }]
         }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }]; } });
 
 class QuestionDialogConfig extends ElderDialogConfig {
@@ -11411,10 +11411,10 @@ class ElderQuestionDialogComponent {
     }
 }
 ElderQuestionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderQuestionDialogComponent, deps: [{ token: i1$8.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderQuestionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderQuestionDialogComponent, selector: "elder-question-dialog", ngImport: i0, template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" class=\"layout-col\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <mat-dialog-content>\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    </mat-dialog-content>\n\n    <mat-dialog-actions class=\"layout-row place-end-center\">\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\n    </mat-dialog-actions>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$8.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$8.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$8.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+ElderQuestionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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 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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$8.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: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderQuestionDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-question-dialog', template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" class=\"layout-col\" (ngSubmit)=\"confirm($event)\" cdkTrapFocus>\n\n    <mat-dialog-content>\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    </mat-dialog-content>\n\n    <mat-dialog-actions class=\"layout-row place-end-center\">\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\n    </mat-dialog-actions>\n\n</form>\n" }]
+            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 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" }]
         }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -11477,7 +11477,7 @@ class ElderDialogService {
             const title = messages.get('title');
             const message = messages.get('message');
             let dialogRef;
-            dialogRef = this.dialog.open(ElderConfirmDialogComponent, config.config);
+            dialogRef = this.dialog.open(ElderConfirmDialogComponent, this.matDialogConfig(config));
             dialogRef.componentInstance.title = title;
             dialogRef.componentInstance.message = message;
             dialogRef.componentInstance.yesNo = config.yesNo;
@@ -11515,7 +11515,7 @@ class ElderDialogService {
         return this.resolveTranslatedMap(rawMessages, config.interpolateParams).pipe(switchMap(messages => {
             const title = messages.get('title');
             const question = messages.get('question');
-            const dlgConf = config.config || new MatDialogConfig();
+            const dlgConf = this.matDialogConfig(config);
             dlgConf.data = {
                 title: title,
                 question: question
@@ -11562,6 +11562,13 @@ class ElderDialogService {
             return interpolateParams;
         }));
     }
+    matDialogConfig(config) {
+        const matConfig = config.config ?? new MatDialogConfig();
+        matConfig.panelClass = 'custom-dialog-container';
+        matConfig.minWidth = '50vw';
+        matConfig.height = '40vh';
+        return matConfig;
+    }
 }
 ElderDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDialogService, deps: [{ token: i1$8.MatDialog }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDialogService, providedIn: 'root' });
@@ -11650,6 +11657,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
                 type: Output
             }] } });
 
+class ElderHeaderComponent {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor() { }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() { }
+}
+ElderHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ElderHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderHeaderComponent, selector: "elder-header", inputs: { header: "header", subheader: "subheader" }, ngImport: i0, template: "<div class=\"layout-col mat-typography\">\n  <h2 style=\"margin: 0\">{{header ? header : '-' | translate}}</h2>\n  <span class=\"mat-caption\">{{subheader ? subheader : '-' | translate}}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-header', template: "<div class=\"layout-col mat-typography\">\n  <h2 style=\"margin: 0\">{{header ? header : '-' | translate}}</h2>\n  <span class=\"mat-caption\">{{subheader ? subheader : '-' | translate}}</span>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { header: [{
+                type: Input
+            }], subheader: [{
+                type: Input
+            }] } });
+
+class ElderHeaderModule {
+}
+ElderHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElderHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, declarations: [ElderHeaderComponent], imports: [
+        // Angular
+        CommonModule, RouterModule,
+        // Third Party
+        TranslateModule
+        // Angular Material
+    ], exports: [ElderHeaderComponent] });
+ElderHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, imports: [
+        // Angular
+        CommonModule, RouterModule,
+        // Third Party
+        TranslateModule
+        // Angular Material
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        // Angular
+                        CommonModule, RouterModule,
+                        // Third Party
+                        TranslateModule
+                        // Angular Material
+                    ],
+                    declarations: [
+                        ElderHeaderComponent
+                    ],
+                    exports: [
+                        ElderHeaderComponent
+                    ]
+                }]
+        }] });
+
 /**
  * @deprecated Please switch to ElderDialogService
  */
@@ -11678,14 +11746,14 @@ ElderDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         ElderSelectionDialogDirective], imports: [CommonModule, FormsModule,
         MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
         A11yModule,
-        TranslateModule], exports: [ElderConfirmDialogComponent,
+        TranslateModule, ElderThemeModule, ElderHeaderModule], exports: [ElderConfirmDialogComponent,
         ElderQuestionDialogComponent,
         ElderSelectionDialogComponent,
         ElderSelectionDialogDirective] });
 ElderDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDialogModule, imports: [CommonModule, FormsModule,
         MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
         A11yModule,
-        TranslateModule] });
+        TranslateModule, ElderThemeModule, ElderHeaderModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDialogModule, decorators: [{
             type: NgModule,
             args: [{
@@ -11693,7 +11761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
                         CommonModule, FormsModule,
                         MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
                         A11yModule,
-                        TranslateModule
+                        TranslateModule, ElderThemeModule, ElderHeaderModule
                     ],
                     declarations: [
                         ElderConfirmDialogComponent,
@@ -13327,7 +13395,7 @@ ElderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             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: "<div class=\"layout-col full elder-table\"\n     [class.elder-mat-table-container]=\"!embedded\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-mat-table-flat]=\"!embedded && !float\"\n>\n\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\n</div>\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:visible;overflow:initial;max-width:42px;width:42px}.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-table .mat-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:inherit;-webkit-hyphens:auto;hyphens:auto}.mat-table .mat-header-cell:first-of-type{padding-left:20px}.mat-table .mat-header-cell:last-of-type{padding-right:8px}.mat-table .mat-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.mat-table .mat-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.mat-table .mat-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.mat-table .mat-header-cell>.mat-sort-header-container{display:inline-flex}.mat-table .mat-cell{padding-left:8px;padding-right:12px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:inherit;-webkit-hyphens:auto;hyphens:auto}.mat-table .mat-cell:first-of-type{padding-left:20px}.mat-table .mat-cell:last-of-type{padding-right:8px}.mat-table .mat-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.mat-table .mat-footer-cell:first-of-type{padding-left:20px}.mat-table .mat-footer-cell:last-of-type{padding-right:8px}.mat-table .mat-footer-cell .mat-paginator{margin-left:-8px;margin-right:-8px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.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: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$5.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: "<div class=\"layout-col full elder-table\"\n     [class.elder-mat-table-container]=\"!embedded\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-mat-table-flat]=\"!embedded && !float\"\n>\n\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\n</div>\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:visible;overflow:initial;max-width:42px;width:42px}.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-table .mat-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:inherit;-webkit-hyphens:auto;hyphens:auto}.mat-table .mat-header-cell:first-of-type{padding-left:20px}.mat-table .mat-header-cell:last-of-type{padding-right:8px}.mat-table .mat-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.mat-table .mat-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.mat-table .mat-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.mat-table .mat-header-cell>.mat-sort-header-container{display:inline-flex}.mat-table .mat-cell{padding-left:8px;padding-right:12px;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:inherit;-webkit-hyphens:auto;hyphens:auto}.mat-table .mat-cell:first-of-type{padding-left:20px}.mat-table .mat-cell:last-of-type{padding-right:8px}.mat-table .mat-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.mat-table .mat-footer-cell:first-of-type{padding-left:20px}.mat-table .mat-footer-cell:last-of-type{padding-right:8px}.mat-table .mat-footer-cell .mat-paginator{margin-left:-8px;margin-right:-8px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.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: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-table, ebs-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -13719,14 +13787,14 @@ class ElderFormFieldLabelDirective {
         }
     }
 }
-ElderFormFieldLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderFormFieldLabelDirective, deps: [{ token: i4$1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
+ElderFormFieldLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderFormFieldLabelDirective, deps: [{ token: i3.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
 ElderFormFieldLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.10", type: ElderFormFieldLabelDirective, selector: "mat-form-field[elderFormFieldLabel]", inputs: { enabled: ["elderFormFieldLabel", "enabled"] }, host: { properties: { "class.elder-form-field-label": "this.getFormFieldLabelStyle" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderFormFieldLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-form-field[elderFormFieldLabel]'
                 }]
-        }], ctorParameters: function () { return [{ type: i4$1.MatFormField }]; }, propDecorators: { getFormFieldLabelStyle: [{
+        }], ctorParameters: function () { return [{ type: i3.MatFormField }]; }, propDecorators: { getFormFieldLabelStyle: [{
                 type: HostBinding,
                 args: ['class.elder-form-field-label']
             }], enabled: [{
@@ -15426,13 +15494,13 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         return columnCount;
     }
 }
-ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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: "<div class=\"layout-col full\">\n\n  <!-- Grid Browser -->\n  <div class=\"layout-col flex scroll-fix elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [class.elder-mat-table-container]=\"!embedded\"\n       [class.mat-elevation-z5]=\"float\"\n       [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\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          <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n            <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\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\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                     [class.elder-click-through]=\"true\"\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          </div>\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</div>\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}.scroll-fix{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}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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: "pipe", type: i1$5.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: "<div class=\"layout-col full\">\n\n  <!-- Grid Browser -->\n  <div class=\"layout-col flex scroll-fix elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [class.elder-mat-table-container]=\"!embedded\"\n       [class.mat-elevation-z5]=\"float\"\n       [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\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          <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n            <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\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\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                     [class.elder-click-through]=\"true\"\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          </div>\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</div>\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}.scroll-fix{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}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{flex:0 1 100%;background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.elder-grid-tile-overlay{position:absolute;left:0;top:0;right:0;bottom:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -15447,7 +15515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i3$2.BreakpointObserver }]; }, propDecorators: { tileTemplateQuery: [{
+                }] }, { type: i3$3.BreakpointObserver }]; }, propDecorators: { tileTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderGridTileDirective, { read: TemplateRef, static: true }]
             }], toolbarVisible: [{
@@ -15906,7 +15974,7 @@ class ElderLanguageSwitcherComponent {
     }
 }
 ElderLanguageSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLanguageSwitcherComponent, deps: [{ token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-language-switcher, ebs-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"] }]
@@ -16071,7 +16139,7 @@ class ElderToolbarComponent {
     }
 }
 ElderToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderToolbarComponent, deps: [{ token: ElderToolbarService }, { token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "<div class=\"layout-row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar class=\"layout-row place-start-center\" [color]=\"color$ | async\">\n\n    <div class=\"layout-row place-start-center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.begin') | async)\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left') | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.end') | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div class=\"layout-row place-start-center flex\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div class=\"layout-row place-end-center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.begin') | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right') | async) || defaultRightColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.end') | async)\"></ng-container>\n    </div>\n\n\n    <!-- Default Templates -->\n\n    <ng-template #defaultLeftColumnTemplate>\n\n      <elder-toolbar-title></elder-toolbar-title>\n\n    </ng-template>\n\n\n    <ng-template #defaultCenterColumnTemplate></ng-template>\n\n    <ng-template #defaultEmptyTemplate></ng-template>\n\n\n    <ng-template #defaultRightColumnTemplate>\n\n      <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n    </ng-template>\n\n  </mat-toolbar>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: ["slimMode"] }, { kind: "component", type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "<div class=\"layout-row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar class=\"layout-row place-start-center\" [color]=\"color$ | async\">\n\n    <div class=\"layout-row place-start-center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.begin') | async)\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left') | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.end') | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div class=\"layout-row place-start-center flex\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div class=\"layout-row place-end-center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.begin') | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right') | async) || defaultRightColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.end') | async)\"></ng-container>\n    </div>\n\n\n    <!-- Default Templates -->\n\n    <ng-template #defaultLeftColumnTemplate>\n\n      <elder-toolbar-title></elder-toolbar-title>\n\n    </ng-template>\n\n\n    <ng-template #defaultCenterColumnTemplate></ng-template>\n\n    <ng-template #defaultEmptyTemplate></ng-template>\n\n\n    <ng-template #defaultRightColumnTemplate>\n\n      <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n    </ng-template>\n\n  </mat-toolbar>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: ["slimMode"] }, { kind: "component", type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-toolbar, ebs-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar class=\"layout-row place-start-center\" [color]=\"color$ | async\">\n\n    <div class=\"layout-row place-start-center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.begin') | async)\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left') | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('left.end') | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div class=\"layout-row place-start-center flex\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div class=\"layout-row place-end-center\">\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.begin') | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right') | async) || defaultRightColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('right.end') | async)\"></ng-container>\n    </div>\n\n\n    <!-- Default Templates -->\n\n    <ng-template #defaultLeftColumnTemplate>\n\n      <elder-toolbar-title></elder-toolbar-title>\n\n    </ng-template>\n\n\n    <ng-template #defaultCenterColumnTemplate></ng-template>\n\n    <ng-template #defaultEmptyTemplate></ng-template>\n\n\n    <ng-template #defaultRightColumnTemplate>\n\n      <elder-language-switcher [slimMode]=\"true\"></elder-language-switcher>\n\n    </ng-template>\n\n  </mat-toolbar>\n\n</div>\n\n" }]
@@ -16646,10 +16714,10 @@ class ElderBreadCrumbsComponent {
     }
 }
 ElderBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderBreadCrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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 gap-md 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\n        <div class=\"flex\">\n          <div class=\"layout-row place-center-center\"\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        </div>\n\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 10px}.breadcrumb{font-size:18px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { 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$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { 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$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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 gap-md 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\n        <div class=\"flex\">\n          <div class=\"layout-row place-center-center\"\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        </div>\n\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 10px}.breadcrumb{font-size:18px;font-weight:400}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { pathChange: [{
                 type: Output
             }], root: [{
@@ -17238,7 +17306,7 @@ class ElderShellComponent {
     }
 }
 ElderShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", 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: "14.2.10", type: ElderShellComponent, selector: "elder-shell, ebs-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\">\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-container{margin:0;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i6$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i6.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: ["color"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderShellComponent, selector: "elder-shell, ebs-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\">\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-container{margin:0;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", 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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: ["color"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell, ebs-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\">\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-container{margin:0;width:100%;height:100%;overflow:hidden}\n"] }]
@@ -17897,7 +17965,7 @@ class ElderLocalDateInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: { zone: "zone", datePickerEnabled: "datePickerEnabled", datePickerTouchUi: "datePickerTouchUi", allowNull: "allowNull", isoValue: "isoValue", dateValue: "dateValue", isoDateValue: "isoDateValue" }, outputs: { blur: "blur", valueUpdatedBlur: "valueUpdatedBlur", isoValueChange: "isoValueChange", dateValueChange: "dateValueChange", isoDateValueChange: "isoDateValueChange" }, providers: buildFormIntegrationProviders(ElderLocalDateInputComponent), viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner class=\"flex\"\n         type=\"date\"\n         [name]=\"name + '-inner'\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"date$ | async | date: 'yyyy-MM-dd'\"\n         (ngModelChange)=\"onDateInputChanged($event)\"\n         (blur)=\"blur.next($event)\"\n  >\n  <input style=\"display: none\" [matDatepicker]=\"picker\" (dateChange)=\"onDatepickerInputChange($event)\">\n\n  <ng-container matSuffix>\n    <mat-datepicker-toggle\n      *ngIf=\"!isLocked && datePickerEnabled\"\n      [for]=\"picker\">\n    </mat-datepicker-toggle>\n\n    <!-- valueWrapper.value && -->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <mat-datepicker [touchUi]=\"datePickerTouchUi\" #picker></mat-datepicker>\n\n</mat-form-field>\n\n", styles: ["input::-webkit-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { 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$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: { zone: "zone", datePickerEnabled: "datePickerEnabled", datePickerTouchUi: "datePickerTouchUi", allowNull: "allowNull", isoValue: "isoValue", dateValue: "dateValue", isoDateValue: "isoDateValue" }, outputs: { blur: "blur", valueUpdatedBlur: "valueUpdatedBlur", isoValueChange: "isoValueChange", dateValueChange: "dateValueChange", isoDateValueChange: "isoDateValueChange" }, providers: buildFormIntegrationProviders(ElderLocalDateInputComponent), viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner class=\"flex\"\n         type=\"date\"\n         [name]=\"name + '-inner'\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"date$ | async | date: 'yyyy-MM-dd'\"\n         (ngModelChange)=\"onDateInputChanged($event)\"\n         (blur)=\"blur.next($event)\"\n  >\n  <input style=\"display: none\" [matDatepicker]=\"picker\" (dateChange)=\"onDatepickerInputChange($event)\">\n\n  <ng-container matSuffix>\n    <mat-datepicker-toggle\n      *ngIf=\"!isLocked && datePickerEnabled\"\n      [for]=\"picker\">\n    </mat-datepicker-toggle>\n\n    <!-- valueWrapper.value && -->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <mat-datepicker [touchUi]=\"datePickerTouchUi\" #picker></mat-datepicker>\n\n</mat-form-field>\n\n", styles: ["input::-webkit-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { 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$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalDateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-local-date-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderLocalDateInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner class=\"flex\"\n         type=\"date\"\n         [name]=\"name + '-inner'\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"date$ | async | date: 'yyyy-MM-dd'\"\n         (ngModelChange)=\"onDateInputChanged($event)\"\n         (blur)=\"blur.next($event)\"\n  >\n  <input style=\"display: none\" [matDatepicker]=\"picker\" (dateChange)=\"onDatepickerInputChange($event)\">\n\n  <ng-container matSuffix>\n    <mat-datepicker-toggle\n      *ngIf=\"!isLocked && datePickerEnabled\"\n      [for]=\"picker\">\n    </mat-datepicker-toggle>\n\n    <!-- valueWrapper.value && -->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <mat-datepicker [touchUi]=\"datePickerTouchUi\" #picker></mat-datepicker>\n\n</mat-form-field>\n\n", styles: ["input::-webkit-calendar-picker-indicator{display:none}\n"] }]
@@ -18069,7 +18137,7 @@ class ElderDateTimeInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderDateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderDateTimeInputComponent, selector: "elder-date-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderDateTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput class=\"flex-grow\"\n         [name]=\"name + '-inner'\"\n         type=\"datetime-local\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"valueDate$ | async | date:'yyyy-MM-ddTHH:mm'\"\n         (ngModelChange)=\"onDateTimeChanged($event)\">\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { 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: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderDateTimeInputComponent, selector: "elder-date-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderDateTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput class=\"flex-grow\"\n         [name]=\"name + '-inner'\"\n         type=\"datetime-local\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"valueDate$ | async | date:'yyyy-MM-ddTHH:mm'\"\n         (ngModelChange)=\"onDateTimeChanged($event)\">\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDateTimeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-date-time-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderDateTimeInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput class=\"flex-grow\"\n         [name]=\"name + '-inner'\"\n         type=\"datetime-local\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"valueDate$ | async | date:'yyyy-MM-ddTHH:mm'\"\n         (ngModelChange)=\"onDateTimeChanged($event)\">\n</mat-form-field>\n" }]
@@ -18138,7 +18206,7 @@ class ElderLocalTimeInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLocalTimeInputComponent, selector: "elder-local-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderLocalTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput class=\"flex-grow\"\n         [name]=\"name + '-inner'\"\n         type=\"time\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"hourMinuteStr$ | async\"\n         (ngModelChange)=\"onHourMinuteChanged($event)\">\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { 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: ElderMinDirective, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: ElderMaxDirective, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLocalTimeInputComponent, selector: "elder-local-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderLocalTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput class=\"flex-grow\"\n         [name]=\"name + '-inner'\"\n         type=\"time\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"hourMinuteStr$ | async\"\n         (ngModelChange)=\"onHourMinuteChanged($event)\">\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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: ElderMinDirective, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: ElderMaxDirective, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalTimeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-local-time-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderLocalTimeInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<mat-form-field class=\"elder-flex-control\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput class=\"flex-grow\"\n         [name]=\"name + '-inner'\"\n         type=\"time\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [min]=\"min\"\n         [max]=\"max\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"hourMinuteStr$ | async\"\n         (ngModelChange)=\"onHourMinuteChanged($event)\">\n</mat-form-field>\n" }]
@@ -18339,7 +18407,7 @@ class ElderDurationInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderDurationInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDurationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderDurationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderDurationInputComponent, selector: "elder-duration-input", inputs: { isoValue: "isoValue", format: "format", durationFormat: "durationFormat" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderDurationInputComponent), usesInheritance: true, ngImport: i0, template: "<div class=\"layout-row flex-none\" *ngIf=\"durationContext$ | async as durationCtx\">\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.days\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-days'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.days)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withDays($event))\">\n    <span matSuffix class=\"suffix\">d</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.hours\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-hours'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.hours)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withHours($event))\">\n    <span matSuffix class=\"suffix\">h</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.minutes\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-minutes'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.minutes)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withMinutes($event))\">\n    <span matSuffix class=\"suffix\">min</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.seconds\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-seconds'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.seconds)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withSeconds($event))\">\n    <span matSuffix class=\"suffix\">sec</span>\n  </mat-form-field>\n\n</div>\n", styles: [".duration-field{width:50px}.suffix{margin-left:4px;opacity:.7;font-size:12px}.duration-input{text-align:right}input.duration-input::-webkit-outer-spin-button,input.duration-input::-webkit-inner-spin-button{display:none}input.duration-input{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { 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: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDurationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderDurationInputComponent, selector: "elder-duration-input", inputs: { isoValue: "isoValue", format: "format", durationFormat: "durationFormat" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderDurationInputComponent), usesInheritance: true, ngImport: i0, template: "<div class=\"layout-row flex-none\" *ngIf=\"durationContext$ | async as durationCtx\">\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.days\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-days'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.days)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withDays($event))\">\n    <span matSuffix class=\"suffix\">d</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.hours\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-hours'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.hours)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withHours($event))\">\n    <span matSuffix class=\"suffix\">h</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.minutes\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-minutes'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.minutes)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withMinutes($event))\">\n    <span matSuffix class=\"suffix\">min</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.seconds\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-seconds'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.seconds)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withSeconds($event))\">\n    <span matSuffix class=\"suffix\">sec</span>\n  </mat-form-field>\n\n</div>\n", styles: [".duration-field{width:50px}.suffix{margin-left:4px;opacity:.7;font-size:12px}.duration-input{text-align:right}input.duration-input::-webkit-outer-spin-button,input.duration-input::-webkit-inner-spin-button{display:none}input.duration-input{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { 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: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderDurationInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-duration-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderDurationInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<div class=\"layout-row flex-none\" *ngIf=\"durationContext$ | async as durationCtx\">\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.days\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-days'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.days)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withDays($event))\">\n    <span matSuffix class=\"suffix\">d</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.hours\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-hours'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.hours)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withHours($event))\">\n    <span matSuffix class=\"suffix\">h</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.minutes\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-minutes'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.minutes)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withMinutes($event))\">\n    <span matSuffix class=\"suffix\">min</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"duration-field\" *ngIf=\"durationCtx.format.seconds\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-seconds'\"\n           type=\"number\" class=\"duration-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(durationCtx?.bucket?.seconds)\"\n           (ngModelChange)=\"onBucketChanged(durationCtx.bucket.withSeconds($event))\">\n    <span matSuffix class=\"suffix\">sec</span>\n  </mat-form-field>\n\n</div>\n", styles: [".duration-field{width:50px}.suffix{margin-left:4px;opacity:.7;font-size:12px}.duration-input{text-align:right}input.duration-input::-webkit-outer-spin-button,input.duration-input::-webkit-inner-spin-button{display:none}input.duration-input{-moz-appearance:textfield}\n"] }]
@@ -18443,7 +18511,7 @@ class ElderPeriodInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderPeriodInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderPeriodInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderPeriodInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderPeriodInputComponent, selector: "elder-period-input", inputs: { isoValue: "isoValue", format: "format", periodFormat: "periodFormat" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderPeriodInputComponent), usesInheritance: true, ngImport: i0, template: "<div class=\"layout-row flex-none\" *ngIf=\"periodContext$ | async as periodCtx\">\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.days\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-days'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.days)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withDays($event))\">\n    <span matSuffix class=\"suffix\">d</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.months\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-months'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.months)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withMonths($event))\">\n    <span matSuffix class=\"suffix\">mnt</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.years\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-years'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.years)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withYears($event))\">\n    <span matSuffix class=\"suffix\">yrs</span>\n  </mat-form-field>\n\n\n</div>\n", styles: [".period-field{width:50px}.suffix{margin-left:4px;opacity:.7;font-size:12px}.period-input{text-align:right}input.period-input::-webkit-outer-spin-button,input.period-input::-webkit-inner-spin-button{display:none}input.period-input{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { 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: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderPeriodInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderPeriodInputComponent, selector: "elder-period-input", inputs: { isoValue: "isoValue", format: "format", periodFormat: "periodFormat" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderPeriodInputComponent), usesInheritance: true, ngImport: i0, template: "<div class=\"layout-row flex-none\" *ngIf=\"periodContext$ | async as periodCtx\">\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.days\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-days'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.days)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withDays($event))\">\n    <span matSuffix class=\"suffix\">d</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.months\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-months'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.months)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withMonths($event))\">\n    <span matSuffix class=\"suffix\">mnt</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.years\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-years'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.years)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withYears($event))\">\n    <span matSuffix class=\"suffix\">yrs</span>\n  </mat-form-field>\n\n\n</div>\n", styles: [".period-field{width:50px}.suffix{margin-left:4px;opacity:.7;font-size:12px}.period-input{text-align:right}input.period-input::-webkit-outer-spin-button,input.period-input::-webkit-inner-spin-button{display:none}input.period-input{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { 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: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderPeriodInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-period-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderPeriodInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<div class=\"layout-row flex-none\" *ngIf=\"periodContext$ | async as periodCtx\">\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.days\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-days'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.days)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withDays($event))\">\n    <span matSuffix class=\"suffix\">d</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.months\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-months'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.months)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withMonths($event))\">\n    <span matSuffix class=\"suffix\">mnt</span>\n  </mat-form-field>\n\n  <mat-form-field class=\"period-field\" *ngIf=\"periodCtx.format.years\">\n    <input matInput elderNoSpinner\n           [name]=\"name + '-inner-years'\"\n           type=\"number\" class=\"period-input\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [disabled]=\"disabled\"\n           [ngModel]=\"round(periodCtx?.bucket?.years)\"\n           (ngModelChange)=\"onBucketChanged(periodCtx.bucket.withYears($event))\">\n    <span matSuffix class=\"suffix\">yrs</span>\n  </mat-form-field>\n\n\n</div>\n", styles: [".period-field{width:50px}.suffix{margin-left:4px;opacity:.7;font-size:12px}.period-input{text-align:right}input.period-input::-webkit-outer-spin-button,input.period-input::-webkit-inner-spin-button{display:none}input.period-input{-moz-appearance:textfield}\n"] }]
@@ -18741,7 +18809,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\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        <mat-form-field class=\"full-width\">\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-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.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$5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table, ebs-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$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\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        <mat-form-field class=\"full-width\">\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-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.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$5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table, ebs-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.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\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        <mat-form-field class=\"full-width\">\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-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n" }]
@@ -18769,7 +18837,7 @@ class ElderLocalizedInputDialogComponent {
     }
 }
 ElderLocalizedInputDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalizedInputDialogComponent, deps: [{ token: i1$8.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$8.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i6.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: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$8.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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" }]
@@ -18978,7 +19046,7 @@ class ElderLocalizedInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalizedInputComponent, deps: [{ token: ElderLocalizedInputDialogService }, { token: LocalisationPickerService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLocalizedInputComponent, selector: "elder-localized-input", inputs: { textColumns: "textColumns" }, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderLocalizedInputComponent, selector: "elder-localized-input", inputs: { textColumns: "textColumns" }, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"elder-flex-control\"\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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderLocalizedInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), template: "<mat-form-field class=\"elder-flex-control\"\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"] }]
@@ -19772,7 +19840,7 @@ class ElderSearchBoxComponent {
     }
 }
 ElderSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component });
-ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", dense: "dense" }, 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 full\">\n\n  <!-- Main search input -->\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    class=\"flex-grow\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix 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              [matBadge]=\"userDefinedFilters.length\"\n              [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n              matBadgeColor=\"accent\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\">filter_list</mat-icon>\n      </button>\n\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-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { 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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", label: "label", hint: "hint", autocomplete: "autocomplete", dense: "dense" }, 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 full\">\n\n  <!-- Main search input -->\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    class=\"flex-grow\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix 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              [matBadge]=\"userDefinedFilters.length\"\n              [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n              matBadgeColor=\"accent\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\">filter_list</mat-icon>\n      </button>\n\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-panel-container{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { 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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-row full\">\n\n  <!-- Main search input -->\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    class=\"flex-grow\"\n    [elderDense]=\"dense\">\n\n    <button matPrefix 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              [matBadge]=\"userDefinedFilters.length\"\n              [matBadgeHidden]=\"userDefinedFilters.length == 0\"\n              matBadgeColor=\"accent\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\">\n        <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : undefined\">filter_list</mat-icon>\n      </button>\n\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-panel-container{min-width:250px}\n"] }]
@@ -20399,7 +20467,7 @@ ElderChipListSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderChipListSelectComponent)
         }
-    ], ngImport: i0, template: "\n<div class=\"layout-col full\">\n\n  <mat-chip-list [ngClass]=\"{'mat-chip-list-stacked' : stacked}\">\n    <mat-chip *ngFor=\"let chip of data$ | async\" selected\n              [color]=\"isSelected(chip) ? color : 'undefined'\"\n              (click)=\"onItemClick(chip)\">\n      {{getDisplayText(chip)}}\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], ngImport: i0, template: "\n<div class=\"layout-col full\">\n\n  <mat-chip-list [ngClass]=\"{'mat-chip-list-stacked' : stacked}\">\n    <mat-chip *ngFor=\"let chip of data$ | async\" selected\n              [color]=\"isSelected(chip) ? color : 'undefined'\"\n              (click)=\"onItemClick(chip)\">\n      {{getDisplayText(chip)}}\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderChipListSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-chip-list-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -20522,7 +20590,7 @@ class HttpDataTransferComponent {
     }
 }
 HttpDataTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: HttpDataTransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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-body-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$5.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: i3$1.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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-body-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$5.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: i3$2.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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-body-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"] }]
@@ -20633,7 +20701,7 @@ class HttpDataTransferAggregateComponent {
     }
 }
 HttpDataTransferAggregateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: HttpDataTransferAggregateComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferAggregateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: { hiddenWhenInactive: "hiddenWhenInactive" }, ngImport: i0, template: "<ng-container *ngIf=\"(aggregate$ | async) as aggregate\">\n\n  <div *ngIf=\"!hiddenWhenInactive || aggregate.inTransfer > 0\" class=\"layout-col flex\">\n    <div class=\"layout-row place-center-center\">\n      <span>{{aggregate.bps}}</span>\n    </div>\n\n    <mat-progress-bar\n      [color]=\"'accent'\"\n      mode=\"determinate\"\n      [value]=\"aggregate.percentDone\"\n\n    ></mat-progress-bar>\n\n    <div class=\"layout-row\">\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{aggregate.percentDone}}%</span>\n\n      <span class=\"flex\"></span>\n      <span class=\"mat-caption\">TOTAL {{aggregate.totalBytesAgg | bytes:1}}</span>\n    </div>\n  </div>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferAggregateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: { hiddenWhenInactive: "hiddenWhenInactive" }, ngImport: i0, template: "<ng-container *ngIf=\"(aggregate$ | async) as aggregate\">\n\n  <div *ngIf=\"!hiddenWhenInactive || aggregate.inTransfer > 0\" class=\"layout-col flex\">\n    <div class=\"layout-row place-center-center\">\n      <span>{{aggregate.bps}}</span>\n    </div>\n\n    <mat-progress-bar\n      [color]=\"'accent'\"\n      mode=\"determinate\"\n      [value]=\"aggregate.percentDone\"\n\n    ></mat-progress-bar>\n\n    <div class=\"layout-row\">\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{aggregate.percentDone}}%</span>\n\n      <span class=\"flex\"></span>\n      <span class=\"mat-caption\">TOTAL {{aggregate.totalBytesAgg | bytes:1}}</span>\n    </div>\n  </div>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: HttpDataTransferAggregateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-transfer-aggregate', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"(aggregate$ | async) as aggregate\">\n\n  <div *ngIf=\"!hiddenWhenInactive || aggregate.inTransfer > 0\" class=\"layout-col flex\">\n    <div class=\"layout-row place-center-center\">\n      <span>{{aggregate.bps}}</span>\n    </div>\n\n    <mat-progress-bar\n      [color]=\"'accent'\"\n      mode=\"determinate\"\n      [value]=\"aggregate.percentDone\"\n\n    ></mat-progress-bar>\n\n    <div class=\"layout-row\">\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{aggregate.percentDone}}%</span>\n\n      <span class=\"flex\"></span>\n      <span class=\"mat-caption\">TOTAL {{aggregate.totalBytesAgg | bytes:1}}</span>\n    </div>\n  </div>\n</ng-container>\n\n" }]
@@ -20660,7 +20728,7 @@ class HttpDataTransferOverviewComponent {
     }
 }
 HttpDataTransferOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: HttpDataTransferOverviewComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview", ngImport: i0, template: "<div class=\"layout-col full\">\n\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n\n    <div *ngIf=\"transfers.length > 0 else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer class=\"flex-none\"\n                         *ngFor=\"let transfer of transfers\"\n                         [transfer]=\"transfer\">\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-body-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n\n  </div>\n\n\n  <mat-toolbar class=\"flex-none mat-elevation-z5\">\n    <elder-data-transfer-aggregate class=\"flex\" [hiddenWhenInactive]=\"false\"></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { kind: "component", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview", ngImport: i0, template: "<div class=\"layout-col full\">\n\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n\n    <div *ngIf=\"transfers.length > 0 else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer class=\"flex-none\"\n                         *ngFor=\"let transfer of transfers\"\n                         [transfer]=\"transfer\">\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-body-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n\n  </div>\n\n\n  <mat-toolbar class=\"flex-none mat-elevation-z5\">\n    <elder-data-transfer-aggregate class=\"flex\" [hiddenWhenInactive]=\"false\"></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { kind: "component", type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: HttpDataTransferOverviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-transfer-overview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full\">\n\n  <div class=\"layout-col flex\" *ngIf=\"transfers$ | async as transfers\">\n\n    <div *ngIf=\"transfers.length > 0 else noData\" class=\"layout-col flex scroll-list\">\n      <elder-data-transfer class=\"flex-none\"\n                         *ngFor=\"let transfer of transfers\"\n                         [transfer]=\"transfer\">\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div class=\"layout-col place-center-center flex\">\n        <span class=\"mat-body-2 noselect\" style=\"color: gray\">No data transfers.</span>\n      </div>\n    </ng-template>\n\n  </div>\n\n\n  <mat-toolbar class=\"flex-none mat-elevation-z5\">\n    <elder-data-transfer-aggregate class=\"flex\" [hiddenWhenInactive]=\"false\"></elder-data-transfer-aggregate>\n  </mat-toolbar>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scroll-list{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scroll-fix{min-width:0;min-height:0}\n"] }]
@@ -20692,7 +20760,7 @@ class HttpDataTransferIndicatorComponent {
     }
 }
 HttpDataTransferIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: HttpDataTransferIndicatorComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: HttpDataTransferIndicatorComponent, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n\n  <button mat-icon-button type=\"button\"\n          class=\"layout-row place-center-center\"\n          [elderOverlayTrigger]=\"overlay\">\n\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n\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]=\"38\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n\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;background-color:#fff;border-radius:5px;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$5.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], 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$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: HttpDataTransferIndicatorComponent, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n\n  <button mat-icon-button type=\"button\"\n          class=\"layout-row place-center-center\"\n          [elderOverlayTrigger]=\"overlay\">\n\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n\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]=\"38\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n\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;background-color:#fff;border-radius:5px;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$5.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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", "diameter", "strokeWidth", "mode", "value"], 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$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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\n  <button mat-icon-button type=\"button\"\n          class=\"layout-row place-center-center\"\n          [elderOverlayTrigger]=\"overlay\">\n\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n\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]=\"38\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n\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;background-color:#fff;border-radius:5px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"] }]
@@ -21142,7 +21210,7 @@ class ElderGlobalSearchComponent {
     }
 }
 ElderGlobalSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderGlobalSearchComponent, deps: [{ token: i1$4.Router }, { token: ElderGlobalSearchService }], target: i0.ɵɵFactoryTarget.Component });
-ElderGlobalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderGlobalSearchComponent, selector: "elder-global-search, ebs-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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.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: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { 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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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: i1$2.TranslatePipe, name: "translate" }] });
+ElderGlobalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderGlobalSearchComponent, selector: "elder-global-search, ebs-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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.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: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { 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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { 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: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderGlobalSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-global-search, ebs-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" }]
@@ -21231,7 +21299,7 @@ class TemplatedSelectionDialogComponent {
     }
 }
 TemplatedSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1$8.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SelectionModel }], target: i0.ɵɵFactoryTarget.Component });
-TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.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$8.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.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$8.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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" }]
@@ -21830,7 +21898,7 @@ class ElderAutocompleteComponent {
     }
 }
 ElderAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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  [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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.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: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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  [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$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.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: i3$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-autocomplete', exportAs: 'elderAutocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\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" }]
@@ -23395,7 +23463,7 @@ ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
         }
-    ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: 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-list [selectable]=\"chipColorEnabled\" multiple #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-select-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect clickable-chip\"\n              [value]=\"resolveChipValue(chipModel.value)\"\n              [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n              [removable]=\"chipModel.removeable\"\n              (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n              (click)=\"onCurrentClicked(chipModel.value)\"\n    >\n      <mat-chip-avatar\n        *ngIf=\"chipAvatarTemplate && !chipModel.avatarSpec.hide\"\n        [class.chip-avatar-large]=\"chipModel.avatarSpec.large\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n      </mat-chip-avatar>\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || 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>\n\n    <div class=\"layout-row place-start-center flex\"\n         style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container\n        *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n      </ng-container>\n\n      <button mat-icon-button type=\"button\" class=\"elder-icon-button-small 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-select-icon\">search</mat-icon>\n      </button>\n    </div>\n  </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input 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}.mat-standard-chip .mat-chip-avatar.chip-avatar-large{width:30px;height:30px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i6$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: 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-list [selectable]=\"chipColorEnabled\" multiple #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-select-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect clickable-chip\"\n              [value]=\"resolveChipValue(chipModel.value)\"\n              [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n              [removable]=\"chipModel.removeable\"\n              (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n              (click)=\"onCurrentClicked(chipModel.value)\"\n    >\n      <mat-chip-avatar\n        *ngIf=\"chipAvatarTemplate && !chipModel.avatarSpec.hide\"\n        [class.chip-avatar-large]=\"chipModel.avatarSpec.large\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n      </mat-chip-avatar>\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || 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>\n\n    <div class=\"layout-row place-start-center flex\"\n         style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container\n        *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n      </ng-container>\n\n      <button mat-icon-button type=\"button\" class=\"elder-icon-button-small 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-select-icon\">search</mat-icon>\n      </button>\n    </div>\n  </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input 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}.mat-standard-chip .mat-chip-avatar.chip-avatar-large{width:30px;height:30px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { 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$5.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -24191,7 +24259,7 @@ class ElderQuantityInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderQuantityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderQuantityInputComponent, deps: [{ token: ElderUnitService }, { token: i1$5.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
-ElderQuantityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderQuantityInputComponent, selector: "elder-quantity-input", inputs: { multipleOf: "multipleOf", displayFormat: "displayFormat", requiredIgnoreZero: "requiredIgnoreZero", quantityNumber: "quantityNumber", quantityValue: "quantityValue", unit: "unit" }, outputs: { quantityNumberChange: "quantityNumberChange", quantityValueChange: "quantityValueChange", unitChange: "unitChange" }, providers: buildFormIntegrationProviders(ElderQuantityInputComponent), viewQueries: [{ propertyName: "quantityInput", first: true, predicate: ["quantityInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<mat-form-field class=\"elder-flex-control\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput elderNoSpinner class=\"elder-quantity-input flex\"\n         type=\"number\"\n         #quantityInput=\"matInput\"\n\n         [name]=\"name + '-inner'\"\n         [ngModel]=\"formattedValue$ | async\" #myModel=\"ngModel\"\n         (ngModelChange)=\"onQuantityValueChanged($event)\"\n\n         [elderRequiredIgnoreZeroValidator]=\"requiredIgnoreZero\"\n         [elderMultipleOf]=\"multipleOf\"\n         [placeholder]=\"(placeholder ? placeholder : 'context.quantity') | translate\"\n         [min]=\"min\" [max]=\"max\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n\n  >\n\n  <span matPrefix *ngIf=\"showIcon && icon\">\n      <mat-icon [inline]=\"true\">{{icon}}</mat-icon>\n  </span>\n\n  <span matSuffix>&nbsp;\n      <span>{{unitSymbol$ | async}}</span>\n  </span>\n\n  <mat-hint *ngIf=\"showHint\" align=\"end\">\n    <span *ngIf=\"hint\">{{hint}}</span>\n  </mat-hint>\n\n  <mat-error *ngIf=\"myModel.errors?.required\">\n      {{ 'validations.required' | translate }}\n  </mat-error>\n\n  <mat-error *ngIf=\"myModel.errors?.min || myModel.errors?.max\">\n      <span *ngIf=\"min && max\">\n          >= {{min}} & <= {{max}}\n      </span>\n\n      <span *ngIf=\"min && !max\">\n          >= {{min}}\n      </span>\n\n      <span *ngIf=\"!min && max\">\n          <= {{max}}\n      </span>\n  </mat-error>\n\n  <mat-error *ngIf=\"myModel.errors?.forbiddenMultiple as forbiddenMultiple\">\n      {{ 'validations.multipleOf' | translate:{ multiples: forbiddenMultiple.allowed } }}\n  </mat-error>\n\n</mat-form-field>\n", styles: [".elder-quantity-input{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.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: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { 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: ElderMinDirective, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: ElderMaxDirective, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "directive", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "directive", type: ElderRequiredIgnoreZeroValidator, selector: "[elderRequiredIgnoreZeroValidator][ngModel]", inputs: ["elderRequiredIgnoreZeroValidator", "required"] }, { kind: "directive", type: ElderMultipleOfValidator, selector: "[elderMultipleOf][formControlName],[elderMultipleOf][formControl],[elderMultipleOf][ngModel]", inputs: ["elderMultipleOf"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderQuantityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderQuantityInputComponent, selector: "elder-quantity-input", inputs: { multipleOf: "multipleOf", displayFormat: "displayFormat", requiredIgnoreZero: "requiredIgnoreZero", quantityNumber: "quantityNumber", quantityValue: "quantityValue", unit: "unit" }, outputs: { quantityNumberChange: "quantityNumberChange", quantityValueChange: "quantityValueChange", unitChange: "unitChange" }, providers: buildFormIntegrationProviders(ElderQuantityInputComponent), viewQueries: [{ propertyName: "quantityInput", first: true, predicate: ["quantityInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<mat-form-field class=\"elder-flex-control\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput elderNoSpinner class=\"elder-quantity-input flex\"\n         type=\"number\"\n         #quantityInput=\"matInput\"\n\n         [name]=\"name + '-inner'\"\n         [ngModel]=\"formattedValue$ | async\" #myModel=\"ngModel\"\n         (ngModelChange)=\"onQuantityValueChanged($event)\"\n\n         [elderRequiredIgnoreZeroValidator]=\"requiredIgnoreZero\"\n         [elderMultipleOf]=\"multipleOf\"\n         [placeholder]=\"(placeholder ? placeholder : 'context.quantity') | translate\"\n         [min]=\"min\" [max]=\"max\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n\n  >\n\n  <span matPrefix *ngIf=\"showIcon && icon\">\n      <mat-icon [inline]=\"true\">{{icon}}</mat-icon>\n  </span>\n\n  <span matSuffix>&nbsp;\n      <span>{{unitSymbol$ | async}}</span>\n  </span>\n\n  <mat-hint *ngIf=\"showHint\" align=\"end\">\n    <span *ngIf=\"hint\">{{hint}}</span>\n  </mat-hint>\n\n  <mat-error *ngIf=\"myModel.errors?.required\">\n      {{ 'validations.required' | translate }}\n  </mat-error>\n\n  <mat-error *ngIf=\"myModel.errors?.min || myModel.errors?.max\">\n      <span *ngIf=\"min && max\">\n          >= {{min}} & <= {{max}}\n      </span>\n\n      <span *ngIf=\"min && !max\">\n          >= {{min}}\n      </span>\n\n      <span *ngIf=\"!min && max\">\n          <= {{max}}\n      </span>\n  </mat-error>\n\n  <mat-error *ngIf=\"myModel.errors?.forbiddenMultiple as forbiddenMultiple\">\n      {{ 'validations.multipleOf' | translate:{ multiples: forbiddenMultiple.allowed } }}\n  </mat-error>\n\n</mat-form-field>\n", styles: [".elder-quantity-input{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.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: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { 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: ElderMinDirective, selector: "[min][formControlName],[min][formControl],[min][ngModel]", inputs: ["min"] }, { kind: "directive", type: ElderMaxDirective, selector: "[max][formControlName],[max][formControl],[max][ngModel]", inputs: ["max"] }, { kind: "directive", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "directive", type: ElderRequiredIgnoreZeroValidator, selector: "[elderRequiredIgnoreZeroValidator][ngModel]", inputs: ["elderRequiredIgnoreZeroValidator", "required"] }, { kind: "directive", type: ElderMultipleOfValidator, selector: "[elderMultipleOf][formControlName],[elderMultipleOf][formControl],[elderMultipleOf][ngModel]", inputs: ["elderMultipleOf"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderQuantityInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-quantity-input', providers: buildFormIntegrationProviders(ElderQuantityInputComponent), changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [ViewProviders.ParentControlContainer], template: "\n<mat-form-field class=\"elder-flex-control\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput elderNoSpinner class=\"elder-quantity-input flex\"\n         type=\"number\"\n         #quantityInput=\"matInput\"\n\n         [name]=\"name + '-inner'\"\n         [ngModel]=\"formattedValue$ | async\" #myModel=\"ngModel\"\n         (ngModelChange)=\"onQuantityValueChanged($event)\"\n\n         [elderRequiredIgnoreZeroValidator]=\"requiredIgnoreZero\"\n         [elderMultipleOf]=\"multipleOf\"\n         [placeholder]=\"(placeholder ? placeholder : 'context.quantity') | translate\"\n         [min]=\"min\" [max]=\"max\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n\n  >\n\n  <span matPrefix *ngIf=\"showIcon && icon\">\n      <mat-icon [inline]=\"true\">{{icon}}</mat-icon>\n  </span>\n\n  <span matSuffix>&nbsp;\n      <span>{{unitSymbol$ | async}}</span>\n  </span>\n\n  <mat-hint *ngIf=\"showHint\" align=\"end\">\n    <span *ngIf=\"hint\">{{hint}}</span>\n  </mat-hint>\n\n  <mat-error *ngIf=\"myModel.errors?.required\">\n      {{ 'validations.required' | translate }}\n  </mat-error>\n\n  <mat-error *ngIf=\"myModel.errors?.min || myModel.errors?.max\">\n      <span *ngIf=\"min && max\">\n          >= {{min}} & <= {{max}}\n      </span>\n\n      <span *ngIf=\"min && !max\">\n          >= {{min}}\n      </span>\n\n      <span *ngIf=\"!min && max\">\n          <= {{max}}\n      </span>\n  </mat-error>\n\n  <mat-error *ngIf=\"myModel.errors?.forbiddenMultiple as forbiddenMultiple\">\n      {{ 'validations.multipleOf' | translate:{ multiples: forbiddenMultiple.allowed } }}\n  </mat-error>\n\n</mat-form-field>\n", styles: [".elder-quantity-input{text-align:right}\n"] }]
@@ -24838,67 +24906,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
                 }]
         }] });
 
-class ElderHeaderComponent {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor() { }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() { }
-}
-ElderHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ElderHeaderComponent, selector: "elder-header", inputs: { header: "header", subheader: "subheader" }, ngImport: i0, template: "\n<div class=\"layout-col mat-typography\">\n  <h2 style=\"margin: 0\">{{header ? header : '-' | translate}}</h2>\n  <span class=\"mat-caption\">{{subheader ? subheader : '-' | translate}}</span>\n</div>\n\u00E5\n", styles: [""], dependencies: [{ kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-header', template: "\n<div class=\"layout-col mat-typography\">\n  <h2 style=\"margin: 0\">{{header ? header : '-' | translate}}</h2>\n  <span class=\"mat-caption\">{{subheader ? subheader : '-' | translate}}</span>\n</div>\n\u00E5\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { header: [{
-                type: Input
-            }], subheader: [{
-                type: Input
-            }] } });
-
-class ElderHeaderModule {
-}
-ElderHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, declarations: [ElderHeaderComponent], imports: [
-        // Angular
-        CommonModule, RouterModule,
-        // Third Party
-        TranslateModule
-        // Angular Material
-    ], exports: [ElderHeaderComponent] });
-ElderHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, imports: [
-        // Angular
-        CommonModule, RouterModule,
-        // Third Party
-        TranslateModule
-        // Angular Material
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        // Angular
-                        CommonModule, RouterModule,
-                        // Third Party
-                        TranslateModule
-                        // Angular Material
-                    ],
-                    declarations: [
-                        ElderHeaderComponent
-                    ],
-                    exports: [
-                        ElderHeaderComponent
-                    ]
-                }]
-        }] });
-
 class ElderSvgViewerComponent {
     /***************************************************************************
      *                                                                         *
@@ -26285,7 +26292,7 @@ class ElderExceptionDetailComponent {
     }
 }
 ElderExceptionDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderExceptionDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderExceptionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$6.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$6.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { 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: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderExceptionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$6.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$6.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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"] }]
@@ -26347,7 +26354,7 @@ class ElderAuditedEntityComponent {
     }
 }
 ElderAuditedEntityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ElderAuditedEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderAuditedEntityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { 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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAuditedEntityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", 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$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$5.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", 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"] }]