@3kles/kles-material-dynamicforms 21.7.4 → 21.7.5

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormControlDirective, FormControlName, FormArray, FormGroup, UntypedFormBuilder, NG_VALUE_ACCESSOR, UntypedFormGroup } from '@angular/forms';
-import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, defer, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, switchMap as switchMap$1, timer, shareReplay as shareReplay$1, isObservable } from 'rxjs';
+import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, defer, ReplaySubject, switchMap as switchMap$1, isObservable, timer, distinctUntilChanged as distinctUntilChanged$1, shareReplay as shareReplay$1 } from 'rxjs';
 import { tap, take, catchError, map, takeUntil as takeUntil$1, distinctUntilChanged, filter, switchMap, startWith as startWith$1, shareReplay, debounceTime, debounce } from 'rxjs/operators';
 import * as i3 from '@angular/material/form-field';
 import { MatError, MatFormFieldModule, MatFormField, MatHint, MatLabel, MatSuffix } from '@angular/material/form-field';
@@ -29,7 +29,7 @@ import { MatInputModule, MatInput, MatLabel as MatLabel$1, MatFormField as MatFo
 import * as i6 from '@angular/material/select';
 import { MatSelectModule, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { MatRadioModule, MatRadioButton, MatRadioGroup } from '@angular/material/radio';
-import * as i2$2 from '@angular/material/chips';
+import * as i3$6 from '@angular/material/chips';
 import { MatChipsModule, MatChipOption, MatChipListbox } from '@angular/material/chips';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
@@ -5338,208 +5338,311 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
 class KlesFormChipGridComponent extends KlesFieldAbstract {
     constructor() {
         super(...arguments);
-        this.options = this.field.options;
         this.control = this.group.controls[this.field.name];
         this.intl = inject(KlesDynamicFormIntl);
         this.separatorKeysCodes = [ENTER, COMMA];
-        this.isFocused = new Subject();
-        this.searchControl = new FormControl('aaa');
+        /*
+         * any est volontaire :
+         * MatAutocomplete peut momentanément pousser l'objet
+         * sélectionné dans le FormControl de recherche.
+         */
+        this.searchControl = new FormControl('', {
+            nonNullable: true,
+        });
+        /*
+         * ReplaySubject permet de ne pas perdre le premier focus
+         * si l'Observable lazy n'est pas encore abonné.
+         */
+        this.loadOptions$ = new ReplaySubject(1);
     }
     ngOnInit() {
-        if (this.field.lazy) {
-            this.options$ = this.isFocused.pipe(distinctUntilChanged$1(), filter$1((isFocused) => isFocused), switchMap$1((isFocused) => {
-                if (isFocused) {
-                    let obs$;
-                    if (this.field.options instanceof Observable) {
-                        obs$ = this.field.options;
-                    }
-                    else if (this.field.options instanceof Function) {
-                        obs$ = this.field.options();
-                    }
-                    else {
-                        obs$ = of(this.field.options ?? []);
-                    }
-                    return concat(of({ loading: true, options: [] }), obs$.pipe(map$1((options) => {
-                        return { loading: false, options };
-                    })));
-                }
-                else {
-                    return of({ loading: false, options: [] });
-                }
-            }));
-        }
-        else {
-            if (this.field.options instanceof Observable) {
-                this.options$ = concat(of({ loading: true, options: [] }), this.field.options.pipe(map$1((options) => {
-                    return { loading: false, options };
-                })));
-            }
-            else if (this.field.options instanceof Function) {
-                this.options$ = concat(of({ loading: true, options: [] }), this.field.options().pipe(map$1((options) => {
-                    return { loading: false, options };
-                })));
-            }
-            else {
-                this.options$ = of({ loading: false, options: this.field.options });
-            }
-        }
-        this.filteredOption$ = concat(combineLatest([this.searchControl?.valueChanges.pipe(startWith('')) ?? of(''), this.options$]).pipe(map$1(([data, response]) => {
+        this.options$ = this.createOptionsStream();
+        this.filteredOption$ = combineLatest([this.searchControl.valueChanges.pipe(startWith(this.searchControl.value)), this.options$, this.control.valueChanges.pipe(startWith(this.control.value ?? []))]).pipe(map$1(([search, response, selectedValues]) => {
             if (response.loading) {
                 return response;
             }
-            else {
-                return { loading: false, options: data && response.options ? this.filterData(data, response.options) : response.options };
+            const selected = Array.isArray(selectedValues) ? selectedValues : [];
+            /*
+             * On retire de la liste les options
+             * déjà présentes dans les chips.
+             */
+            let options = response.options.filter((option) => !selected.some((selectedValue) => this.isSameOption(option, selectedValue)));
+            /*
+             * Le contrôle peut momentanément contenir
+             * un objet pendant une sélection autocomplete.
+             */
+            if (typeof search === 'string' && search.trim()) {
+                options = this.filterData(search, options);
             }
-        })));
+            return {
+                loading: false,
+                options,
+            };
+        }));
         super.ngOnInit();
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
     onFocus() {
         if (this.field.lazy) {
-            this.isFocused.next(true);
+            this.loadOptions$.next();
         }
         super.onFocus();
     }
     onTokenEnd(event) {
-        this.addChip(event.value);
+        /*
+         * Quand property est renseignée, les valeurs sont
+         * considérées comme des objets provenant de l'autocomplete.
+         *
+         * On évite donc d'ajouter une string libre au tableau.
+         */
+        if (this.field.property) {
+            return;
+        }
+        const value = event.value.trim();
+        if (!value) {
+            return;
+        }
+        this.addChip(value);
         event.chipInput.clear();
+        this.searchControl.setValue('');
     }
-    addChip(rawValue) {
-        const value = (rawValue || '').trim();
-        if (value) {
-            this.control.setValue([...(this.control.value ?? []), value]);
+    addChip(value) {
+        if (value === null || value === undefined || value === '') {
+            return;
+        }
+        const values = Array.isArray(this.control.value) ? this.control.value : [];
+        /*
+         * Empêche d'ajouter deux fois la même valeur.
+         */
+        const exists = values.some((currentValue) => this.isSameOption(currentValue, value));
+        if (exists) {
+            return;
         }
+        this.control.setValue([...values, value]);
+        this.control.markAsDirty();
     }
     removeChip(value) {
-        const values = this.control.value;
-        const index = values.lastIndexOf(value);
-        if (index > -1) {
-            values.splice(index, 1);
-            this.control.setValue(values);
+        const values = Array.isArray(this.control.value) ? [...this.control.value] : [];
+        const index = values.findIndex((currentValue) => this.isSameOption(currentValue, value));
+        if (index === -1) {
+            return;
         }
+        values.splice(index, 1);
+        this.control.setValue(values);
+        this.control.markAsDirty();
     }
-    selected(event) {
-        this.addChip(event.option.viewValue);
+    selected(event, chipInput) {
+        const value = event.option.value;
+        /*
+         * On ajoute d'abord l'objet sélectionné aux chips.
+         */
+        this.addChip(value);
+        /*
+         * L'autocomplete n'est ici qu'une source de sélection.
+         * La sélection réelle est représentée par les chips.
+         */
         event.option.deselect();
-        this.searchControl.reset();
+        /*
+         * Important :
+         * MatChipInput.clear() nettoie réellement l'input HTML.
+         */
+        chipInput.clear();
+        /*
+         * Et on synchronise le FormControl afin de :
+         * - vider l'état Angular ;
+         * - supprimer le filtre ;
+         * - recalculer filteredOption$.
+         */
+        this.searchControl.setValue('');
     }
-    filterData(value, options) {
-        let filterValue = undefined;
-        const property = this.field.property;
-        if (typeof value === 'string' && Object.prototype.toString.call(value) === '[object String]') {
-            filterValue = value.toLowerCase();
+    displayValue(value) {
+        if (value === null || value === undefined) {
+            return '';
         }
-        else {
-            if (property) {
-                filterValue = value[property]?.toLowerCase();
-            }
+        if (this.field.property) {
+            return value?.[this.field.property] ?? '';
         }
-        if (filterValue != undefined) {
-            if (property) {
-                return options.filter((option) => option[property].toLowerCase().indexOf(filterValue) === 0);
-            }
-            return options.filter((option) => option.toLowerCase().indexOf(filterValue) === 0);
+        return value;
+    }
+    createOptionsStream() {
+        /*
+         * Lazy :
+         * recharge les options à chaque focus.
+         */
+        if (this.field.lazy) {
+            return this.loadOptions$.pipe(switchMap$1(() => concat(of({
+                loading: true,
+                options: [],
+            }), this.resolveOptions().pipe(map$1((options) => ({
+                loading: false,
+                options,
+            }))))));
         }
-        else {
+        /*
+         * Liste statique :
+         * aucun chargement à afficher.
+         */
+        if (Array.isArray(this.field.options)) {
+            return of({
+                loading: false,
+                options: this.field.options,
+            });
+        }
+        /*
+         * Observable ou fonction :
+         * spinner jusqu'à réception des options.
+         */
+        return concat(of({
+            loading: true,
+            options: [],
+        }), this.resolveOptions().pipe(map$1((options) => ({
+            loading: false,
+            options,
+        }))));
+    }
+    resolveOptions() {
+        const source = typeof this.field.options === 'function' ? this.field.options() : this.field.options;
+        if (isObservable(source)) {
+            return source;
+        }
+        return of(source ?? []);
+    }
+    filterData(search, options) {
+        if (typeof search !== 'string') {
+            return options;
+        }
+        const filterValue = search.trim().toLowerCase();
+        if (!filterValue) {
             return options;
         }
+        return options.filter((option) => {
+            const value = this.displayValue(option);
+            return String(value ?? '')
+                .toLowerCase()
+                .startsWith(filterValue);
+        });
+    }
+    isSameOption(a, b) {
+        /*
+         * Primitive identique ou même référence objet.
+         */
+        if (a === b) {
+            return true;
+        }
+        /*
+         * En mode objet, property sert actuellement
+         * également à identifier les doublons.
+         */
+        if (this.field.property && a !== null && a !== undefined && b !== null && b !== undefined) {
+            return a[this.field.property] === b[this.field.property];
+        }
+        return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormChipGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesFormChipGridComponent, isStandalone: true, selector: "kles-form-chip-grid", usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [formGroup]="group" [matTooltip]="tooltip()" [appearance]="appearance()">
             <mat-label>{{ label() }}</mat-label>
-            <mat-chip-grid #reactiveChipGrid [formControl]="group.controls[field.name]">
-                @for (value of group.controls[field.name].value ?? []; track value) {
-                    <mat-chip-row (removed)="removeChip(value)">
-                         {{ (field.property ? value[field.property] : value) | klesTransform: field.pipeTransform }}
+
+            <mat-chip-grid #reactiveChipGrid [formControl]="control">
+                @for (value of control.value ?? []; track $index) {
+                    <mat-chip-row [value]="value" (removed)="removeChip(value)">
+                        {{ displayValue(value) | klesTransform: field.pipeTransform }}
+
                         <button matChipRemove>
                             <mat-icon>cancel</mat-icon>
                         </button>
                     </mat-chip-row>
                 }
             </mat-chip-grid>
+
             <input
-                #search
+                #chipInput="matChipInput"
                 [formControl]="searchControl"
                 [placeholder]="placeholder()"
                 [matChipInputFor]="reactiveChipGrid"
-                (matChipInputTokenEnd)="onTokenEnd($event)"
                 [matAutocomplete]="auto"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                (matChipInputTokenEnd)="onTokenEnd($event)"
                 (focus)="onFocus()"
                 (blur)="onBlur()"
             />
 
-            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event); search.value = ''">
+            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, chipInput)">
                 @if (filteredOption$ | async; as filteredOption) {
                     @if (filteredOption.loading) {
                         <mat-option disabled>
                             <div class="loadingSelect">
                                 {{ intl.loading }}...
-                                <mat-spinner class="spinner" diameter="20"></mat-spinner>
+
+                                <mat-spinner class="spinner" diameter="20" />
                             </div>
                         </mat-option>
                     } @else {
                         @for (item of filteredOption.options; track item) {
-                            <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            <mat-option [value]="item" [disabled]="item?.disabled">
+                                {{ displayValue(item) | klesTransform: field.pipeTransform }}
+                            </mat-option>
                         }
                     }
                 }
             </mat-autocomplete>
 
-            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
+            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
         </mat-form-field>
-    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormChipGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-chip-grid', template: `
         <mat-form-field [formGroup]="group" [matTooltip]="tooltip()" [appearance]="appearance()">
             <mat-label>{{ label() }}</mat-label>
-            <mat-chip-grid #reactiveChipGrid [formControl]="group.controls[field.name]">
-                @for (value of group.controls[field.name].value ?? []; track value) {
-                    <mat-chip-row (removed)="removeChip(value)">
-                         {{ (field.property ? value[field.property] : value) | klesTransform: field.pipeTransform }}
+
+            <mat-chip-grid #reactiveChipGrid [formControl]="control">
+                @for (value of control.value ?? []; track $index) {
+                    <mat-chip-row [value]="value" (removed)="removeChip(value)">
+                        {{ displayValue(value) | klesTransform: field.pipeTransform }}
+
                         <button matChipRemove>
                             <mat-icon>cancel</mat-icon>
                         </button>
                     </mat-chip-row>
                 }
             </mat-chip-grid>
+
             <input
-                #search
+                #chipInput="matChipInput"
                 [formControl]="searchControl"
                 [placeholder]="placeholder()"
                 [matChipInputFor]="reactiveChipGrid"
-                (matChipInputTokenEnd)="onTokenEnd($event)"
                 [matAutocomplete]="auto"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                (matChipInputTokenEnd)="onTokenEnd($event)"
                 (focus)="onFocus()"
                 (blur)="onBlur()"
             />
 
-            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event); search.value = ''">
+            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, chipInput)">
                 @if (filteredOption$ | async; as filteredOption) {
                     @if (filteredOption.loading) {
                         <mat-option disabled>
                             <div class="loadingSelect">
                                 {{ intl.loading }}...
-                                <mat-spinner class="spinner" diameter="20"></mat-spinner>
+
+                                <mat-spinner class="spinner" diameter="20" />
                             </div>
                         </mat-option>
                     } @else {
                         @for (item of filteredOption.options; track item) {
-                            <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
+                            <mat-option [value]="item" [disabled]="item?.disabled">
+                                {{ displayValue(item) | klesTransform: field.pipeTransform }}
+                            </mat-option>
                         }
                     }
                 }
             </mat-autocomplete>
 
-            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
+            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
         </mat-form-field>
-    `, standalone: true, imports: [MatIconModule, KlesTransformPipe, MatChipsModule, MatTooltip, ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, AsyncPipe, MatProgressSpinnerModule, MatError, MatErrorMessageDirective], styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
+    `, standalone: true, imports: [AsyncPipe, KlesTransformPipe, MatAutocompleteModule, MatChipsModule, MatError, MatErrorMessageDirective, MatFormFieldModule, MatIconModule, MatProgressSpinnerModule, MatTooltip, ReactiveFormsModule], styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
         }] });
 
 const components = [