@if(abmListInput.label) {
    <mat-label [class.required]="isControlRequired()">{{abmListInput.label}}</mat-label>    
  }
<mat-form-field class="example-full-width custom-label-outside" appearance="outline" floatLabel="always">
    <input type="text" class="form-control"  matInput [formControl]="formControl" [placeholder]="abmListInput.placeholder ? abmListInput.placeholder : '' "
    [matAutocomplete]="auto" class="form-control"/>
    <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 (formControl && formControl.value && !formControl.disabled) {
      <lucide-angular color="#5D6F85" size="16" [img]="xI" (click)="clearSelection()" class="cursor-pointer close-icon-select"></lucide-angular>
    }
    <lucide-angular color="#5D6F85" size="16" [img]="chevronDownI"></lucide-angular>
    @if (formControl.hasError('required')) {
    <mat-error>{{abmListInput.label ? abmListInput.label: 'Este campo'}} es <strong>requerido</strong></mat-error>
    }
    @if (formControl.hasError('invalidOption')) {
      <mat-error>Seleccione una opción <strong>válida</strong></mat-error>
    }
  </mat-form-field>