@elderbyte/ngx-starter 14.4.0-beta.13 → 14.4.0-beta.16

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -1,4 +1,4 @@
-import * as i1$5 from '@angular/common';
+import * as i1$4 from '@angular/common';
 import { DatePipe, CommonModule, registerLocaleData, DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Pipe, Injectable, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Directive, Output, Input, forwardRef, ViewChild, HostBinding, ViewChildren, ContentChild, Component, ChangeDetectionStrategy, Host, APP_INITIALIZER, EventEmitter, HostListener, ViewEncapsulation, TemplateRef, InjectionToken, ContentChildren, Self } from '@angular/core';
@@ -10,56 +10,56 @@ import { distinctUntilChanged, map, filter, takeUntil, debounceTime, catchError,
 import * as i1$2 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataSource } from '@angular/cdk/collections';
-import * as i2 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { ControlContainer, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgModel, FormsModule, UntypedFormControl, ReactiveFormsModule, NgForm, Validators } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormField, MatFormFieldModule } from '@angular/material/form-field';
-import * as i1$3 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as i1$4 from '@angular/router';
+import * as i1$3 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import * as i2$1 from '@elderbyte/ngx-simple-webstorage';
 import { SimpleWebStorageModule } from '@elderbyte/ngx-simple-webstorage';
 import * as i4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i3 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i7 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i2$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2$3 from '@angular/flex-layout/flex';
-import * as i3$4 from '@angular/flex-layout';
+import * as i3$5 from '@angular/flex-layout';
 import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5$1 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
-import * as i1$6 from '@angular/material/autocomplete';
+import * as i1$5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i6 from '@angular/material/core';
 import { mixinColor, MatCommonModule, MatRippleModule, NativeDateAdapter, MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i6$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i3$1 from '@angular/material/list';
+import * as i3$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i3$2 from '@angular/material/progress-bar';
+import * as i3$3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i1$7 from '@angular/material/snack-bar';
+import * as i1$6 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i5$2 from '@angular/cdk/drag-drop';
 import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i4$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i3$3 from '@angular/flex-layout/extended';
+import * as i3$4 from '@angular/flex-layout/extended';
 import * as i4$3 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i1$9 from '@angular/material/checkbox';
+import * as i1$8 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$8 from '@angular/material/dialog';
+import * as i1$7 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
 import * as i8 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
@@ -69,7 +69,7 @@ import * as i12 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import * as i11 from '@angular/material/table';
 import { MatColumnDef, MatRowDef, MatTable, MatTableModule } from '@angular/material/table';
-import * as i1$a from '@angular/cdk/table';
+import * as i1$9 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import * as i2$4 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
@@ -86,14 +86,14 @@ import localeDECH from '@angular/common/locales/de-CH';
 import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
 import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1$b from '@angular/cdk/overlay';
+import * as i1$a from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i6$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as StreamSaver from 'streamsaver';
 import * as i2$5 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i1$c from '@angular/material/tabs';
+import * as i1$b from '@angular/material/tabs';
 import { MatTab } from '@angular/material/tabs';
 
 class BytesFormat {
@@ -5777,7 +5777,7 @@ class ElderFormFieldControlBase extends ValueAccessorBase {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(hostRef, controlType, focusMonitor, ngControl) {
+    constructor(hostRef, controlType, focusMonitor, translateService, ngControl) {
         super();
         this.hostRef = hostRef;
         this._disabled = false;
@@ -5787,6 +5787,7 @@ class ElderFormFieldControlBase extends ValueAccessorBase {
         this.stateChangePusher$ = new Subject();
         this.destroy$ = new Subject();
         this._focusMonitor = focusMonitor;
+        this._translate = translateService;
         this.controlType = controlType;
         this.ngControl = ngControl;
         this.id = `elder-control-${this.controlType}-${ElderFormFieldControlBase.nextId++}`;
@@ -5822,7 +5823,9 @@ class ElderFormFieldControlBase extends ValueAccessorBase {
      *                                                                         *
      **************************************************************************/
     set placeholder(value) {
-        this._placeholder = value;
+        this._translate.get(value).subscribe({
+            next: translated => this._placeholder = translated
+        });
     }
     get placeholder() {
         return this._placeholder;
@@ -5913,7 +5916,7 @@ ElderFormFieldControlBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 ElderFormFieldControlBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderFormFieldControlBase, inputs: { placeholder: "placeholder", required: "required", disabled: "disabled", readonly: "readonly" }, host: { properties: { "id": "this.id" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderFormFieldControlBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined }, { type: i1$1.FocusMonitor }, { type: i2.NgControl }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: i3.NgControl }]; }, propDecorators: { id: [{
                 type: HostBinding
             }], placeholder: [{
                 type: Input
@@ -7625,14 +7628,14 @@ class ElderEnumTranslationService {
         return DelegateListDataSource.listFetcher(() => this.translate(enumClass, translationPrefix, sort, asc), 'value', (id) => this.translateOne(translationPrefix, id));
     }
 }
-ElderEnumTranslationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderEnumTranslationService, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderEnumTranslationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderEnumTranslationService, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderEnumTranslationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderEnumTranslationService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderEnumTranslationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.TranslateService }]; } });
 
 class CsvSerializer {
     constructor(csvSpec, translateService) {
@@ -7972,14 +7975,14 @@ class ElderUrlFragmentParamsService {
         }
     }
 }
-ElderUrlFragmentParamsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderUrlFragmentParamsService, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderUrlFragmentParamsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderUrlFragmentParamsService, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderUrlFragmentParamsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderUrlFragmentParamsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderUrlFragmentParamsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }]; } });
 
 class JsonMapUtil {
     static toJsonMap(esMap) {
@@ -8440,7 +8443,7 @@ class ElderThemeToggleComponent {
     }
 }
 ElderThemeToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderThemeToggleComponent, deps: [{ token: ElderThemeService }, { token: ElderThemePreferenceService }], target: i0.ɵɵFactoryTarget.Component });
-ElderThemeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderThemeToggleComponent, selector: "elder-theme-toggle", ngImport: i0, template: "<mat-slide-toggle *ngIf=\"activeToggleTheme$ | async as activeToggleTheme\"\n  [ngModel]=\"activeToggleTheme !== 'default'\"\n  color=\"primary\"\n  (ngModelChange)=\"onToggle($event)\"\n>\n  <mat-icon color=\"primary\">\n    brightness_2\n  </mat-icon>\n</mat-slide-toggle>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderThemeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderThemeToggleComponent, selector: "elder-theme-toggle", ngImport: i0, template: "<mat-slide-toggle *ngIf=\"activeToggleTheme$ | async as activeToggleTheme\"\n  [ngModel]=\"activeToggleTheme !== 'default'\"\n  color=\"primary\"\n  (ngModelChange)=\"onToggle($event)\"\n>\n  <mat-icon color=\"primary\">\n    brightness_2\n  </mat-icon>\n</mat-slide-toggle>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderThemeToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-theme-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-slide-toggle *ngIf=\"activeToggleTheme$ | async as activeToggleTheme\"\n  [ngModel]=\"activeToggleTheme !== 'default'\"\n  color=\"primary\"\n  (ngModelChange)=\"onToggle($event)\"\n>\n  <mat-icon color=\"primary\">\n    brightness_2\n  </mat-icon>\n</mat-slide-toggle>\n" }]
@@ -8564,7 +8567,7 @@ class ElderAccessDeniedComponent {
     }
 }
 ElderAccessDeniedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAccessDeniedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderAccessDeniedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAccessDeniedComponent, selector: "elder-access-denied, ebs-access-denied", ngImport: i0, template: "\n<div fxLayout=\"column\" class=\"padding\" fxFlex>\n  <mat-card>\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span>You do not have the permission to access this resource.</span>\n    </div>\n  </mat-card>\n</div>\n\n\n\n", styles: [".padding{padding:10px}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAccessDeniedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAccessDeniedComponent, selector: "elder-access-denied, ebs-access-denied", ngImport: i0, template: "\n<div fxLayout=\"column\" class=\"padding\" fxFlex>\n  <mat-card>\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span>You do not have the permission to access this resource.</span>\n    </div>\n  </mat-card>\n</div>\n\n\n\n", styles: [".padding{padding:10px}\n"], dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAccessDeniedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-access-denied, ebs-access-denied', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div fxLayout=\"column\" class=\"padding\" fxFlex>\n  <mat-card>\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span>You do not have the permission to access this resource.</span>\n    </div>\n  </mat-card>\n</div>\n\n\n\n", styles: [".padding{padding:10px}\n"] }]
@@ -8635,7 +8638,7 @@ class ElderExpandToggleButtonComponent {
     }
 }
 ElderExpandToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderExpandToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderExpandToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderExpandToggleButtonComponent, selector: "elder-expand-toggle-button, ebs-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<button mat-button type=\"button\" class=\"sidenav-button\"\n        (click)=\"onToggleExpand($event)\" fxFill>\n  <div fxLayout=\"row\" fxFlex>\n\n    <ng-content></ng-content>\n\n    <span fxFlex></span>\n\n    <div fxLayoutAlign=\"center center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderExpandToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderExpandToggleButtonComponent, selector: "elder-expand-toggle-button, ebs-expand-toggle-button", inputs: { expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<button mat-button type=\"button\" class=\"sidenav-button\"\n        (click)=\"onToggleExpand($event)\" fxFill>\n  <div fxLayout=\"row\" fxFlex>\n\n    <ng-content></ng-content>\n\n    <span fxFlex></span>\n\n    <div fxLayoutAlign=\"center center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</button>\n", dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderExpandToggleButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-expand-toggle-button, ebs-expand-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-button type=\"button\" class=\"sidenav-button\"\n        (click)=\"onToggleExpand($event)\" fxFill>\n  <div fxLayout=\"row\" fxFlex>\n\n    <ng-content></ng-content>\n\n    <span fxFlex></span>\n\n    <div fxLayoutAlign=\"center center\">\n      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n    </div>\n\n  </div>\n</button>\n" }]
@@ -8795,7 +8798,7 @@ class ElderMultiAutocompleteComponent {
     }
 }
 ElderMultiAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderMultiAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderMultiAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderMultiAutocompleteComponent, selector: "elder-multi-autocomplete", inputs: { placeholder: "placeholder", suggestionProvider: "suggestionProvider" }, outputs: { valueChanged: "modify" }, viewQueries: [{ propertyName: "suggestionInput", first: true, predicate: ["suggestionInput"], descendants: true, static: true }], ngImport: i0, template: "\n<!--\n                TODO This should probably be refactored to a directive\n-->\n\n<mat-form-field fxFlex\n\n>\n\n\n  <input matInput\n         #suggestionInput\n         type=\"text\"\n         [matAutocomplete]=\"auto\"\n         [formControl]=\"formControl\"\n         name=\"multiinput\" [placeholder]=\"placeholder\">\n\n  <mat-autocomplete #auto=\"matAutocomplete\" >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions | async\" [value]=\"insertSuggestion(suggestion)\">\n      {{ suggestion }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.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: 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: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }] });
+ElderMultiAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderMultiAutocompleteComponent, selector: "elder-multi-autocomplete", inputs: { placeholder: "placeholder", suggestionProvider: "suggestionProvider" }, outputs: { valueChanged: "modify" }, viewQueries: [{ propertyName: "suggestionInput", first: true, predicate: ["suggestionInput"], descendants: true, static: true }], ngImport: i0, template: "\n<!--\n                TODO This should probably be refactored to a directive\n-->\n\n<mat-form-field fxFlex\n\n>\n\n\n  <input matInput\n         #suggestionInput\n         type=\"text\"\n         [matAutocomplete]=\"auto\"\n         [formControl]=\"formControl\"\n         name=\"multiinput\" [placeholder]=\"placeholder\">\n\n  <mat-autocomplete #auto=\"matAutocomplete\" >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions | async\" [value]=\"insertSuggestion(suggestion)\">\n      {{ suggestion }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.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: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderMultiAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-multi-autocomplete', template: "\n<!--\n                TODO This should probably be refactored to a directive\n-->\n\n<mat-form-field fxFlex\n\n>\n\n\n  <input matInput\n         #suggestionInput\n         type=\"text\"\n         [matAutocomplete]=\"auto\"\n         [formControl]=\"formControl\"\n         name=\"multiinput\" [placeholder]=\"placeholder\">\n\n  <mat-autocomplete #auto=\"matAutocomplete\" >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions | async\" [value]=\"insertSuggestion(suggestion)\">\n      {{ suggestion }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n\n\n\n\n" }]
@@ -9011,7 +9014,7 @@ class ElderLabelInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLabelInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLabelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: i3.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: i5$1.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: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: i5$1.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$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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"] }]
@@ -9299,7 +9302,7 @@ class ElderFileSelectComponent {
     }
 }
 ElderFileSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderFileSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderFileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: { multiple: "multiple", accept: "accept", icon: "icon", color: "color" }, outputs: { filesChange: "filesChange" }, ngImport: i0, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileSelectDirective, selector: "[elderFileSelect]", inputs: ["elderFileSelect", "elderFileSelectMultiple"], outputs: ["elderFileSelectChange", "elderSingleFileSelectChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderFileSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-select, ebs-file-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<button mat-icon-button type=\"button\"\n        [elderFileSelect]=\"accept\"\n        [elderFileSelectMultiple]=\"multiple\"\n        (elderFileSelectChange)=\"fileInputChanged($event)\"\n>\n  <mat-icon [color]=\"color\">{{icon}}</mat-icon>\n</button>\n" }]
@@ -9363,7 +9366,7 @@ class ElderFileUploadComponent {
     }
 }
 ElderFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderFileUploadComponent, selector: "elder-file-upload, ebs-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\">\n\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\">\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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i3$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i3$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i3$1.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i3$1.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: i3.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" }] });
+ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderFileUploadComponent, selector: "elder-file-upload, ebs-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\">\n\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i3$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i3$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i3$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i3$2.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-file-upload, ebs-file-upload', template: "\n\n<div fxLayout=\"column\">\n\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\">\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" }]
@@ -9556,12 +9559,12 @@ class StandardToastComponent {
         }
     }
 }
-StandardToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: StandardToastComponent, deps: [{ token: i1$7.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
-StandardToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: StandardToastComponent, selector: "elder-standard-toast", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"4px\">\n\n  <!-- Icon and Status -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\n    <mat-icon class=\"noselect\" [color]=\"iconColor(toast.type)\">{{icon(toast.type)}}</mat-icon>\n    <span\n      class=\"toast-title mat-body-2 noselect\"\n      [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n      [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n    >{{toast.status}}</span>\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  <span class=\"mat-body noselect\"\n        [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n  >{{toast.message}}</span>\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  <span class=\"mat-small noselect\"\n        [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n  >{{trimDetailText(toast.detail, 200)}}</span>\n\n  <!-- Actions -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n    <button mat-button type=\"button\" [color]=\"iconColor(toast.type)\" (click)=\"close()\">Ok</button>\n  </div>\n\n</div>\n", styles: [".toast-title{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StandardToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: StandardToastComponent, deps: [{ token: i1$6.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
+StandardToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: StandardToastComponent, selector: "elder-standard-toast", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"4px\">\n\n  <!-- Icon and Status -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\n    <mat-icon class=\"noselect\" [color]=\"iconColor(toast.type)\">{{icon(toast.type)}}</mat-icon>\n    <span\n      class=\"toast-title mat-body-2 noselect\"\n      [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n      [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n    >{{toast.status}}</span>\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  <span class=\"mat-body noselect\"\n        [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n  >{{toast.message}}</span>\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  <span class=\"mat-small noselect\"\n        [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n  >{{trimDetailText(toast.detail, 200)}}</span>\n\n  <!-- Actions -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n    <button mat-button type=\"button\" [color]=\"iconColor(toast.type)\" (click)=\"close()\">Ok</button>\n  </div>\n\n</div>\n", styles: [".toast-title{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i3$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: StandardToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-standard-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxLayoutGap=\"4px\">\n\n  <!-- Icon and Status -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\n    <mat-icon class=\"noselect\" [color]=\"iconColor(toast.type)\">{{icon(toast.type)}}</mat-icon>\n    <span\n      class=\"toast-title mat-body-2 noselect\"\n      [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n      [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n    >{{toast.status}}</span>\n  </div>\n\n  <span></span>\n\n  <!-- Toast Message -->\n  <span class=\"mat-body noselect\"\n        [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n  >{{toast.message}}</span>\n\n  <span></span>\n\n  <!-- Toast Detail -->\n  <span class=\"mat-small noselect\"\n        [class.elder-warn-text]=\"toast.type == ToastType.Error\"\n        [class.elder-accent-text]=\"toast.type == ToastType.Warning\"\n  >{{trimDetailText(toast.detail, 200)}}</span>\n\n  <!-- Actions -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n    <button mat-button type=\"button\" [color]=\"iconColor(toast.type)\" (click)=\"close()\">Ok</button>\n  </div>\n\n</div>\n", styles: [".toast-title{font-size:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$7.MatSnackBarRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$6.MatSnackBarRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
                 }] }]; } });
@@ -9808,14 +9811,14 @@ class ElderToastService {
         );
     }
 }
-ElderToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToastService, deps: [{ token: i1$3.TranslateService }, { token: i1$7.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToastService, deps: [{ token: i2.TranslateService }, { token: i1$6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToastService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToastService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.TranslateService }, { type: i1$7.MatSnackBar }]; } });
+        }], ctorParameters: function () { return [{ type: i2.TranslateService }, { type: i1$6.MatSnackBar }]; } });
 /**
  * @deprecated Please switch to ElderToastService
  */
@@ -10041,7 +10044,7 @@ class ElderBlobViewerComponent {
     }
 }
 ElderBlobViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderBlobViewerComponent, deps: [{ token: HttpClientPristine }, { token: i1.DomSanitizer }, { token: ElderToastService }], target: i0.ɵɵFactoryTarget.Component });
-ElderBlobViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderBlobViewerComponent, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: "displayUnknownAsText", blob: "blob", blobUrl: "blobUrl", url: "url", mimeType: "mimeType" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"document-viewer\" fxFill>\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isVideo\" fxFill>\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isAudio\" fxFill>\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\" fxFill>\n      <img class=\"cover\" fxFlex\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayEmbedded\" fxFill>\n      <div style=\"width: 100%;height: 100%\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayAsText\" fxFill>\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.cantDisplay\" fxFill>\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderBlobViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderBlobViewerComponent, selector: "elder-blob-viewer", inputs: { displayUnknownAsText: "displayUnknownAsText", blob: "blob", blobUrl: "blobUrl", url: "url", mimeType: "mimeType" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"document-viewer\" fxFill>\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isVideo\" fxFill>\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isAudio\" fxFill>\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\" fxFill>\n      <img class=\"cover\" fxFlex\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayEmbedded\" fxFill>\n      <div style=\"width: 100%;height: 100%\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayAsText\" fxFill>\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.cantDisplay\" fxFill>\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderBlobViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-blob-viewer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"document-viewer\" fxFill>\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isVideo\" fxFill>\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isAudio\" fxFill>\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\" fxFill>\n      <img class=\"cover\" fxFlex\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayEmbedded\" fxFill>\n      <div style=\"width: 100%;height: 100%\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayAsText\" fxFill>\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.cantDisplay\" fxFill>\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n", styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video,.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"] }]
@@ -10432,7 +10435,7 @@ class ElderCardComponent {
     }
 }
 ElderCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardComponent, selector: "elder-card", inputs: { padding: "padding", flat: "flat", float: "float" }, host: { classAttribute: "elder-card-host" }, ngImport: i0, template: "\n<!-- Card Container -->\n<div fxLayout=\"column\" fxFlex\n     [ngStyle]=\"{'padding': padding}\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-card-flat]=\"!float\"\n     class=\"mat-typography elder-card\">\n\n    <!-- If one does not want to use predefined card-sections. -->\n    <ng-content></ng-content>\n\n    <!-- Card Header -->\n    <ng-content select=\"elder-card-header\">\n    </ng-content>\n\n    <!-- Card Content -->\n    <ng-content select=\"elder-card-content\">\n    </ng-content>\n\n\n</div>\n", styles: [".elder-card-host{display:flex;flex:1;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"], dependencies: [{ kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ElderCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardComponent, selector: "elder-card", inputs: { padding: "padding", flat: "flat", float: "float" }, host: { classAttribute: "elder-card-host" }, ngImport: i0, template: "\n<!-- Card Container -->\n<div fxLayout=\"column\" fxFlex\n     [ngStyle]=\"{'padding': padding}\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-card-flat]=\"!float\"\n     class=\"mat-typography elder-card\">\n\n    <!-- If one does not want to use predefined card-sections. -->\n    <ng-content></ng-content>\n\n    <!-- Card Header -->\n    <ng-content select=\"elder-card-header\">\n    </ng-content>\n\n    <!-- Card Content -->\n    <ng-content select=\"elder-card-content\">\n    </ng-content>\n\n\n</div>\n", styles: [".elder-card-host{display:flex;flex:1;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"], dependencies: [{ kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3$4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card', encapsulation: ViewEncapsulation.None, host: { 'class': 'elder-card-host' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<!-- Card Container -->\n<div fxLayout=\"column\" fxFlex\n     [ngStyle]=\"{'padding': padding}\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-card-flat]=\"!float\"\n     class=\"mat-typography elder-card\">\n\n    <!-- If one does not want to use predefined card-sections. -->\n    <ng-content></ng-content>\n\n    <!-- Card Header -->\n    <ng-content select=\"elder-card-header\">\n    </ng-content>\n\n    <!-- Card Content -->\n    <ng-content select=\"elder-card-content\">\n    </ng-content>\n\n\n</div>\n", styles: [".elder-card-host{display:flex;flex:1;min-width:0;min-height:0}.elder-card-content{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex:1}\n"] }]
@@ -10591,7 +10594,7 @@ class ElderCardStackComponent {
     }
 }
 ElderCardStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardStackComponent, selector: "elder-card-stack, ebs-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div fxLayout=\"column\" class=\"card-stack hoverme\" fxFlex>\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\"\n          class=\"stack-header padding-10\">\n\n    <h3 class=\"mat-body-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span fxFlex></span>\n\n    <button mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div fxFlex fxLayout=\"column\" class=\"card-container\">\n\n    <div fxLayout=\"column\" fxLayoutGap=\"10px\" class=\"scrollable padding-10 card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card\" fxFlex=\"none\" padding=\"10px\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex>\n\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div fxLayout=\"column\" fxFlex>\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$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.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: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["padding", "flat", "float"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderCardStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardStackComponent, selector: "elder-card-stack, ebs-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div fxLayout=\"column\" class=\"card-stack hoverme\" fxFlex>\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\"\n          class=\"stack-header padding-10\">\n\n    <h3 class=\"mat-body-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span fxFlex></span>\n\n    <button mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div fxFlex fxLayout=\"column\" class=\"card-container\">\n\n    <div fxLayout=\"column\" fxLayoutGap=\"10px\" class=\"scrollable padding-10 card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card\" fxFlex=\"none\" padding=\"10px\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex>\n\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div fxLayout=\"column\" fxFlex>\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["padding", "flat", "float"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card-stack, ebs-card-stack', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" class=\"card-stack hoverme\" fxFlex>\n\n  <!-- Header -->\n  <header *ngIf=\"headerEnabled\"\n          fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\"\n          class=\"stack-header padding-10\">\n\n    <h3 class=\"mat-body-2 noselect\">{{headerTitle | translate}}</h3>\n    <small class=\"mat-caption noselect\">({{(cards$ | async)?.length}})</small>\n\n    <span fxFlex></span>\n\n    <button mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n      <mat-icon>add</mat-icon>\n    </button>\n\n  </header>\n  <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n\n  <!-- card list -->\n  <div fxFlex fxLayout=\"column\" class=\"card-container\">\n\n    <div fxLayout=\"column\" fxLayoutGap=\"10px\" class=\"scrollable padding-10 card-list\"\n         [id]=\"stackId\"\n         cdkDropList\n         [cdkDropListData]=\"stack\"\n         [cdkDropListConnectedTo]=\"connectedTo\"\n\n         [cdkDropListEnterPredicate]=\"enterPredicate\"\n         (cdkDropListEntered)=\"cardEntered($event)\"\n         (cdkDropListExited)=\"cardExited($event)\"\n         (cdkDropListDropped)=\"cardDrop($event)\"\n    >\n\n      <!-- card -->\n      <elder-card\n        *ngFor=\"let card of cards$ | async; let i = index\"\n        class=\"card\" fxFlex=\"none\" padding=\"10px\"\n        cdkDrag [cdkDragData]=\"card\"\n        (click)=\"onCardSelected($event, card)\">\n\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex>\n\n          <ng-container\n            *ngTemplateOutlet=\"cardTemplate || simpleCardTemplate; context: {$implicit: card, index: i}\"></ng-container>\n\n          <button mat-icon-button type=\"button\"\n            *ngIf=\"canRemove\"  class=\"hide\" (click)=\"onRequestRemoveCard($event, card)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n        </div>\n\n      </elder-card>\n\n    </div>\n\n  </div>\n\n\n  <ng-template #simpleCardTemplate let-card>\n    <div fxLayout=\"column\" fxFlex>\n      <p class=\"noselect\">{{card}}</p>\n    </div>\n  </ng-template>\n\n</div>\n\n\n\n\n", styles: [".stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{cursor:move}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
@@ -10712,7 +10715,7 @@ class ElderCardOrganizerComponent {
     }
 }
 ElderCardOrganizerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardOrganizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderCardOrganizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardOrganizerComponent, selector: "elder-card-organizer", inputs: { canRemove: "canRemove", removeConfirmation: "removeConfirmation", copyOnDrag: "copyOnDrag", autoMoveCards: "autoMoveCards", headerEnabled: "headerEnabled", canEnterPredicate: "canEnterPredicate", organizerModel: "organizerModel" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, host: { listeners: { "document:keydown.shift": "onKeydownHandler($event)", "document:keyup.shift": "onKeyupHandler($event)" } }, queries: [{ propertyName: "stackCardTemplate", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "\n<div fxLayout=\"row\" fxLayoutGap=\"20px\" class=\"padding-10 card-organizer\" fxFill>\n\n    <elder-card-stack fxFlex\n                    *ngFor=\"let stack of stacks$ | async\"\n\n                    [stack]=\"stack\"\n\n                    [stackId]=\"stack.id\"\n                    [headerEnabled]=\"headerEnabled\"\n                    [headerTitle]=\"stack.title\"\n                    [canRemove]=\"canRemove\"\n\n                    [cardTemplate]=\"stackCardTemplate\"\n                    [removeConfirmation]=\"removeConfirmation\"\n                    [autoMoveCards]=\"autoMoveCards\"\n                    (requestNewCard)=\"onRequestNewCard($event)\"\n                    (requestRemoveCard)=\"onRequestRemoveCard($event)\"\n                    (cardClick)=\"onCardClicked($event)\"\n\n                    [connectedTo]=\"organizerModel.stackIds | async\"\n                    (cardDropped)=\"onCardDropped($event)\"\n                    [canEnterPredicate]=\"canEnterPredicate\"\n                    [copyOnDrag]=\"copyOnDrag\"\n    >\n    </elder-card-stack>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderCardStackComponent, selector: "elder-card-stack, ebs-card-stack", inputs: ["stackId", "headerEnabled", "headerTitle", "canRemove", "removeConfirmation", "canEnterPredicate", "connectedTo", "autoMoveCards", "canCollapse", "copyOnDrag", "cardTemplate", "stack"], outputs: ["requestNewCard", "requestRemoveCard", "cardClick", "cardDropped"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderCardOrganizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardOrganizerComponent, selector: "elder-card-organizer", inputs: { canRemove: "canRemove", removeConfirmation: "removeConfirmation", copyOnDrag: "copyOnDrag", autoMoveCards: "autoMoveCards", headerEnabled: "headerEnabled", canEnterPredicate: "canEnterPredicate", organizerModel: "organizerModel" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, host: { listeners: { "document:keydown.shift": "onKeydownHandler($event)", "document:keyup.shift": "onKeyupHandler($event)" } }, queries: [{ propertyName: "stackCardTemplate", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "\n<div fxLayout=\"row\" fxLayoutGap=\"20px\" class=\"padding-10 card-organizer\" fxFill>\n\n    <elder-card-stack fxFlex\n                    *ngFor=\"let stack of stacks$ | async\"\n\n                    [stack]=\"stack\"\n\n                    [stackId]=\"stack.id\"\n                    [headerEnabled]=\"headerEnabled\"\n                    [headerTitle]=\"stack.title\"\n                    [canRemove]=\"canRemove\"\n\n                    [cardTemplate]=\"stackCardTemplate\"\n                    [removeConfirmation]=\"removeConfirmation\"\n                    [autoMoveCards]=\"autoMoveCards\"\n                    (requestNewCard)=\"onRequestNewCard($event)\"\n                    (requestRemoveCard)=\"onRequestRemoveCard($event)\"\n                    (cardClick)=\"onCardClicked($event)\"\n\n                    [connectedTo]=\"organizerModel.stackIds | async\"\n                    (cardDropped)=\"onCardDropped($event)\"\n                    [canEnterPredicate]=\"canEnterPredicate\"\n                    [copyOnDrag]=\"copyOnDrag\"\n    >\n    </elder-card-stack>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderCardStackComponent, selector: "elder-card-stack, ebs-card-stack", inputs: ["stackId", "headerEnabled", "headerTitle", "canRemove", "removeConfirmation", "canEnterPredicate", "connectedTo", "autoMoveCards", "canCollapse", "copyOnDrag", "cardTemplate", "stack"], outputs: ["requestNewCard", "requestRemoveCard", "cardClick", "cardDropped"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardOrganizerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card-organizer', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div fxLayout=\"row\" fxLayoutGap=\"20px\" class=\"padding-10 card-organizer\" fxFill>\n\n    <elder-card-stack fxFlex\n                    *ngFor=\"let stack of stacks$ | async\"\n\n                    [stack]=\"stack\"\n\n                    [stackId]=\"stack.id\"\n                    [headerEnabled]=\"headerEnabled\"\n                    [headerTitle]=\"stack.title\"\n                    [canRemove]=\"canRemove\"\n\n                    [cardTemplate]=\"stackCardTemplate\"\n                    [removeConfirmation]=\"removeConfirmation\"\n                    [autoMoveCards]=\"autoMoveCards\"\n                    (requestNewCard)=\"onRequestNewCard($event)\"\n                    (requestRemoveCard)=\"onRequestRemoveCard($event)\"\n                    (cardClick)=\"onCardClicked($event)\"\n\n                    [connectedTo]=\"organizerModel.stackIds | async\"\n                    (cardDropped)=\"onCardDropped($event)\"\n                    [canEnterPredicate]=\"canEnterPredicate\"\n                    [copyOnDrag]=\"copyOnDrag\"\n    >\n    </elder-card-stack>\n\n</div>\n" }]
@@ -10759,7 +10762,7 @@ class ElderCardHeaderComponent {
     }
 }
 ElderCardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardHeaderComponent, selector: "elder-card-header", inputs: { padding: "padding" }, ngImport: i0, template: "\n<!-- Card Header -->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"elder-card-header\" [ngStyle]=\"{'padding': padding}\">\n\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\">\n  </ng-content>\n\n  <span fxFlex></span>\n\n  <!-- Card Header Actions -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"12px\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], encapsulation: i0.ViewEncapsulation.None });
+ElderCardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCardHeaderComponent, selector: "elder-card-header", inputs: { padding: "padding" }, ngImport: i0, template: "\n<!-- Card Header -->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"elder-card-header\" [ngStyle]=\"{'padding': padding}\">\n\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\">\n  </ng-content>\n\n  <span fxFlex></span>\n\n  <!-- Card Header Actions -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"12px\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3$4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-card-header', encapsulation: ViewEncapsulation.None, template: "\n<!-- Card Header -->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"elder-card-header\" [ngStyle]=\"{'padding': padding}\">\n\n  <!-- Card Title -->\n  <ng-content select=\"elder-card-title\">\n  </ng-content>\n\n  <span fxFlex></span>\n\n  <!-- Card Header Actions -->\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"12px\">\n    <ng-content select=\"elder-card-header-actions\"></ng-content>\n  </div>\n\n</div>\n" }]
@@ -10957,12 +10960,12 @@ class ElderConfirmDialogComponent {
         this.yesNo = false;
     }
 }
-ElderConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$8.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayoutAlign=\"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: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+ElderConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderConfirmDialogComponent, deps: [{ token: i1$7.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ElderConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayoutAlign=\"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$7.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$7.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$7.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: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 fxLayoutAlign=\"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" }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }]; } });
 
 class QuestionDialogConfig extends ElderDialogConfig {
 }
@@ -10983,12 +10986,12 @@ class ElderQuestionDialogComponent {
         return !!this.answer;
     }
 }
-ElderQuestionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", 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.0.6", type: ElderQuestionDialogComponent, selector: "elder-question-dialog", ngImport: i0, template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" fxLayout=\"column\" (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 fxLayoutAlign=\"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: i5$1.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+ElderQuestionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuestionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ElderQuestionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderQuestionDialogComponent, selector: "elder-question-dialog", ngImport: i0, template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" fxLayout=\"column\" (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 fxLayoutAlign=\"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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: 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$7.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$7.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$7.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: i5$1.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuestionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-question-dialog', template: "<h2 matDialogTitle translate>{{ data.title }}</h2>\n\n<form #f=\"ngForm\" fxLayout=\"column\" (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 fxLayoutAlign=\"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" }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -11136,14 +11139,14 @@ class ElderDialogService {
         }));
     }
 }
-ElderDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, deps: [{ token: i1$8.MatDialog }, { token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, deps: [{ token: i1$7.MatDialog }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialog }, { type: i1$3.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialog }, { type: i2.TranslateService }]; } });
 
 class ElderSelectionDialogComponent {
     /***************************************************************************
@@ -11169,12 +11172,12 @@ class ElderSelectionDialogComponent {
         // this.dialogRef.updateSize('20vw', '20vh');
     }
 }
-ElderSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogComponent, deps: [{ token: i1$8.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionDialogComponent, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex>\n\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n\n  </div>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n\n  </div>\n\n\n</div>\n\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: 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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+ElderSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ElderSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionDialogComponent, selector: "elder-selection-dialog", inputs: { title: "title" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex>\n\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n\n  </div>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n\n  </div>\n\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-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$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-selection-dialog', template: "\n\n<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\">\n    <h2 *ngIf=\"title\">{{title | translate}}</h2>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex>\n\n    <ng-template [ngTemplateOutlet]=\"data.template\"></ng-template>\n\n  </div>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n\n    <button mat-button type=\"button\" mat-dialog-close>\n      {{'actions.cancel' | translate}}\n    </button>\n\n    <button mat-raised-button type=\"button\"\n            [disabled]=\"data.selectionModel.isEmpty()\"\n            (click)=\"confirmSelection()\">\n      {{'actions.select' | translate}}\n    </button>\n\n  </div>\n\n\n</div>\n\n" }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; }, propDecorators: { title: [{
@@ -11209,7 +11212,7 @@ class ElderSelectionDialogDirective {
         dialogRef.afterClosed().subscribe(result => this.close.emit(result));
     }
 }
-ElderSelectionDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1$8.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+ElderSelectionDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogDirective, deps: [{ token: i0.TemplateRef }, { token: i1$7.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
 ElderSelectionDialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionDialogDirective, selector: "[elderDialog]", inputs: { selectionModel: "selectionModel" }, outputs: { close: "close" }, exportAs: ["elderSelection"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionDialogDirective, decorators: [{
             type: Directive,
@@ -11217,7 +11220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                     selector: '[elderDialog]',
                     exportAs: 'elderSelection'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i1$8.MatDialog }]; }, propDecorators: { selectionModel: [{
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i1$7.MatDialog }]; }, propDecorators: { selectionModel: [{
                 type: Input
             }], close: [{
                 type: Output
@@ -11390,7 +11393,7 @@ class ElderDataToolbarComponent {
     }
 }
 ElderDataToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataToolbarComponent, deps: [{ token: SelectionModel, optional: true }, { token: ELDER_DATA_VIEW, optional: true }, { token: ElderDialogService }], target: i0.ɵɵFactoryTarget.Component });
-ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDataToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n" }]
@@ -11487,7 +11490,7 @@ class ElderSingleSortComponent {
     }
 }
 ElderSingleSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSingleSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSingleSortComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-single-sort', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n" }]
@@ -11625,7 +11628,7 @@ class ElderSelectionMasterCheckboxComponent {
     }
 }
 ElderSelectionMasterCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, deps: [{ token: DataContextSelectionDirective }], target: i0.ɵɵFactoryTarget.Component });
-ElderSelectionMasterCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<div\n  *ngIf=\"\n  dataContextSelection.selectionModel.isMultipleSelection\n  && dataContextSelection?.selectionState$ | async as selectionState\"\n\n  fxLayout=\"column\" fxFlex=\"none\"\n\n  [matBadgeHidden]=\"selectionState.count === 0\"\n  [matBadge]=\"selectionState.count + ''\"\n  [matBadgePosition]=\"'above before'\"\n  [matBadgeOverlap]=\"false\"\n  [matBadgeSize]=\"'small'\"\n>\n  <mat-checkbox fxFlex=\"none\"\n    (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n    [checked]=\"selectionState.allSelected\"\n    [indeterminate]=\"selectionState.someSelected\"\n  >\n  </mat-checkbox>\n</div>\n\n<!--  -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderSelectionMasterCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<div\n  *ngIf=\"\n  dataContextSelection.selectionModel.isMultipleSelection\n  && dataContextSelection?.selectionState$ | async as selectionState\"\n\n  fxLayout=\"column\" fxFlex=\"none\"\n\n  [matBadgeHidden]=\"selectionState.count === 0\"\n  [matBadge]=\"selectionState.count + ''\"\n  [matBadgePosition]=\"'above before'\"\n  [matBadgeOverlap]=\"false\"\n  [matBadgeSize]=\"'small'\"\n>\n  <mat-checkbox fxFlex=\"none\"\n    (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n    [checked]=\"selectionState.allSelected\"\n    [indeterminate]=\"selectionState.someSelected\"\n  >\n  </mat-checkbox>\n</div>\n\n<!--  -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"\n  dataContextSelection.selectionModel.isMultipleSelection\n  && dataContextSelection?.selectionState$ | async as selectionState\"\n\n  fxLayout=\"column\" fxFlex=\"none\"\n\n  [matBadgeHidden]=\"selectionState.count === 0\"\n  [matBadge]=\"selectionState.count + ''\"\n  [matBadgePosition]=\"'above before'\"\n  [matBadgeOverlap]=\"false\"\n  [matBadgeSize]=\"'small'\"\n>\n  <mat-checkbox fxFlex=\"none\"\n    (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n    [checked]=\"selectionState.allSelected\"\n    [indeterminate]=\"selectionState.someSelected\"\n  >\n  </mat-checkbox>\n</div>\n\n<!--  -->\n" }]
@@ -11662,7 +11665,7 @@ class DataContextStateIndicatorComponent {
     }
 }
 DataContextStateIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextStateIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: { dataContext: "dataContext" }, ngImport: i0, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-dc-indicator-container mat-body-1\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: { dataContext: "dataContext" }, ngImport: i0, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-dc-indicator-container mat-body-1\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DataContextStateIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-context-state-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-dc-indicator-container mat-body-1\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n", styles: [".elder-dc-indicator-container{color:gray;padding-top:96px;padding-bottom:96px}\n"] }]
@@ -11759,12 +11762,12 @@ class TemplatedSelectionDialogComponent {
     ngOnInit() {
     }
 }
-TemplatedSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", 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.0.6", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <mat-toolbar elderTheme fxFlex=\"none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span fxFlex></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 fxLayout=\"column\" fxFlex 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: i3.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: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplatedSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SelectionModel }], target: i0.ɵɵFactoryTarget.Component });
+TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <mat-toolbar elderTheme fxFlex=\"none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span fxFlex></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 fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.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: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeDirective, selector: "[elderTheme]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-templated-selection-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxFill>\n  <mat-toolbar elderTheme fxFlex=\"none\">\n    <button mat-icon-button type=\"button\" matDialogClose=\"\">\n      <mat-icon>close</mat-icon>\n    </button>\n    <span fxFlex></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 fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: SelectionModel }]; } });
@@ -12170,7 +12173,7 @@ class SelectionModelPopupDirective {
         });
     }
 }
-SelectionModelPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SelectionModelPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$8.MatDialog }, { token: ElderDataViewSelectionMode }, { token: SelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionModelPopupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: SelectionModelPopupDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$7.MatDialog }, { token: ElderDataViewSelectionMode }, { token: SelectionModel }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 SelectionModelPopupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: SelectionModelPopupDirective, selector: "[elderSelectionModelPopup]", inputs: { elderSelectionModelPopupTransform: "elderSelectionModelPopupTransform" }, providers: [
         {
             provide: SelectionModel,
@@ -12198,7 +12201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                         ElderTableProviders.ClearTableModel // Since this popup is frequently used inside an elder-table search box
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$8.MatDialog }, { type: ElderDataViewSelectionMode }, { type: SelectionModel }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { elderSelectionModelPopupTransform: [{
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$7.MatDialog }, { type: ElderDataViewSelectionMode }, { type: SelectionModel }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { elderSelectionModelPopupTransform: [{
                 type: Input,
                 args: ['elderSelectionModelPopupTransform']
             }] } });
@@ -12643,14 +12646,14 @@ class ElderTableColumnDirective {
         this.cdkColumn = cdkColumn;
     }
 }
-ElderTableColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableColumnDirective, deps: [{ token: i1$a.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTableColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableColumnDirective, deps: [{ token: i1$9.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Directive });
 ElderTableColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderTableColumnDirective, selector: "th[elderColumnDef]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableColumnDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'th[elderColumnDef]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$a.CdkColumnDef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$9.CdkColumnDef }]; } });
 
 class ElderTableModelQueryGroup {
     /***************************************************************************
@@ -13027,14 +13030,14 @@ class ElderInfiniteAutocompleteDirective {
         this.unsubscribe$.complete();
     }
 }
-ElderInfiniteAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderInfiniteAutocompleteDirective, deps: [{ token: i1$6.MatAutocomplete, host: true }, { token: ElderInfiniteScrollDirective, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderInfiniteAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderInfiniteAutocompleteDirective, deps: [{ token: i1$5.MatAutocomplete, host: true }, { token: ElderInfiniteScrollDirective, host: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderInfiniteAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderInfiniteAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-autocomplete[elderElderInfiniteAutocomplete]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$6.MatAutocomplete, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.MatAutocomplete, decorators: [{
                     type: Host
                 }] }, { type: ElderInfiniteScrollDirective, decorators: [{
                     type: Host
@@ -13323,7 +13326,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: "\n<div fxLayout=\"column\" fxFlex\n     class=\"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 fxLayout=\"column\" class=\"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 fxFlex=\"none\" [dataContext]=\"dataContext\">\n  </elder-data-context-state-indicator>\n\n  <mat-progress-bar fxFlex=\"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                 fxFlex=\"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=\"elder-table-footer\"\n       fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n       style=\"padding-right: 10px\" >\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: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: i3.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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: "\n<div fxLayout=\"column\" fxFlex\n     class=\"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 fxLayout=\"column\" class=\"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 fxFlex=\"none\" [dataContext]=\"dataContext\">\n  </elder-data-context-state-indicator>\n\n  <mat-progress-bar fxFlex=\"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                 fxFlex=\"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=\"elder-table-footer\"\n       fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n       style=\"padding-right: 10px\" >\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: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$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i11.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i11.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-table, ebs-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -13452,11 +13455,11 @@ class ElderPaginatorIntl extends MatPaginatorIntl {
         this.changes.next();
     }
 }
-ElderPaginatorIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderPaginatorIntl, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderPaginatorIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderPaginatorIntl, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderPaginatorIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderPaginatorIntl });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderPaginatorIntl, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$3.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.TranslateService }]; } });
 
 class ElderDelayedFocusDirective {
     constructor(el) {
@@ -13513,14 +13516,14 @@ class ElderTouchedDirective {
         }
     }
 }
-ElderTouchedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTouchedDirective, deps: [{ token: i2.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTouchedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTouchedDirective, deps: [{ token: i3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
 ElderTouchedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderTouchedDirective, selector: "[elderTouched]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTouchedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderTouched]'
                 }]
-        }], ctorParameters: function () { return [{ type: i2.NgControl }]; } });
+        }], ctorParameters: function () { return [{ type: i3.NgControl }]; } });
 
 /**
  * This directive provides a parent form to any kind of nested control
@@ -14314,14 +14317,14 @@ class ElderTripleStateCheckboxDirective {
         }
     }
 }
-ElderTripleStateCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$9.MatCheckbox }, { token: i2.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTripleStateCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTripleStateCheckboxDirective, deps: [{ token: i1$8.MatCheckbox }, { token: i3.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderTripleStateCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderTripleStateCheckboxDirective, selector: "mat-checkbox[elderTripleStateCheckbox]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTripleStateCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-checkbox[elderTripleStateCheckbox]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$9.MatCheckbox }, { type: i2.NgModel, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$8.MatCheckbox }, { type: i3.NgModel, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { onClick: [{
                 type: HostListener,
@@ -15411,13 +15414,13 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         return this.mediaObserver.asObservable().pipe(filter(changes => changes.length > 0), map(changes => this.sizeToColumns.get(changes[0].mqAlias)), debounceTime(150), startWith(start));
     }
 }
-ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewSelectionMode, optional: true, skipSelf: true }, { token: i3$4.MediaObserver }], target: i0.ɵɵFactoryTarget.Component });
+ElderGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewSelectionMode, optional: true, skipSelf: true }, { token: i3$5.MediaObserver }], target: i0.ɵɵFactoryTarget.Component });
 ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n  <!-- Grid Browser -->\n  <div fxLayout=\"column\" fxFlex\n       class=\"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         fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n      <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox fxFlex=\"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                         fxFlex=\"none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\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 fxFlex=\"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=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n         fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n         style=\"padding-right: 10px\">\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                     fxFlex=\"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\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" 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:5px;margin:0 -5px}.elder-grid-tile-hidden{flex:0 1 100%;margin:5px;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 .2s ease-in,opacity .2s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-grid-tile-content:hover .elder-grid-tile-overlay{opacity:1;transition:background-color .2s ease-in,opacity .2s ease-in}.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$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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 fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n  <!-- Grid Browser -->\n  <div fxLayout=\"column\" fxFlex\n       class=\"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         fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n      <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox fxFlex=\"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                         fxFlex=\"none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator fxFlex=\"none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\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 fxFlex=\"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=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n         fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n         style=\"padding-right: 10px\">\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                     fxFlex=\"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\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" 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:5px;margin:0 -5px}.elder-grid-tile-hidden{flex:0 1 100%;margin:5px;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 .2s ease-in,opacity .2s ease-in}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}.elder-grid-tile-content:hover .elder-grid-tile-overlay{opacity:1;transition:background-color .2s ease-in,opacity .2s ease-in}.elder-click-through{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -15432,7 +15435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i3$4.MediaObserver }]; }, propDecorators: { tileTemplateQuery: [{
+                }] }, { type: i3$5.MediaObserver }]; }, propDecorators: { tileTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderGridTileDirective, { read: TemplateRef, static: true }]
             }], toolbarVisible: [{
@@ -15841,14 +15844,14 @@ class ElderLanguageService {
         this.translate.use(lang);
     }
 }
-ElderLanguageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLanguageService, deps: [{ token: i1$3.TranslateService }, { token: i2$1.WebLocalStorage }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderLanguageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLanguageService, deps: [{ token: i2.TranslateService }, { token: i2$1.WebLocalStorage }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderLanguageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLanguageService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.TranslateService }, { type: i2$1.WebLocalStorage }]; } });
+        }], ctorParameters: function () { return [{ type: i2.TranslateService }, { type: i2$1.WebLocalStorage }]; } });
 
 class ElderLanguageSwitcherComponent {
     /***************************************************************************
@@ -15894,7 +15897,7 @@ class ElderLanguageSwitcherComponent {
     }
 }
 ElderLanguageSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLanguageSwitcherComponent, deps: [{ token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"row\" fxLayoutAlign=\"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$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3.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$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { 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$3.TranslatePipe, name: "translate" }] });
+ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{currentLanguage}}</span>\n  </div>\n</button>\n\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select placeholder=\"{{'language.language' | translate}}\" name=\"language\" [(ngModel)]=\"currentLanguage\">\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{ 'language.' + lang | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 fxLayout=\"row\" fxLayoutAlign=\"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"] }]
@@ -15971,14 +15974,14 @@ class ElderToolbarTitleService {
         return resolvedTitle;
     }
 }
-ElderToolbarTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarTitleService, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderToolbarTitleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarTitleService, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderToolbarTitleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarTitleService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarTitleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }]; } });
 
 class ElderToolbarTitleComponent {
     /***************************************************************************
@@ -16005,12 +16008,12 @@ class ElderToolbarTitleComponent {
         }, 10);
     }
 }
-ElderToolbarTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarTitleComponent, deps: [{ token: ElderToolbarTitleService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-ElderToolbarTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title", ngImport: i0, template: "<h3 class=\"mat-title\">{{(title$ | async) | translate}}</h3>\n", styles: [""], dependencies: [{ kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderToolbarTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarTitleComponent, deps: [{ token: ElderToolbarTitleService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+ElderToolbarTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title", ngImport: i0, template: "<h3 class=\"mat-title\">{{(title$ | async) | translate}}</h3>\n", styles: [""], dependencies: [{ kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-toolbar-title, ebs-toolbar-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 class=\"mat-title\">{{(title$ | async) | translate}}</h3>\n" }]
-        }], ctorParameters: function () { return [{ type: ElderToolbarTitleService }, { type: i1$4.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: ElderToolbarTitleService }, { type: i1$3.ActivatedRoute }]; } });
 
 class ElderToolbarComponent {
     /***************************************************************************
@@ -16059,7 +16062,7 @@ class ElderToolbarComponent {
     }
 }
 ElderToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarComponent, deps: [{ token: ElderToolbarService }, { token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "\n\n<div fxLayout=\"row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n               [color]=\"color$ | async\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"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 fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i7.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.0.6", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: { color: "color" }, ngImport: i0, template: "\n\n<div fxLayout=\"row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n               [color]=\"color$ | async\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"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 fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"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$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i7.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$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-toolbar, ebs-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<div fxLayout=\"row\">\n\n  <ng-content></ng-content>\n\n  <mat-toolbar fxLayout=\"row\" fxLayoutAlign=\"start center\"\n               [color]=\"color$ | async\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"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 fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(slotTemplate$('center') | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"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" }]
@@ -16327,7 +16330,7 @@ class ElderNavLinkComponent {
     }
 }
 ElderNavLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderNavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderNavLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderNavLinkComponent, selector: "elder-nav-link, ebs-nav-link", inputs: { title: "title", routerLink: "routerLink", href: "href", target: "target", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<!-- Router Link -->\n<a mat-button *ngIf=\"(routerLink$ | async) as routerLink\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n   [routerLink]=\"routerLink\"\n   [queryParamsHandling]=\"queryParamsHandling\"\n   [queryParams]=\"queryParams\"\n   routerLinkActive=\"nav-link-active\"\n   #rla=\"routerLinkActive\"\n   [color]=\"rla.isActive ? 'primary' : ''\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"rla.isActive ? activeLinkContent : inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n<!-- Href Link -->\n<a mat-button *ngIf=\"(href$ | async) as href\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n   [href]=\"href\"\n   [target]=\"target$ | async\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n<!-- Simple Button -->\n<a mat-button *ngIf=\"(fallbackToButton$ | async)\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n\n<!-- Content for an active Nav Element -->\n<ng-template #activeLinkContent>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <mat-icon *ngIf=\"!svgIcon\" class=\"nav-icon\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"svgIcon\" class=\"nav-icon\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n\n    <span class=\"noselect nav-text nav-text-active\">\n      {{ title | translate}}\n\n    </span>\n  </div>\n\n</ng-template>\n\n<!-- Content for an inactive Nav Element -->\n<ng-template #inactiveLinkContent>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <mat-icon *ngIf=\"!svgIcon\" class=\"nav-icon nav-icon-inactive\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"svgIcon\" class=\"nav-icon nav-icon-inactive\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n\n    <span class=\"noselect nav-text nav-text-inactive\">\n      {{ title | translate}}\n    </span>\n  </div>\n\n</ng-template>\n", styles: [".nav-link{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0}.nav-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-icon-inactive{color:#757575}.nav-text{padding-left:16px;font-size:16px;font-weight:400}\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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+ElderNavLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderNavLinkComponent, selector: "elder-nav-link, ebs-nav-link", inputs: { title: "title", routerLink: "routerLink", href: "href", target: "target", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<!-- Router Link -->\n<a mat-button *ngIf=\"(routerLink$ | async) as routerLink\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n   [routerLink]=\"routerLink\"\n   [queryParamsHandling]=\"queryParamsHandling\"\n   [queryParams]=\"queryParams\"\n   routerLinkActive=\"nav-link-active\"\n   #rla=\"routerLinkActive\"\n   [color]=\"rla.isActive ? 'primary' : ''\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"rla.isActive ? activeLinkContent : inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n<!-- Href Link -->\n<a mat-button *ngIf=\"(href$ | async) as href\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n   [href]=\"href\"\n   [target]=\"target$ | async\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n<!-- Simple Button -->\n<a mat-button *ngIf=\"(fallbackToButton$ | async)\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n\n<!-- Content for an active Nav Element -->\n<ng-template #activeLinkContent>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <mat-icon *ngIf=\"!svgIcon\" class=\"nav-icon\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"svgIcon\" class=\"nav-icon\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n\n    <span class=\"noselect nav-text nav-text-active\">\n      {{ title | translate}}\n\n    </span>\n  </div>\n\n</ng-template>\n\n<!-- Content for an inactive Nav Element -->\n<ng-template #inactiveLinkContent>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <mat-icon *ngIf=\"!svgIcon\" class=\"nav-icon nav-icon-inactive\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"svgIcon\" class=\"nav-icon nav-icon-inactive\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n\n    <span class=\"noselect nav-text nav-text-inactive\">\n      {{ title | translate}}\n    </span>\n  </div>\n\n</ng-template>\n", styles: [".nav-link{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0}.nav-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-icon-inactive{color:#757575}.nav-text{padding-left:16px;font-size:16px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderNavLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-nav-link, ebs-nav-link', template: "<!-- Router Link -->\n<a mat-button *ngIf=\"(routerLink$ | async) as routerLink\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n   [routerLink]=\"routerLink\"\n   [queryParamsHandling]=\"queryParamsHandling\"\n   [queryParams]=\"queryParams\"\n   routerLinkActive=\"nav-link-active\"\n   #rla=\"routerLinkActive\"\n   [color]=\"rla.isActive ? 'primary' : ''\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"rla.isActive ? activeLinkContent : inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n<!-- Href Link -->\n<a mat-button *ngIf=\"(href$ | async) as href\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n   [href]=\"href\"\n   [target]=\"target$ | async\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n<!-- Simple Button -->\n<a mat-button *ngIf=\"(fallbackToButton$ | async)\"\n   class=\"nav-link\"\n   fxLayout=\"row\" fxLayoutAlign=\"start center\"\n   [tabIndex]=\"0\"\n>\n\n  <ng-container [ngTemplateOutlet]=\"inactiveLinkContent\">\n  </ng-container>\n\n</a>\n\n\n<!-- Content for an active Nav Element -->\n<ng-template #activeLinkContent>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <mat-icon *ngIf=\"!svgIcon\" class=\"nav-icon\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"svgIcon\" class=\"nav-icon\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n\n    <span class=\"noselect nav-text nav-text-active\">\n      {{ title | translate}}\n\n    </span>\n  </div>\n\n</ng-template>\n\n<!-- Content for an inactive Nav Element -->\n<ng-template #inactiveLinkContent>\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <mat-icon *ngIf=\"!svgIcon\" class=\"nav-icon nav-icon-inactive\"\n              [fontIcon]=\"fontIcon\"\n              [fontSet]=\"fontSet\">\n      {{icon}}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"svgIcon\" class=\"nav-icon nav-icon-inactive\"\n              [svgIcon]=\"svgIcon\"\n    ></mat-icon>\n\n    <span class=\"noselect nav-text nav-text-inactive\">\n      {{ title | translate}}\n    </span>\n  </div>\n\n</ng-template>\n", styles: [".nav-link{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0}.nav-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-icon-inactive{color:#757575}.nav-text{padding-left:16px;font-size:16px;font-weight:400}\n"] }]
@@ -16396,7 +16399,7 @@ class ElderNavGroupComponent {
     }
 }
 ElderNavGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderNavGroupComponent, selector: "elder-nav-group, ebs-nav-group", outputs: { click: "click" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "\n<ng-container *ngIf=\"(state$ | async) as state\">\n  <div fxLayout=\"column\"\n       class=\"nav-group\"\n       [class.nav-group-active]=\"state.isOpen\"\n  >\n    <a mat-button\n       class=\"nav-group-button mat-button-fill\"\n       fxLayout=\"row\" fxLayoutAlign=\"start center\"\n       [tabIndex]=\"0\"\n       [class.nav-group-button-active]=\"state.isOpen\"\n       [class.nav-group-button-inactive]=\"!state.isOpen\"\n       [color]=\"state.isOpen ? 'primary' : undefined\"\n       (click)=\"itemClick($event)\"\n    >\n\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\" fxFlex\n           class=\"noselect\">\n        <ng-content></ng-content>\n        <span fxFlex></span>\n        <mat-icon>{{state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n      </div>\n\n    </a>\n\n    <!-- Nested Items projection -->\n    <div fxLayout=\"column\"\n         class=\"nav-group-items-container\"\n         [@openClose]=\"state.isOpen ? 'open' : 'closed'\">\n      <ng-content select=\"elder-nav-link\"></ng-content>\n    </div>\n\n  </div>\n</ng-container>\n", styles: [".nav-group-button-inactive{padding-left:16px}.nav-group{min-height:56px}.nav-group-button{padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-nav-group a mat-icon{height:24px;width:24px;font-size:24px;padding:4px}elder-nav-group a.nav-group-button-inactive mat-icon{color:#757575}.nav-group-items-container{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], animations: [
+ElderNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderNavGroupComponent, selector: "elder-nav-group, ebs-nav-group", outputs: { click: "click" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "\n<ng-container *ngIf=\"(state$ | async) as state\">\n  <div fxLayout=\"column\"\n       class=\"nav-group\"\n       [class.nav-group-active]=\"state.isOpen\"\n  >\n    <a mat-button\n       class=\"nav-group-button mat-button-fill\"\n       fxLayout=\"row\" fxLayoutAlign=\"start center\"\n       [tabIndex]=\"0\"\n       [class.nav-group-button-active]=\"state.isOpen\"\n       [class.nav-group-button-inactive]=\"!state.isOpen\"\n       [color]=\"state.isOpen ? 'primary' : undefined\"\n       (click)=\"itemClick($event)\"\n    >\n\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\" fxFlex\n           class=\"noselect\">\n        <ng-content></ng-content>\n        <span fxFlex></span>\n        <mat-icon>{{state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n      </div>\n\n    </a>\n\n    <!-- Nested Items projection -->\n    <div fxLayout=\"column\"\n         class=\"nav-group-items-container\"\n         [@openClose]=\"state.isOpen ? 'open' : 'closed'\">\n      <ng-content select=\"elder-nav-link\"></ng-content>\n    </div>\n\n  </div>\n</ng-container>\n", styles: [".nav-group-button-inactive{padding-left:16px}.nav-group{min-height:56px}.nav-group-button{padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-nav-group a mat-icon{height:24px;width:24px;font-size:24px;padding:4px}elder-nav-group a.nav-group-button-inactive mat-icon{color:#757575}.nav-group-items-container{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], animations: [
         trigger('openClose', [
             state('open', style({
                 height: '*',
@@ -16638,7 +16641,7 @@ class ElderBreadCrumbsComponent {
     }
 }
 ElderBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderBreadCrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: "\n<!-- main container-->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n     [style.background-color]=\"backgroundColor\" class=\"breadcrumb-bar\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n       fxLayoutGap=\"12px\" class=\"breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n\n  >\n      <!-- path edit control -->\n      <mat-form-field fxFlex *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 -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n\n        <div fxFlex fxLayoutAlign=\"start center\">\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\"\n               *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n            <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n            <!-- root element -->\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 -->\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 -->\n            <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!rootIcon || !isFirst)\"\n               (click)=\"null\" elderStopEventPropagation\n            >\n              {{node.name}}\n              <mat-icon>arrow_drop_down</mat-icon>\n            </a>\n\n          </div>\n\n        </div>\n\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb menu -->\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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.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: i5$1.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.0.6", 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: "\n<!-- main container-->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n     [style.background-color]=\"backgroundColor\" class=\"breadcrumb-bar\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n       fxLayoutGap=\"12px\" class=\"breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n\n  >\n      <!-- path edit control -->\n      <mat-form-field fxFlex *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 -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n\n        <div fxFlex fxLayoutAlign=\"start center\">\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\"\n               *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n            <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n            <!-- root element -->\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 -->\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 -->\n            <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!rootIcon || !isFirst)\"\n               (click)=\"null\" elderStopEventPropagation\n            >\n              {{node.name}}\n              <mat-icon>arrow_drop_down</mat-icon>\n            </a>\n\n          </div>\n\n        </div>\n\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb menu -->\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$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.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: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderKeyEventDirective, selector: "[elderKeyEvent]", inputs: ["elderKeyEventFilter", "elderKeyEventDown", "elderKeyEventChildren", "elderKeyEventCallback"], outputs: ["onElderKeyEvent"] }, { kind: "directive", type: ElderClipboardPutDirective, selector: "[elderClipboardPut]", inputs: ["elderClipboardPut"], outputs: ["clipboardCopied"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderBreadCrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-bread-crumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<!-- main container-->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n     [style.background-color]=\"backgroundColor\" class=\"breadcrumb-bar\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n       fxLayoutGap=\"12px\" class=\"breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n\n  >\n      <!-- path edit control -->\n      <mat-form-field fxFlex *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 -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n\n        <div fxFlex fxLayoutAlign=\"start center\">\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\"\n               *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n            <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n            <!-- root element -->\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 -->\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 -->\n            <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!rootIcon || !isFirst)\"\n               (click)=\"null\" elderStopEventPropagation\n            >\n              {{node.name}}\n              <mat-icon>arrow_drop_down</mat-icon>\n            </a>\n\n          </div>\n\n        </div>\n\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb menu -->\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"] }]
@@ -16813,14 +16816,14 @@ class ElderRouterOutletService {
         }
     }
 }
-ElderRouterOutletService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderRouterOutletService, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderRouterOutletService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderRouterOutletService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderRouterOutletService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderRouterOutletService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderRouterOutletService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Router }]; } });
 
 /**
  * This service manages the side content.
@@ -16949,14 +16952,14 @@ class ElderShellService {
         return this.routerOutletService.activate(this.detailContentOutlet, args, extras);
     }
 }
-ElderShellService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellService, deps: [{ token: i1$4.Router }, { token: ElderRouterOutletService }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderShellService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellService, deps: [{ token: i1$3.Router }, { token: ElderRouterOutletService }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderShellService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: ElderRouterOutletService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: ElderRouterOutletService }]; } });
 
 class ElderRouteOutletDrawerService {
     /***************************************************************************
@@ -17230,7 +17233,7 @@ class ElderShellComponent {
     }
 }
 ElderShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", 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.0.6", 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: "\n<mat-sidenav-container\n  elderThemeApplier\n  style=\"height:100%; width: 100%\"\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 fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div fxLayout=\"column\" fxFill>\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 fxFill fxLayout=\"column\">\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 fxLayout=\"column\" fxFlex>\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 fxLayout=\"column\" fxFill>\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\">\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor$ | async\">\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: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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.0.6", 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: "\n<mat-sidenav-container\n  elderThemeApplier\n  style=\"height:100%; width: 100%\"\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 fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div fxLayout=\"column\" fxFill>\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 fxFill fxLayout=\"column\">\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 fxLayout=\"column\" fxFlex>\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 fxLayout=\"column\" fxFill>\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\">\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor$ | async\">\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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", 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: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell, ebs-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<mat-sidenav-container\n  elderThemeApplier\n  style=\"height:100%; width: 100%\"\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 fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div fxLayout=\"column\" fxFill>\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 fxFill fxLayout=\"column\">\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 fxLayout=\"column\" fxFlex>\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 fxLayout=\"column\" fxFill>\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\">\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor$ | async\">\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"] }]
@@ -17376,12 +17379,12 @@ class ElderShellNavigationToggleComponent {
         return parts.join('/');
     }
 }
-ElderShellNavigationToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellNavigationToggleComponent, deps: [{ token: i1$4.Router }, { token: ElderShellService }], target: i0.ɵɵFactoryTarget.Component });
-ElderShellNavigationToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderShellNavigationToggleComponent, selector: "elder-shell-nav-toggle", inputs: { roots: "roots", hide: "hide" }, ngImport: i0, template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: "pipe", type: i1$5.AsyncPipe, name: "async" }] });
+ElderShellNavigationToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellNavigationToggleComponent, deps: [{ token: i1$3.Router }, { token: ElderShellService }], target: i0.ɵɵFactoryTarget.Component });
+ElderShellNavigationToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderShellNavigationToggleComponent, selector: "elder-shell-nav-toggle", inputs: { roots: "roots", hide: "hide" }, ngImport: i0, template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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$4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderShellNavigationToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell-nav-toggle', template: "\n<button mat-icon-button type=\"button\" (click)=\"onClick()\" *ngIf=\"showComponent()\">\n  <mat-icon>{{icon | async}}</mat-icon>\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: ElderShellService }]; }, propDecorators: { roots: [{
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: ElderShellService }]; }, propDecorators: { roots: [{
                 type: Input
             }], hide: [{
                 type: Input
@@ -17474,7 +17477,7 @@ class ElderAppHeaderComponent {
     }
 }
 ElderAppHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAppHeaderComponent, deps: [{ token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ElderAppHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAppHeaderComponent, selector: "elder-app-header", inputs: { icon: "icon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel fxLayout=\"column\" [color]=\"color$ | async\" class=\"light\" fxFill>\n  <div fxLayout=\"row\" style=\"padding: 20px\" fxFlex=\"none\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center start\">\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" style=\"width: 100%\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start end\" fxLayoutGap=\"5px\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAppHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAppHeaderComponent, selector: "elder-app-header", inputs: { icon: "icon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<mat-panel fxLayout=\"column\" [color]=\"color$ | async\" class=\"light\" fxFill>\n  <div fxLayout=\"row\" style=\"padding: 20px\" fxFlex=\"none\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center start\">\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" style=\"width: 100%\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start end\" fxLayoutGap=\"5px\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderPanelComponent, selector: "elder-panel, mat-panel", inputs: ["color"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-panel fxLayout=\"column\" [color]=\"color$ | async\" class=\"light\" fxFill>\n  <div fxLayout=\"row\" style=\"padding: 20px\" fxFlex=\"none\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n      <mat-icon class=\"noselect title-icon\" [color]=\"iconColor$ | async\">{{icon}}</mat-icon>\n    </div>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center start\">\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" style=\"width: 100%\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start end\" fxLayoutGap=\"5px\">\n          <span id=\"title\" class=\"noselect\" style=\"font-size: 28px\">{{title}}</span>\n          <span class=\"mat-caption noselect\"><small>{{version}}</small></span>\n        </div>\n      </div>\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <span class=\"mat-caption noselect\">\n          <span *ngIf=\"!subTitleLink\">{{subTitle}}</span>\n          <a *ngIf=\"subTitleLink\" [href]=\"subTitleLink\" target=\"_blank\" style=\"text-decoration:none; color: inherit\">{{subTitle}}</a>\n        </span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Project child content here -->\n  <ng-content></ng-content>\n\n</mat-panel>\n", styles: [".title-icon{font-size:42px;width:42px;height:42px;padding:20px}\n"] }]
@@ -17889,7 +17892,7 @@ class ElderLocalDateInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner fxFlex\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$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: i5$1.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$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$3.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: i3.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$3.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner fxFlex\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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: i5$1.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$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$3.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner fxFlex\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"] }]
@@ -17993,7 +17996,7 @@ class ElderDateSwitcherComponent extends FormFieldBaseComponent {
     }
 }
 ElderDateSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDateSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderDateSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDateSwitcherComponent, selector: "elder-date-switcher, ebs-date-switcher", inputs: { datePickerEnabled: "datePickerEnabled", datePickerTouchUi: "datePickerTouchUi", date: "date" }, outputs: { dateChange: "dateChange" }, providers: buildFormIntegrationProviders(ElderDateSwitcherComponent), usesInheritance: true, ngImport: i0, template: "\n\n<form #frm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n\n  <button mat-icon-button type=\"button\" (click)=\"previousDay()\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n\n  <elder-local-date-input\n    name=\"date\" #dateInput\n    [value]=\"value$ | async\"\n    (valueChange)=\"updateValue($event)\"\n    [datePickerEnabled]=\"false\"\n    [datePickerTouchUi]=\"datePickerTouchUi\"\n    [readonly]=\"true\" style=\"cursor: pointer\"\n    (click)=\"dateInput.openDatePicker()\"\n  ></elder-local-date-input>\n\n\n  <button mat-icon-button type=\"button\" (click)=\"nextDay()\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"today()\" matTooltip=\"Today\">\n    <mat-icon>event</mat-icon>\n  </button>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: ["zone", "datePickerEnabled", "datePickerTouchUi", "allowNull", "isoValue", "dateValue", "isoDateValue"], outputs: ["blur", "valueUpdatedBlur", "isoValueChange", "dateValueChange", "isoDateValueChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDateSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDateSwitcherComponent, selector: "elder-date-switcher, ebs-date-switcher", inputs: { datePickerEnabled: "datePickerEnabled", datePickerTouchUi: "datePickerTouchUi", date: "date" }, outputs: { dateChange: "dateChange" }, providers: buildFormIntegrationProviders(ElderDateSwitcherComponent), usesInheritance: true, ngImport: i0, template: "\n\n<form #frm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n\n  <button mat-icon-button type=\"button\" (click)=\"previousDay()\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n\n  <elder-local-date-input\n    name=\"date\" #dateInput\n    [value]=\"value$ | async\"\n    (valueChange)=\"updateValue($event)\"\n    [datePickerEnabled]=\"false\"\n    [datePickerTouchUi]=\"datePickerTouchUi\"\n    [readonly]=\"true\" style=\"cursor: pointer\"\n    (click)=\"dateInput.openDatePicker()\"\n  ></elder-local-date-input>\n\n\n  <button mat-icon-button type=\"button\" (click)=\"nextDay()\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"today()\" matTooltip=\"Today\">\n    <mat-icon>event</mat-icon>\n  </button>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.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: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: ["zone", "datePickerEnabled", "datePickerTouchUi", "allowNull", "isoValue", "dateValue", "isoDateValue"], outputs: ["blur", "valueUpdatedBlur", "isoValueChange", "dateValueChange", "isoDateValueChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDateSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-date-switcher, ebs-date-switcher', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderDateSwitcherComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "\n\n<form #frm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n\n  <button mat-icon-button type=\"button\" (click)=\"previousDay()\">\n    <mat-icon>keyboard_arrow_left</mat-icon>\n  </button>\n\n\n  <elder-local-date-input\n    name=\"date\" #dateInput\n    [value]=\"value$ | async\"\n    (valueChange)=\"updateValue($event)\"\n    [datePickerEnabled]=\"false\"\n    [datePickerTouchUi]=\"datePickerTouchUi\"\n    [readonly]=\"true\" style=\"cursor: pointer\"\n    (click)=\"dateInput.openDatePicker()\"\n  ></elder-local-date-input>\n\n\n  <button mat-icon-button type=\"button\" (click)=\"nextDay()\">\n    <mat-icon>keyboard_arrow_right</mat-icon>\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"today()\" matTooltip=\"Today\">\n    <mat-icon>event</mat-icon>\n  </button>\n\n</form>\n" }]
@@ -18061,7 +18064,7 @@ class ElderDateTimeInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderDateTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDateTimeInputComponent, selector: "elder-date-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderDateTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput fxFlex=\"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$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: i5$1.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$3.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDateTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDateTimeInputComponent, selector: "elder-date-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderDateTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput fxFlex=\"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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: i5$1.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput fxFlex=\"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" }]
@@ -18130,7 +18133,7 @@ class ElderLocalTimeInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalTimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderLocalTimeInputComponent, selector: "elder-local-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderLocalTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput fxFlex=\"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$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: i5$1.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$3.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalTimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderLocalTimeInputComponent, selector: "elder-local-time-input", inputs: { isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderLocalTimeInputComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput fxFlex=\"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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: i5$1.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <input matInput fxFlex=\"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" }]
@@ -18238,7 +18241,7 @@ class ElderIntervalInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderIntervalInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderIntervalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderIntervalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderIntervalInputComponent, selector: "elder-interval-input", inputs: { mode: "mode", zone: "zone", isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderIntervalInputComponent), usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\n\n  <!-- DATE_TIME_RANGE -->\n  <div *ngSwitchCase=\"'date-time-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-date-time-input\n      [name]=\"name + '-dt-start'\"\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-date-time-input>\n\n    <elder-date-time-input\n      [name]=\"name + '-dt-end'\"\n      [value]=\"(value$ | async)?.end\"\n      (valueUpdated)=\"onEndChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-date-time-input>\n  </div>\n\n  <!-- DAY_TIME_RANGE -->\n  <div *ngSwitchCase=\"'day-time-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-date-time-input\n      [name]=\"name + '-day-start'\"\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onDayTimeStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-date-time-input>\n\n    <elder-local-time-input\n      [name]=\"name + '-day-end'\"\n      [value]=\"endTime$ | async\"\n      (valueUpdated)=\"onDayTimeEndTimeChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-time-input>\n  </div>\n\n  <!-- DATE_RANGE -->\n  <div *ngSwitchCase=\"'date-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-local-date-input\n      [name]=\"name + '-date-start'\"\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onStartDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-local-date-input>\n\n    <elder-local-date-input\n      [name]=\"name + '-date-end'\"\n      [value]=\"endDate$ | async\"\n      (valueUpdated)=\"onEndDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-date-input>\n  </div>\n\n  <!-- SINGLE_DAY -->\n  <div *ngSwitchCase=\"'single-day'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-local-date-input\n      [name]=\"name\"\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onSingleDayDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '')\"\n    ></elder-local-date-input>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: ElderDateTimeInputComponent, selector: "elder-date-time-input", inputs: ["isoValue"], outputs: ["isoValueChange"] }, { kind: "component", type: ElderLocalTimeInputComponent, selector: "elder-local-time-input", inputs: ["isoValue"], outputs: ["isoValueChange"] }, { kind: "component", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: ["zone", "datePickerEnabled", "datePickerTouchUi", "allowNull", "isoValue", "dateValue", "isoDateValue"], outputs: ["blur", "valueUpdatedBlur", "isoValueChange", "dateValueChange", "isoDateValueChange"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderIntervalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderIntervalInputComponent, selector: "elder-interval-input", inputs: { mode: "mode", zone: "zone", isoValue: "isoValue" }, outputs: { isoValueChange: "isoValueChange" }, providers: buildFormIntegrationProviders(ElderIntervalInputComponent), usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode\">\n\n  <!-- DATE_TIME_RANGE -->\n  <div *ngSwitchCase=\"'date-time-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-date-time-input\n      [name]=\"name + '-dt-start'\"\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-date-time-input>\n\n    <elder-date-time-input\n      [name]=\"name + '-dt-end'\"\n      [value]=\"(value$ | async)?.end\"\n      (valueUpdated)=\"onEndChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-date-time-input>\n  </div>\n\n  <!-- DAY_TIME_RANGE -->\n  <div *ngSwitchCase=\"'day-time-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-date-time-input\n      [name]=\"name + '-day-start'\"\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onDayTimeStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-date-time-input>\n\n    <elder-local-time-input\n      [name]=\"name + '-day-end'\"\n      [value]=\"endTime$ | async\"\n      (valueUpdated)=\"onDayTimeEndTimeChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-time-input>\n  </div>\n\n  <!-- DATE_RANGE -->\n  <div *ngSwitchCase=\"'date-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-local-date-input\n      [name]=\"name + '-date-start'\"\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onStartDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-local-date-input>\n\n    <elder-local-date-input\n      [name]=\"name + '-date-end'\"\n      [value]=\"endDate$ | async\"\n      (valueUpdated)=\"onEndDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-date-input>\n  </div>\n\n  <!-- SINGLE_DAY -->\n  <div *ngSwitchCase=\"'single-day'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-local-date-input\n      [name]=\"name\"\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onSingleDayDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '')\"\n    ></elder-local-date-input>\n  </div>\n\n</ng-container>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: ElderDateTimeInputComponent, selector: "elder-date-time-input", inputs: ["isoValue"], outputs: ["isoValueChange"] }, { kind: "component", type: ElderLocalTimeInputComponent, selector: "elder-local-time-input", inputs: ["isoValue"], outputs: ["isoValueChange"] }, { kind: "component", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: ["zone", "datePickerEnabled", "datePickerTouchUi", "allowNull", "isoValue", "dateValue", "isoDateValue"], outputs: ["blur", "valueUpdatedBlur", "isoValueChange", "dateValueChange", "isoDateValueChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderIntervalInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-interval-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderIntervalInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<ng-container [ngSwitch]=\"mode\">\n\n  <!-- DATE_TIME_RANGE -->\n  <div *ngSwitchCase=\"'date-time-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-date-time-input\n      [name]=\"name + '-dt-start'\"\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-date-time-input>\n\n    <elder-date-time-input\n      [name]=\"name + '-dt-end'\"\n      [value]=\"(value$ | async)?.end\"\n      (valueUpdated)=\"onEndChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-date-time-input>\n  </div>\n\n  <!-- DAY_TIME_RANGE -->\n  <div *ngSwitchCase=\"'day-time-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-date-time-input\n      [name]=\"name + '-day-start'\"\n      [value]=\"(value$ | async)?.start\"\n      (valueUpdated)=\"onDayTimeStartChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-date-time-input>\n\n    <elder-local-time-input\n      [name]=\"name + '-day-end'\"\n      [value]=\"endTime$ | async\"\n      (valueUpdated)=\"onDayTimeEndTimeChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-time-input>\n  </div>\n\n  <!-- DATE_RANGE -->\n  <div *ngSwitchCase=\"'date-range'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-local-date-input\n      [name]=\"name + '-date-start'\"\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onStartDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.from' | translate)\"\n    ></elder-local-date-input>\n\n    <elder-local-date-input\n      [name]=\"name + '-date-end'\"\n      [value]=\"endDate$ | async\"\n      (valueUpdated)=\"onEndDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '') + ' ' + ('interval.to' | translate)\"\n    ></elder-local-date-input>\n  </div>\n\n  <!-- SINGLE_DAY -->\n  <div *ngSwitchCase=\"'single-day'\"\n       fxLayout=\"row\" fxLayoutGap=\"8px\">\n    <elder-local-date-input\n      [name]=\"name\"\n      [value]=\"startDate$ | async\"\n      (valueUpdated)=\"onSingleDayDateChanged($event)\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"(placeholder || '')\"\n    ></elder-local-date-input>\n  </div>\n\n</ng-container>\n\n\n\n" }]
@@ -18331,7 +18334,7 @@ class ElderDurationInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderDurationInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDurationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderDurationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"row\" fxFlex=\"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$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: i5$1.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.0.6", 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 fxLayout=\"row\" fxFlex=\"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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: i5$1.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$4.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDurationInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-duration-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderDurationInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<div fxLayout=\"row\" fxFlex=\"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"] }]
@@ -18435,7 +18438,7 @@ class ElderPeriodInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderPeriodInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderPeriodInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderPeriodInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"row\" fxFlex=\"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$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: i5$1.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.0.6", 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 fxLayout=\"row\" fxFlex=\"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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: i5$1.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$4.AsyncPipe, name: "async" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderPeriodInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-period-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderPeriodInputComponent), viewProviders: [ViewProviders.ParentControlContainer], template: "<div fxLayout=\"row\" fxFlex=\"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"] }]
@@ -18742,7 +18745,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\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 fxLayout=\"column\" fxLayoutAlign=\"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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$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: i5$1.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", "cleanUp", "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$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\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 fxLayout=\"column\" fxLayoutAlign=\"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$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$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: i5$1.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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "cleanUp", "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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), template: "<div fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\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 fxLayout=\"column\" fxLayoutAlign=\"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,12 +18772,12 @@ class ElderLocalizedInputDialogComponent {
     ngOnInit() {
     }
 }
-ElderLocalizedInputDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", 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.0.6", type: ElderLocalizedInputDialogComponent, selector: "elder-localized-input-dialog", ngImport: i0, template: "\n<div fxLayout=\"column\" fxFill>\n\n  <mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayoutGap=\"8px\">\n      <mat-icon class=\"noselect\">translate</mat-icon>\n      <h2 class=\"noselect\" translate>{{data.title}}</h2>\n      <span fxFlex></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 fxLayout=\"column\" class=\"padding-small\" fxFlex>\n    <elder-localized-input-table\n      [float]=\"true\" fxFlex\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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1$3.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i7.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ElderLocalizedInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderLocalizedInputDialogComponent, selector: "elder-localized-input-dialog", ngImport: i0, template: "\n<div fxLayout=\"column\" fxFill>\n\n  <mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayoutGap=\"8px\">\n      <mat-icon class=\"noselect\">translate</mat-icon>\n      <h2 class=\"noselect\" translate>{{data.title}}</h2>\n      <span fxFlex></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 fxLayout=\"column\" class=\"padding-small\" fxFlex>\n    <elder-localized-input-table\n      [float]=\"true\" fxFlex\n      [textColumns]=\"data.textColumns\"\n      [(value)]=\"data.localizables\"\n      [readonly]=\"data.readonly\"\n      [disabled]=\"data.disabled\"\n      [required]=\"data.required\"\n    >\n    </elder-localized-input-table>\n  </div>\n</div>\n\n\n\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i7.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.0.6", ngImport: i0, type: ElderLocalizedInputDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div fxLayout=\"column\" fxFill>\n\n  <mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayoutGap=\"8px\">\n      <mat-icon class=\"noselect\">translate</mat-icon>\n      <h2 class=\"noselect\" translate>{{data.title}}</h2>\n      <span fxFlex></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 fxLayout=\"column\" class=\"padding-small\" fxFlex>\n    <elder-localized-input-table\n      [float]=\"true\" fxFlex\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" }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -18796,14 +18799,14 @@ class ElderLocalizedInputDialogService {
         });
     }
 }
-ElderLocalizedInputDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputDialogService, deps: [{ token: i1$8.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderLocalizedInputDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputDialogService, deps: [{ token: i1$7.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderLocalizedInputDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputDialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialog }]; } });
 
 class LocalisationPickerService {
     /***************************************************************************
@@ -18979,7 +18982,7 @@ class ElderLocalizedInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputComponent, deps: [{ token: ElderLocalizedInputDialogService }, { token: LocalisationPickerService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\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\" fxFlex=\"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: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: i5$1.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: i3.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$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\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\" fxFlex=\"grow\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    readonly\n    [name]=\"name + '-localized'\"\n    [placeholder]=\"placeholder | translate\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true}\"\n  >\n\n  <ng-container matSuffix>\n    <button mat-icon-button type=\"button\"\n            (click)=\"openTranslationPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon>translate</mat-icon>\n    </button>\n  </ng-container>\n\n  <mat-hint>{{hintText$ | async}}</mat-hint>\n\n</mat-form-field>\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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: i5$1.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: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderLocalizedInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-localized-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderLocalizedInputComponent), template: "<mat-form-field fxFlex\n                class=\"elder-std-form-field\"\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\" fxFlex=\"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"] }]
@@ -19347,7 +19350,7 @@ class ElderSearchInputDirective {
         return CollectionUtil.flatten(arrays);
     }
 }
-ElderSearchInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSearchInputDirective, deps: [{ token: ElderSearchContextDirective }, { token: i2.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderSearchInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSearchInputDirective, deps: [{ token: ElderSearchContextDirective }, { token: i3.NgModel, host: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderSearchInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: { queryKey: ["elderSearchInputKey", "queryKey"], valueTransform: ["elderSearchInputTransform", "valueTransform"], resolvePath: ["elderSearchInput", "resolvePath"], fallbackValue: ["elderSearchInputFallback", "fallbackValue"] }, exportAs: ["elderSearchInput"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSearchInputDirective, decorators: [{
             type: Directive,
@@ -19355,7 +19358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                     selector: '[elderSearchInput]',
                     exportAs: 'elderSearchInput'
                 }]
-        }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }, { type: i2.NgModel, decorators: [{
+        }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }, { type: i3.NgModel, decorators: [{
                     type: Host
                 }] }]; }, propDecorators: { queryKey: [{
                 type: Input,
@@ -19533,7 +19536,7 @@ class ElderOverlayComponent {
         return this._overlayRef.attach(searchPanelPortal);
     }
 }
-ElderOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$b.Overlay }, { token: i1$b.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ElderOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$a.Overlay }, { token: i1$a.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component });
 ElderOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderOverlayComponent, selector: "elder-overlay", inputs: { originX: "originX", originY: "originY", overlayX: "overlayX", overlayY: "overlayY", offsetY: "offsetY", offsetX: "offsetX", backdrop: "backdrop", backdropVisible: "backdropVisible", origin: "origin", positionStrategy: "positionStrategy", overlaySize: "overlaySize" }, outputs: { keydownEvents: "keydownEvents", attachedChange: "attachedChange" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["elderOverlay"], ngImport: i0, template: `
     <ng-template>
       <ng-content></ng-content>
@@ -19551,7 +19554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$b.Overlay }, { type: i1$b.OverlayPositionBuilder }]; }, propDecorators: { templateRef: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1$a.Overlay }, { type: i1$a.OverlayPositionBuilder }]; }, propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], originX: [{
@@ -19723,7 +19726,7 @@ class ElderSearchBoxComponent {
         this.autoPanel = true;
         this.name = 'searchExpression';
         this.queryKey = 'query';
-        this._dense = false;
+        this._dense = true;
         this.autocomplete = 'off';
     }
     /***************************************************************************
@@ -19765,10 +19768,10 @@ class ElderSearchBoxComponent {
     }
 }
 ElderSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSearchBoxComponent, deps: [{ token: ElderSearchContextDirective }], target: i0.ɵɵFactoryTarget.Component });
-ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSearchBoxComponent, selector: "elder-search-box", inputs: { autoPanel: "autoPanel", name: "name", queryKey: "queryKey", placeholder: "placeholder", 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 fxLayout=\"row\" fxFlex>\n\n  <!-- Main search input -->\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    fxFlex=\"grow\" fxFlexAlign=\"center\"\n    [elderDense]=\"dense\">\n\n    <div fxLayout=\"row\" matPrefix>\n      <button mat-icon-button type=\"button\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n      >\n        <mat-icon>search</mat-icon>\n      </button>\n    </div>\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 fxLayout=\"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\n        <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : 'default'\">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-card-panel class=\"elder-search-panel\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{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: i5$1.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$3.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: ElderCardPanelComponent, selector: "elder-card-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxLayout=\"row\" fxFlex>\n\n  <!-- Main search input -->\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    fxFlex=\"grow\" fxFlexAlign=\"center\"\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 fxLayout=\"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-card-panel class=\"elder-search-panel\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{min-width:250px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: i5$1.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$3.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: ElderCardPanelComponent, selector: "elder-card-panel" }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderSearchInputDirective, selector: "[elderSearchInput]", inputs: ["elderSearchInputKey", "elderSearchInputTransform", "elderSearchInput", "elderSearchInputFallback"], exportAs: ["elderSearchInput"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSearchBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"row\" fxFlex>\n\n  <!-- Main search input -->\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    fxFlex=\"grow\" fxFlexAlign=\"center\"\n    [elderDense]=\"dense\">\n\n    <div fxLayout=\"row\" matPrefix>\n      <button mat-icon-button type=\"button\"\n              [elderOverlayTrigger]=\"searchPanel\" (click)=\"blurFocus($event)\"\n      >\n        <mat-icon>search</mat-icon>\n      </button>\n    </div>\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 fxLayout=\"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\n        <mat-icon [color]=\"userDefinedFilters.length > 0 ? 'accent' : 'default'\">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-card-panel class=\"elder-search-panel\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{min-width:250px}\n"] }]
+            args: [{ selector: 'elder-search-box', exportAs: 'elderSearchBox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"row\" fxFlex>\n\n  <!-- Main search input -->\n  <mat-form-field\n    *ngIf=\"overlayState$ | async as overlayState\"\n    fxFlex=\"grow\" fxFlexAlign=\"center\"\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 fxLayout=\"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-card-panel class=\"elder-search-panel\">\n\n    <!-- Project the users search inputs here -->\n    <ng-content select=\"elder-search-panel\"></ng-content>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"space-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-card-panel>\n</elder-overlay>\n", styles: [".elder-search-panel{min-width:250px}\n"] }]
         }], ctorParameters: function () { return [{ type: ElderSearchContextDirective }]; }, propDecorators: { search: [{
                 type: ViewChild,
                 args: ['search']
@@ -19783,6 +19786,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], label: [{
+                type: Input
             }], hint: [{
                 type: Input
             }], autocomplete: [{
@@ -20214,7 +20219,7 @@ class ElderSelectListItemComponent {
     }
 }
 ElderSelectListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectListItemComponent, deps: [{ token: ElderSelectListComponent }], target: i0.ɵɵFactoryTarget.Component });
-ElderSelectListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectListItemComponent, selector: "elder-select-list-item, ebs-select-list-item", inputs: { value: "value" }, outputs: { click: "click" }, queries: [{ propertyName: "children", predicate: ElderSelectListItemComponent }], ngImport: i0, template: "<ng-container *ngIf=\"(state$ | async) as state\">\n  <a mat-button\n     class=\"select-item mat-button-fill\"\n     fxLayout=\"row\" fxLayoutAlign=\"start center\"\n     [tabIndex]=\"0\"\n     [class.select-item-active]=\"state.isActive\"\n     [class.select-item-inactive]=\"!state.isActive\"\n     [color]=\"state.isActive ? 'primary' : ''\"\n     (click)=\"itemClick($event)\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\" fxFlex\n         class=\"noselect\">\n      <ng-content></ng-content>\n\n      <ng-container *ngIf=\"(hasChildren$ | async)\">\n        <span  fxFlex></span>\n        <mat-icon>{{(isOpen$ | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n      </ng-container>\n    </div>\n\n  </a>\n\n  <!-- Nested Items projection -->\n  <div fxLayout=\"column\"\n       class=\"nested-items-container\"\n       [@openClose]=\"(isOpen$ | async) ? 'open' : 'closed'\">\n    <ng-content  select=\"elder-select-list-item\"></ng-content>\n  </div>\n</ng-container>\n\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], animations: [
+ElderSelectListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectListItemComponent, selector: "elder-select-list-item, ebs-select-list-item", inputs: { value: "value" }, outputs: { click: "click" }, queries: [{ propertyName: "children", predicate: ElderSelectListItemComponent }], ngImport: i0, template: "<ng-container *ngIf=\"(state$ | async) as state\">\n  <a mat-button\n     class=\"select-item mat-button-fill\"\n     fxLayout=\"row\" fxLayoutAlign=\"start center\"\n     [tabIndex]=\"0\"\n     [class.select-item-active]=\"state.isActive\"\n     [class.select-item-inactive]=\"!state.isActive\"\n     [color]=\"state.isActive ? 'primary' : ''\"\n     (click)=\"itemClick($event)\"\n  >\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\" fxFlex\n         class=\"noselect\">\n      <ng-content></ng-content>\n\n      <ng-container *ngIf=\"(hasChildren$ | async)\">\n        <span  fxFlex></span>\n        <mat-icon>{{(isOpen$ | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>\n      </ng-container>\n    </div>\n\n  </a>\n\n  <!-- Nested Items projection -->\n  <div fxLayout=\"column\"\n       class=\"nested-items-container\"\n       [@openClose]=\"(isOpen$ | async) ? 'open' : 'closed'\">\n    <ng-content  select=\"elder-select-list-item\"></ng-content>\n  </div>\n</ng-container>\n\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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], animations: [
         trigger('openClose', [
             state('open', style({
                 height: '*',
@@ -20393,7 +20398,7 @@ ElderChipListSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderChipListSelectComponent)
         }
-    ], ngImport: i0, template: "\n<div fxLayout=\"column\" fxFill>\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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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 fxLayout=\"column\" fxFill>\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$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderChipListSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-chip-list-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -20516,7 +20521,7 @@ class HttpDataTransferComponent {
     }
 }
 HttpDataTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HttpDataTransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\" fxFlex class=\"padding-10 transfer\"\n>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"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 fxLayout=\"column\" fxFlex=\"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 fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"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: i3.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$5.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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: { transfer: "transfer" }, ngImport: i0, template: "\n\n<div *ngIf=\"($state | async) as state\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\" fxFlex class=\"padding-10 transfer\"\n>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"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 fxLayout=\"column\" fxFlex=\"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 fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"10\">\n    <button mat-icon-button type=\"button\"\n            (click)=\"transfer.abort()\" [disabled]=\"state.isDone\">\n      <mat-icon>\n        close\n      </mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".transfer{overflow:hidden}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$5.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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"16px\" fxFlex class=\"padding-10 transfer\"\n>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"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 fxLayout=\"column\" fxFlex=\"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 fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"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"] }]
@@ -20627,7 +20632,7 @@ class HttpDataTransferAggregateComponent {
     }
 }
 HttpDataTransferAggregateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HttpDataTransferAggregateComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferAggregateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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\" fxLayout=\"column\" fxFlex>\n    <div fxLayout=\"row\" fxLayoutAlign=\"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 fxLayout=\"row\">\n\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{aggregate.percentDone}}%</span>\n\n      <span fxFlex></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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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.0.6", 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\" fxLayout=\"column\" fxFlex>\n    <div fxLayout=\"row\" fxLayoutAlign=\"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 fxLayout=\"row\">\n\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{aggregate.percentDone}}%</span>\n\n      <span fxFlex></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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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\" fxLayout=\"column\" fxFlex>\n    <div fxLayout=\"row\" fxLayoutAlign=\"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 fxLayout=\"row\">\n\n      <!--\n      <span class=\"mat-caption\">{{aggregate.doneBytesAgg | bytes:1}}</span>\n      -->\n      <span class=\"mat-caption\">{{aggregate.percentDone}}%</span>\n\n      <span fxFlex></span>\n      <span class=\"mat-caption\">TOTAL {{aggregate.totalBytesAgg | bytes:1}}</span>\n    </div>\n  </div>\n</ng-container>\n\n" }]
@@ -20654,7 +20659,7 @@ class HttpDataTransferOverviewComponent {
     }
 }
 HttpDataTransferOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HttpDataTransferOverviewComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview", ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\" fxFlex *ngIf=\"transfers$ | async as transfers\">\n\n    <div *ngIf=\"transfers.length > 0 else noData\" fxLayout=\"column\" fxFlex class=\"scroll-list\">\n      <elder-data-transfer fxFlex=\"none\"\n                         *ngFor=\"let transfer of transfers\"\n                         [transfer]=\"transfer\">\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\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 fxFlex=\"none\" class=\"mat-elevation-z5\">\n    <elder-data-transfer-aggregate fxFlex [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: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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.0.6", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview", ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\" fxFlex *ngIf=\"transfers$ | async as transfers\">\n\n    <div *ngIf=\"transfers.length > 0 else noData\" fxLayout=\"column\" fxFlex class=\"scroll-list\">\n      <elder-data-transfer fxFlex=\"none\"\n                         *ngFor=\"let transfer of transfers\"\n                         [transfer]=\"transfer\">\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\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 fxFlex=\"none\" class=\"mat-elevation-z5\">\n    <elder-data-transfer-aggregate fxFlex [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$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HttpDataTransferOverviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-transfer-overview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxFill>\n\n  <div fxLayout=\"column\" fxFlex *ngIf=\"transfers$ | async as transfers\">\n\n    <div *ngIf=\"transfers.length > 0 else noData\" fxLayout=\"column\" fxFlex class=\"scroll-list\">\n      <elder-data-transfer fxFlex=\"none\"\n                         *ngFor=\"let transfer of transfers\"\n                         [transfer]=\"transfer\">\n      </elder-data-transfer>\n    </div>\n\n    <ng-template #noData>\n      <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\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 fxFlex=\"none\" class=\"mat-elevation-z5\">\n    <elder-data-transfer-aggregate fxFlex [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"] }]
@@ -20686,7 +20691,7 @@ class HttpDataTransferIndicatorComponent {
     }
 }
 HttpDataTransferIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HttpDataTransferIndicatorComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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          fxLayout=\"row\" fxLayoutAlign=\"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: i3.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$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { 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.0.6", 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          fxLayout=\"row\" fxLayoutAlign=\"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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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          fxLayout=\"row\" fxLayoutAlign=\"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"] }]
@@ -20838,7 +20843,7 @@ class ElderOfflineIndicatorComponent {
     }
 }
 ElderOfflineIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderOfflineIndicatorComponent, deps: [{ token: ElderConnectivityService }], target: i0.ɵɵFactoryTarget.Component });
-ElderOfflineIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderOfflineIndicatorComponent, selector: "elder-offline-indicator", ngImport: i0, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.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" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderOfflineIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderOfflineIndicatorComponent, selector: "elder-offline-indicator", ngImport: i0, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderOfflineIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-offline-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ng-container *ngIf=\"(status$ | async) as status\">\n    <button mat-icon-button type=\"button\" color=\"warn\"\n            *ngIf=\"!status.online\"\n            matTooltip=\"Lost Internet Connection, {{status.timeStamp | timeAgo}}\"\n    >\n        <mat-icon>offline_bolt</mat-icon>\n    </button>\n</ng-container>\n\n" }]
@@ -21031,14 +21036,14 @@ class ElderGlobalSearchService {
         this._showGlobalSearchSubject.next(value);
     }
 }
-ElderGlobalSearchService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGlobalSearchService, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderGlobalSearchService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGlobalSearchService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderGlobalSearchService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGlobalSearchService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGlobalSearchService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Router }]; } });
 
 /**
  * @deprecated This component is considered EOL
@@ -21135,12 +21140,12 @@ class ElderGlobalSearchComponent {
         return '';
     }
 }
-ElderGlobalSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", 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.0.6", 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: "\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n  <span *ngIf=\"searchCollapsed\" fxFlex></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" fxFlex>\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              fxLayout=\"row\" fxLayoutAlign=\"space-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\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: i3.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: i5$1.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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+ElderGlobalSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGlobalSearchComponent, deps: [{ token: i1$3.Router }, { token: ElderGlobalSearchService }], target: i0.ɵɵFactoryTarget.Component });
+ElderGlobalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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: "\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n  <span *ngIf=\"searchCollapsed\" fxFlex></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" fxFlex>\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              fxLayout=\"row\" fxLayoutAlign=\"space-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\n  </div>\n\n\n  <!-- Toggle Global Search -->\n  <button mat-icon-button type=\"button\"\n          *ngIf=\"!isSearchHidden\"\n          (click)=\"toggleSearch()\"\n          [disabled]=\"globalSearchDisabled\" >\n    <mat-icon>{{toggleIcon}}</mat-icon>\n  </button>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: i5$1.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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderGlobalSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-global-search, ebs-global-search', template: "\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n  <span *ngIf=\"searchCollapsed\" fxFlex></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" fxFlex>\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              fxLayout=\"row\" fxLayoutAlign=\"space-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\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" }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: ElderGlobalSearchService }]; }, propDecorators: { searchCollapsedChange: [{
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: ElderGlobalSearchService }]; }, propDecorators: { searchCollapsedChange: [{
                 type: Output
             }], hideWhenDisabled: [{
                 type: Input
@@ -21245,8 +21250,8 @@ class ElderSelectBase extends ElderFormFieldControlBase {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(zone, hostRef, controlType, focusMonitor, ngControl) {
-        super(hostRef, controlType, focusMonitor, ngControl);
+    constructor(zone, hostRef, controlType, focusMonitor, translateService, ngControl) {
+        super(hostRef, controlType, focusMonitor, translateService, ngControl);
         this.zone = zone;
         /***************************************************************************
          *                                                                         *
@@ -21430,7 +21435,7 @@ ElderSelectBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 ElderSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectBase, inputs: { cleanUp: "cleanUp", pageSize: "pageSize", queryFilter: "queryFilter", sorts: "sorts", icon: "icon", isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", valueAsId: "valueAsId", displayProperty: "displayProperty", displayPropertyResolver: "displayPropertyResolver", filters: "filters", dataSource: "dataSource", data: "data", valueTemplate: "valueTemplate" }, outputs: { currentClicked: "currentClicked" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "selectionPopup", first: true, predicate: SelectionModelPopupDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined }, { type: i1$1.FocusMonitor }, { type: i2.NgControl }]; }, propDecorators: { cleanUp: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: i3.NgControl }]; }, propDecorators: { cleanUp: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -21654,7 +21659,7 @@ class ElderAutocompleteComponent {
     }
 }
 ElderAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", enabled: "enabled", valueTemplate: "valueTemplate", suggestionsDc: "suggestionsDc", 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=\"!(suggestionsDc$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"suggestionsDc$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\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]=\"suggestion\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n        </mat-option>\n      </ng-container>\n\n\n\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    <p class=\"noselect\">{{propertyResolver(value)}}</p>\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: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { 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 });
+ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", enabled: "enabled", valueTemplate: "valueTemplate", suggestionsDc: "suggestionsDc", 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=\"!(suggestionsDc$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"suggestionsDc$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\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]=\"suggestion\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n        </mat-option>\n      </ng-container>\n\n\n\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    <p class=\"noselect\">{{propertyResolver(value)}}</p>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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=\"!(suggestionsDc$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"suggestionsDc$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\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]=\"suggestion\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n        </mat-option>\n      </ng-container>\n\n\n\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    <p class=\"noselect\">{{propertyResolver(value)}}</p>\n  </ng-container>\n</ng-template>\n" }]
@@ -21766,14 +21771,14 @@ class ElderAutocompleteDirective {
         }
     }
 }
-ElderAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAutocompleteDirective, deps: [{ token: i1$6.MatAutocompleteTrigger }], target: i0.ɵɵFactoryTarget.Directive });
+ElderAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAutocompleteDirective, deps: [{ token: i1$5.MatAutocompleteTrigger }], target: i0.ɵɵFactoryTarget.Directive });
 ElderAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", autocomplete: ["elderAutocomplete", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAutocompleteDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderAutocomplete]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$6.MatAutocompleteTrigger }]; }, propDecorators: { queryFilter: [{
+        }], ctorParameters: function () { return [{ type: i1$5.MatAutocompleteTrigger }]; }, propDecorators: { queryFilter: [{
                 type: Input
             }], filters: [{
                 type: Input
@@ -21887,14 +21892,14 @@ class ElderSelectOnTabDirective {
         }
     }
 }
-ElderSelectOnTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectOnTabDirective, deps: [{ token: i1$6.MatAutocompleteTrigger }, { token: ELDER_SELECT_BASE, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderSelectOnTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectOnTabDirective, deps: [{ token: i1$5.MatAutocompleteTrigger }, { token: ELDER_SELECT_BASE, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderSelectOnTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "onOptionSelect()", "keydown.arrowdown": "onOptionSelect()", "keydown.tab": "onBlur()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectOnTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderSelectOnTab]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$6.MatAutocompleteTrigger }, { type: ElderSelectBase, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$5.MatAutocompleteTrigger }, { type: ElderSelectBase, decorators: [{
                     type: SkipSelf
                 }, {
                     type: Inject,
@@ -21932,8 +21937,8 @@ class ElderSelectComponent extends ElderSelectBase {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(hostRef, zone, focusMonitor, ngControl) {
-        super(zone, hostRef, 'single-select', focusMonitor, ngControl);
+    constructor(hostRef, zone, focusMonitor, translateService, ngControl) {
+        super(zone, hostRef, 'single-select', focusMonitor, translateService, ngControl);
         this.ngControl = ngControl;
         /***************************************************************************
          *                                                                         *
@@ -22270,14 +22275,14 @@ class ElderSelectComponent extends ElderSelectBase {
         super.writeToControl(value);
     }
 }
-ElderSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+ElderSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: i2.TranslateService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
 ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderSelectComponent, selector: "elder-select", inputs: { nullDisplay: "nullDisplay", autocomplete: "autocomplete", allowNull: "allowNull", entity: "entity", entityId: "entityId" }, outputs: { entityIdChange: "entityIdChange", entityIdUpdated: "entityIdUpdated", entityChange: "entityChange", entityUpdated: "entityUpdated" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
         { provide: MatFormFieldControl, useExisting: ElderSelectComponent },
         {
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderSelectComponent)
         }
-    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"elder-form-control elder-select-control\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n         class=\"elder-input-prefix-icon-container\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-select-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div fxLayout=\"row\" fxFlex=\"none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\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\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">close</mat-icon>\n    </button>\n\n  </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$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.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: i5$1.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$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"elder-form-control elder-select-control\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n         class=\"elder-input-prefix-icon-container\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-select-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div fxLayout=\"row\" fxFlex=\"none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\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\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">close</mat-icon>\n    </button>\n\n  </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -22287,7 +22292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             useExisting: forwardRef(() => ElderSelectComponent)
                         }
                     ], template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"elder-form-control elder-select-control\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n         class=\"elder-input-prefix-icon-container\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-select-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div fxLayout=\"row\" fxFlex=\"none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\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\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">close</mat-icon>\n    </button>\n\n  </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -22384,8 +22389,8 @@ class ElderMultiSelectBase extends ElderSelectBase {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(zone, hostRef, controlType, focusMonitor, dialogService, ngControl) {
-        super(zone, hostRef, controlType, focusMonitor, ngControl);
+    constructor(zone, hostRef, controlType, focusMonitor, translateService, dialogService, ngControl) {
+        super(zone, hostRef, controlType, focusMonitor, translateService, ngControl);
         this.dialogService = dialogService;
         /***************************************************************************
          *                                                                         *
@@ -22694,7 +22699,7 @@ ElderMultiSelectBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 ElderMultiSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderMultiSelectBase, inputs: { entitiesSorts: "entitiesSorts", confirmRemoval: "confirmRemoval", entities: "entities", entityIds: "entityIds" }, outputs: { entityIdsChange: "entityIdsChange", entitiesChange: "entitiesChange", entityIdsUpdated: "entityIdsUpdated", entitiesUpdated: "entitiesUpdated" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderMultiSelectBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined }, { type: i1$1.FocusMonitor }, { type: ElderDialogService }, { type: i2.NgControl }]; }, propDecorators: { entitiesSorts: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: ElderDialogService }, { type: i3.NgControl }]; }, propDecorators: { entitiesSorts: [{
                 type: Input
             }], confirmRemoval: [{
                 type: Input
@@ -22820,8 +22825,8 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(hostRef, zone, focusMonitor, dialogService, ngControl) {
-        super(zone, hostRef, 'multi-select-chips', focusMonitor, dialogService, ngControl);
+    constructor(hostRef, zone, focusMonitor, translateService, dialogService, ngControl) {
+        super(zone, hostRef, 'multi-select-chips', focusMonitor, translateService, dialogService, ngControl);
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
@@ -22954,14 +22959,14 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         }
     }
 }
-ElderMultiSelectChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: ElderDialogService }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+ElderMultiSelectChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: i2.TranslateService }, { token: ElderDialogService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
 ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate", customInputTemplate: "customInputTemplate", chipColorEnabled: "chipColorEnabled", chipColorResolver: "chipColorResolver" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
         { provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent },
         {
             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\" fxFlex\n                class=\"elder-form-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\" fxFlex=\"none\"\n           class=\"elder-input-prefix-icon-container\"\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 *ngIf=\"chipAvatarTemplate\">\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 fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\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\"\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 fxFlex=\"nogrow\"\n                class=\"elder-chip-input\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$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.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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$5.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\" fxFlex\n                class=\"elder-form-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\" fxFlex=\"none\"\n           class=\"elder-input-prefix-icon-container\"\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 *ngIf=\"chipAvatarTemplate\">\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 fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\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\"\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 fxFlex=\"nogrow\"\n                class=\"elder-chip-input\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -22971,7 +22976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
                         }
                     ], template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n                class=\"elder-form-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\" fxFlex=\"none\"\n           class=\"elder-input-prefix-icon-container\"\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 *ngIf=\"chipAvatarTemplate\">\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 fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\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\"\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 fxFlex=\"nogrow\"\n                class=\"elder-chip-input\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: ElderDialogService }, { type: i2.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: ElderDialogService }, { type: i3.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -23666,12 +23671,12 @@ class ElderQuantityInputComponent extends FormFieldBaseComponent {
             && a?.unit === b?.unit;
     }
 }
-ElderQuantityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", 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.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\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 fxFlex elderNoSpinner class=\"elder-quantity-input\"\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: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3.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: i5$1.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$3.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderQuantityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuantityInputComponent, deps: [{ token: ElderUnitService }, { token: i1$4.DecimalPipe }], target: i0.ɵɵFactoryTarget.Component });
+ElderQuantityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\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 fxFlex elderNoSpinner class=\"elder-quantity-input\"\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$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3$1.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: i5$1.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$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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 fxFlex\n                class=\"elder-std-form-field\"\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 fxFlex elderNoSpinner class=\"elder-quantity-input\"\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"] }]
-        }], ctorParameters: function () { return [{ type: ElderUnitService }, { type: i1$5.DecimalPipe }]; }, propDecorators: { multipleOf: [{
+        }], ctorParameters: function () { return [{ type: ElderUnitService }, { type: i1$4.DecimalPipe }]; }, propDecorators: { multipleOf: [{
                 type: Input
             }], displayFormat: [{
                 type: Input
@@ -23791,14 +23796,14 @@ class ElderQuantityPipe {
 ElderQuantityPipe.EMPTY_STRING = '';
 ElderQuantityPipe.SPACE_STRING = ' ';
 ElderQuantityPipe.DEFAULT_DIGITS = '1.0-1';
-ElderQuantityPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuantityPipe, deps: [{ token: ElderUnitService }, { token: ElderQuantityTransformPipe }, { token: i1$5.DecimalPipe }], target: i0.ɵɵFactoryTarget.Pipe });
+ElderQuantityPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuantityPipe, deps: [{ token: ElderUnitService }, { token: ElderQuantityTransformPipe }, { token: i1$4.DecimalPipe }], target: i0.ɵɵFactoryTarget.Pipe });
 ElderQuantityPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderQuantityPipe, name: "elderQuantity" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderQuantityPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elderQuantity'
                 }]
-        }], ctorParameters: function () { return [{ type: ElderUnitService }, { type: ElderQuantityTransformPipe }, { type: i1$5.DecimalPipe }]; } });
+        }], ctorParameters: function () { return [{ type: ElderUnitService }, { type: ElderQuantityTransformPipe }, { type: i1$4.DecimalPipe }]; } });
 
 class ElderUnitSelectDirective {
     /***************************************************************************
@@ -24027,7 +24032,7 @@ class ElderDimensionsInputComponent extends TemplateCompositeControl {
     }
 }
 ElderDimensionsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDimensionsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderDimensionsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDimensionsInputComponent, selector: "elder-dimensions-input", inputs: { name: "name", appearance: "appearance", color: "color", placeholderLength: "placeholderLength", placeholderWidth: "placeholderWidth", placeholderHeight: "placeholderHeight", fxLayout: "fxLayout", fxLayoutGap: "fxLayoutGap", floatLabel: "floatLabel", min: "min", max: "max", requiredIgnoreZero: "requiredIgnoreZero", multipleOf: "multipleOf", displayFormat: "displayFormat", requiredLength: "requiredLength", requiredWidth: "requiredWidth", requiredHeight: "requiredHeight", readonly: "readonly", unit: "unit", lengthValue: "lengthValue", widthValue: "widthValue", heightValue: "heightValue" }, outputs: { unitChange: "unitChange", lengthValueChange: "lengthValueChange", widthValueChange: "widthValueChange", heightValueChange: "heightValueChange" }, providers: buildFormIntegrationProviders(ElderDimensionsInputComponent), usesInheritance: true, ngImport: i0, template: "\n<form #form=\"ngForm\" fxFlex\n      [fxLayout]=\"fxLayout\"\n      [fxLayoutGap]=\"fxLayoutGapInternal\">\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-length'\"\n                          [quantityValue]=\"lengthValue\"\n                          (quantityValueChange)=\"onLengthValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderLength ? placeholderLength : 'dimensions.length') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredLength\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-width'\"\n                          [quantityValue]=\"widthValue\"\n                          (quantityValueChange)=\"onWidthValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderWidth ? placeholderWidth : 'dimensions.width') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredWidth\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-height'\"\n                          [quantityValue]=\"heightValue\"\n                          (quantityValueChange)=\"onHeightValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderHeight ? placeholderHeight : 'dimensions.height') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredHeight\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n</form>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderQuantityInputComponent, selector: "elder-quantity-input", inputs: ["multipleOf", "displayFormat", "requiredIgnoreZero", "quantityNumber", "quantityValue", "unit"], outputs: ["quantityNumberChange", "quantityValueChange", "unitChange"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDimensionsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderDimensionsInputComponent, selector: "elder-dimensions-input", inputs: { name: "name", appearance: "appearance", color: "color", placeholderLength: "placeholderLength", placeholderWidth: "placeholderWidth", placeholderHeight: "placeholderHeight", fxLayout: "fxLayout", fxLayoutGap: "fxLayoutGap", floatLabel: "floatLabel", min: "min", max: "max", requiredIgnoreZero: "requiredIgnoreZero", multipleOf: "multipleOf", displayFormat: "displayFormat", requiredLength: "requiredLength", requiredWidth: "requiredWidth", requiredHeight: "requiredHeight", readonly: "readonly", unit: "unit", lengthValue: "lengthValue", widthValue: "widthValue", heightValue: "heightValue" }, outputs: { unitChange: "unitChange", lengthValueChange: "lengthValueChange", widthValueChange: "widthValueChange", heightValueChange: "heightValueChange" }, providers: buildFormIntegrationProviders(ElderDimensionsInputComponent), usesInheritance: true, ngImport: i0, template: "\n<form #form=\"ngForm\" fxFlex\n      [fxLayout]=\"fxLayout\"\n      [fxLayoutGap]=\"fxLayoutGapInternal\">\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-length'\"\n                          [quantityValue]=\"lengthValue\"\n                          (quantityValueChange)=\"onLengthValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderLength ? placeholderLength : 'dimensions.length') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredLength\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-width'\"\n                          [quantityValue]=\"widthValue\"\n                          (quantityValueChange)=\"onWidthValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderWidth ? placeholderWidth : 'dimensions.width') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredWidth\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-height'\"\n                          [quantityValue]=\"heightValue\"\n                          (quantityValueChange)=\"onHeightValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderHeight ? placeholderHeight : 'dimensions.height') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredHeight\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n</form>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: ElderQuantityInputComponent, selector: "elder-quantity-input", inputs: ["multipleOf", "displayFormat", "requiredIgnoreZero", "quantityNumber", "quantityValue", "unit"], outputs: ["quantityNumberChange", "quantityValueChange", "unitChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderDimensionsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-dimensions-input', providers: buildFormIntegrationProviders(ElderDimensionsInputComponent), changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<form #form=\"ngForm\" fxFlex\n      [fxLayout]=\"fxLayout\"\n      [fxLayoutGap]=\"fxLayoutGapInternal\">\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-length'\"\n                          [quantityValue]=\"lengthValue\"\n                          (quantityValueChange)=\"onLengthValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderLength ? placeholderLength : 'dimensions.length') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredLength\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-width'\"\n                          [quantityValue]=\"widthValue\"\n                          (quantityValueChange)=\"onWidthValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderWidth ? placeholderWidth : 'dimensions.width') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredWidth\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n    <elder-quantity-input fxFlex\n                          [name]=\"name + '-height'\"\n                          [quantityValue]=\"heightValue\"\n                          (quantityValueChange)=\"onHeightValueChanged($event)\"\n                          [unit]=\"unit\"\n                          class=\"elder-form-field-small\"\n                          [displayFormat]=\"displayFormat\"\n                          [placeholder]=\"(placeholderHeight ? placeholderHeight : 'dimensions.height') | translate\"\n                          [floatLabel]=\"floatLabel\"\n                          [appearance]=\"appearance\"\n                          [color]=\"color\"\n                          [requiredIgnoreZero]=\"requiredIgnoreZero\"\n                          [multipleOf]=\"multipleOf\"\n                          [min]=\"min\"\n                          [max]=\"max\"\n                          [required]=\"requiredHeight\"\n                          [readonly]=\"readonly\"\n                          [disabled]=\"disabled\"\n    >\n    </elder-quantity-input>\n\n</form>\n\n\n" }]
@@ -24298,14 +24303,14 @@ class ElderCurrencyPipe {
         return this.currencyPipe.transform(currency.value, currency.code, display, digitsInfo, locale);
     }
 }
-ElderCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCurrencyPipe, deps: [{ token: i1$5.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe });
+ElderCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCurrencyPipe, deps: [{ token: i1$4.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe });
 ElderCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: ElderCurrencyPipe, name: "elderCurrency" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elderCurrency'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.CurrencyPipe }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.CurrencyPipe }]; } });
 
 class ElderCurrencyModule {
 }
@@ -24342,7 +24347,7 @@ class ElderHeaderComponent {
     ngOnInit() { }
 }
 ElderHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderHeaderComponent, selector: "elder-header", inputs: { header: "header", subheader: "subheader" }, ngImport: i0, template: "\n<div fxLayout=\"column\" class=\"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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] });
+ElderHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderHeaderComponent, selector: "elder-header", inputs: { header: "header", subheader: "subheader" }, ngImport: i0, template: "\n<div fxLayout=\"column\" class=\"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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-header', template: "\n<div fxLayout=\"column\" class=\"mat-typography\">\n  <h2 style=\"margin: 0\">{{header ? header : '-' | translate}}</h2>\n  <span class=\"mat-caption\">{{subheader ? subheader : '-' | translate}}</span>\n</div>\n" }]
@@ -24547,7 +24552,7 @@ class ElderUrlFragmentSwitcherComponent {
     }
 }
 ElderUrlFragmentSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderUrlFragmentSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderUrlFragmentSwitcherComponent, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div fxLayout=\"column\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"], dependencies: [{ kind: "directive", type: i1$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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderUrlFragmentSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderUrlFragmentSwitcherComponent, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div fxLayout=\"column\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.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: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-url-fragment-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div fxLayout=\"column\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"] }]
@@ -24721,7 +24726,7 @@ class ElderProgressBarComponent {
     }
 }
 ElderProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderProgressBarComponent, selector: "elder-progress-bar", inputs: { minHeight: "minHeight", barColor: "barColor", barBackgroundColor: "barBackgroundColor", value: "value", bars: "bars" }, ngImport: i0, template: "<div *ngIf=\"bars$ | async as bars\" fxLayout=\"row\" fxFlex=\"no-shrink\"\n     [style.background]=\"barBackgroundColor\"\n     [style.min-height]=\"minHeight\"\n     style=\"min-width: 180px\">\n\n  <div *ngIf=\"bars.length === 0\"\n       [style.font-size]=\"minHeight+'px'\">\n    &nbsp;\n  </div>\n\n  <span class=\"progress-content\" *ngFor=\"let bar of bars\"\n        [fxFlex]=\"bar.widthPercent\"\n        [style.background]=\"bar.color\"\n        [style.min-height]=\"minHeight\"\n        [style.font-size]=\"minHeight+'px'\">\n    &nbsp;\n  </span>\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: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderProgressBarComponent, selector: "elder-progress-bar", inputs: { minHeight: "minHeight", barColor: "barColor", barBackgroundColor: "barBackgroundColor", value: "value", bars: "bars" }, ngImport: i0, template: "<div *ngIf=\"bars$ | async as bars\" fxLayout=\"row\" fxFlex=\"no-shrink\"\n     [style.background]=\"barBackgroundColor\"\n     [style.min-height]=\"minHeight\"\n     style=\"min-width: 180px\">\n\n  <div *ngIf=\"bars.length === 0\"\n       [style.font-size]=\"minHeight+'px'\">\n    &nbsp;\n  </div>\n\n  <span class=\"progress-content\" *ngFor=\"let bar of bars\"\n        [fxFlex]=\"bar.widthPercent\"\n        [style.background]=\"bar.color\"\n        [style.min-height]=\"minHeight\"\n        [style.font-size]=\"minHeight+'px'\">\n    &nbsp;\n  </span>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"bars$ | async as bars\" fxLayout=\"row\" fxFlex=\"no-shrink\"\n     [style.background]=\"barBackgroundColor\"\n     [style.min-height]=\"minHeight\"\n     style=\"min-width: 180px\">\n\n  <div *ngIf=\"bars.length === 0\"\n       [style.font-size]=\"minHeight+'px'\">\n    &nbsp;\n  </div>\n\n  <span class=\"progress-content\" *ngFor=\"let bar of bars\"\n        [fxFlex]=\"bar.widthPercent\"\n        [style.background]=\"bar.color\"\n        [style.min-height]=\"minHeight\"\n        [style.font-size]=\"minHeight+'px'\">\n    &nbsp;\n  </span>\n\n</div>\n" }]
@@ -24771,7 +24776,7 @@ class ElderScrollContainerComponent {
     }
 }
 ElderScrollContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderScrollContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderScrollContainerComponent, selector: "elder-scroll-container", inputs: { direction: "direction", padding: "padding" }, ngImport: i0, template: "<div fxLayout=\"column\" fxFill class=\"scroll-fix\">\n  <div fxLayout=\"column\" fxFlex class=\"scroll-fix\">\n    <div\n      [fxLayout]=\"isVertical(direction) ? 'column' : 'row'\"\n      fxLayoutGap=\"8px\"\n      [ngStyle]=\"{'padding': padding}\"\n      [class.vertical-scroll-wrapper]=\"isVertical(direction)\"\n      [class.horizontal-scroll-wrapper]=\"!isVertical(direction)\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".vertical-scroll-wrapper{min-height:100%;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch}.horizontal-scroll-wrapper{min-width:100%;overflow-y:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i1$5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderScrollContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderScrollContainerComponent, selector: "elder-scroll-container", inputs: { direction: "direction", padding: "padding" }, ngImport: i0, template: "<div fxLayout=\"column\" fxFill class=\"scroll-fix\">\n  <div fxLayout=\"column\" fxFlex class=\"scroll-fix\">\n    <div\n      [fxLayout]=\"isVertical(direction) ? 'column' : 'row'\"\n      fxLayoutGap=\"8px\"\n      [ngStyle]=\"{'padding': padding}\"\n      [class.vertical-scroll-wrapper]=\"isVertical(direction)\"\n      [class.horizontal-scroll-wrapper]=\"!isVertical(direction)\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".vertical-scroll-wrapper{min-height:100%;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch}.horizontal-scroll-wrapper{min-width:100%;overflow-y:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderScrollContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-scroll-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxFill class=\"scroll-fix\">\n  <div fxLayout=\"column\" fxFlex class=\"scroll-fix\">\n    <div\n      [fxLayout]=\"isVertical(direction) ? 'column' : 'row'\"\n      fxLayoutGap=\"8px\"\n      [ngStyle]=\"{'padding': padding}\"\n      [class.vertical-scroll-wrapper]=\"isVertical(direction)\"\n      [class.horizontal-scroll-wrapper]=\"!isVertical(direction)\"\n      >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".vertical-scroll-wrapper{min-height:100%;overflow-y:auto;overflow-x:visible;-webkit-overflow-scrolling:touch}.horizontal-scroll-wrapper{min-width:100%;overflow-y:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}\n"] }]
@@ -24976,14 +24981,14 @@ class CsvStreamExporterBuilderService {
         return new CsvStreamExporterBuilder(this.translateService, dataSource, csvSpec);
     }
 }
-CsvStreamExporterBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CsvStreamExporterBuilderService, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+CsvStreamExporterBuilderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CsvStreamExporterBuilderService, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
 CsvStreamExporterBuilderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CsvStreamExporterBuilderService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: CsvStreamExporterBuilderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.TranslateService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.TranslateService }]; } });
 
 class ElderCsvExportBtnComponent {
     /***************************************************************************
@@ -25040,7 +25045,7 @@ class ElderCsvExportBtnComponent {
     }
 }
 ElderCsvExportBtnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCsvExportBtnComponent, deps: [{ token: CsvStreamExporterBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-ElderCsvExportBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCsvExportBtnComponent, selector: "elder-csv-export-btn", inputs: { dataSource: "dataSource", csvSpec: "csvSpec", filters: "filters", sorts: "sorts", chunkSize: "chunkSize" }, ngImport: i0, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderCsvExportBtnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderCsvExportBtnComponent, selector: "elder-csv-export-btn", inputs: { dataSource: "dataSource", csvSpec: "csvSpec", filters: "filters", sorts: "sorts", chunkSize: "chunkSize" }, ngImport: i0, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: i5.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderCsvExportBtnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-csv-export-btn', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<button type=\"button\" mat-icon-button\n        (click)=\"startExport()\">\n    <mat-icon>file_download</mat-icon>\n</button>\n" }]
@@ -25160,7 +25165,7 @@ class IframeHostComponent {
     }
 }
 IframeHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IframeHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { post: "post", close: "close" }, host: { listeners: { "window:message": "onMessage($event)" } }, ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div fxLayout=\"column\" fxFill>\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             fxLayout=\"row\"\n             fxLayoutAlign=\"center center\"\n             fxFlex\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe fxFlex\n                *ngIf=\"!ctx.state.hasError\"\n                (error)=\"onIframeLoadError($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n        <div *ngIf=\"!ctx.params.hideActionBar\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex=\"none\" class=\"toolbar\">\n\n            <a mat-icon-button (click)=\"doClose($event)\" class=\"dense-button\">\n                <mat-icon class=\"small-icon\">close</mat-icon>\n            </a>\n\n            <a mat-icon-button class=\"dense-button\"\n               [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n                <mat-icon class=\"small-icon\">open_in_new</mat-icon>\n            </a>\n\n        </div>\n\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-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: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IframeHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: { iframeParams: "iframeParams" }, outputs: { post: "post", close: "close" }, host: { listeners: { "window:message": "onMessage($event)" } }, ngImport: i0, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div fxLayout=\"column\" fxFill>\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             fxLayout=\"row\"\n             fxLayoutAlign=\"center center\"\n             fxFlex\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe fxFlex\n                *ngIf=\"!ctx.state.hasError\"\n                (error)=\"onIframeLoadError($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n        <div *ngIf=\"!ctx.params.hideActionBar\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex=\"none\" class=\"toolbar\">\n\n            <a mat-icon-button (click)=\"doClose($event)\" class=\"dense-button\">\n                <mat-icon class=\"small-icon\">close</mat-icon>\n            </a>\n\n            <a mat-icon-button class=\"dense-button\"\n               [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n                <mat-icon class=\"small-icon\">open_in_new</mat-icon>\n            </a>\n\n        </div>\n\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-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: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderSafeUrlPipe, name: "elderSafeUrl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{state: iframeState$ | async, params: iframeParams$ | async} as ctx\">\n\n    <div fxLayout=\"column\" fxFill>\n\n        <!-- In Case of Error -->\n        <div *ngIf=\"ctx.state.hasError\"\n             fxLayout=\"row\"\n             fxLayoutAlign=\"center center\"\n             fxFlex\n        >\n            <span>Failed to load Iframe: {{ctx.state.message}}</span>\n        </div>\n\n        <!-- IFrame -->\n        <iframe fxFlex\n                *ngIf=\"!ctx.state.hasError\"\n                (error)=\"onIframeLoadError($event)\"\n                [src]=\"ctx.params.srcUrl | elderSafeUrl\"\n                class=\"iframe\"\n                allow=\"clipboard *;clipboard-read *;clipboard-write *;\"\n        ></iframe>\n\n        <!-- Bottom Toolbar -->\n        <div *ngIf=\"!ctx.params.hideActionBar\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFlex=\"none\" class=\"toolbar\">\n\n            <a mat-icon-button (click)=\"doClose($event)\" class=\"dense-button\">\n                <mat-icon class=\"small-icon\">close</mat-icon>\n            </a>\n\n            <a mat-icon-button class=\"dense-button\"\n               [href]=\"ctx.params.srcUrl | elderSafeUrl\" target=\"_blank\">\n                <mat-icon class=\"small-icon\">open_in_new</mat-icon>\n            </a>\n\n        </div>\n\n  </div>\n\n</ng-container>\n\n\n\n", styles: [".iframe{margin:0;border:0;height:100%;background-color:#fff}\n"] }]
@@ -25208,12 +25213,12 @@ class IframeDialogComponent {
         this.dialogRef.close(data);
     }
 }
-IframeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeDialogComponent, deps: [{ token: i1$8.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-IframeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeDialogComponent, selector: "elder-i-frame-dialog", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" fxFill>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["post", "close"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IframeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+IframeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeDialogComponent, selector: "elder-i-frame-dialog", ngImport: i0, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" fxFill>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["post", "close"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"iframeParams$ | async as iFrameParams\" fxFill>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n" }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -25280,12 +25285,12 @@ class IframeSideContentComponent {
  **************************************************************************/
 IframeSideContentComponent.QUERY_PARAM_SRC_URL = 'srcUrl';
 IframeSideContentComponent.QUERY_PARAM_WIDTH = 'width';
-IframeSideContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeSideContentComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }, { token: ElderShellService }], target: i0.ɵɵFactoryTarget.Component });
-IframeSideContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeSideContentComponent, selector: "elder-i-frame-side-host", ngImport: i0, template: "\n<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" fxFill\n>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["post", "close"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IframeSideContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeSideContentComponent, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }, { token: ElderShellService }], target: i0.ɵɵFactoryTarget.Component });
+IframeSideContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: IframeSideContentComponent, selector: "elder-i-frame-side-host", ngImport: i0, template: "\n<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" fxFill\n>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["post", "close"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeSideContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-i-frame-side-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div *ngIf=\"iframeParams$ | async as iFrameParams\"\n     [style.width]=\"iFrameParams.width\" fxFill\n>\n\n    <elder-i-frame-host fxFlex\n                        [iframeParams]=\"iFrameParams\"\n                        (close)=\"close($event)\">\n    </elder-i-frame-host>\n\n</div>\n\n\n\n" }]
-        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }, { type: ElderShellService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }, { type: ElderShellService }]; } });
 
 class IframeService {
     /***************************************************************************
@@ -25324,14 +25329,14 @@ class IframeService {
         IframeService.postToParent(message);
     }
 }
-IframeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeService, deps: [{ token: i1$8.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+IframeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeService, deps: [{ token: i1$7.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
 IframeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: IframeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$8.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i1$7.MatDialog }]; } });
 
 class IframeCloseDirective {
     /***************************************************************************
@@ -25483,7 +25488,7 @@ class ElderExceptionDetailComponent {
     }
 }
 ElderExceptionDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderExceptionDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderExceptionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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\" fxFill>\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\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 fxLayout=\"column\" fxFlex 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$5.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3.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: i5$1.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$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderExceptionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", 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\" fxFill>\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\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 fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n", styles: [".stacktrace{font-size:11px;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll;background-color:#575757;color:#d0b795}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$5.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i2$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i2$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3$1.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: i5$1.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$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", 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\" fxFill>\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\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 fxLayout=\"column\" fxFlex 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"] }]
@@ -25548,7 +25553,7 @@ class ElderAuditedEntityComponent {
     }
 }
 ElderAuditedEntityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAuditedEntityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderAuditedEntityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAuditedEntityComponent, selector: "elder-audited-entity", inputs: { layout: "layout", appearance: "appearance", audited: "audited" }, ngImport: i0, template: "<section [fxLayout]=\"layout\" fxLayoutGap=\"8px\" *ngIf=\"auditedCtx$ | async as ctx\">\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\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:'dd.MM.yyyy hh:mm'\"\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 fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\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:'dd.MM.yyyy hh:mm'\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n\n</section>\n", styles: [".decent{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { 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: i5$1.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: i3.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$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAuditedEntityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: ElderAuditedEntityComponent, selector: "elder-audited-entity", inputs: { layout: "layout", appearance: "appearance", audited: "audited" }, ngImport: i0, template: "<section [fxLayout]=\"layout\" fxLayoutGap=\"8px\" *ngIf=\"auditedCtx$ | async as ctx\">\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\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:'dd.MM.yyyy hh:mm'\"\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 fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\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:'dd.MM.yyyy hh:mm'\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n\n</section>\n", styles: [".decent{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { 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: i5$1.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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderAuditedEntityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-audited-entity', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [fxLayout]=\"layout\" fxLayoutGap=\"8px\" *ngIf=\"auditedCtx$ | async as ctx\">\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\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:'dd.MM.yyyy hh:mm'\"\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 fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\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:'dd.MM.yyyy hh:mm'\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n\n</section>\n", styles: [".decent{opacity:.5}\n"] }]
@@ -25608,14 +25613,14 @@ class ElderTabDirective {
         this.tab = tab;
     }
 }
-ElderTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$c.MatTab }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$b.MatTab }], target: i0.ɵɵFactoryTarget.Directive });
 ElderTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderTabDirective, selector: "[elderTab]", inputs: { id: ["elderTab", "id"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderTab]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$c.MatTab }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i1$b.MatTab }]; }, propDecorators: { id: [{
                 type: Input,
                 args: ['elderTab']
             }] } });
@@ -25847,7 +25852,7 @@ class ElderTabGroupRoutingDirective {
  * Prefix used to indicate and index-based tab marker.
  */
 ElderTabGroupRoutingDirective.TAB_INDEX_PREFIX = 'idx:';
-ElderTabGroupRoutingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$c.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTabGroupRoutingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$b.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive });
 ElderTabGroupRoutingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.6", type: ElderTabGroupRoutingDirective, selector: "[elderTabGroupRouting]", inputs: { tabGroupQueryParamKey: ["elderTabGroupRouting", "tabGroupQueryParamKey"] }, queries: [{ propertyName: "tabs", predicate: MatTab }, { propertyName: "elderTabs", predicate: ElderTabDirective }], exportAs: ["elderTabGroupRouting"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: ElderTabGroupRoutingDirective, decorators: [{
             type: Directive,
@@ -25855,7 +25860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                     selector: '[elderTabGroupRouting]',
                     exportAs: 'elderTabGroupRouting'
                 }]
-        }], ctorParameters: function () { return [{ type: ElderUrlFragmentParamsService }, { type: i1$c.MatTabGroup }]; }, propDecorators: { tabGroupQueryParamKey: [{
+        }], ctorParameters: function () { return [{ type: ElderUrlFragmentParamsService }, { type: i1$b.MatTabGroup }]; }, propDecorators: { tabGroupQueryParamKey: [{
                 type: Input,
                 args: ['elderTabGroupRouting']
             }], tabs: [{