@elderbyte/ngx-starter 13.1.0 → 13.1.1

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -36,7 +36,7 @@ import * as i2$1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i4$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i10 from '@angular/material/progress-bar';
+import * as i2$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$6 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
@@ -59,7 +59,7 @@ import * as i6$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i5$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i2$2 from '@angular/material/toolbar';
+import * as i2$3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i11 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
@@ -67,18 +67,18 @@ import * as i6 from '@angular/material/table';
 import { MatColumnDef, MatRowDef, MatTable, MatTableModule } from '@angular/material/table';
 import * as i1$9 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
-import * as i2$3 from '@angular/material/sort';
+import * as i2$4 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
 import * as i8 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i6$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i2$4 from '@elderbyte/ngx-simple-webstorage';
+import * as i2$5 from '@elderbyte/ngx-simple-webstorage';
 import { SimpleWebStorageModule } from '@elderbyte/ngx-simple-webstorage';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i3$6 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$5 from '@angular/material/datepicker';
+import * as i2$6 from '@angular/material/datepicker';
 import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
 import localeDECH from '@angular/common/locales/de-CH';
 import { BehaviorSubject as BehaviorSubject$1 } from 'rxjs/internal/BehaviorSubject';
@@ -8020,7 +8020,7 @@ class ElderFileUploadComponent {
     }
 }
 ElderFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { type: i4$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i3$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "bytes": BytesPipe, "timeAgo": TimeAgoPipe, "async": i3$1.AsyncPipe } });
+ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { type: i4$1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i4$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i2$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i3$2.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "bytes": BytesPipe, "timeAgo": TimeAgoPipe, "async": i3$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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", styles: [""] }]
@@ -10272,10 +10272,10 @@ class DataContextStateIndicatorComponent {
     }
 }
 DataContextStateIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: DataContextStateIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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-table-hint mat-body-1\">\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: [""], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DataContextStateIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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-table-hint mat-body-1\">\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: [""] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { dataContext: [{
                 type: Input
             }] } });
@@ -10372,7 +10372,7 @@ class TemplatedSelectionDialogComponent {
     }
 }
 TemplatedSelectionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: TemplatedSelectionDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SelectionModel }], target: i0.ɵɵFactoryTarget.Component });
-TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div fxFill fxLayout=\"column\">\n\n  <mat-toolbar color=\"primary\">\n    <button mat-icon-button type=\"button\" mat-dialog-close>\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <span fxFlex></span>\n\n    <button mat-flat-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\n  </mat-toolbar>\n\n  <div fxLayout=\"column\" fxFlex>\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n\n  <!--\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"12px\">\n\n  </div>\n  -->\n\n</div>\n", styles: [""], components: [{ type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i5.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"] }, { type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplatedSelectionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: TemplatedSelectionDialogComponent, selector: "elder-templated-selection-dialog", ngImport: i0, template: "<div fxFill fxLayout=\"column\">\n\n  <mat-toolbar color=\"primary\">\n    <button mat-icon-button type=\"button\" mat-dialog-close>\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <span fxFlex></span>\n\n    <button mat-flat-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\n  </mat-toolbar>\n\n  <div fxLayout=\"column\" fxFlex>\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n\n  <!--\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"12px\">\n\n  </div>\n  -->\n\n</div>\n", styles: [""], components: [{ type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i5.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"] }, { type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: TemplatedSelectionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-templated-selection-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxFill fxLayout=\"column\">\n\n  <mat-toolbar color=\"primary\">\n    <button mat-icon-button type=\"button\" mat-dialog-close>\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <span fxFlex></span>\n\n    <button mat-flat-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\n  </mat-toolbar>\n\n  <div fxLayout=\"column\" fxFlex>\n    <ng-container *ngTemplateOutlet=\"data.selectionComponentTemplate\"></ng-container>\n  </div>\n\n  <!--\n  <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxLayoutGap=\"12px\">\n\n  </div>\n  -->\n\n</div>\n", styles: [""] }]
@@ -11402,7 +11402,7 @@ class ElderTableExtensionDirective {
         return this._extensionGroupIndex;
     }
 }
-ElderTableExtensionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderTableExtensionDirective, deps: [{ token: ElderTableModel }, { token: i2$3.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderTableExtensionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderTableExtensionDirective, deps: [{ token: ElderTableModel }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderTableExtensionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: ElderTableExtensionDirective, selector: "[elderTableExtension]", inputs: { columnsPosition: "columnsPosition" }, providers: [
         ElderTableProviders.ExistingOrNewTableModel
     ], queries: [{ propertyName: "columnDefsQuery", predicate: MatColumnDef }, { propertyName: "elderColumnsQuery", predicate: ElderTableColumnDirective }, { propertyName: "rowDefsQuery", predicate: MatRowDef }], ngImport: i0 });
@@ -11414,7 +11414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                         ElderTableProviders.ExistingOrNewTableModel
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: ElderTableModel }, { type: i2$3.MatSort, decorators: [{
+        }], ctorParameters: function () { return [{ type: ElderTableModel }, { type: i2$4.MatSort, decorators: [{
                     type: Optional
                 }] }, { type: ElderTableExtensionDirective, decorators: [{
                     type: Optional
@@ -11913,14 +11913,14 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
         }
     }
 }
-ElderTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewSelectionMode, optional: true, skipSelf: true }, { token: i2$3.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ElderTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewSelectionMode, optional: true, skipSelf: true }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ElderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: { idField: "idField", removingField: "removingField", hiddenField: "hiddenField", pageSizeOptions: "pageSizeOptions", cleanUp: "cleanUp", keepSelection: "keepSelection", showFooter: "showFooter", toolbarTemplate: "toolbarTemplate", data: "data", displayedColumns: "displayedColumns", selectionVisible: "selectionVisible" }, providers: [
         ElderTableProviders.ExistingOrNewTableModel,
         {
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderTableComponent)
         }
-    ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "\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 [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-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:visible;overflow:initial;max-width:42px;width:42px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-table .mat-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.mat-table .mat-header-cell:first-of-type{padding-left:20px}.mat-table .mat-header-cell:last-of-type,.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:unset;-webkit-hyphens:auto;-ms-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:bold}.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"], components: [{ type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i6.MatCellDef, selector: "[matCellDef]" }, { type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { type: i5.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"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, 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:visible;overflow:initial;max-width:42px;width:42px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-table .mat-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.mat-table .mat-header-cell:first-of-type{padding-left:20px}.mat-table .mat-header-cell:last-of-type,.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:unset;-webkit-hyphens:auto;-ms-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:bold}.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"], components: [{ type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { type: i2$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i6.MatCellDef, selector: "[matCellDef]" }, { type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { type: i5.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"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-table, ebs-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -11929,14 +11929,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                             provide: ELDER_DATA_VIEW,
                             useExisting: forwardRef(() => ElderTableComponent)
                         }
-                    ], 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 [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-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:visible;overflow:initial;max-width:42px;width:42px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-table .mat-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.mat-table .mat-header-cell:first-of-type{padding-left:20px}.mat-table .mat-header-cell:last-of-type,.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:unset;-webkit-hyphens:auto;-ms-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:bold}.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"] }]
+                    ], 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:visible;overflow:initial;max-width:42px;width:42px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.mat-table .mat-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.mat-table .mat-header-cell:first-of-type{padding-left:20px}.mat-table .mat-header-cell:last-of-type,.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:unset;-webkit-hyphens:auto;-ms-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:bold}.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"] }]
         }], ctorParameters: function () { return [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: ElderDataViewSelectionMode, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i2$3.MatSort, decorators: [{
+                }] }, { type: i2$4.MatSort, decorators: [{
                     type: Optional
                 }] }, { type: ElderTableExtensionDirective, decorators: [{
                     type: Optional
@@ -13215,7 +13215,7 @@ class ElderNumberCellDirective {
         }
     }
 }
-ElderNumberCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i2$3.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderNumberCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i2$4.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 ElderNumberCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: ElderNumberCellDirective, selector: "[elderNumberCell]", host: { properties: { "class.elder-number-cell": "true" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderNumberCellDirective, decorators: [{
             type: Directive,
@@ -13225,7 +13225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                         '[class.elder-number-cell]': 'true'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i2$3.MatSortHeader, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2$4.MatSortHeader, decorators: [{
                     type: Optional
                 }] }]; } });
 
@@ -13904,7 +13904,7 @@ ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             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    <span class=\"elder-table-hint mat-body-1\" fxFlex fxLayoutAlign=\"center center\"\n          *ngIf=\"!dataContext?.isStarted\">\n          {{'Datacontext not started' | translate}}\n        </span>\n\n    <div *ngIf=\"dataContext?.isStarted\" fxFlex fxLayoutAlign=\"center center\">\n\n           <span class=\"elder-table-hint mat-body-1\"\n                 *ngIf=\"(dataContext?.data | async)?.length === 0 && !(dataContext?.status | async)?.hasError\">\n          {{'No data available' | translate}}\n        </span>\n\n      <div *ngIf=\"(dataContext?.status | async)?.hasError\"\n           fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"hint mat-body-1\">{{'Error while loading data' | translate}}</span>\n      </div>\n\n    </div>\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,.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 rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.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"], components: [{ type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { type: i3$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i3.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"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { type: i5.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"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.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"] }, { type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, 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,.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 rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.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"], components: [{ type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { type: i3$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { type: i5.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"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -13912,7 +13912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
                             provide: ELDER_DATA_VIEW,
                             useExisting: forwardRef(() => ElderGridComponent)
                         }
-                    ], 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    <span class=\"elder-table-hint mat-body-1\" fxFlex fxLayoutAlign=\"center center\"\n          *ngIf=\"!dataContext?.isStarted\">\n          {{'Datacontext not started' | translate}}\n        </span>\n\n    <div *ngIf=\"dataContext?.isStarted\" fxFlex fxLayoutAlign=\"center center\">\n\n           <span class=\"elder-table-hint mat-body-1\"\n                 *ngIf=\"(dataContext?.data | async)?.length === 0 && !(dataContext?.status | async)?.hasError\">\n          {{'No data available' | translate}}\n        </span>\n\n      <div *ngIf=\"(dataContext?.status | async)?.hasError\"\n           fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"hint mat-body-1\">{{'Error while loading data' | translate}}</span>\n      </div>\n\n    </div>\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,.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 rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.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"] }]
+                    ], 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,.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 rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.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"] }]
         }], ctorParameters: function () { return [{ type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: ElderDataViewSelectionMode, decorators: [{
@@ -14410,14 +14410,14 @@ class ElderLanguageService {
         this.translate.use(lang);
     }
 }
-ElderLanguageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderLanguageService, deps: [{ token: i1$2.TranslateService }, { token: i2$4.WebLocalStorage }], target: i0.ɵɵFactoryTarget.Injectable });
+ElderLanguageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderLanguageService, deps: [{ token: i1$2.TranslateService }, { token: i2$5.WebLocalStorage }], target: i0.ɵɵFactoryTarget.Injectable });
 ElderLanguageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderLanguageService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderLanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i2$4.WebLocalStorage }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i2$5.WebLocalStorage }]; } });
 
 class ElderLanguageSwitcherComponent {
     /***************************************************************************
@@ -14499,7 +14499,7 @@ class ElderToolbarComponent {
     ngOnInit() { }
 }
 ElderToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderToolbarComponent, deps: [{ token: ElderToolbarService }], target: i0.ɵɵFactoryTarget.Component });
-ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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 ? color : 'primary'\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <ng-container *ngTemplateOutlet=\"(leftColumnTemplate$ | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(leftActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(centerColumnTemplate$ | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n      <ng-container *ngTemplateOutlet=\"(rightActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(rightColumnTemplate$ | async) || defaultRightColumnTemplate\"></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: [""], components: [{ type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title" }, { type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: ["slimMode"] }], directives: [{ type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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 ? color : 'primary'\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <ng-container *ngTemplateOutlet=\"(leftColumnTemplate$ | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(leftActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(centerColumnTemplate$ | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n      <ng-container *ngTemplateOutlet=\"(rightActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(rightColumnTemplate$ | async) || defaultRightColumnTemplate\"></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: [""], components: [{ type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: ElderToolbarTitleComponent, selector: "elder-toolbar-title, ebs-toolbar-title" }, { type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: ["slimMode"] }], directives: [{ type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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 ? color : 'primary'\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <ng-container *ngTemplateOutlet=\"(leftColumnTemplate$ | async) || defaultLeftColumnTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(leftActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n      <ng-container *ngTemplateOutlet=\"(centerColumnTemplate$ | async) || defaultCenterColumnTemplate\"></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n      <ng-container *ngTemplateOutlet=\"(rightActionsColumnTemplate$ | async) || defaultEmptyTemplate\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"(rightColumnTemplate$ | async) || defaultRightColumnTemplate\"></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: [""] }]
@@ -15647,7 +15647,7 @@ class ElderShellComponent {
     }
 }
 ElderShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: ElderShellComponent, selector: "elder-shell, ebs-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", color: "color", menuColor: "menuColor", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus" }, 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 style=\"height:100%; width: 100%\" (backdropClick)=\"onBackdropClick($event)\">\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\n  <elder-toolbar [color]=\"color\">\n\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor\">\n      <button mat-icon-button type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n\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"], components: [{ type: i3$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$6.MatSidenavContent, selector: "mat-sidenav-content" }, { type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: ["color"] }, { type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i5.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"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.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"] }, { type: i1$a.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: ElderShellComponent, selector: "elder-shell, ebs-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", color: "color", menuColor: "menuColor", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus" }, 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 style=\"height:100%; width: 100%\" (backdropClick)=\"onBackdropClick($event)\">\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\n  <elder-toolbar [color]=\"color\">\n\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor\">\n      <button mat-icon-button type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n\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"], components: [{ type: i3$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$6.MatSidenavContent, selector: "mat-sidenav-content" }, { type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: ["color"] }, { type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i5.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"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.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"] }, { type: i1$a.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell, ebs-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<mat-sidenav-container style=\"height:100%; width: 100%\" (backdropClick)=\"onBackdropClick($event)\">\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\n  <elder-toolbar [color]=\"color\">\n\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor\">\n      <button mat-icon-button type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n\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"] }]
@@ -16272,7 +16272,7 @@ class ElderLocalDateInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderLocalDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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"], components: [{ type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$4.MatSuffix, selector: "[matSuffix]" }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }], pipes: { "translate": i1$2.TranslatePipe, "date": i3$1.DatePipe, "async": i3$1.AsyncPipe }, viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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"], components: [{ type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3.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"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$4.MatSuffix, selector: "[matSuffix]" }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }], pipes: { "translate": i1$2.TranslatePipe, "date": i3$1.DatePipe, "async": i3$1.AsyncPipe }, viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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"] }]
@@ -17129,7 +17129,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "cleanUp", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5.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"] }, { type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { type: i5.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"] }, { type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i6.MatCellDef, selector: "[matCellDef]" }, { type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "cleanUp", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5.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"] }, { type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { type: i5.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"] }, { type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i6.MatCellDef, selector: "[matCellDef]" }, { type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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", styles: [""] }]
@@ -17157,7 +17157,7 @@ class ElderLocalizedInputDialogComponent {
     }
 }
 ElderLocalizedInputDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderLocalizedInputDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.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"] }, { type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: ["dense", "float", "embedded", "textColumns", "defaultLanguageTags"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2$2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i5.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"] }, { type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.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"] }, { type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: ["dense", "float", "embedded", "textColumns", "defaultLanguageTags"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2$3.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i5.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"] }, { type: i1$2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i5.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"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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", styles: [""] }]
@@ -18912,7 +18912,7 @@ class HttpDataTransferComponent {
     }
 }
 HttpDataTransferComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: HttpDataTransferComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i3.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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i6$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i3.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"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i6$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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"] }]
@@ -19023,7 +19023,7 @@ class HttpDataTransferAggregateComponent {
     }
 }
 HttpDataTransferAggregateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: HttpDataTransferAggregateComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferAggregateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe, "bytes": BytesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferAggregateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i2$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe, "bytes": BytesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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", styles: [""] }]
@@ -19050,7 +19050,7 @@ class HttpDataTransferOverviewComponent {
     }
 }
 HttpDataTransferOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: HttpDataTransferOverviewComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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"], components: [{ type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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"], components: [{ type: HttpDataTransferComponent, selector: "elder-data-transfer", inputs: ["transfer"] }, { type: i2$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: HttpDataTransferAggregateComponent, selector: "elder-data-transfer-aggregate", inputs: ["hiddenWhenInactive"] }], directives: [{ type: i5.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"] }, { type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.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"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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"] }]
@@ -19960,7 +19960,7 @@ class ElderAutocompleteComponent {
     }
 }
 ElderAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ElderAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", 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: [""], components: [{ type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i5.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", 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", styles: [""] }]
@@ -23636,11 +23636,11 @@ class KafentTokenProviderSessionStorage extends KafentTokenProvider {
         return this.sessionStorage.getItem('access_token');
     }
 }
-KafentTokenProviderSessionStorage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: KafentTokenProviderSessionStorage, deps: [{ token: i2$4.WebSessionStorage }], target: i0.ɵɵFactoryTarget.Injectable });
+KafentTokenProviderSessionStorage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: KafentTokenProviderSessionStorage, deps: [{ token: i2$5.WebSessionStorage }], target: i0.ɵɵFactoryTarget.Injectable });
 KafentTokenProviderSessionStorage.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: KafentTokenProviderSessionStorage });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: KafentTokenProviderSessionStorage, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i2$4.WebSessionStorage }]; } });
+        }], ctorParameters: function () { return [{ type: i2$5.WebSessionStorage }]; } });
 
 /**
  * Provides Kafent events over a simple API.
@@ -24012,4 +24012,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImpor
  */
 
 export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, EbsCommonDialogService, EbsToastService, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewBaseModule, ElderDataViewSelectionMode, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxDirective, ElderMeasuresModule, ElderMinDirective, ElderMultiAutoCompleteModule, ElderMultiAutocompleteComponent, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPlugParentFormDirectiveLegacy, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityInputComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredIgnoreZeroValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectChipDirective, ElderSelectComponent, ElderSelectListComponent, ElderSelectListItemComponent, ElderSelectListModule, ElderSelectModule, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderStopEventPropagationDirectiveLegacy, ElderSvgViewerComponent, ElderTabFocusTrapDirective, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTouchedDirectiveLegacy, ElderTripleStateCheckboxDirective, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentSwitcherComponent, ElderViewersModule, EntitySetPatch, ExceptionDetailCtx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownLocaleType, LazyBehaviorSubject, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, ReplacementResult, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectOnTabDirective, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TextRange, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastService, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, WordPositionFinder, alphaNumStringComparator, buildFormIntegrationProviders, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone };
-//# sourceMappingURL=elderbyte-ngx-starter.mjs.map