@elderbyte/ngx-starter 13.6.0 → 13.7.2

package/fesm2015/elderbyte-ngx-starter.mjs

@@ -2237,6 +2237,9 @@ class CollectionUtil {
         }
         return true;
     }
+    static hasElements(list) {
+        return list !== null && list !== undefined && list.length > 0;
+    }
 }
 CollectionUtil.logger = LoggerFactory.getLogger('CollectionUtil');
 
@@ -20495,66 +20498,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }] } });
 
-class AutoSelectFirstDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(elderSelect) {
-        this.elderSelect = elderSelect;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.log.info('autoSelectFirst after-view init, auto selecting value');
-            this.handleAutoSelectFirst();
-        }, 10);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    /**
-     * After data is loaded into this select, ensure that
-     * a value is selected or select the first automatically.
-     */
-    set autoSelectFirstEnabled(val) {
-        this.enabled = coerceBooleanProperty(val);
-    }
-    set enabled(val) {
-        this._enabled = val;
-    }
-    get enabled() {
-        return this._enabled;
-    }
+class ElderSelectFirstUtil {
     /***************************************************************************
      *                                                                         *
      * Public methods                                                          *
      *                                                                         *
      **************************************************************************/
-    trySelectFirst() {
-        const suggestionsDc = this.elderSelect.suggestionsDc;
+    static trySelectFirst(elderSelect) {
+        const suggestionsDc = elderSelect.suggestionsDc;
         const dataContextFirstItem = (suggestionsDc === null || suggestionsDc === void 0 ? void 0 : suggestionsDc.isStarted)
             ? this.firstItemInDataContextSoon(suggestionsDc)
             : of(null);
-        dataContextFirstItem.pipe(takeUntil(this.elderSelect.valueChange.pipe(filter(value => !!value))), switchMap(firstItem => firstItem ? of(firstItem) : this.firstSuggestionItem())).subscribe(firstItem => {
-            if (firstItem && !this.elderSelect.entityId) {
-                this.elderSelect.updateValueByEntity(firstItem);
+        dataContextFirstItem.pipe(takeUntil(elderSelect.valueChange.pipe(filter(value => !!value))), switchMap(firstItem => firstItem ? of(firstItem) : this.firstSuggestionItem(elderSelect))).subscribe(firstItem => {
+            if (firstItem && !elderSelect.entityId) {
+                elderSelect.updateValueByEntity(firstItem);
             }
         }, err => {
-            this.elderSelect.updateState(ElderSelectComponentState.error(err));
+            elderSelect.updateState(ElderSelectComponentState.error(err));
             this.log.error('Failed to load first entity for auto-select-first flow!', err);
         });
     }
@@ -20563,54 +20523,37 @@ class AutoSelectFirstDirective {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    handleAutoSelectFirst() {
-        if (!this.elderSelect.value) {
-            this.log.debug('Attempting to auto select first entity...');
-            this.trySelectFirst();
-        }
-        else {
-            this.log.warn('Conflict avoided: Aborted auto selection because value id already present!');
-        }
-    }
-    firstItemInDataContextSoon(dataContext) {
+    static firstItemInDataContextSoon(dataContext) {
         return dataContext.data.pipe(filter(data => data && data.length > 0), map(data => data[0]), timeout(250), catchError(timeoutError => {
             this.log.warn('Gave up waiting for DataContext items, timeout reached. Falling back to sugestion lookup.', timeoutError);
             return of(null);
         }), first());
     }
-    firstSuggestionItem() {
-        const suggestionsDc = this.elderSelect.suggestionsDc;
+    static firstSuggestionItem(elderSelect) {
+        const suggestionsDc = elderSelect.suggestionsDc;
         const dataSource = suggestionsDc === null || suggestionsDc === void 0 ? void 0 : suggestionsDc.dataSource;
         if (dataSource) {
-            this.updateState(ElderSelectComponentState.loading());
+            elderSelect.updateState(ElderSelectComponentState.loading());
             return DataSourceAdapter.from(dataSource)
-                .findFirst(this.elderSelect.filters, this.elderSelect.sorts).pipe(tap(() => this.updateState(ElderSelectComponentState.idle())), catchError(err => {
+                .findFirst(elderSelect.filters, elderSelect.sorts).pipe(tap(() => elderSelect.updateState(ElderSelectComponentState.idle())), catchError(err => {
                 this.log.error('Failed to load suggestions!', err);
-                this.elderSelect.updateState(ElderSelectComponentState.error(err));
+                elderSelect.updateState(ElderSelectComponentState.error(err));
                 return of(null);
             }));
         }
         else {
             this.log.warn('Failed to load first suggestion!');
-            this.updateState(ElderSelectComponentState.idle());
+            elderSelect.updateState(ElderSelectComponentState.idle());
             return EMPTY;
         }
     }
-    updateState(state) {
-        this.elderSelect.updateState(state);
-    }
 }
-AutoSelectFirstDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: AutoSelectFirstDirective, deps: [{ token: ElderSelectComponent }], target: i0.ɵɵFactoryTarget.Directive });
-AutoSelectFirstDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: AutoSelectFirstDirective, selector: "[autoSelectFirst]", inputs: { autoSelectFirstEnabled: ["autoSelectFirst", "autoSelectFirstEnabled"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: AutoSelectFirstDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[autoSelectFirst]'
-                }]
-        }], ctorParameters: function () { return [{ type: ElderSelectComponent }]; }, propDecorators: { autoSelectFirstEnabled: [{
-                type: Input,
-                args: ['autoSelectFirst']
-            }] } });
+/***************************************************************************
+ *                                                                         *
+ * Fields                                                                  *
+ *                                                                         *
+ **************************************************************************/
+ElderSelectFirstUtil.log = LoggerFactory.getLogger('ElderSelectFirstUtil');
 
 class ElderAutocompleteComponent {
     /***************************************************************************
@@ -20780,7 +20723,7 @@ function isElderEntityValueAccessor(object) {
         && vac.updateValueByEntity !== undefined;
 }
 
-class SelectOnTabDirective {
+class ElderSelectOnTabDirective {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -20857,9 +20800,9 @@ class SelectOnTabDirective {
         this.destroy$.complete();
     }
 }
-SelectOnTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SelectOnTabDirective, deps: [{ token: i1$6.MatAutocompleteTrigger }, { token: ELDER_SELECT_BASE, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-SelectOnTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: SelectOnTabDirective, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.tab": "onBlur()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SelectOnTabDirective, decorators: [{
+ElderSelectOnTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderSelectOnTabDirective, deps: [{ token: i1$6.MatAutocompleteTrigger }, { token: ELDER_SELECT_BASE, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderSelectOnTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.tab": "onBlur()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderSelectOnTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderSelectOnTab]'
@@ -21026,6 +20969,8 @@ class ElderSelectComponent extends ElderSelectBase {
         this.entityIdChange = this.valueChange.pipe(map(v => this.entityIdFromValue(v)));
         this.entityChange = this.entity$.pipe(skip(1) // Skip the initial NULL value
         );
+        this.entityIdUpdated = this.valueUpdated.pipe(map(value => this.entityIdFromValue(value)));
+        this.entityUpdated = combineLatest([this.entityIdUpdated, this.entity$]).pipe(filter(([updatedId, entity]) => this.getEntityId(entity) === updatedId), map(([updatedId, entity]) => entity));
         this.entityWrapped$ = combineLatest([
             this.entity$,
             this.displayPropertyResolver$,
@@ -21078,7 +21023,7 @@ class ElderSelectComponent extends ElderSelectBase {
      *                                                                         *
      **************************************************************************/
     set entity(entity) {
-        this.entity$.next(entity); // TODO Set entity$ when set directly via value / writeValue
+        this.entity$.next(entity);
         this.writeValueInternal(this.entityToValue(entity));
     }
     get entity() {
@@ -21184,8 +21129,7 @@ class ElderSelectComponent extends ElderSelectBase {
     }
     forceReloadFirst() {
         this.value = null; // valueId is set to null automatically
-        const autoReloadFirst = new AutoSelectFirstDirective(this);
-        autoReloadFirst.trySelectFirst();
+        ElderSelectFirstUtil.trySelectFirst(this);
     }
     updateValueByEntity(entity) {
         this.updateValue(this.entityToValue(entity));
@@ -21314,13 +21258,13 @@ class ElderSelectComponent extends ElderSelectBase {
     }
 }
 ElderSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderSelectComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ElderSelectComponent, selector: "elder-select", inputs: { nullDisplay: "nullDisplay", autocomplete: "autocomplete", allowNull: "allowNull", entity: "entity", entityId: "entityId", hintProperty: "hintProperty", hintPropertyResolver: "hintPropertyResolver" }, outputs: { entityIdChange: "entityIdChange", entityChange: "entityChange" }, providers: [
+ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ElderSelectComponent, selector: "elder-select", inputs: { nullDisplay: "nullDisplay", autocomplete: "autocomplete", allowNull: "allowNull", entity: "entity", entityId: "entityId", hintProperty: "hintProperty", hintPropertyResolver: "hintPropertyResolver" }, outputs: { entityIdChange: "entityIdChange", entityChange: "entityChange", entityIdUpdated: "entityIdUpdated", entityUpdated: "entityUpdated" }, providers: [
         {
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderSelectComponent)
         },
         ...buildFormIntegrationProviders(ElderSelectComponent)
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(entityWrapped$ | async) as entityWrapper\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input\n    matInput type=\"text\" fxFlex=\"grow\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.select]=\"!autocomplete\" (click)=\"onInputClicked(autoTrigger)\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | 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\n  <ng-container matSuffix>\n\n    <mat-icon\n      *ngIf=\"!autocomplete\" class=\"select-arrow noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\"\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>search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <mat-hint *ngIf=\"entityWrapper.hintText\">{{entityWrapper.hintText}}</mat-hint>\n\n</mat-form-field>\n\n\n\n", styles: [".prefix-container{width:24px;height:16px}@-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}.prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i4.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"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: SelectOnTabDirective, selector: "[elderSelectOnTab]" }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$5.MatSuffix, selector: "[matSuffix]" }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(entityWrapped$ | async) as entityWrapper\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input\n    matInput type=\"text\" fxFlex=\"grow\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.select]=\"!autocomplete\" (click)=\"onInputClicked(autoTrigger)\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | 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\n  <ng-container matSuffix>\n\n    <mat-icon\n      *ngIf=\"!autocomplete\" class=\"select-arrow noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\"\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>search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\"\n            *ngIf=\"entityWrapper.value && allowNull\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n  </ng-container>\n\n  <mat-hint *ngIf=\"entityWrapper.hintText\">{{entityWrapper.hintText}}</mat-hint>\n\n</mat-form-field>\n\n\n\n", styles: [".prefix-container{width:24px;height:16px}@-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}.prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i4.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"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$5.MatSuffix, selector: "[matSuffix]" }, { type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -21336,6 +21280,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Output
             }], entityChange: [{
                 type: Output
+            }], entityIdUpdated: [{
+                type: Output
+            }], entityUpdated: [{
+                type: Output
             }], autocomplete: [{
                 type: Input
             }], allowNull: [{
@@ -21415,67 +21363,123 @@ class ElderMultiSelectBase extends ElderSelectBase {
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._valueIds = null;
-        this.valueIdsChange = this.valueChange.pipe(map(values => {
-            if (values) {
-                return values.map(v => this.getEntityId(v));
-            }
-            else {
-                return null;
-            }
-        }));
+        this.entities$ = new BehaviorSubject([]);
+        this.entityIdsChange = this.valueChange.pipe(map(values => this.entityIdsFromValues(values)));
+        this.entityIdsUpdated = this.valueUpdated.pipe(map(values => this.entityIdsFromValues(values)));
+        this.entitiesUpdated = combineLatest([this.entityIdsUpdated, this.entities$]).pipe(filter(([updatedIds, entities]) => this.equalIds(this.getEntityIds(entities), updatedIds)), map(([updatedIds, entities]) => entities));
     }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    /**
-     * Select the value with the given id.
-     * @param ids
-     */
-    set valueIds(ids) {
-        if (!this.equalIds(ids, this._valueIds)) {
-            this._valueIds = ids;
-            this.selectValuesByIds(ids);
-        }
+    set entities(entities) {
+        this.entities$.next(entities);
+        this.writeValueInternal(this.entitiesToValues(entities));
     }
-    get valueIds() {
-        if (this.value) {
-            return this.getValueIds(this.value);
+    get entities() {
+        return this.entities$.getValue();
+    }
+    set entityIds(ids) {
+        if (this.valueAsId) {
+            this.writeValueInternal(ids);
         }
         else {
-            return this._valueIds;
+            this.selectEntitiesByIds(ids);
         }
     }
+    get entityIds() {
+        return this.entityIdsFromValues(this.value);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    updateValueByEntities(entities) {
+        this.updateValue(this.entitiesToValues(entities));
+    }
     /***************************************************************************
      *                                                                         *
      * Internal Methods                                                        *
      *                                                                         *
      **************************************************************************/
     onSuggestionsDcChanged(data) {
-        if (this._valueIds) {
-            this.selectValuesByIds(this._valueIds);
+        if (this.valueAsId) {
+            this.selectEntitiesByIds(this.entityIds);
+        }
+    }
+    /**
+     * This method is invoked after a value has been written to this control.
+     *
+     */
+    writeToControl(value) {
+        if (this.valueAsId) {
+            const entityIds = value;
+            // Value was written as entity ids, ensure we select entity by id
+            this.logger.debug('writeToControl: value was written as ids: ' + entityIds, value);
+            this.selectEntitiesByIds(entityIds);
+        }
+        else {
+            // Value was written as entity, ensure entity is updated
+            const currentEntities = this.entities;
+            const newEntities = value;
+            this.logger.debug('writeToControl: value was written as entities (size): ' + (newEntities === null || newEntities === void 0 ? void 0 : newEntities.length), value);
+            if (!this.equalEntities(currentEntities, newEntities)) {
+                this.entities$.next(newEntities);
+            }
+            else {
+                this.logger.warn('Ignored written entities as they are already set to entities$!');
+            }
         }
+        super.writeToControl(value);
     }
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    getValueIds(values) {
+    entityIdsFromValues(values) {
+        return values === null || values === void 0 ? void 0 : values.map(v => this.entityIdFromValue(v));
+    }
+    entityIdFromValue(value) {
+        if (this.valueAsId) {
+            return value;
+        }
+        else {
+            const entity = value;
+            return this.getEntityId(entity);
+        }
+    }
+    entitiesToValues(entities) {
+        return entities === null || entities === void 0 ? void 0 : entities.map(e => this.entityToValue(e));
+    }
+    entityToValue(entity) {
+        if (this.valueAsId) {
+            const id = this.getEntityId(entity);
+            return id;
+        }
+        else {
+            return entity;
+        }
+    }
+    getEntityIds(values) {
         return values.map(v => this.getEntityId(v));
     }
     equalIds(idsA, idsB) {
         return Sets.equalContent(idsA, idsB);
     }
-    selectValuesByIds(ids) {
-        if (this.value && this.equalIds(this.getValueIds(this.value), ids)) {
-            return; // Already selected
+    equalEntities(entitiesA, entitiesB) {
+        return this.equalIds(this.getEntityIds(entitiesA), this.getEntityIds(entitiesB));
+    }
+    selectEntitiesByIds(ids) {
+        const currentEntities = this.entities;
+        if (currentEntities && this.equalIds(this.getEntityIds(currentEntities), ids)) {
+            return; // Entities already loaded
         }
-        if (ids === null || ids === undefined || ids.length === 0) {
-            if (this.value !== null && this.value !== undefined && this.value.length !== 0) {
-                this.writeValueInternal([]); // TODO Or write empty list?? []
+        if (!CollectionUtil.hasElements(ids)) {
+            if (CollectionUtil.hasElements(currentEntities)) {
+                this.writeValueInternal([]);
             }
         }
         else {
@@ -21487,8 +21491,8 @@ class ElderMultiSelectBase extends ElderSelectBase {
                     loaded.forEach((v, k) => existing.set(k, v));
                     return existing;
                 }), map(allValuesMap => Array.from(allValuesMap.values())) // TODO Sort?
-                ).subscribe(values => {
-                    this.writeValueInternal(values);
+                ).subscribe(entities => {
+                    this.entities = entities;
                 });
             }
             else {
@@ -21502,6 +21506,7 @@ class ElderMultiSelectBase extends ElderSelectBase {
             this.updateState(ElderSelectComponentState.error(err));
             return of([]);
         }), map(values => {
+            this.logger.debug('Loaded entities by id:', values);
             const valueMap = new Map();
             values.forEach(v => valueMap.set(this.getEntityId(v), v));
             return valueMap;
@@ -21520,12 +21525,18 @@ class ElderMultiSelectBase extends ElderSelectBase {
     }
 }
 ElderMultiSelectBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectBase, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ElderMultiSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectBase, inputs: { valueIds: "valueIds" }, outputs: { valueIdsChange: "valueIdsChange" }, usesInheritance: true, ngImport: i0 });
+ElderMultiSelectBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectBase, inputs: { entities: "entities", entityIds: "entityIds" }, outputs: { entityIdsChange: "entityIdsChange", entityIdsUpdated: "entityIdsUpdated", entitiesUpdated: "entitiesUpdated" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { valueIdsChange: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { entityIdsChange: [{
                 type: Output
-            }], valueIds: [{
+            }], entityIdsUpdated: [{
+                type: Output
+            }], entitiesUpdated: [{
+                type: Output
+            }], entities: [{
+                type: Input
+            }], entityIds: [{
                 type: Input
             }] } });
 
@@ -21544,7 +21555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
 
-class ValueChip {
+class SelectChip {
     constructor(value, displayText, color, removeable) {
         this.value = value;
         this.displayText = displayText;
@@ -21569,13 +21580,13 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         this.chipColorResolver$ = new BehaviorSubject((value) => undefined);
         this.selectable = true;
         this.allowRemove = true;
-        this.valuesWrapped$ = combineLatest([
-            this.value$,
+        this.selectChips$ = combineLatest([
+            this.entities$,
             this.displayPropertyResolver$,
             this.chipColorResolver$
         ]).pipe(map(([values, dPR, cCR]) => {
             if (values) {
-                return values.map(v => new ValueChip(v, dPR(v), cCR(v), this.allowRemove));
+                return values.map(v => new SelectChip(v, dPR(v), cCR(v), this.allowRemove));
             }
             else {
                 return [];
@@ -21644,19 +21655,19 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         }
     }
     addLabels(labels) {
-        const current = this.value ? this.value : [];
+        const current = this.entities ? this.entities : [];
         this.replaceWith([...current, ...labels]);
     }
     addLabel(label) {
         this.addLabels([label]);
     }
     removeLabel(toRemove) {
-        const remaining = this.value
+        const remaining = this.entities
             .filter(l => !this.isEqual(l, toRemove));
         this.replaceWith(remaining);
     }
-    replaceWith(labels) {
-        this.updateValue(labels);
+    replaceWith(entities) {
+        this.updateValueByEntities(entities);
     }
     /***************************************************************************
      *                                                                         *
@@ -21664,8 +21675,8 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
      *                                                                         *
      **************************************************************************/
     isAlreadyPresent(queryValue) {
-        if (this.value) {
-            return this.value.some(v => this.isEqual(v, queryValue));
+        if (this.entities) {
+            return this.entities.some(v => this.isEqual(v, queryValue));
         }
         else {
             return false;
@@ -21681,10 +21692,10 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     }
 }
 ElderMultiSelectChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipColorResolver: "chipColorResolver" }, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["chipInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(valuesWrapped$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i4.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"] }, { type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipColorResolver: "chipColorResolver" }, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["chipInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"], components: [{ type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "enabled", "valueTemplate", "suggestionsDc", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i1$5.MatLabel, selector: "mat-label" }, { type: i1$5.MatPrefix, selector: "[matPrefix]" }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i4.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"] }, { type: i2$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: ElderAutocompleteDirective, selector: "[elderElderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderElderAutocomplete"] }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), template: "<mat-form-field *ngIf=\"(valuesWrapped$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"] }]
+            args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: buildFormIntegrationProviders(ElderMultiSelectChipsComponent), template: "<mat-form-field *ngIf=\"(selectChips$ | async) as chipValues\" fxFlex\n                class=\"elder-std-form-field\"\n                [appearance]=\"appearance\"\n                [floatLabel]=\"floatLabel\"\n                [color]=\"color\"\n>\n\n  <mat-label *ngIf=\"label\">{{label | translate}}</mat-label>\n\n\n  <ng-container matPrefix *ngIf=\"(mergedState$ | async) as state\">\n\n    <mat-icon *ngIf=\"icon\" disabled\n              class=\"leading-icon prefix-padding noselect\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\">\n      {{icon}}\n    </mat-icon>\n\n\n    <mat-icon *ngIf=\"!icon && state?.error\"\n              class=\"leading-icon prefix-padding noselect\"\n              color=\"warn\">\n      warning\n    </mat-icon>\n  </ng-container>\n\n  <!-- A dynamic input -->\n\n  <mat-chip-list selectable #chips>\n    <mat-chip *ngFor=\"let chipModel of chipValues\"\n              class=\"noselect\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeLabel(chipModel.value)\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input matInput type=\"text\"\n           [disabled]=\"disabled\"\n           [required]=\"required\"\n           [readonly]=\"readonly\"\n           [name]=\"name + '-multi-chips-inner-input'\"\n           [placeholder]=\"placeholder | translate\"\n           [matChipInputFor]=\"chips\"\n           [matAutocomplete]\n           [elderElderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n           autocomplete=\"off\"\n           #chipInput>\n  </mat-chip-list>\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [suggestionsDc]=\"suggestionsDc$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <mat-hint *ngIf=\"hint\">{{hint | translate}}</mat-hint>\n\n</mat-form-field>\n\n\n<ng-template #simpleChipTemplate let-chipModel>\n  {{chipModel.displayText}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { allowRemove: [{
                 type: Input
             }], inputControl: [{
@@ -21699,6 +21710,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }] } });
 
+class ElderAutoSelectFirstDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderSelect) {
+        this.elderSelect = elderSelect;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.log.info('autoSelectFirst after-view init, auto selecting value');
+            this.handleAutoSelectFirst();
+        }, 10);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * After data is loaded into this select, ensure that
+     * a value is selected or select the first automatically.
+     */
+    set autoSelectFirstEnabled(val) {
+        this.enabled = coerceBooleanProperty(val);
+    }
+    set enabled(val) {
+        this._enabled = val;
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    handleAutoSelectFirst() {
+        if (!this.elderSelect.value) {
+            this.log.debug('Attempting to auto select first entity...');
+            ElderSelectFirstUtil.trySelectFirst(this.elderSelect);
+        }
+        else {
+            this.log.warn('Conflict avoided: Aborted auto selection because value id already present!');
+        }
+    }
+}
+ElderAutoSelectFirstDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderAutoSelectFirstDirective, deps: [{ token: ElderSelectComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ElderAutoSelectFirstDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: ElderAutoSelectFirstDirective, selector: "[autoSelectFirst]", inputs: { autoSelectFirstEnabled: ["autoSelectFirst", "autoSelectFirstEnabled"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderAutoSelectFirstDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[autoSelectFirst]'
+                }]
+        }], ctorParameters: function () { return [{ type: ElderSelectComponent }]; }, propDecorators: { autoSelectFirstEnabled: [{
+                type: Input,
+                args: ['autoSelectFirst']
+            }] } });
+
 class ElderSelectModule {
 }
 ElderSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -21706,10 +21788,10 @@ ElderSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ElderSelectValueDirective,
         TemplatedSelectionDialogComponent,
         SelectionModelPopupDirective,
-        SelectOnTabDirective,
+        ElderSelectOnTabDirective,
         ElderMultiSelectChipsComponent,
         ElderSelectChipDirective,
-        AutoSelectFirstDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule,
+        ElderAutoSelectFirstDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule,
         MatFormFieldModule,
         MatIconModule,
         MatSelectModule,
@@ -21724,7 +21806,7 @@ ElderSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         SelectionModelPopupDirective,
         ElderMultiSelectChipsComponent,
         ElderSelectChipDirective,
-        AutoSelectFirstDirective] });
+        ElderAutoSelectFirstDirective] });
 ElderSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ElderSelectModule, imports: [[
             CommonModule, FormsModule, ReactiveFormsModule,
             MatFormFieldModule,
@@ -21757,10 +21839,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         ElderSelectValueDirective,
                         TemplatedSelectionDialogComponent,
                         SelectionModelPopupDirective,
-                        SelectOnTabDirective,
+                        ElderSelectOnTabDirective,
                         ElderMultiSelectChipsComponent,
                         ElderSelectChipDirective,
-                        AutoSelectFirstDirective
+                        ElderAutoSelectFirstDirective
                     ],
                     exports: [
                         ElderSelectComponent,
@@ -21769,7 +21851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         SelectionModelPopupDirective,
                         ElderMultiSelectChipsComponent,
                         ElderSelectChipDirective,
-                        AutoSelectFirstDirective
+                        ElderAutoSelectFirstDirective
                     ]
                 }]
         }] });
@@ -25119,5 +25201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuditedEntity, AutoSelectFirstDirective, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, EbsCommonDialogService, EbsToastService, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewBaseModule, ElderDataViewSelectionMode, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxDirective, ElderMeasuresModule, ElderMinDirective, ElderMultiAutoCompleteModule, ElderMultiAutocompleteComponent, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPlugParentFormDirectiveLegacy, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityInputComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredIgnoreZeroValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectChipDirective, ElderSelectComponent, ElderSelectListComponent, ElderSelectListItemComponent, ElderSelectListModule, ElderSelectModule, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderStopEventPropagationDirectiveLegacy, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTouchedDirectiveLegacy, ElderTripleStateCheckboxDirective, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, 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, KnownLocaleType, LazyBehaviorSubject, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, ReplacementResult, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectOnTabDirective, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TextRange, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastService, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, WordPositionFinder, alphaNumStringComparator, buildFormIntegrationProviders, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone };
+export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceAutoReloader, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, EbsCommonDialogService, EbsToastService, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipListSelectComponent, ElderChipListSelectModule, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewBaseModule, ElderDataViewSelectionMode, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDatesModule, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogService, ElderDimensionsInputComponent, ElderDurationInputComponent, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxDirective, ElderMeasuresModule, ElderMinDirective, ElderMultiAutoCompleteModule, ElderMultiAutocompleteComponent, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPlugParentFormDirectiveLegacy, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityInputComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredIgnoreZeroValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectChipDirective, ElderSelectComponent, ElderSelectListComponent, ElderSelectListItemComponent, ElderSelectListModule, ElderSelectModule, 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, ElderTimeModule, ElderToastModule, ElderToastService, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTouchedDirectiveLegacy, ElderTripleStateCheckboxDirective, 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, KnownLocaleType, LazyBehaviorSubject, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, ReplacementResult, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TextRange, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToastService, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, WordPositionFinder, alphaNumStringComparator, buildFormIntegrationProviders, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map