@if(label) {
    <div class="w-100 d-flex justify-content-between align-items-center label-mb  h-label">
        <mat-label [class.required]="isControlRequired()">{{label}}</mat-label>
        @if(descriptionTooltip) {
          <button 
                class="action-icon-info d-flex align-items-center justify-content-center p-0 "
                    matTooltipClass="custom-tooltip">
                    <lucide-angular
                [size]="16"
                [color]="'#5D6F85'"
                [img]="infoCircle"
                [kitTooltip]="''"
                [tooltipDescription]="descriptionTooltip"
                [tooltipPosition]="'top'">
            </lucide-angular>
                </button>
        }
    </div>
}
<mat-form-field class="example-full-width custom-label-outside" appearance="outline" floatLabel="always">
  <input type="text" class="form-control"  matInput [formControl]="control" [placeholder]="placeholderText"
  [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 (control && control.value && !control.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 (control.hasError('required')) {
  <mat-error>{{label ? label: 'Este campo'}} es <strong>requerido</strong></mat-error>
  }
  @if (control.hasError('invalidOption')) {
    <mat-error>Seleccione una opción <strong>válida</strong></mat-error>
  }
</mat-form-field>