@elderbyte/ngx-starter 14.5.4 → 14.7.1

package/fesm2015/elderbyte-ngx-starter.mjs

@@ -6,7 +6,7 @@ import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
 import { BehaviorSubject, Subject, EMPTY, combineLatest, merge, of, forkJoin, throwError, mergeWith, switchMap as switchMap$1, Observable, ReplaySubject, fromEvent, NEVER } from 'rxjs';
-import { distinctUntilChanged, map, filter, takeUntil, debounceTime, catchError, first, take, switchMap, mergeMap, takeWhile, tap, expand, reduce, startWith, skip, delay, share, throttleTime, flatMap, timeout, skipWhile } from 'rxjs/operators';
+import { distinctUntilChanged, map, filter, takeUntil, debounceTime, catchError, first, take, switchMap, mergeMap, takeWhile, tap, expand, reduce, startWith, skip, delay, share, throttleTime, combineLatestWith, flatMap, timeout, skipWhile } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataSource } from '@angular/cdk/collections';
@@ -38,12 +38,12 @@ import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import * as i1$5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i6 from '@angular/material/core';
+import * as i8 from '@angular/material/core';
 import { mixinColor, MatCommonModule, MatRippleModule, NativeDateAdapter, MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import * as i6$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
 import * as i3$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i3$3 from '@angular/material/progress-bar';
@@ -61,7 +61,7 @@ import * as i1$8 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$7 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
-import * as i8 from '@angular/material/menu';
+import * as i8$1 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i4$5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -78,9 +78,9 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i4$4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i6$2 from '@angular/material/sidenav';
+import * as i6$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i6$3 from '@angular/material/datepicker';
+import * as i6$2 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';
@@ -88,7 +88,7 @@ import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i1$a from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i6$4 from '@angular/material/progress-spinner';
+import * as i6$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as StreamSaver from 'streamsaver';
 import * as i2$5 from '@angular/material/expansion';
@@ -2309,13 +2309,34 @@ class Filter {
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
+    static merge(current, forcedFilter) {
+        let newFilterValue;
+        if (Filter.isMulti(current) || Filter.isMulti(forcedFilter)) {
+            // We have a list of values. We just have to ensure our forced values are in there
+            const valueSet = new Set();
+            Filter.addValuesToSet(valueSet, current);
+            Filter.addValuesToSet(valueSet, forcedFilter);
+            newFilterValue = Array.from(valueSet);
+        }
+        else {
+            newFilterValue = forcedFilter.value;
+        }
+        return new Filter(current.key, newFilterValue);
+    }
+    /**
+     * Checks if this filter supports multiple values.
+     * @param filter
+     */
+    static isMulti(filter) {
+        return Array.isArray(filter.value);
+    }
     /**
      * Checks if this filter has a value.
-     * This is the case when the value is non null and
-     * in case its an array, also non empty.
+     * This is the case when the value is non-null and
+     * in case it's an array, also non-empty.
      */
     static hasValue(self) {
         if (!self) {
@@ -2353,15 +2374,31 @@ class Filter {
             return true;
         } // Same key and same value reference
         // In case the filter has a multi value array, we need to compare those by value
-        if (self.value instanceof Array || other.value instanceof Array) {
-            const valueArr = self.value instanceof Array ? self.value : [self.value];
-            const otherArr = other instanceof Array ? other : [other];
+        if (Array.isArray(self.value) || Array.isArray(other.value)) {
+            const valueArr = Array.isArray(self.value) ? self.value : [self.value];
+            const otherArr = Array.isArray(other.value) ? other.value : [other.value];
             return CollectionUtil.equalSetDeep(new Set(valueArr), new Set(otherArr));
         }
         else {
             return false; // Otherwise, they are not equal
         }
     }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    static addValuesToSet(valueSet, filter) {
+        const filterValue = filter.value;
+        if (Array.isArray(filterValue)) {
+            const values = filterValue;
+            values.forEach(v => valueSet.add(v));
+        }
+        else {
+            const value = filterValue;
+            valueSet.add(value);
+        }
+    }
 }
 
 class FilterContext {
@@ -2371,7 +2408,7 @@ class FilterContext {
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this._filters = new BehaviorSubject([]);
+        this._filters$ = new BehaviorSubject([]);
     }
     /***************************************************************************
      *                                                                         *
@@ -2409,10 +2446,10 @@ class FilterContext {
      *                                                                         *
      **************************************************************************/
     get filters() {
-        return this._filters.asObservable().pipe(distinctUntilChanged((a, b) => this.equals(a, b)));
+        return this._filters$.asObservable().pipe(distinctUntilChanged((a, b) => this.equals(a, b)));
     }
     get filtersSnapshot() {
-        return this._filters.getValue();
+        return this._filters$.getValue();
     }
     findFilterValue(key) {
         const f = this.findFilter(key);
@@ -2460,11 +2497,23 @@ class FilterContext {
      * @param newFilters
      */
     replaceFilters(newFilters) {
-        this._filters.next(newFilters || []);
+        this._filters$.next(newFilters || []);
     }
     clear() {
         this.replaceFilters([]);
     }
+    mergeFilters(filters) {
+        filters.forEach(filter => this.mergeFilter(filter));
+    }
+    mergeFilter(filter) {
+        const existing = this.findFilter(filter.key);
+        if (!existing) {
+            this.updateFilter(filter);
+        }
+        else {
+            this.updateFilter(Filter.merge(existing, filter));
+        }
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -8769,172 +8818,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 }]
         }] });
 
-class TextRange {
-    constructor(start, end, value) {
-        this.start = start;
-        this.end = end;
-        this.value = value;
-    }
-}
-class ReplacementResult {
-    constructor(newText, replaced) {
-        this.newText = newText;
-        this.replaced = replaced;
-    }
-}
-class WordPositionFinder {
-    findWord(text, position) {
-        // Search for the word's beginning and end.
-        const left = text.slice(0, position).search(/\S+$/);
-        let right = text.slice(position).search(/\s/);
-        // The last word in the string is a special case.
-        if (right < 0) {
-            right = text.length;
-        }
-        else {
-            right += position;
-        }
-        const word = text.substring(left, right);
-        return new TextRange(left, right, word);
-    }
-    replaceWord(text, position, replacement) {
-        const current = this.findWord(text, position);
-        const beforePos = current.start;
-        const before = text.substring(0, beforePos);
-        const after = text.substring(current.end, text.length);
-        const newText = before + replacement + after;
-        return new ReplacementResult(newText, new TextRange(beforePos, beforePos + replacement.length, replacement));
-    }
-}
-
-class ElderMultiAutocompleteComponent {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor() {
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        /**
-         * Occurs when the value has been changed and committed
-         */
-        this.valueChanged = new EventEmitter();
-        this.formControl = new UntypedFormControl();
-        this.wordFinder = new WordPositionFinder();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Life-Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() {
-        this.availableSuggestions = this.formControl.valueChanges.pipe(debounceTime(150), switchMap((value) => {
-            if (this.cursorPosition) {
-                const cursor = this.cursorPosition;
-                const word = this.extractWordFrom(value, cursor);
-                return this.getSuggestions(word);
-            }
-            else {
-                return EMPTY;
-            }
-        }));
-        this._sub = this.formControl.valueChanges.
-            subscribe(value => this.onValueChanged(value));
-    }
-    ngOnDestroy() {
-        this._sub.unsubscribe();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    /***************************************************************************
-     *                                                                         *
-     * Public API                                                              *
-     *                                                                         *
-     **************************************************************************/
-    onValueChanged(value) {
-        this.logger.debug('value changed', value);
-        this.valueChanged.next(value);
-    }
-    insertSuggestion(suggestion) {
-        const full = this.formControl.value != null ? this.formControl.value : '';
-        if (this.cursorPosition) {
-            const cursor = this.cursorPosition;
-            const replacement = this.wordFinder.replaceWord(full, cursor, suggestion + ' ');
-            return replacement.newText;
-        }
-        else {
-            this.logger.warn('Insert not possible as no cursor-position was available!');
-        }
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    getSuggestions(input) {
-        if (this.suggestionProvider) {
-            return this.suggestionProvider.loadSuggestions(input);
-        }
-        else {
-            return of([]);
-        }
-    }
-    get cursorPosition() {
-        if (this.suggestionInput) {
-            return this.suggestionInput.nativeElement.selectionStart;
-        }
-        return null;
-    }
-    extractWordFrom(text, position) {
-        const word = this.wordFinder.findWord(text, position);
-        return word.value;
-    }
-}
-ElderMultiAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderMultiAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderMultiAutocompleteComponent, selector: "elder-multi-autocomplete", inputs: { placeholder: "placeholder", suggestionProvider: "suggestionProvider" }, outputs: { valueChanged: "modify" }, viewQueries: [{ propertyName: "suggestionInput", first: true, predicate: ["suggestionInput"], descendants: true, static: true }], ngImport: i0, template: "\n<!--\n                TODO This should probably be refactored to a directive\n-->\n\n<mat-form-field fxFlex\n\n>\n\n\n  <input matInput\n         #suggestionInput\n         type=\"text\"\n         [matAutocomplete]=\"auto\"\n         [formControl]=\"formControl\"\n         name=\"multiinput\" [placeholder]=\"placeholder\">\n\n  <mat-autocomplete #auto=\"matAutocomplete\" >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions | async\" [value]=\"insertSuggestion(suggestion)\">\n      {{ suggestion }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-multi-autocomplete', template: "\n<!--\n                TODO This should probably be refactored to a directive\n-->\n\n<mat-form-field fxFlex\n\n>\n\n\n  <input matInput\n         #suggestionInput\n         type=\"text\"\n         [matAutocomplete]=\"auto\"\n         [formControl]=\"formControl\"\n         name=\"multiinput\" [placeholder]=\"placeholder\">\n\n  <mat-autocomplete #auto=\"matAutocomplete\" >\n    <mat-option *ngFor=\"let suggestion of availableSuggestions | async\" [value]=\"insertSuggestion(suggestion)\">\n      {{ suggestion }}\n    </mat-option>\n  </mat-autocomplete>\n</mat-form-field>\n\n\n\n\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
-                type: Input
-            }], suggestionProvider: [{
-                type: Input
-            }], valueChanged: [{
-                type: Output,
-                args: ['modify']
-            }], suggestionInput: [{
-                type: ViewChild,
-                args: ['suggestionInput', { static: true }]
-            }] } });
-
-class ElderMultiAutoCompleteModule {
-}
-ElderMultiAutoCompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiAutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderMultiAutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiAutoCompleteModule, declarations: [ElderMultiAutocompleteComponent], imports: [CommonModule, ReactiveFormsModule, MatInputModule, MatAutocompleteModule, FlexLayoutModule], exports: [ElderMultiAutocompleteComponent] });
-ElderMultiAutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiAutoCompleteModule, imports: [CommonModule, ReactiveFormsModule, MatInputModule, MatAutocompleteModule, FlexLayoutModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiAutoCompleteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule, ReactiveFormsModule, MatInputModule, MatAutocompleteModule, FlexLayoutModule
-                    ],
-                    declarations: [
-                        ElderMultiAutocompleteComponent
-                    ],
-                    exports: [
-                        ElderMultiAutocompleteComponent
-                    ]
-                }]
-        }] });
-
 class ElderLabelInputComponent extends FormFieldBaseComponent {
     /***************************************************************************
      *                                                                         *
@@ -9115,7 +8998,7 @@ class ElderLabelInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLabelInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderLabelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLabelInputComponent, selector: "elder-label-input, ebs-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-list #chips>\n    <mat-chip *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [selectable]=\"selectable\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-list>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLabelInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLabelInputComponent, selector: "elder-label-input, ebs-label-input", inputs: { labels: "labels", suggestionLoader: "suggestionLoader", allowNew: "allowNew", compareWith: "compareWith", colorResolver: "colorResolver", nameResolver: "nameResolver", labelBuilder: "labelBuilder" }, outputs: { labelsChanged: "labelsChanged" }, providers: buildFormIntegrationProviders(ElderLabelInputComponent), viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["labelInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-list #chips>\n    <mat-chip *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [selectable]=\"selectable\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-list>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderLabelInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-label-input, ebs-label-input', providers: buildFormIntegrationProviders(ElderLabelInputComponent), changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"full-width\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n  <mat-chip-list #chips>\n    <mat-chip *ngFor=\"let label of currentLabels$ | async\"\n              class=\"noselect\"\n              [color]=\"labelColor(label)\"\n              [selectable]=\"selectable\"\n              [removable]=\"removable\"\n              (removed)=\"removeLabel(label)\"\n    >\n      {{labelName(label)}}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]=\"labelAutoComplete\"\n           [formControl]=\"labelInputControl\"\n           (matChipInputTokenEnd)=\"createNewLabels($event)\"\n           [name]=\"name\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [required]=\"required\"\n           [placeholder]=\"placeholder\"\n           autocomplete=\"off\"\n           #labelInput>\n  </mat-chip-list>\n\n  <mat-autocomplete\n      #labelAutoComplete=\"matAutocomplete\"\n      (optionSelected)=\"labelSelected($event)\">\n    <mat-option *ngFor=\"let suggestion of availableSuggestions$ | async\" [value]=\"suggestion\">\n      {{labelName(suggestion)}}\n    </mat-option>\n  </mat-autocomplete>\n\n</mat-form-field>\n\n", styles: [".full-width{width:100%}\n"] }]
@@ -9479,7 +9362,7 @@ class ElderFileUploadComponent {
     }
 }
 ElderFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderFileUploadComponent, selector: "elder-file-upload, ebs-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\">\n\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i3$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i3$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i3$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i3$2.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
+ElderFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderFileUploadComponent, selector: "elder-file-upload, ebs-file-upload", inputs: { files: "files", multiple: "multiple", accept: "accept", uploadClient: "uploadClient" }, ngImport: i0, template: "\n\n<div fxLayout=\"column\">\n\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\">\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            *ngIf=\"uploadClient\"  (click)=\"startUpload($event)\" [disabled]=\"files.size === 0\">\n      <mat-icon>cloud_upload</mat-icon>\n    </button>\n\n    <elder-file-select\n            [multiple]=\"multiple\"\n            [accept]=\"accept\"\n            (filesChange)=\"files = $event\"\n    ></elder-file-select>\n\n  </div>\n\n  <mat-list>\n    <h2 mat-subheader>Selected Files ({{files.size}})</h2>\n    <mat-list-item *ngFor=\"let file of files\">\n      <mat-icon mat-list-icon>attach_file</mat-icon>\n      <h4 mat-line>{{file.name}}</h4>\n      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>\n\n      <mat-progress-bar *ngIf=\"(transferOf(file)?.state$ | async) as state\"\n                        [color]=\"(state.hasFailed ? 'warn' : '')\"\n                        mode=\"determinate\"\n                        [value]=\"state.progress.percentDone\">\n      </mat-progress-bar>\n\n    </mat-list-item>\n  </mat-list>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "component", type: i3$2.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i3$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i8.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i3$2.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i3$2.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ElderFileSelectComponent, selector: "elder-file-select, ebs-file-select", inputs: ["multiple", "accept", "icon", "color"], outputs: ["filesChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", 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" }]
@@ -11125,6 +11008,10 @@ class DataViewOptionsProviderBinding {
         }
         this._dataViewBaseComponent.interactionMode = options.interactionMode;
         this._dataViewBaseComponent.selectionMultiEnabled = options.selectionMultiEnabled;
+        if (options.interactionMode === 'selection') {
+            this._dataViewBaseComponent.selectionVisible = true;
+            this._dataViewBaseComponent.float = false;
+        }
     }
 }
 
@@ -11168,6 +11055,9 @@ class ElderDataViewOptions {
     withInteractionMode(interactionMode) {
         return new ElderDataViewOptions(this.sorts, this.filters, this.selectionMultiEnabled, interactionMode);
     }
+    withOptions(options) {
+        return new ElderDataViewOptions(options.sorts ? options.sorts : this.sorts, options.filters ? options.filters : this.filters, options.selectionMultiEnabled ? options.selectionMultiEnabled : this.selectionMultiEnabled, options.interactionMode ? options.interactionMode : this.interactionMode);
+    }
 }
 
 class ElderDataViewOptionsProvider {
@@ -11270,10 +11160,6 @@ class ElderDataViewBaseComponent {
      **************************************************************************/
     ngOnInit() {
         if (this.dataViewOptionsProvider) {
-            if (this.dataViewOptionsProvider.options.interactionMode === 'selection') {
-                this.selectionVisible = true;
-                this.float = false;
-            }
             if (this.dataContext) {
                 DataViewOptionsProviderBinding.of(this)
                     .dataViewOptionsProvider(this.dataViewOptionsProvider)
@@ -11914,7 +11800,7 @@ class ElderDataToolbarComponent {
     }
 }
 ElderDataToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderDataToolbarComponent, deps: [{ token: SelectionModel, optional: true }, { token: ELDER_DATA_VIEW, optional: true }, { token: ElderDialogService }], target: i0.ɵɵFactoryTarget.Component });
-ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDataToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: { canAdd: "canAdd", canRemove: "canRemove", canMore: "canMore", confirmRemoval: "confirmRemoval", keepSelectionAfterRemoval: "keepSelectionAfterRemoval", selectionModel: "selectionModel" }, outputs: { requestNew: "requestNew", requestRemove: "requestRemove" }, queries: [{ propertyName: "templates", predicate: ElderToolbarContentDirective }], ngImport: i0, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderDataToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Table Toolbar -->\n<div\n    fxLayout=\"row\"\n    fxLayoutAlign=\"space-between center\"\n    fxLayoutGap=\"10px\"\n    style=\"padding: 4px 8px 0 8px\"\n    *ngIf=\"selection$ | async as selection\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('main') || defaultContent;\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</div>\n\n<!-- Default Templates -->\n\n<!-- Default Main Content -->\n<ng-template #defaultContent let-selection>\n    <!-- Left column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('left') || defaultLeftContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('center') || defaultCenterContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n\n    <!-- Right column -->\n    <div fxLayout=\"row\" fxLayoutAlign=\"end center\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                getTemplate('right') || defaultRightContent;\n                context: { $implicit: selection }\n            \"\n        ></ng-container>\n    </div>\n</ng-template>\n\n<!-- Default Left Content -->\n<ng-template #defaultLeftContent let-selection>\n    <!-- Add Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canAdd\"\n        (click)=\"requestNew.next($event)\"\n    >\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('left.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n</ng-template>\n\n<!-- Default Center Content -->\n<ng-template #defaultCenterContent let-selection> </ng-template>\n\n<!-- Default Right Content -->\n<ng-template #defaultRightContent let-selection>\n    <!-- Placeholder for additional actions -->\n    <ng-container\n        *ngTemplateOutlet=\"\n            getTemplate('right.actions');\n            context: { $implicit: selection }\n        \"\n    ></ng-container>\n\n    <!-- Delete Action -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        *ngIf=\"canRemove\"\n        [disabled]=\"!selection?.length\"\n        (click)=\"requestRemoveItems(selection)\"\n    >\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <!-- More Menu -->\n    <button\n        mat-icon-button type=\"button\"\n        color=\"primary\"\n        [matMenuTriggerFor]=\"elderTableMenu\"\n        [disabled]=\"!canMore\"\n    >\n        <mat-icon>more_vert</mat-icon>\n        <mat-menu #elderTableMenu=\"matMenu\">\n            <ng-content select=\"[mat-menu-item]\"></ng-content>\n            <!-- Placeholder for mat menu items-->\n            <ng-container\n                *ngTemplateOutlet=\"\n                    getTemplate('right.menu');\n                    context: { $implicit: selection }\n                \"\n            ></ng-container>\n        </mat-menu>\n    </button>\n</ng-template>\n" }]
@@ -12013,7 +11899,7 @@ class ElderSingleSortComponent {
     }
 }
 ElderSingleSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderSingleSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderSingleSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: { availableSorts: "availableSorts", translationPrefix: "translationPrefix", sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderSingleSortComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-single-sort', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"(sort$ | async) as sort\" fxLayout=\"row\" fxFlex=\"none\">\n\n  <button mat-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    {{ translationPrefix + sort.prop | translate}}\n\n    <mat-icon style=\"font-size: 22px\">sort</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let mysort of availableSorts\"\n              (click)=\"setSortProp(mysort)\"\n      >\n        <mat-icon>sort</mat-icon>\n        <span [class.mat-body-strong]=\"sort.prop == mysort\">{{translationPrefix + mysort | translate}}</span>\n      </button>\n    </mat-menu>\n\n  </button>\n\n  <button mat-icon-button type=\"button\" (click)=\"toggleSortDirection($event)\">\n    <mat-icon style=\"font-size: 22px\">{{sort.dir === 'asc' ? 'arrow_downward' : 'arrow_upward'}}</mat-icon>\n  </button>\n\n</div>\n" }]
@@ -16015,7 +15901,7 @@ class ElderLanguageSwitcherComponent {
     }
 }
 ElderLanguageSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderLanguageSwitcherComponent, deps: [{ token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: { slimMode: "slimMode" }, ngImport: i0, template: "\n\n<mat-menu #languageMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let lang of languages\" (click)=\"currentLanguage = lang\">\n    <mat-icon>language</mat-icon>\n    <span [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\"\n        *ngIf=\"slimMode\"  [matMenuTriggerFor]=\"languageMenu\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{currentLanguage}}</span>\n  </div>\n</button>\n\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select placeholder=\"{{'language.language' | translate}}\" name=\"language\" [(ngModel)]=\"currentLanguage\">\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{ 'language.' + lang | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ElderLanguageSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLanguageSwitcherComponent, selector: "elder-language-switcher, ebs-language-switcher", inputs: { slimMode: "slimMode" }, ngImport: i0, template: "\n\n<mat-menu #languageMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let lang of languages\" (click)=\"currentLanguage = lang\">\n    <mat-icon>language</mat-icon>\n    <span [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\"\n        *ngIf=\"slimMode\"  [matMenuTriggerFor]=\"languageMenu\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{currentLanguage}}</span>\n  </div>\n</button>\n\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select placeholder=\"{{'language.language' | translate}}\" name=\"language\" [(ngModel)]=\"currentLanguage\">\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{ 'language.' + lang | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderLanguageSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-language-switcher, ebs-language-switcher', template: "\n\n<mat-menu #languageMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let lang of languages\" (click)=\"currentLanguage = lang\">\n    <mat-icon>language</mat-icon>\n    <span [class.active]=\"isLanguageActive(lang)\">{{ 'language.' + lang | translate }}</span>\n  </button>\n</mat-menu>\n\n<button mat-button type=\"button\"\n        *ngIf=\"slimMode\"  [matMenuTriggerFor]=\"languageMenu\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <mat-icon>language</mat-icon>\n    <span class=\"language\">{{currentLanguage}}</span>\n  </div>\n</button>\n\n\n<mat-form-field *ngIf=\"!slimMode\">\n  <mat-select placeholder=\"{{'language.language' | translate}}\" name=\"language\" [(ngModel)]=\"currentLanguage\">\n    <mat-option *ngFor=\"let lang of languages\" [value]=\"lang\">{{ 'language.' + lang | translate }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".language{font-size:16px;text-transform:uppercase}.active{font-weight:700}\n"] }]
@@ -16761,7 +16647,7 @@ class ElderBreadCrumbsComponent {
     }
 }
 ElderBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderBreadCrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderBreadCrumbsComponent, selector: "elder-bread-crumbs", inputs: { root: "root", rootTranslation: "rootTranslation", rootIcon: "rootIcon", backgroundColor: "backgroundColor", editModeEnabled: "editModeEnabled", path: "path" }, outputs: { pathChange: "pathChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "\n<!-- main container-->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n     [style.background-color]=\"backgroundColor\" class=\"breadcrumb-bar\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n       fxLayoutGap=\"12px\" class=\"breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n\n  >\n      <!-- path edit control -->\n      <mat-form-field fxFlex *ngIf=\"editMode.enabled\" elderDense >\n        {{ pathInput.focus() }}\n        <input matInput type=\"text\" name=\"pathInput\" #pathInput\n               [ngModel]=\"path\" (ngModelChange)=\"onPathInputChange($event)\"\n               (blur)=\"onPathEditBlur($event)\"\n               elderKeyEvent [elderKeyEventFilter]=\"'Enter'\" (onElderKeyEvent)=\"onEnter()\">\n      </mat-form-field>\n\n      <!-- navigation control -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n\n        <div fxFlex fxLayoutAlign=\"start center\">\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\"\n               *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n            <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n            <!-- root element -->\n            <a *ngIf=\"isFirst && rootIcon\"\n               mat-icon-button class=\"breadcrumb\"\n               (click)=\"goToPath(node)\" elderStopEventPropagation\n            >\n              <mat-icon>{{rootIcon}}</mat-icon>\n            </a>\n\n            <!-- intermediate elements -->\n            <a *ngIf=\"!isLast && (!isFirst || !rootIcon)\"\n               mat-button class=\"breadcrumb\"\n               (click)=\"goToPath(node)\" elderStopEventPropagation\n            >\n              <span>{{node.name}}</span>\n            </a>\n\n            <!-- last element -->\n            <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!rootIcon || !isFirst)\"\n               (click)=\"null\" elderStopEventPropagation\n            >\n              {{node.name}}\n              <mat-icon>arrow_drop_down</mat-icon>\n            </a>\n\n          </div>\n\n        </div>\n\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb menu -->\n  <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    <mat-icon style=\"font-size: 22px\">arrow_drop_down</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n\n      <button mat-menu-item type=\"button\" [elderClipboardPut]=\"path\">\n        <mat-icon>content_copy</mat-icon>\n        <span>{{'Pfad kopieren'}}</span>\n      </button>\n\n      <button mat-menu-item type=\"button\" (click)=\"onMenuEditPathClick($event)\" elderStopEventPropagation>\n        <mat-icon *ngIf=\"!editMode.enabled\">edit</mat-icon>\n        <mat-icon *ngIf=\"editMode.enabled\">done</mat-icon>\n        <span *ngIf=\"!editMode.enabled\">{{'Pfad editieren'}}</span>\n        <span *ngIf=\"editMode.enabled\">{{'Pfad best\u00E4tigen'}}</span>\n      </button>\n\n    </mat-menu>\n\n  </button>\n</div>\n\n\n", styles: [".breadcrumb-path{padding:0 10px}.breadcrumb{font-size:18px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderKeyEventDirective, selector: "[elderKeyEvent]", inputs: ["elderKeyEventFilter", "elderKeyEventDown", "elderKeyEventChildren", "elderKeyEventCallback"], outputs: ["onElderKeyEvent"] }, { kind: "directive", type: ElderClipboardPutDirective, selector: "[elderClipboardPut]", inputs: ["elderClipboardPut"], outputs: ["clipboardCopied"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderBreadCrumbsComponent, selector: "elder-bread-crumbs", inputs: { root: "root", rootTranslation: "rootTranslation", rootIcon: "rootIcon", backgroundColor: "backgroundColor", editModeEnabled: "editModeEnabled", path: "path" }, outputs: { pathChange: "pathChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "\n<!-- main container-->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n     [style.background-color]=\"backgroundColor\" class=\"breadcrumb-bar\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n       fxLayoutGap=\"12px\" class=\"breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n\n  >\n      <!-- path edit control -->\n      <mat-form-field fxFlex *ngIf=\"editMode.enabled\" elderDense >\n        {{ pathInput.focus() }}\n        <input matInput type=\"text\" name=\"pathInput\" #pathInput\n               [ngModel]=\"path\" (ngModelChange)=\"onPathInputChange($event)\"\n               (blur)=\"onPathEditBlur($event)\"\n               elderKeyEvent [elderKeyEventFilter]=\"'Enter'\" (onElderKeyEvent)=\"onEnter()\">\n      </mat-form-field>\n\n      <!-- navigation control -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n\n        <div fxFlex fxLayoutAlign=\"start center\">\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\"\n               *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n            <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n            <!-- root element -->\n            <a *ngIf=\"isFirst && rootIcon\"\n               mat-icon-button class=\"breadcrumb\"\n               (click)=\"goToPath(node)\" elderStopEventPropagation\n            >\n              <mat-icon>{{rootIcon}}</mat-icon>\n            </a>\n\n            <!-- intermediate elements -->\n            <a *ngIf=\"!isLast && (!isFirst || !rootIcon)\"\n               mat-button class=\"breadcrumb\"\n               (click)=\"goToPath(node)\" elderStopEventPropagation\n            >\n              <span>{{node.name}}</span>\n            </a>\n\n            <!-- last element -->\n            <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!rootIcon || !isFirst)\"\n               (click)=\"null\" elderStopEventPropagation\n            >\n              {{node.name}}\n              <mat-icon>arrow_drop_down</mat-icon>\n            </a>\n\n          </div>\n\n        </div>\n\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb menu -->\n  <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    <mat-icon style=\"font-size: 22px\">arrow_drop_down</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n\n      <button mat-menu-item type=\"button\" [elderClipboardPut]=\"path\">\n        <mat-icon>content_copy</mat-icon>\n        <span>{{'Pfad kopieren'}}</span>\n      </button>\n\n      <button mat-menu-item type=\"button\" (click)=\"onMenuEditPathClick($event)\" elderStopEventPropagation>\n        <mat-icon *ngIf=\"!editMode.enabled\">edit</mat-icon>\n        <mat-icon *ngIf=\"editMode.enabled\">done</mat-icon>\n        <span *ngIf=\"!editMode.enabled\">{{'Pfad editieren'}}</span>\n        <span *ngIf=\"editMode.enabled\">{{'Pfad best\u00E4tigen'}}</span>\n      </button>\n\n    </mat-menu>\n\n  </button>\n</div>\n\n\n", styles: [".breadcrumb-path{padding:0 10px}.breadcrumb{font-size:18px;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderKeyEventDirective, selector: "[elderKeyEvent]", inputs: ["elderKeyEventFilter", "elderKeyEventDown", "elderKeyEventChildren", "elderKeyEventCallback"], outputs: ["onElderKeyEvent"] }, { kind: "directive", type: ElderClipboardPutDirective, selector: "[elderClipboardPut]", inputs: ["elderClipboardPut"], outputs: ["clipboardCopied"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderBreadCrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-bread-crumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<!-- main container-->\n<div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n     [style.background-color]=\"backgroundColor\" class=\"breadcrumb-bar\"\n     *ngIf=\"{enabled: editMode$ | async} as editMode\"\n>\n\n  <!-- path container -->\n  <form #breadCrumbForm=\"ngForm\" fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n       fxLayoutGap=\"12px\" class=\"breadcrumb-path\"\n       (click)=\"enableEditMode()\"\n\n  >\n      <!-- path edit control -->\n      <mat-form-field fxFlex *ngIf=\"editMode.enabled\" elderDense >\n        {{ pathInput.focus() }}\n        <input matInput type=\"text\" name=\"pathInput\" #pathInput\n               [ngModel]=\"path\" (ngModelChange)=\"onPathInputChange($event)\"\n               (blur)=\"onPathEditBlur($event)\"\n               elderKeyEvent [elderKeyEventFilter]=\"'Enter'\" (onElderKeyEvent)=\"onEnter()\">\n      </mat-form-field>\n\n      <!-- navigation control -->\n      <ng-container *ngIf=\"!editMode.enabled\">\n\n        <div fxFlex fxLayoutAlign=\"start center\">\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\"\n               *ngFor=\"let node of nodes$ | async;let isFirst = first;let isLast = last\">\n\n            <mat-icon *ngIf=\"!isFirst\" class=\"noselect breadcrumb-arrow\">keyboard_arrow_right</mat-icon>\n\n            <!-- root element -->\n            <a *ngIf=\"isFirst && rootIcon\"\n               mat-icon-button class=\"breadcrumb\"\n               (click)=\"goToPath(node)\" elderStopEventPropagation\n            >\n              <mat-icon>{{rootIcon}}</mat-icon>\n            </a>\n\n            <!-- intermediate elements -->\n            <a *ngIf=\"!isLast && (!isFirst || !rootIcon)\"\n               mat-button class=\"breadcrumb\"\n               (click)=\"goToPath(node)\" elderStopEventPropagation\n            >\n              <span>{{node.name}}</span>\n            </a>\n\n            <!-- last element -->\n            <a mat-button class=\"breadcrumb\" *ngIf=\"isLast && (!rootIcon || !isFirst)\"\n               (click)=\"null\" elderStopEventPropagation\n            >\n              {{node.name}}\n              <mat-icon>arrow_drop_down</mat-icon>\n            </a>\n\n          </div>\n\n        </div>\n\n      </ng-container>\n\n  </form>\n\n  <!-- bread crumb menu -->\n  <button mat-icon-button type=\"button\" [matMenuTriggerFor]=\"menu\">\n\n    <mat-icon style=\"font-size: 22px\">arrow_drop_down</mat-icon>\n\n    <mat-menu #menu=\"matMenu\">\n\n      <button mat-menu-item type=\"button\" [elderClipboardPut]=\"path\">\n        <mat-icon>content_copy</mat-icon>\n        <span>{{'Pfad kopieren'}}</span>\n      </button>\n\n      <button mat-menu-item type=\"button\" (click)=\"onMenuEditPathClick($event)\" elderStopEventPropagation>\n        <mat-icon *ngIf=\"!editMode.enabled\">edit</mat-icon>\n        <mat-icon *ngIf=\"editMode.enabled\">done</mat-icon>\n        <span *ngIf=\"!editMode.enabled\">{{'Pfad editieren'}}</span>\n        <span *ngIf=\"editMode.enabled\">{{'Pfad best\u00E4tigen'}}</span>\n      </button>\n\n    </mat-menu>\n\n  </button>\n</div>\n\n\n", styles: [".breadcrumb-path{padding:0 10px}.breadcrumb{font-size:18px;font-weight:400}\n"] }]
@@ -17353,7 +17239,7 @@ class ElderShellComponent {
     }
 }
 ElderShellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderShellComponent, selector: "elder-shell, ebs-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", menuColor: "menuColor", menuIconColor: "menuIconColor" }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "\n<mat-sidenav-container\n  elderThemeApplier\n  style=\"height:100%; width: 100%\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\n    <div fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div fxLayout=\"column\" fxFill>\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div fxLayout=\"column\" fxFlex>\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div fxLayout=\"column\" fxFill>\n\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\">\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor$ | async\">\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i6$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$2.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: ["color"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderShellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderShellComponent, selector: "elder-shell, ebs-shell", inputs: { sideNavToggleEnabled: "sideNavToggleEnabled", leftSideAutoFocus: "leftSideAutoFocus", rightSideAutoFocus: "rightSideAutoFocus", color: "color", menuColor: "menuColor", menuIconColor: "menuIconColor" }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "\n<mat-sidenav-container\n  elderThemeApplier\n  style=\"height:100%; width: 100%\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\n    <div fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div fxLayout=\"column\" fxFill>\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div fxLayout=\"column\" fxFlex>\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div fxLayout=\"column\" fxFill>\n\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\">\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor$ | async\">\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i6$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar, ebs-toolbar", inputs: ["color"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-shell, ebs-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<mat-sidenav-container\n  elderThemeApplier\n  style=\"height:100%; width: 100%\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n\n  <!-- Left Side Nav -->\n  <mat-sidenav position=\"start\"\n               mode=\"over\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"leftSideAutoFocus\"\n               [opened]=\"leftSideContentOpen$ | async\"\n               (closed)=\"closeLeftSideContent()\">\n    <div fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div fxLayout=\"column\" fxFill>\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent;\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav mode=\"over\" #rightSideDetail id=\"elder-right-side-detail\"\n               position=\"end\"\n               [fixedInViewport]=\"true\"\n               [autoFocus]=\"rightSideAutoFocus\"\n               [disableClose]=\"true\" (keydown.escape)=\"onEscapeRightSide($event)\">\n    <div fxFill fxLayout=\"column\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight;\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div fxLayout=\"column\" fxFlex>\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div fxLayout=\"column\" fxFill>\n\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"(headerTemplate$ | async) || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <ng-container *ngTemplateOutlet=\"(centerTemplate$ | async) || defaultCenterTemplate\"></ng-container>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"(footerTemplate$ | async) || defaultFooterTemplate\"></ng-container>\n\n  </div>\n</ng-template>\n\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar [color]=\"color\">\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    <mat-toolbar *ngIf=\"sideNavToggleEnabled\" fxFlex=\"0\"\n                 fxLayout=\"row\" fxLayoutAlign=\"center center\"\n                 [color]=\"menuColor$ | async\">\n      <button mat-icon-button [color]=\"menuIconColor$ | async\" type=\"button\" (click)=\"toggleSideNav()\">\n        <mat-icon>menu</mat-icon>\n      </button>\n    </mat-toolbar>\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <!-- Primary Router Outlet -->\n  <router-outlet class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}\n"] }]
@@ -18013,7 +17899,7 @@ class ElderLocalDateInputComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalDateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderLocalDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: { zone: "zone", datePickerEnabled: "datePickerEnabled", datePickerTouchUi: "datePickerTouchUi", allowNull: "allowNull", isoValue: "isoValue", dateValue: "dateValue", isoDateValue: "isoDateValue" }, outputs: { blur: "blur", valueUpdatedBlur: "valueUpdatedBlur", isoValueChange: "isoValueChange", dateValueChange: "dateValueChange", isoDateValueChange: "isoDateValueChange" }, providers: buildFormIntegrationProviders(ElderLocalDateInputComponent), viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner fxFlex\n         type=\"date\"\n         [name]=\"name + '-inner'\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"date$ | async | date: 'yyyy-MM-dd'\"\n         (ngModelChange)=\"onDateInputChanged($event)\"\n         (blur)=\"blur.next($event)\"\n  >\n  <input style=\"display: none\" [matDatepicker]=\"picker\" (dateChange)=\"onDatepickerInputChange($event)\">\n\n  <ng-container matSuffix>\n    <mat-datepicker-toggle\n      *ngIf=\"!isLocked && datePickerEnabled\"\n      [for]=\"picker\">\n    </mat-datepicker-toggle>\n\n    <!-- valueWrapper.value && -->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <mat-datepicker [touchUi]=\"datePickerTouchUi\" #picker></mat-datepicker>\n\n</mat-form-field>\n\n", styles: ["input::-webkit-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalDateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLocalDateInputComponent, selector: "elder-local-date-input", inputs: { zone: "zone", datePickerEnabled: "datePickerEnabled", datePickerTouchUi: "datePickerTouchUi", allowNull: "allowNull", isoValue: "isoValue", dateValue: "dateValue", isoDateValue: "isoDateValue" }, outputs: { blur: "blur", valueUpdatedBlur: "valueUpdatedBlur", isoValueChange: "isoValueChange", dateValueChange: "dateValueChange", isoDateValueChange: "isoDateValueChange" }, providers: buildFormIntegrationProviders(ElderLocalDateInputComponent), viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatepicker, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [color]=\"color\"\n>\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n  <input matInput elderNoSpinner fxFlex\n         type=\"date\"\n         [name]=\"name + '-inner'\"\n         [required]=\"required\"\n         [readonly]=\"readonly\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"placeholder | translate\"\n         [ngModel]=\"date$ | async | date: 'yyyy-MM-dd'\"\n         (ngModelChange)=\"onDateInputChanged($event)\"\n         (blur)=\"blur.next($event)\"\n  >\n  <input style=\"display: none\" [matDatepicker]=\"picker\" (dateChange)=\"onDatepickerInputChange($event)\">\n\n  <ng-container matSuffix>\n    <mat-datepicker-toggle\n      *ngIf=\"!isLocked && datePickerEnabled\"\n      [for]=\"picker\">\n    </mat-datepicker-toggle>\n\n    <!-- valueWrapper.value && -->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <mat-datepicker [touchUi]=\"datePickerTouchUi\" #picker></mat-datepicker>\n\n</mat-form-field>\n\n", styles: ["input::-webkit-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderFormFieldNoSpinnerDirective, selector: "input[elderNoSpinner]", inputs: ["elderNoSpinner"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$4.DatePipe, name: "date" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], viewProviders: [ViewProviders.ParentControlContainer], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", 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"] }]
@@ -18873,7 +18759,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
     }
 }
 ElderLocalizedInputTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-form-field class=\"full-width\">\n          <input\n            matInput\n            type=\"text\"\n            name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n            [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n            (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n            [required]=\"required && textColumn.required\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n          />\n          <mat-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderLocalizedInputTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderLocalizedInputTableComponent, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n  <elder-table matSort fxFlex\n               [data]=\"data\"\n               [selectionVisible]=\"true\"\n               [selectionMultiEnabled]=\"true\"\n               [dense]=\"dense\"\n               [float]=\"float\"\n               [embedded]=\"embedded\"\n  >\n\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{label ?? placeholder}}</h4>\n        </div>\n      </ng-template>\n\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-list><mat-chip>{{localized.locale}}</mat-chip></mat-chip-list>\n      </td>\n    </ng-container>\n\n    <ng-container *ngFor=\"let textColumn of textColumns$ | async\" matColumnDef=\"{{textColumn.name}}\">\n      <th mat-header-cell *matHeaderCellDef>{{textColumn.title | translate}}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-form-field class=\"full-width\">\n          <input\n            matInput\n            type=\"text\"\n            name=\"i18n-{{localized.locale}}-{{textColumn.name}}\"\n            [ngModel]=\"localized[textColumn.name]\" [ngModelOptions]=\"{updateOn: 'blur'}\"\n            (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n            [required]=\"required && textColumn.required\"\n            [readonly]=\"readonly\"\n            [disabled]=\"disabled\"\n          />\n          <mat-hint>{{textColumn.title | translate}} ({{localized.locale}})</mat-hint>\n          <mat-error>Required</mat-error>\n        </mat-form-field>\n      </td>\n    </ng-container>\n\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ElderTableComponent, selector: "elder-table, ebs-table", inputs: ["idField", "removingField", "hiddenField", "pageSizeOptions", "keepSelection", "showFooter", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", 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" }]
@@ -19131,18 +19017,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
  * and holds their values in a central search model.
  */
 class ElderSearchContextDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
     constructor() {
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.log = LoggerFactory.getLogger('ElderSearchContextDirective');
+        this.forcedFilters$ = new BehaviorSubject$1([]);
+        this.log = LoggerFactory.getLogger(this.constructor.name);
         this.unsubscribe$ = new Subject$1();
         this._searchInputs = new BehaviorSubject$1([]);
         this._searchStates = new BehaviorSubject$1([]);
@@ -19153,16 +19035,12 @@ class ElderSearchContextDirective {
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() { }
     ngAfterViewInit() {
-        this._searchInputs.pipe(takeUntil(this.unsubscribe$), switchMap(inputs => combineLatest(inputs.map(i => i.state$))), debounceTime(5)).subscribe(states => {
+        this._searchInputs.pipe(takeUntil(this.unsubscribe$), switchMap(inputs => combineLatest(inputs.map(i => i.state$))), combineLatestWith(this.forcedFilters$), debounceTime(5)).subscribe(([states, forcedFilters]) => {
             this._searchStates.next(states);
-            const filters = this.convertToFilters(states);
-            this._filters.next(filters);
-            this.log.trace('Search-Model filters updated:', filters);
-            if (this.filterContext) {
-                this.filterContext.updateFilters(filters);
-            }
+            const userFilters = this.convertToFilters(states);
+            this._filters.next(userFilters);
+            this.applyFilters(userFilters, forcedFilters);
         });
     }
     ngOnDestroy() {
@@ -19180,6 +19058,18 @@ class ElderSearchContextDirective {
     get filterContext() {
         return this._filterContext;
     }
+    /**
+     * Forced filters are always merged into the final FilterContext.
+     *
+     * This means they override user defined filters, but attempt
+     * to also keep the users intent (by merging) them.
+     */
+    set forcedFilters(filters) {
+        this.forcedFilters$.next(filters);
+    }
+    get forcedFilters() {
+        return this.forcedFilters$.getValue();
+    }
     get attributes() {
         return this._searchInputs.asObservable();
     }
@@ -19236,18 +19126,28 @@ class ElderSearchContextDirective {
         return states
             .map(s => new Filter(s.queryKey, s.queryValue));
     }
+    applyFilters(userFilters, forcedFilters) {
+        const context = this.filterContext;
+        if (context) {
+            context.updateFilters(userFilters);
+            context.mergeFilters(forcedFilters);
+            this.log.trace('Search-Model filters updated:', Array.from(context.filtersSnapshot));
+        }
+    }
 }
 ElderSearchContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderSearchContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ElderSearchContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: ElderSearchContextDirective, selector: "[elderSearchContext]", inputs: { filterContext: ["elderSearchContext", "filterContext"] }, exportAs: ["elderSearchContext"], ngImport: i0 });
+ElderSearchContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: ElderSearchContextDirective, selector: "[elderSearchContext]", inputs: { filterContext: ["elderSearchContext", "filterContext"], forcedFilters: "forcedFilters" }, exportAs: ["elderSearchContext"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderSearchContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderSearchContext]',
                     exportAs: 'elderSearchContext'
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { filterContext: [{
+        }], propDecorators: { filterContext: [{
                 type: Input,
                 args: ['elderSearchContext']
+            }], forcedFilters: [{
+                type: Input
             }] } });
 
 /**
@@ -19339,21 +19239,15 @@ class ElderSearchInputDirective {
     constructor(searchContext, ngModel) {
         this.searchContext = searchContext;
         this.ngModel = ngModel;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.logger = LoggerFactory.getLogger('ElderSearchInputDirective');
         this._state = new BehaviorSubject(null);
-        this.unsubscribe$ = new Subject();
+        this.destroy$ = new Subject();
+        this.log = LoggerFactory.getLogger(this.constructor.name);
     }
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                             *
      *                                                                         *
      **************************************************************************/
-    ngOnInit() { }
     ngAfterViewInit() {
         this._extractedName = this.extractName();
         this.searchContext.register(this);
@@ -19362,8 +19256,8 @@ class ElderSearchInputDirective {
         });
     }
     ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
     }
     /***************************************************************************
      *                                                                         *
@@ -19409,7 +19303,7 @@ class ElderSearchInputDirective {
      *                                                                         *
      **************************************************************************/
     stateObservable() {
-        return this.ngModel.valueChanges.pipe(takeUntil(this.unsubscribe$), startWith(this.ngModel.value), map(value => {
+        return this.ngModel.valueChanges.pipe(takeUntil(this.destroy$), startWith(this.ngModel.value), map(value => {
             const queryValue = this.convertRawModelValueToQueryString(value);
             const pristine = !this.isAttributeValuePresent(value);
             return new SearchInputState(this.name, queryValue, this.queryKey || this.name, pristine);
@@ -20534,7 +20428,7 @@ ElderChipListSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderChipListSelectComponent)
         }
-    ], ngImport: i0, template: "\n<div fxLayout=\"column\" fxFill>\n\n  <mat-chip-list [ngClass]=\"{'mat-chip-list-stacked' : stacked}\">\n    <mat-chip *ngFor=\"let chip of data$ | async\" selected\n              [color]=\"isSelected(chip) ? color : 'undefined'\"\n              (click)=\"onItemClick(chip)\">\n      {{getDisplayText(chip)}}\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], ngImport: i0, template: "\n<div fxLayout=\"column\" fxFill>\n\n  <mat-chip-list [ngClass]=\"{'mat-chip-list-stacked' : stacked}\">\n    <mat-chip *ngFor=\"let chip of data$ | async\" selected\n              [color]=\"isSelected(chip) ? color : 'undefined'\"\n              (click)=\"onItemClick(chip)\">\n      {{getDisplayText(chip)}}\n    </mat-chip>\n  </mat-chip-list>\n\n</div>\n\n", styles: [".select-item{padding-left:16px;padding-right:16px;min-height:56px;border-radius:0;font-size:16px;font-weight:400}elder-select-list-item a.select-item-inactive mat-icon{color:#757575}.nested-items-container{overflow:hidden;padding-left:20px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i3$4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderChipListSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-chip-list-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -20831,7 +20725,7 @@ class HttpDataTransferIndicatorComponent {
     }
 }
 HttpDataTransferIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: HttpDataTransferIndicatorComponent, deps: [{ token: ElderDataTransferService }], target: i0.ɵɵFactoryTarget.Component });
-HttpDataTransferIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: HttpDataTransferIndicatorComponent, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n\n  <button mat-icon-button type=\"button\"\n          fxLayout=\"row\" fxLayoutAlign=\"center center\"\n          [elderOverlayTrigger]=\"overlay\">\n\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"38\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\">\n  </elder-data-transfer-overview>\n</elder-overlay>\n\n", styles: [".panel{width:380px;height:350px;background-color:#fff;border-radius:5px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HttpDataTransferIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: HttpDataTransferIndicatorComponent, selector: "elder-data-transfer-indicator", inputs: { activeColor: "activeColor", inactiveColor: "inactiveColor" }, ngImport: i0, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n\n  <button mat-icon-button type=\"button\"\n          fxLayout=\"row\" fxLayoutAlign=\"center center\"\n          [elderOverlayTrigger]=\"overlay\">\n\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"38\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\">\n  </elder-data-transfer-overview>\n</elder-overlay>\n\n", styles: [".panel{width:380px;height:350px;background-color:#fff;border-radius:5px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: ElderOverlayComponent, selector: "elder-overlay", inputs: ["originX", "originY", "overlayX", "overlayY", "offsetY", "offsetX", "backdrop", "backdropVisible", "origin", "positionStrategy", "overlaySize"], outputs: ["keydownEvents", "attachedChange"], exportAs: ["elderOverlay"] }, { kind: "directive", type: ElderOverlayTriggerDirective, selector: "[elderOverlayTrigger]", inputs: ["elderOverlayTrigger", "elderOverlayTriggerType", "elderOverlayTriggerEnabled"] }, { kind: "component", type: HttpDataTransferOverviewComponent, selector: "elder-data-transfer-overview" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: HttpDataTransferIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-transfer-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<ng-container *ngIf=\"aggregate$ | async as aggregate\">\n\n  <button mat-icon-button type=\"button\"\n          fxLayout=\"row\" fxLayoutAlign=\"center center\"\n          [elderOverlayTrigger]=\"overlay\">\n\n    <mat-icon *ngIf=\"aggregate.inTransfer == 0\" [color]=\"inactiveColor\">cloud_upload</mat-icon>\n\n    <mat-progress-spinner\n      *ngIf=\"aggregate.inTransfer > 0\"\n      [matBadge]=\"aggregate.inTransfer\"\n      matBadgePosition=\"above after\"\n      matBadgeSize=\"small\"\n      [matBadgeColor]=\"activeColor\"\n      [color]=\"activeColor\"\n      [strokeWidth]=\"3\"\n      [diameter]=\"38\"\n      [value]=\"aggregate.percentDone\"\n      mode=\"determinate\"\n    >\n    </mat-progress-spinner>\n\n  </button>\n</ng-container>\n\n<elder-overlay #overlay=\"elderOverlay\" originX=\"center\" overlayX=\"center\">\n  <elder-data-transfer-overview class=\"panel\">\n  </elder-data-transfer-overview>\n</elder-overlay>\n\n", styles: [".panel{width:380px;height:350px;background-color:#fff;border-radius:5px;overflow:hidden;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}\n"] }]
@@ -21283,7 +21177,7 @@ class ElderGlobalSearchComponent {
     }
 }
 ElderGlobalSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderGlobalSearchComponent, deps: [{ token: i1$3.Router }, { token: ElderGlobalSearchService }], target: i0.ɵɵFactoryTarget.Component });
-ElderGlobalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderGlobalSearchComponent, selector: "elder-global-search, ebs-global-search", inputs: { hideWhenDisabled: "hideWhenDisabled", searchCollapsed: "searchCollapsed" }, outputs: { searchCollapsedChange: "searchCollapsedChange" }, viewQueries: [{ propertyName: "txtSearch", first: true, predicate: ["txtSearch"], descendants: true }], ngImport: i0, template: "\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n  <span *ngIf=\"searchCollapsed\" fxFlex></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" fxFlex>\n      <mat-icon matPrefix>search</mat-icon>\n      <input matInput type=\"search\"\n             (keyup)=\"onQueryChanged()\"\n             #txtSearch>\n    </mat-form-field>\n\n    <!-- Sort -->\n    <mat-menu #sortMenu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let sort of availableSort\"\n              fxLayout=\"row\" fxLayoutAlign=\"space-between center\"\n              (click)=\"sortBy(sort)\"\n      >\n        {{sort.name | translate}}\n        <mat-icon *ngIf=\"selectedSort?.id==sort.id\">check</mat-icon>\n      </button>\n    </mat-menu>\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            [matMenuTriggerFor]=\"sortMenu\">\n      <mat-icon>sort</mat-icon>\n    </button>\n\n    <!-- Sort Asc/Desc-->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            (click)=\"toggleSortAsc()\">\n      <mat-icon>{{sortAsc ? \"arrow_downward\" : \"arrow_upward\"}}</mat-icon>\n    </button>\n\n  </div>\n\n\n  <!-- Toggle Global Search -->\n  <button mat-icon-button type=\"button\"\n          *ngIf=\"!isSearchHidden\"\n          (click)=\"toggleSearch()\"\n          [disabled]=\"globalSearchDisabled\" >\n    <mat-icon>{{toggleIcon}}</mat-icon>\n  </button>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+ElderGlobalSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderGlobalSearchComponent, selector: "elder-global-search, ebs-global-search", inputs: { hideWhenDisabled: "hideWhenDisabled", searchCollapsed: "searchCollapsed" }, outputs: { searchCollapsedChange: "searchCollapsedChange" }, viewQueries: [{ propertyName: "txtSearch", first: true, predicate: ["txtSearch"], descendants: true }], ngImport: i0, template: "\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n  <span *ngIf=\"searchCollapsed\" fxFlex></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" fxFlex>\n      <mat-icon matPrefix>search</mat-icon>\n      <input matInput type=\"search\"\n             (keyup)=\"onQueryChanged()\"\n             #txtSearch>\n    </mat-form-field>\n\n    <!-- Sort -->\n    <mat-menu #sortMenu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let sort of availableSort\"\n              fxLayout=\"row\" fxLayoutAlign=\"space-between center\"\n              (click)=\"sortBy(sort)\"\n      >\n        {{sort.name | translate}}\n        <mat-icon *ngIf=\"selectedSort?.id==sort.id\">check</mat-icon>\n      </button>\n    </mat-menu>\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            [matMenuTriggerFor]=\"sortMenu\">\n      <mat-icon>sort</mat-icon>\n    </button>\n\n    <!-- Sort Asc/Desc-->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            (click)=\"toggleSortAsc()\">\n      <mat-icon>{{sortAsc ? \"arrow_downward\" : \"arrow_upward\"}}</mat-icon>\n    </button>\n\n  </div>\n\n\n  <!-- Toggle Global Search -->\n  <button mat-icon-button type=\"button\"\n          *ngIf=\"!isSearchHidden\"\n          (click)=\"toggleSearch()\"\n          [disabled]=\"globalSearchDisabled\" >\n    <mat-icon>{{toggleIcon}}</mat-icon>\n  </button>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderGlobalSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-global-search, ebs-global-search', template: "\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center center\">\n\n  <span *ngIf=\"searchCollapsed\" fxFlex></span>\n\n\n  <div *ngIf=\"!searchCollapsed\" fxLayout=\"row\" fxLayoutAlign=\"center center\" fxFlex>\n\n    <!-- Query Keywords -->\n    <mat-form-field color=\"accent\" floatPlaceholder=\"never\" fxFlex>\n      <mat-icon matPrefix>search</mat-icon>\n      <input matInput type=\"search\"\n             (keyup)=\"onQueryChanged()\"\n             #txtSearch>\n    </mat-form-field>\n\n    <!-- Sort -->\n    <mat-menu #sortMenu=\"matMenu\">\n      <button mat-menu-item type=\"button\"\n              *ngFor=\"let sort of availableSort\"\n              fxLayout=\"row\" fxLayoutAlign=\"space-between center\"\n              (click)=\"sortBy(sort)\"\n      >\n        {{sort.name | translate}}\n        <mat-icon *ngIf=\"selectedSort?.id==sort.id\">check</mat-icon>\n      </button>\n    </mat-menu>\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            [matMenuTriggerFor]=\"sortMenu\">\n      <mat-icon>sort</mat-icon>\n    </button>\n\n    <!-- Sort Asc/Desc-->\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"canSort\"\n            (click)=\"toggleSortAsc()\">\n      <mat-icon>{{sortAsc ? \"arrow_downward\" : \"arrow_upward\"}}</mat-icon>\n    </button>\n\n  </div>\n\n\n  <!-- Toggle Global Search -->\n  <button mat-icon-button type=\"button\"\n          *ngIf=\"!isSearchHidden\"\n          (click)=\"toggleSearch()\"\n          [disabled]=\"globalSearchDisabled\" >\n    <mat-icon>{{toggleIcon}}</mat-icon>\n  </button>\n</div>\n\n\n" }]
@@ -21824,6 +21718,15 @@ class ElderSelectFirstUtil {
  **************************************************************************/
 ElderSelectFirstUtil.log = LoggerFactory.getLogger('ElderSelectFirstUtil');
 
+class ElderAutocompleteOptionSelected {
+    constructor(source, entityId, entity, optionValue) {
+        this.source = source;
+        this.entityId = entityId;
+        this.entity = entity;
+        this.optionValue = optionValue;
+    }
+}
+
 class ElderAutocompleteComponent {
     /***************************************************************************
      *                                                                         *
@@ -21846,24 +21749,19 @@ class ElderAutocompleteComponent {
          * The underlying Material Autocomplete
          */
         this.matAutocomplete$ = new BehaviorSubject(null);
-        /** Underlying data context. */
-        this.suggestionsDc$ = new BehaviorSubject(null);
+        /**
+         * The DataContext which holds the autocomplete suggestions.
+         */
+        this.dataContext$ = new BehaviorSubject(null);
         this.triggerReload$ = new Subject();
         this.displayPropertyResolver$ = new BehaviorSubject((value) => this.propertyStringValue(value, null));
         this.optionSelected = new Subject();
-        this.dataState$ = this.suggestionsDc$.pipe(filter(dc => !!dc), switchMap(dc => dc.status), runInZone(this.zone));
-        this.availableSuggestions$ = this.suggestionsDc$.pipe(switchMap(dc => dc ? dc.data : of([])), runInZone(this.zone));
+        this.dataState$ = this.dataContext$.pipe(filter(dc => !!dc), switchMap(dc => dc.status), runInZone(this.zone));
+        this.availableSuggestions$ = this.dataContext$.pipe(switchMap(dc => dc ? dc.data : of([])), runInZone(this.zone));
     }
     set matAutocomplete(auto) {
         this.matAutocomplete$.next(auto);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() {
-    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -21881,11 +21779,11 @@ class ElderAutocompleteComponent {
     get valueTemplate() {
         return this._valueTemplate || this.valueTemplateQuery;
     }
-    set suggestionsDc(data) {
-        this.suggestionsDc$.next(data);
+    set dataContext(data) {
+        this.dataContext$.next(data);
     }
-    get suggestionsDc() {
-        return this.suggestionsDc$.getValue();
+    get dataContext() {
+        return this.dataContext$.getValue();
     }
     set displayPropertyResolver(resolver) {
         this.displayPropertyResolver$.next(resolver);
@@ -21896,7 +21794,16 @@ class ElderAutocompleteComponent {
      *                                                                         *
      **************************************************************************/
     onOptionSelected(event) {
-        this.optionSelected.next(event.option.value);
+        const option = event.option;
+        const id = option.id;
+        this.optionSelected.next(new ElderAutocompleteOptionSelected(this, id, this.getEntityById(id), option.value));
+    }
+    getEntityById(id) {
+        const dc = this.dataContext;
+        if (dc) {
+            return dc.snapshot.data.find(e => this.getId(e) == id);
+        }
+        return undefined;
     }
     onAutocompleteOpened(event) {
         this.logger.debug('Autocomplete opened:', event);
@@ -21906,9 +21813,9 @@ class ElderAutocompleteComponent {
     }
     onAutoCompleteCloseToEnd(event) {
         // this.logger.debug('Autocomplete is close to end!');
-        if (isContinuableDataContext(this.suggestionsDc)) {
-            if (!this.suggestionsDc.snapshot.isLoading) {
-                this.suggestionsDc.loadMore();
+        if (isContinuableDataContext(this.dataContext)) {
+            if (!this.dataContext.snapshot.isLoading) {
+                this.dataContext.loadMore();
             }
         }
     }
@@ -21917,7 +21824,7 @@ class ElderAutocompleteComponent {
     }
     getId(value) {
         var _a, _b;
-        return ((_b = (_a = this.suggestionsDc) === null || _a === void 0 ? void 0 : _a.dataSource) === null || _b === void 0 ? void 0 : _b.getId(value)) || value;
+        return ((_b = (_a = this.dataContext) === null || _a === void 0 ? void 0 : _a.dataSource) === null || _b === void 0 ? void 0 : _b.getId(value)) || value;
     }
     isOptionAvailable(option) {
         if (this.isOptionDisabledFn) {
@@ -21935,6 +21842,14 @@ class ElderAutocompleteComponent {
             return true;
         }
     }
+    toOptionValue(option) {
+        if (this.optionValueConverterFn) {
+            return this.optionValueConverterFn(option);
+        }
+        else {
+            return option;
+        }
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -21954,10 +21869,10 @@ class ElderAutocompleteComponent {
     }
 }
 ElderAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", enabled: "enabled", valueTemplate: "valueTemplate", suggestionsDc: "suggestionsDc", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderAutocomplete"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(suggestionsDc$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"suggestionsDc$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"mat-caption\">DataContext Closed!</span>\n      </div>\n    </mat-option>\n\n    <ng-container *ngIf=\"availableSuggestions$ | async as suggestions\">\n\n      <mat-option *ngIf=\"suggestions.length === 0\" disabled>\n        No Data.\n      </mat-option>\n\n      <ng-container *ngFor=\"let suggestion of suggestions\">\n        <mat-option\n          *ngIf=\"isOptionVisible(suggestion)\"\n          [value]=\"suggestion\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n        </mat-option>\n      </ng-container>\n\n\n\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <p class=\"noselect\">{{propertyResolver(value)}}</p>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: { isOptionDisabledFn: "isOptionDisabledFn", isOptionHiddenFn: "isOptionHiddenFn", optionValueConverterFn: "optionValueConverterFn", enabled: "enabled", valueTemplate: "valueTemplate", dataContext: "dataContext", displayPropertyResolver: "displayPropertyResolver" }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderAutocomplete"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div 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]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-autocomplete', exportAs: 'elderAutocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  [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" }]
+            args: [{ selector: 'elder-autocomplete', exportAs: 'elderAutocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll elderElderInfiniteAutocomplete (closeToEnd)=\"onAutoCompleteCloseToEnd($event)\"\n>\n  <!--\n  <mat-option *ngIf=\"allowNull\" [value]=\"null\">{{nullDisplay | translate}}</mat-option>\n  -->\n\n  <mat-option disabled  *ngIf=\"!(dataContext$ | async)\">\n    <span class=\"mat-caption\">No DataSource / DataContext!</span>\n  </mat-option>\n\n  <ng-container *ngIf=\"dataContext$ | async as dc\">\n\n    <mat-option disabled  *ngIf=\"dc.isClosed\">\n      <div 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]=\"toOptionValue(suggestion)\"\n          [id]=\"getIdAsString(suggestion)\"\n          [disabled]=\"!isOptionAvailable(suggestion)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate || simpleValueTemplate; context: {$implicit: suggestion}\">\n          </ng-container>\n          <!--\n          <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n          -->\n        </mat-option>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"dataState$ | async as state\">\n\n    <mat-option disabled *ngIf=\"!state.idle || state.loading\">\n      <mat-progress-bar\n        [value]=\"100\"\n        [mode]=\"state.loading ? 'query' : 'determinate'\"\n        [color]=\"state.error ? 'warn' : 'primary'\"\n      ></mat-progress-bar>\n    </mat-option>\n\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  <ng-container *ngIf=\"displayPropertyResolver$ | async as propertyResolver\">\n    <span class=\"noselect\">{{propertyResolver(value)}}</span>\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { valueTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderSelectValueDirective, { read: TemplateRef, static: true }]
@@ -21968,13 +21883,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }], isOptionHiddenFn: [{
                 type: Input
+            }], optionValueConverterFn: [{
+                type: Input
             }], optionSelected: [{
                 type: Output
             }], enabled: [{
                 type: Input
             }], valueTemplate: [{
                 type: Input
-            }], suggestionsDc: [{
+            }], dataContext: [{
                 type: Input
             }], displayPropertyResolver: [{
                 type: Input
@@ -22002,12 +21919,6 @@ class ElderAutocompleteDirective {
         this.destroyMatAutoBinding$ = new Subject();
         this.destroy$ = new Subject();
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.destroyMatAutoBinding$.next();
-        this.destroyMatAutoBinding$.complete();
-    }
     /***************************************************************************
      *                                                                         *
      * Host Listener                                                           *
@@ -22027,6 +21938,12 @@ class ElderAutocompleteDirective {
     ngOnInit() {
         merge(this.inputKeyup$.pipe(skipWhile(e => !this._elderAutocomplete.enabled), debounceTime(150), map(e => { var _a; return (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value; })), this.autocomplete.triggerReload$).pipe(takeUntil(this.destroy$), filter(value => !value || typeof (value) === 'string' || typeof (value) === 'number')).subscribe(value => this.updateSuggestions(value));
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.destroyMatAutoBinding$.next();
+        this.destroyMatAutoBinding$.complete();
+    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -22045,7 +21962,7 @@ class ElderAutocompleteDirective {
         return this._elderAutocomplete;
     }
     get dataContext() {
-        return this._elderAutocomplete.suggestionsDc;
+        return this._elderAutocomplete.dataContext;
     }
     /***************************************************************************
      *                                                                         *
@@ -22424,15 +22341,16 @@ class ElderSelectComponent extends ElderSelectBase {
         this.openPanel(autoTrigger);
         // this.togglePanel(autoTrigger);
     }
-    onOptionSelected(selectedValue) {
+    onOptionSelected(optionSelected) {
         if (this.isLocked) {
             this.logger.warn('Prevented selection option since this select is locked!');
             return;
         }
-        if (this.isEntitySelected(selectedValue)) {
+        const selectedEntity = optionSelected.entity;
+        if (this.isEntitySelected(selectedEntity)) {
             this.writeValueInternal(null); // HACK: Ensure we trigger view redraw
         }
-        this.updateValueByEntity(selectedValue);
+        this.updateValueByEntity(selectedEntity);
     }
     openSelectionPopup(event) {
         if (this.selectionPopup) {
@@ -22581,7 +22499,7 @@ ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderSelectComponent)
         }
-    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"elder-form-control elder-select-control\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n         class=\"elder-input-prefix-icon-container\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-select-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div fxLayout=\"row\" fxFlex=\"none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">close</mat-icon>\n    </button>\n\n  </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"elder-form-control elder-select-control\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n         class=\"elder-input-prefix-icon-container\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-select-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [dataContext]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div fxLayout=\"row\" fxFlex=\"none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">close</mat-icon>\n    </button>\n\n  </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataContext", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -22590,7 +22508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                             provide: ELDER_SELECT_BASE,
                             useExisting: forwardRef(() => ElderSelectComponent)
                         }
-                    ], template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"elder-form-control elder-select-control\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n         class=\"elder-input-prefix-icon-container\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-select-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div fxLayout=\"row\" fxFlex=\"none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">close</mat-icon>\n    </button>\n\n  </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"] }]
+                    ], template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"elder-form-control elder-select-control\"\n  fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\" fxFlex=\"none\"\n         class=\"elder-input-prefix-icon-container\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-select-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-select-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" fxFlex=\"grow\" class=\"elder-select-input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [dataContext]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div fxLayout=\"row\" fxFlex=\"none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete\" class=\"elder-select-icon elder-select-arrow elder-icon-small noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"selectionPopup && (!entityWrapper.value || !allowNull)\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-icon-button-small\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-select-icon\">close</mat-icon>\n    </button>\n\n  </div>\n</div>\n\n\n\n", styles: ["@-webkit-keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: i3.NgControl, decorators: [{
                         type: Optional
@@ -22635,18 +22553,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
                 type: Input
             }] } });
 
+class TextRange {
+    constructor(start, end, value) {
+        this.start = start;
+        this.end = end;
+        this.value = value;
+    }
+}
+class ReplacementResult {
+    constructor(newText, replaced) {
+        this.newText = newText;
+        this.replaced = replaced;
+    }
+}
+class WordPositionFinder {
+    findWord(text, position) {
+        if (position >= 0) {
+            // Search for the word's beginning and end.
+            const left = text.slice(0, position).search(/\S+$/);
+            let right = text.slice(position).search(/\s/);
+            // The last word in the string is a special case.
+            if (right < 0) {
+                right = text.length;
+            }
+            else {
+                right += position;
+            }
+            const word = text.substring(left, right);
+            return new TextRange(left, right, word);
+        }
+        else {
+            return new TextRange(text.length, text.length, undefined);
+        }
+    }
+    replaceWord(text, position, replacement) {
+        const current = this.findWord(text, position);
+        const beforePos = current.start;
+        const before = text.substring(0, beforePos);
+        const after = text.substring(current.end, text.length);
+        let newText = '';
+        if (before) {
+            newText += before.trim();
+        }
+        if (replacement) {
+            if (newText) {
+                newText += ' ';
+            }
+            newText += replacement;
+        }
+        if (after) {
+            if (newText) {
+                newText += ' ';
+            }
+            newText += after.trim();
+        }
+        return new ReplacementResult(newText, new TextRange(beforePos, beforePos + replacement.length, replacement));
+    }
+}
+
+class ElderAutocompleteManyDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(autoCompleteTrigger, inputRef) {
+        this.autoCompleteTrigger = autoCompleteTrigger;
+        this.inputRef = inputRef;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.queryFilter = 'query';
+        this.filters = [];
+        this.sorts = [];
+        this.textPropertyResolverFn = (option) => {
+            if (!option) {
+                return option;
+            }
+            else if (typeof option === 'string') {
+                return option;
+            }
+            else if (this.textProperty) {
+                return option[this.textProperty];
+            }
+            else {
+                return undefined;
+            }
+        };
+        this.inputKeyup$ = new Subject();
+        this.ignoreKeys = ['ArrowRight', 'ArrowUp', 'ArrowDown', 'ArrowLeft'];
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.destroy$ = new Subject();
+        this.destroyAutocompleteBinding$ = new Subject();
+        this.wordFinder = new WordPositionFinder();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set autocomplete(auto) {
+        this._elderAutocomplete = auto;
+        this.destroyAutocompleteBinding$.next();
+        if (auto) {
+            auto.matAutocomplete$
+                .pipe(takeUntil(this.destroyAutocompleteBinding$), filter(matAuto => !!matAuto))
+                .subscribe(matAuto => this.autoCompleteTrigger.autocomplete = matAuto);
+            auto.optionSelected.pipe(takeUntil(this.destroyAutocompleteBinding$)).subscribe(event => this.onOptionSelected(event));
+        }
+    }
+    get autocomplete() {
+        return this._elderAutocomplete;
+    }
+    get cursorPosition() {
+        var _a;
+        if ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+            return this.inputRef.nativeElement.selectionStart;
+        }
+        return null;
+    }
+    set cursorPosition(position) {
+        var _a;
+        if ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+            this.inputRef.nativeElement.selectionStart = position;
+            this.inputRef.nativeElement.selectionEnd = position;
+        }
+    }
+    get dataContext() {
+        return this._elderAutocomplete.dataContext;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Host Listener                                                           *
+     *                                                                         *
+     **************************************************************************/
+    onKeyUp(event) {
+        if (this.ignoreKeys.some(k => k === event.key)) {
+            return;
+        }
+        this.inputKeyup$.next(event);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() {
+        this._elderAutocomplete.displayPropertyResolver = this.textPropertyResolverFn;
+        this._elderAutocomplete.optionValueConverterFn = (option) => {
+            const suggestion = this.resolveSuggestionText(option);
+            return this.insertSuggestion(suggestion);
+        };
+        merge(this.inputKeyup$.pipe(skipWhile(e => !this._elderAutocomplete.enabled), debounceTime(150), map(e => { var _a; return (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value; }), map(value => this.extractWordAtCursor(value))), this.autocomplete.triggerReload$).pipe(takeUntil(this.destroy$), filter(value => !value || typeof (value) === 'string' || typeof (value) === 'number')).subscribe(value => this.updateSuggestions(value));
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.destroyAutocompleteBinding$.next();
+        this.destroyAutocompleteBinding$.complete();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    extractWordAtCursor(value) {
+        if (this.cursorPosition) {
+            const cursor = this.cursorPosition;
+            return this.extractWordFrom(value, cursor);
+        }
+        else {
+            return null;
+        }
+    }
+    rememberCursorPosition() {
+        this.cursorBeforeAutocomplete = this.cursorPosition;
+    }
+    extractWordFrom(text, position) {
+        const word = this.wordFinder.findWord(text, position);
+        return word.value;
+    }
+    updateSuggestions(value) {
+        const filters = [...this.filters, new Filter(this.queryFilter, value)];
+        const sorts = this.sorts;
+        if (this.dataContext) {
+            try {
+                this.rememberCursorPosition();
+                this.dataContext.start(sorts, filters);
+            }
+            catch (err) {
+                this.log.error('Failed to start DataContext!', err);
+            }
+        }
+    }
+    insertSuggestion(suggestion) {
+        const currentValue = this.currentInputValue();
+        if (!suggestion) {
+            return currentValue;
+        }
+        if (this.cursorPosition !== undefined) {
+            const cursor = this.cursorPosition;
+            const replacement = this.wordFinder.replaceWord(currentValue, cursor, suggestion);
+            return replacement.newText;
+        }
+        else {
+            this.log.warn('Insert not possible as no cursor-position was available!');
+            return currentValue;
+        }
+    }
+    currentInputValue() {
+        var _a, _b;
+        const input = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        return (_b = input === null || input === void 0 ? void 0 : input.value) !== null && _b !== void 0 ? _b : '';
+    }
+    resolveSuggestionText(option) {
+        return this.textPropertyResolverFn(option);
+    }
+    onOptionSelected(event) {
+        const wordAtCursor = this.wordFinder.findWord(this.currentInputValue(), this.cursorBeforeAutocomplete);
+        const autocompletedPhrase = this.resolveSuggestionText(event.entity);
+        // The wordAtCursor might not be the full autocompleted phrase (if there are multiple words)
+        this.cursorPosition = wordAtCursor.start + autocompletedPhrase.length;
+    }
+}
+ElderAutocompleteManyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteManyDirective, deps: [{ token: i1$5.MatAutocompleteTrigger }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElderAutocompleteManyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.0", type: ElderAutocompleteManyDirective, selector: "[elderAutocompleteMany]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", textProperty: "textProperty", textPropertyResolverFn: "textPropertyResolverFn", autocomplete: ["elderAutocompleteMany", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteManyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderAutocompleteMany]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$5.MatAutocompleteTrigger }, { type: i0.ElementRef }]; }, propDecorators: { queryFilter: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], sorts: [{
+                type: Input
+            }], textProperty: [{
+                type: Input
+            }], textPropertyResolverFn: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input,
+                args: ['elderAutocompleteMany']
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
 class ElderAutocompleteModule {
 }
 ElderAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ElderAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteModule, declarations: [ElderAutocompleteComponent,
-        ElderAutocompleteDirective], imports: [CommonModule,
+        ElderAutocompleteDirective,
+        ElderAutocompleteManyDirective], imports: [CommonModule, ReactiveFormsModule,
+        MatInputModule,
         MatAutocompleteModule,
         ElderInfiniteScrollModule,
         MatIconModule,
         FlexModule,
         MatProgressBarModule], exports: [ElderAutocompleteComponent,
-        ElderAutocompleteDirective] });
-ElderAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteModule, imports: [CommonModule,
+        ElderAutocompleteDirective,
+        ElderAutocompleteManyDirective] });
+ElderAutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderAutocompleteModule, imports: [CommonModule, ReactiveFormsModule,
+        MatInputModule,
         MatAutocompleteModule,
         ElderInfiniteScrollModule,
         MatIconModule,
@@ -22657,19 +22829,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
             args: [{
                     declarations: [
                         ElderAutocompleteComponent,
-                        ElderAutocompleteDirective
+                        ElderAutocompleteDirective,
+                        ElderAutocompleteManyDirective
                     ],
                     exports: [
                         ElderAutocompleteComponent,
-                        ElderAutocompleteDirective
+                        ElderAutocompleteDirective,
+                        ElderAutocompleteManyDirective
                     ],
                     imports: [
-                        CommonModule,
+                        CommonModule, ReactiveFormsModule,
+                        MatInputModule,
                         MatAutocompleteModule,
                         ElderInfiniteScrollModule,
                         MatIconModule,
                         FlexModule,
-                        MatProgressBarModule
+                        MatProgressBarModule,
                     ]
                 }]
         }] });
@@ -23273,7 +23448,7 @@ ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
         }
-    ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n                class=\"elder-form-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n\n  <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\" fxFlex=\"none\"\n           class=\"elder-input-prefix-icon-container\"\n      >\n        <mat-icon *ngIf=\"icon\" disabled\n                  class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect clickable-chip\"\n              [value]=\"resolveChipValue(chipModel.value)\"\n              [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n              [removable]=\"chipModel.removeable\"\n              (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n              (click)=\"onCurrentClicked(chipModel.value)\"\n    >\n      <mat-chip-avatar\n        *ngIf=\"chipAvatarTemplate && !chipModel.avatarSpec.hide\"\n        [class.chip-avatar-large]=\"chipModel.avatarSpec.large\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n      </mat-chip-avatar>\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove\n                *ngIf=\"chipModel.removeable\"\n                (click)=\"onClickRemoveChip($event, chipModel.value)\">\n        cancel\n      </mat-icon>\n    </mat-chip>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n         style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container\n        *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n      </ng-container>\n\n      <button mat-icon-button type=\"button\" class=\"elder-icon-button-small elder-browse-icon\"\n              *ngIf=\"selectionPopup\"\n              [disabled]=\"isLocked\"\n              (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n              elderStopEventPropagation\n              tabIndex=\"-1\"\n      >\n        <mat-icon class=\"elder-select-icon\">search</mat-icon>\n      </button>\n    </div>\n  </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n  <elder-select autocomplete elderClearSelect fxFlex\n                class=\"elder-chip-input\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-standard-chip .mat-chip-avatar.chip-avatar-large{width:30px;height:30px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i6$1.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i6$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n                class=\"elder-form-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n\n  <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\" fxFlex=\"none\"\n           class=\"elder-input-prefix-icon-container\"\n      >\n        <mat-icon *ngIf=\"icon\" disabled\n                  class=\"elder-prefix-icon elder-select-icon elder-icon-small noselect\"\n                  [class.loading]=\"state.loading\"\n        >\n          {{icon}}\n        </mat-icon>\n      </div>\n    </ng-container>\n\n\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect clickable-chip\"\n              [value]=\"resolveChipValue(chipModel.value)\"\n              [color]=\"chipModel.color\" [selectable]=\"chipColorEnabled\" [selected]=\"chipColorEnabled\"\n              [removable]=\"chipModel.removeable\"\n              (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n              (click)=\"onCurrentClicked(chipModel.value)\"\n    >\n      <mat-chip-avatar\n        *ngIf=\"chipAvatarTemplate && !chipModel.avatarSpec.hide\"\n        [class.chip-avatar-large]=\"chipModel.avatarSpec.large\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n      </mat-chip-avatar>\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove\n                *ngIf=\"chipModel.removeable\"\n                (click)=\"onClickRemoveChip($event, chipModel.value)\">\n        cancel\n      </mat-icon>\n    </mat-chip>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex\n         style=\"padding-top: 7px; padding-bottom: 7px;\">\n\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container\n        *ngTemplateOutlet=\"customInputTemplate || selectInput;\">\n      </ng-container>\n\n      <button mat-icon-button type=\"button\" class=\"elder-icon-button-small elder-browse-icon\"\n              *ngIf=\"selectionPopup\"\n              [disabled]=\"isLocked\"\n              (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n              elderStopEventPropagation\n              tabIndex=\"-1\"\n      >\n        <mat-icon class=\"elder-select-icon\">search</mat-icon>\n      </button>\n    </div>\n  </mat-chip-list>\n</div>\n\n<ng-template #selectInput>\n  <elder-select autocomplete elderClearSelect fxFlex\n                class=\"elder-chip-input\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".clickable-chip{cursor:pointer}.elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mat-standard-chip .mat-chip-avatar.chip-avatar-large{width:30px;height:30px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i6.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -24878,7 +25053,7 @@ class ElderUrlFragmentSwitcherComponent {
     }
 }
 ElderUrlFragmentSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderUrlFragmentSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderUrlFragmentSwitcherComponent, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div fxLayout=\"column\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderUrlFragmentSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElderUrlFragmentSwitcherComponent, selector: "elder-url-fragment-switcher", inputs: { disable: "disable", urlFragments: "urlFragments", urlRegex: "urlRegex", regexArrayIndex: "regexArrayIndex", windowOpenIn: "windowOpenIn" }, ngImport: i0, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div fxLayout=\"column\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i8$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: ElderButtonGroupComponent, selector: "elder-button-group" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElderUrlFragmentSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-url-fragment-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"activeUrlFragment$ | async as activeUrlFragment\">\n  <elder-button-group>\n    <button mat-stroked-button type=\"button\" disabled [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <div fxLayout=\"column\">\n        <span *ngIf=\"!disable\" class=\"caption\">{{activeUrlFragment.name}}</span>\n      </div>\n    </button>\n\n    <button mat-stroked-button type=\"button\"\n            *ngIf=\"!disable \"  [matMenuTriggerFor]=\"fragmentMenu\"\n            [ngStyle]=\"{'background-color': activeUrlFragment.color}\">\n      <mat-icon>flip_camera_android</mat-icon>\n    </button>\n  </elder-button-group>\n</ng-container>\n\n<mat-menu #fragmentMenu=\"matMenu\">\n  <button mat-menu-item type=\"button\"\n          *ngFor=\"let urlFragment of urlFragments\"\n          (click)=\"setActiveUrlFragment(urlFragment.fragment)\">\n    <mat-icon [ngStyle]=\"{'color': urlFragment.color}\">flip_camera_android</mat-icon>\n    <span>{{  urlFragment.name }}</span>\n  </button>\n\n</mat-menu>\n", styles: [".activeURlFragment{padding-left:6px}.mat-body-strong{line-height:5px;padding-top:10px;padding-bottom:8px;color:#000}.caption{color:#fff}.mat-body-strong-no-caption{line-height:5px;padding-top:15px;padding-bottom:14px;color:#000}\n"] }]
@@ -25778,7 +25953,8 @@ class DataViewIframeComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel) {
+    constructor(dataViewOptionsProvider, selectionModel) {
+        this.dataViewOptionsProvider = dataViewOptionsProvider;
         this.selectionModel = selectionModel;
         /***************************************************************************
          *                                                                         *
@@ -25786,8 +25962,11 @@ class DataViewIframeComponent {
          *                                                                         *
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
-        this._dataViewOptions$ = new BehaviorSubject(null);
+        this._dataViewOptions$ = new BehaviorSubject(ElderDataViewOptions.defaultOptions());
         this._destroy$ = new Subject();
+        if (dataViewOptionsProvider) {
+            dataViewOptionsProvider.options$.pipe(takeUntil(this._destroy$)).subscribe(options => this.dataViewOptions = options);
+        }
     }
     /***************************************************************************
      *                                                                         *
@@ -25813,7 +25992,8 @@ class DataViewIframeComponent {
         return this._dataViewOptions$.getValue();
     }
     set dataViewOptions(options) {
-        this._dataViewOptions$.next(options);
+        const newOptions = this.dataViewOptions.withOptions(options);
+        this._dataViewOptions$.next(newOptions);
     }
     get dataViewOptions$() {
         return this._dataViewOptions$.asObservable();
@@ -25856,13 +26036,15 @@ class DataViewIframeComponent {
         return DataViewMessage.initialSelection(new DataViewSelectionInit(options, initialSelection, this.idField));
     }
 }
-DataViewIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DataViewIframeComponent, deps: [{ token: SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DataViewIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DataViewIframeComponent, deps: [{ token: ElderDataViewOptionsProvider, optional: true }, { token: SelectionModel, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DataViewIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: DataViewIframeComponent, selector: "elder-data-view-iframe", inputs: { srcUrl: "srcUrl", idField: "idField", initialSelection: "initialSelection", dataViewOptions: "dataViewOptions" }, viewQueries: [{ propertyName: "iframeHost", first: true, predicate: IframeHostComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxFill>\n\n  <elder-i-frame-host fxFlex\n                      [iframeParams]=\"{srcUrl: srcUrl, hideActionBar: true}\"\n                      (message)=\"onMessageFromChild($event)\">\n  </elder-i-frame-host>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: IframeHostComponent, selector: "elder-i-frame-host", inputs: ["iframeParams"], outputs: ["message", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: DataViewIframeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-data-view-iframe', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div fxLayout=\"column\" fxFill>\n\n  <elder-i-frame-host fxFlex\n                      [iframeParams]=\"{srcUrl: srcUrl, hideActionBar: true}\"\n                      (message)=\"onMessageFromChild($event)\">\n  </elder-i-frame-host>\n\n</div>\n" }]
         }], ctorParameters: function () {
-        return [{ type: SelectionModel, decorators: [{
+        return [{ type: ElderDataViewOptionsProvider, decorators: [{
+                        type: Optional
+                    }] }, { type: SelectionModel, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { srcUrl: [{
@@ -25955,9 +26137,8 @@ class DataViewIframeAdapterDirective {
         }
     }
     initializeDataView(init) {
-        this.dataViewOptionsProvider.updateOptions(options => options
-            .withSorts(init.options.sorts)
-            .withFilters(init.options.filters));
+        // updating options of child data view given by iframe parent
+        this.dataViewOptionsProvider.updateOptions(options => options.withOptions(init.options));
         this.selectionModel.keyGetterFn = (entity) => entity[init.idField];
         this.selectionModel.isMultipleSelection = init.options.selectionMultiEnabled;
         if (init.initialSelection) {
@@ -27218,5 +27399,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_DATA_VIEW, ELDER_SELECT_BASE, EbsCommonDialogService, EbsToastService, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxDirective, ElderMeasuresModule, ElderMinDirective, ElderMultiAutoCompleteModule, ElderMultiAutocompleteComponent, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, 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, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectListComponent, ElderSelectListItemComponent, ElderSelectListModule, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderStopEventPropagationDirectiveLegacy, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTouchedDirectiveLegacy, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, ReplacementResult, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TextRange, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastService, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, WordPositionFinder, alphaNumStringComparator, buildFormIntegrationProviders, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_DATA_VIEW, ELDER_SELECT_BASE, EbsCommonDialogService, EbsToastService, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxDirective, ElderMeasuresModule, ElderMinDirective, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, 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, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectListComponent, ElderSelectListItemComponent, ElderSelectListModule, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderStopEventPropagationDirectiveLegacy, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTouchedDirectiveLegacy, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastService, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map