@elderbyte/ngx-starter 13.9.0 → 13.9.3

package/fesm2020/elderbyte-ngx-starter.mjs

@@ -20782,11 +20782,12 @@ function isElderEntityValueAccessor(object) {
         return false;
     }
     const vac = object;
-    return vac.entity !== undefined
-        && vac.entityId !== undefined
+    return 'entity' in vac // This might be undefined
+        && 'entityId' in vac // This might be undefined
         && vac.entityIdChange !== undefined
         && vac.entityChange !== undefined
-        && vac.updateValueByEntity !== undefined;
+        && vac.updateValueByEntity !== undefined
+        && vac.entityToValue !== undefined;
 }
 
 class ElderSelectOnTabDirective {
@@ -20820,6 +20821,9 @@ class ElderSelectOnTabDirective {
      * Event Listener                                                          *
      *                                                                         *
      **************************************************************************/
+    onOptionSelect() {
+        this.userInput = true;
+    }
     onBlur() {
         if (!this.panelOpen) {
             return;
@@ -20834,21 +20838,9 @@ class ElderSelectOnTabDirective {
         const activeOption = this.autoTrigger.activeOption;
         if (activeOption) {
             const entity = activeOption.value;
-            this.updateValueByEntity(entity);
-            this.autoTrigger.writeValue(entity);
-            this.logger.warn('Wrote option.value to control: ', entity);
-        }
-    }
-    updateValueByEntity(entity) {
-        if (isElderEntityValueAccessor(this.controlValueAccessor)) {
-            // Since elder-select may use the entity id as value (valueAsId),
-            // we can not directly write to the value safely.
-            this.controlValueAccessor.updateValueByEntity(entity);
-        }
-        else {
-            // By default, write the selected option to the control value
-            this.controlValueAccessor.updateValue(entity);
+            this.writeEntity(entity);
         }
+        this.reset();
     }
     /***************************************************************************
      *                                                                         *
@@ -20859,15 +20851,41 @@ class ElderSelectOnTabDirective {
         const autocomplete = this.autoTrigger.autocomplete;
         merge(autocomplete.opened.pipe(map(() => true)), autocomplete.closed.pipe(map(() => false))).pipe(takeUntil(this.destroy$), delay(0)).subscribe(value => this.panelOpen = value);
         this.autoTrigger.optionSelections.pipe(// TODO https://github.com/angular/components/pull/14813
-        takeUntil(this.destroy$), map(opt => opt.isUserInput)).subscribe(isUserInput => this.userInput = isUserInput);
+        takeUntil(this.destroy$), tap(opt => this.logger.debug('[optionSelections] CHANGED ', opt)), map(opt => opt.isUserInput)).subscribe(isUserInput => this.userInput = isUserInput);
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    reset() {
+        this.userInput = false;
+    }
+    writeEntity(entity) {
+        const value = this.entityToValue(entity);
+        this.controlValueAccessor.updateValue(value);
+        this.autoTrigger.writeValue(value);
+        this.logger.warn('Wrote entity to control as value: ', value);
+    }
+    entityToValue(entity) {
+        if (isElderEntityValueAccessor(this.controlValueAccessor)) {
+            // Since elder-select may use the entity id as value (valueAsId),
+            // we can not directly write to the value safely.
+            return this.controlValueAccessor.entityToValue(entity);
+        }
+        else {
+            // By default, write the selected option to the control value
+            this.logger.warn('[controlValueAccessor] is not a ElderEntityValueAccessor!: ', this.controlValueAccessor);
+            return entity;
+        }
+    }
 }
 ElderSelectOnTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", 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.10", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.tab": "onBlur()" } }, ngImport: i0 });
+ElderSelectOnTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "onOptionSelect()", "keydown.arrowdown": "onOptionSelect()", "keydown.tab": "onBlur()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderSelectOnTabDirective, decorators: [{
             type: Directive,
             args: [{
@@ -20878,7 +20896,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
                 }, {
                     type: Inject,
                     args: [ELDER_SELECT_BASE]
-                }] }]; }, propDecorators: { onBlur: [{
+                }] }]; }, propDecorators: { onOptionSelect: [{
+                type: HostListener,
+                args: ['keydown.arrowup']
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowdown']
+            }], onBlur: [{
                 type: HostListener,
                 args: ['keydown.tab']
             }] } });
@@ -21208,6 +21232,12 @@ class ElderSelectComponent extends ElderSelectBase {
         this._entity$.next(entity);
         this.updateValue(this.entityToValue(entity));
     }
+    focus(options) {
+        this.inputRef?.nativeElement?.focus(options);
+    }
+    blur() {
+        this.inputRef?.nativeElement?.blur();
+    }
     /***************************************************************************
      *                                                                         *
      * Abstract Implementation                                                 *
@@ -21325,7 +21355,7 @@ ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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 clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\"\n              (click)=\"onCurrentClicked(entity)\"\n    >\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=\"!selectionPopup && !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}.clickable-icon{cursor:pointer}.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: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: ["elderNoHint"] }, { 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 });
+    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], 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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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 clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\"\n              (click)=\"onCurrentClicked(entity)\"\n    >\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 #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=\"!selectionPopup && !autocomplete\" class=\"select-arrow suffix-icon noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"suffix-icon\"\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\" class=\"suffix-icon\"\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,.suffix-icon,.suffix-icon .mat-icon{font-size:16px;width:16px;height:16px}.clickable-icon{cursor:pointer}.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: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: ["elderNoHint"] }, { 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.10", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -21334,8 +21364,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
                             useExisting: forwardRef(() => ElderSelectComponent)
                         },
                         ...buildFormIntegrationProviders(ElderSelectComponent)
-                    ], 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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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 clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\"\n              (click)=\"onCurrentClicked(entity)\"\n    >\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=\"!selectionPopup && !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}.clickable-icon{cursor:pointer}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { nullDisplay: [{
+                    ], 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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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 clickable-icon\"\n              [class.loading]=\"state.loading\"\n              [color]=\"state?.error ? 'warn' : color\"\n              (click)=\"onCurrentClicked(entity)\"\n    >\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 #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=\"!selectionPopup && !autocomplete\" class=\"select-arrow suffix-icon noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"suffix-icon\"\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\" class=\"suffix-icon\"\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,.suffix-icon,.suffix-icon .mat-icon{font-size:16px;width:16px;height:16px}.clickable-icon{cursor:pointer}.full-width{width:100%}.select{cursor:pointer;width:162px}.select-arrow{font-size:18px;width:18px;height:18px;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['input']
+            }], nullDisplay: [{
                 type: Input
             }], entityIdChange: [{
                 type: Output
@@ -21657,8 +21690,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
                     selector: '[elderElderSelectChip]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+class ElderSelectChipAvatarDirective {
+    constructor(templateRef, viewContainer) {
+        this.templateRef = templateRef;
+        this.viewContainer = viewContainer;
+    }
+}
+ElderSelectChipAvatarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderSelectChipAvatarDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElderSelectChipAvatarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.10", type: ElderSelectChipAvatarDirective, selector: "[elderElderSelectChipAvatar]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderSelectChipAvatarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderElderSelectChipAvatar]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
 
-class SelectChip {
+class ChipModel {
     constructor(value, displayText, color, removeable) {
         this.value = value;
         this.displayText = displayText;
@@ -21683,6 +21730,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         this.chipColorResolver$ = new BehaviorSubject((value) => undefined);
         this.selectable = true;
         this.allowRemove = true;
+        this.chipColorEnabled = false;
         this.placeholder = '...';
         this.selectChips$ = combineLatest([
             this.entities$,
@@ -21690,20 +21738,13 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
             this.chipColorResolver$
         ]).pipe(map(([values, dPR, cCR]) => {
             if (values) {
-                return values.map(v => new SelectChip(v, dPR(v), cCR(v), this.allowRemove));
+                return values.map(v => new ChipModel(v, dPR(v), cCR(v), this.allowRemove));
             }
             else {
                 return [];
             }
         }));
     }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() {
-    }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -21715,13 +21756,24 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     get chipTemplate() {
         return this._chipTemplate || this.chipTemplateQuery;
     }
+    set chipAvatarTemplate(template) {
+        this._chipAvatarTemplate = template;
+    }
+    get chipAvatarTemplate() {
+        return this._chipAvatarTemplate || this.chipAvatarTemplateQuery;
+    }
     /**
      * A function which returns the color of a given label object.
      */
     set chipColorResolver(fn) {
+        if (!fn) {
+            this.chipColorEnabled = false;
+            return;
+        }
         if (typeof fn !== 'function') {
             throw new Error('chipColorResolver must be a function!');
         }
+        this.chipColorEnabled = true;
         this.chipColorResolver$.next(fn);
     }
     get isOptionDisabledInternalFn() {
@@ -21758,6 +21810,18 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
             this.appendEntity(selectedValue);
         }
     }
+    resolveChipValue(e1) {
+        return this.getEntityId(e1);
+    }
+    get compareWithFn() {
+        return (e1, e2) => this.isEqual(e1, e2);
+    }
+    focus(options) {
+        this.inputControl?.nativeElement?.focus(options);
+    }
+    blur() {
+        this.inputControl?.nativeElement?.blur();
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -21781,18 +21845,23 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     }
 }
 ElderMultiSelectChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", 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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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 clickable-chip\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeEntity(chipModel.value)\"\n              (click)=\"onCurrentClicked(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\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  <button matSuffix mat-icon-button type=\"button\"\n          *ngIf=\"selectionPopup\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\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 | elderTrim:20}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.clickable-chip{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: 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"] }, { 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: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: ["elderNoHint"] }, { 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.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, "elderTrim": ElderTrimPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { allowRemove: "allowRemove", chipColorEnabled: "chipColorEnabled", chipTemplate: "chipTemplate", chipColorResolver: "chipColorResolver" }, providers: buildFormIntegrationProviders(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 }], 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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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  <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\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              (removed)=\"removeEntity(chipModel.value)\"\n              (click)=\"onCurrentClicked(chipModel.value)\"\n    >\n      <mat-chip-avatar *ngIf=\"chipAvatarTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n      </mat-chip-avatar>\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <input matInput type=\"text\" class=\"elder-chip-input\"\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\n      <button mat-icon-button type=\"button\" class=\"small-icon-button\"\n              *ngIf=\"selectionPopup\"\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    </div>\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 | elderTrim:20}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.elder-chip-input{width:120px!important;max-width:120px!important}.small-icon-button{width:24px!important;height:24px!important;line-height:24px!important}.small-icon-button .mat-icon{width:16px!important;height:16px!important;line-height:16px!important}.small-icon-button .material-icons{font-size:16px!important}.clickable-chip{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: 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: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: 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: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense"] }, { type: ElderFormFieldNoHintDirective, selector: "mat-form-field[elderNoHint]", inputs: ["elderNoHint"] }, { 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: i2$1.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: 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: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i1$2.TranslatePipe, "elderTrim": ElderTrimPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
-            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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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 clickable-chip\"\n              [color]=\"chipModel.color\" selectable selected\n              [removable]=\"chipModel.removeable\"\n              (removed)=\"removeEntity(chipModel.value)\"\n              (click)=\"onCurrentClicked(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\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  <button matSuffix mat-icon-button type=\"button\"\n          *ngIf=\"selectionPopup\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n  >\n    <mat-icon>add</mat-icon>\n  </button>\n\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 | elderTrim:20}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.clickable-chip{cursor:pointer}\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                [elderDense]=\"dense\"\n                [elderNoHint]=\"noHint\"\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  <mat-chip-list [selectable]=\"chipColorEnabled\" multiple #chips>\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              (removed)=\"removeEntity(chipModel.value)\"\n              (click)=\"onCurrentClicked(chipModel.value)\"\n    >\n      <mat-chip-avatar *ngIf=\"chipAvatarTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"chipAvatarTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n      </mat-chip-avatar>\n      <ng-container\n        *ngTemplateOutlet=\"chipTemplate || simpleChipTemplate; context: {$implicit: chipModel}\">\n      </ng-container>\n      <mat-icon matChipRemove *ngIf=\"chipModel.removeable\">cancel</mat-icon>\n    </mat-chip>\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n      <input matInput type=\"text\" class=\"elder-chip-input\"\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\n      <button mat-icon-button type=\"button\" class=\"small-icon-button\"\n              *ngIf=\"selectionPopup\"\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    </div>\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 | elderTrim:20}}\n</ng-template>\n\n", styles: [".prefix-padding{padding-right:4px}.leading-icon{font-size:16px;width:16px;height:16px}.elder-chip-input{width:120px!important;max-width:120px!important}.small-icon-button{width:24px!important;height:24px!important;line-height:24px!important}.small-icon-button .mat-icon{width:16px!important;height:16px!important;line-height:16px!important}.small-icon-button .material-icons{font-size:16px!important}.clickable-chip{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { allowRemove: [{
                 type: Input
+            }], chipColorEnabled: [{
+                type: Input
             }], inputControl: [{
                 type: ViewChild,
                 args: ['chipInput', { static: false }]
             }], chipTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderSelectChipDirective, { read: TemplateRef, static: true }]
+            }], chipAvatarTemplateQuery: [{
+                type: ContentChild,
+                args: [ElderSelectChipAvatarDirective, { read: TemplateRef, static: true }]
             }], chipTemplate: [{
                 type: Input
             }], chipColorResolver: [{
@@ -21880,6 +21949,7 @@ ElderSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ElderSelectOnTabDirective,
         ElderMultiSelectChipsComponent,
         ElderSelectChipDirective,
+        ElderSelectChipAvatarDirective,
         ElderAutoSelectFirstDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule,
         MatFormFieldModule,
         MatIconModule,
@@ -21895,6 +21965,7 @@ ElderSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         SelectionModelPopupDirective,
         ElderMultiSelectChipsComponent,
         ElderSelectChipDirective,
+        ElderSelectChipAvatarDirective,
         ElderAutoSelectFirstDirective] });
 ElderSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: ElderSelectModule, imports: [[
             CommonModule, FormsModule, ReactiveFormsModule,
@@ -21931,6 +22002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
                         ElderSelectOnTabDirective,
                         ElderMultiSelectChipsComponent,
                         ElderSelectChipDirective,
+                        ElderSelectChipAvatarDirective,
                         ElderAutoSelectFirstDirective
                     ],
                     exports: [
@@ -21940,6 +22012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
                         SelectionModelPopupDirective,
                         ElderMultiSelectChipsComponent,
                         ElderSelectChipDirective,
+                        ElderSelectChipAvatarDirective,
                         ElderAutoSelectFirstDirective
                     ]
                 }]
@@ -25271,5 +25344,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImpo
  * 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, 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, ElderFormFieldNoHintDirective, 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, ElderTrimPipe, 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 };
+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, ElderFormFieldNoHintDirective, 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, ElderSelectChipAvatarDirective, 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, ElderTrimPipe, 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