@if(filter.label) {
    <mat-label [class.required]="isControlRequired()">{{filter.label}}</mat-label>
}
<mat-form-field class="example-full-width custom-label-outside" [ngClass]="filter.main ? ' autocomplete-custom autocomplete-custom-select':''" appearance="outline" floatLabel="always">
    <input 
        matInput 
        type="text" 
        class="form-control"
        class="form-control"
        [formControl]="filterForm" 
        [placeholder]="filter.placeholder ? filter.placeholder : '' "
        [matAutocomplete]="auto"
    />
    <mat-autocomplete 
        #auto="matAutocomplete"  
        [displayWith]="displayFn"
    >
      @for (option of filteredOptions$ | async; track option) {
        <mat-option (onSelectionChange)="onChange($event)" [value]="option">{{option.label}}</mat-option>
      }
    </mat-autocomplete>
    @if (filterForm && filterForm.value && !filterForm.disabled) {
      <lucide-angular color="#5D6F85" size="16" [img]="iconClose" (click)="clearSelection()" class="cursor-pointer close-icon-select"></lucide-angular>
    }
    <lucide-angular color="#5D6F85" size="16" [img]="iconChevronDown" ></lucide-angular>
    
    @if (validateError()) {
      <mat-error>
        {{validateError()}}
      </mat-error>
    }
    <!-- errors = [{
      errorValidator: { required: true },
      errorDescription: 'Mensaje error',
    }]; -->
    
</mat-form-field>