@if(label) {
  <mat-label [class.required]="isControlRequired()">{{label}}</mat-label>    
}
<mat-form-field class="example-full-width w-100 custom-label-outside autocomplete-custom" appearance="outline" floatLabel="always">

  <input #search type="text" matInput [formControl]="control" [placeholder]="placeholderText"
    [matAutocomplete]="searchAuto" (keydown.enter)="$event.preventDefault()" />
  <mat-autocomplete #searchAuto="matAutocomplete" (optionSelected)="selectedDirection($event)">
    @if(predictionList && predictionList.length > 0){
    @for (prediction of predictionList; track prediction) {
    <mat-option [value]="prediction">
      <lucide-angular matPrefix class="iconMappingOption" size="16" [img]="mappin" ></lucide-angular>
      {{ prediction.description
      }}</mat-option>
    } @empty {
    @if (!control.value) {
    <mat-option>Ingrese {{placeholderText}}. Ej:Nombre comuna y N°</mat-option>
    }
    @if (control.value && control.valid && options.length === 0 ) {
    <mat-option>Intente con otra {{placeholderText}}.</mat-option>
    }
    }
    }
  </mat-autocomplete>
  <lucide-angular matPrefix color="#5D6F85" size="16" [img]="searchI" ></lucide-angular>

  @if (control?.hasError('required')) {
  <mat-error>{{label? label: 'Este campo'}} es <strong>requerido</strong></mat-error>
  }
  @if (control?.hasError('commonError')) {
  <mat-error>{{addressValidationMessage}}</mat-error>
  }
</mat-form-field>