@if(abmListInput.label) {
  <mat-label [class.required]="isControlRequired()">{{abmListInput.label}}</mat-label>
}
<mat-form-field class="example-full-width custom-label-outside multisdelect-custom" appearance="outline" floatLabel="always">
  <mat-select (selectionChange)="onChange($event)" [formControl]="control" 
  [placeholder]="abmListInput.placeholder || ''"  [multiple]="abmListInput.multiple ? true:false" [compareWith]="valueOptionIsNotObject ? defaultCompareWithFn:compareWithFn">
  @if ((!options || options && options.length === 0) && isLoading) {
  <mat-option>
    <div class="loading">
      Cargando...
      <mat-spinner diameter="15"></mat-spinner>
    </div>
  </mat-option>
  }
  @if ((abmListInput.values && abmListInput.values.length > 0) && !isLoading) {
  @for (option of abmListInput.values; track option) {
  <mat-option #optionsTemplate [value]="valueOptionIsNotObject ? option.value: option">{{option.label}}</mat-option>
  }
  } @else if(!isLoading) {
  <mat-option [value]="">No se encontraron ítems</mat-option>
  }
</mat-select>
<lucide-angular color="#5D6F85" size="16" [img]="chevronDownI" ></lucide-angular>
@if (control.hasError('required')) {
<mat-error>{{abmListInput.label ? abmListInput.label: 'Este campo'}} es <strong>requerido</strong></mat-error>
}
</mat-form-field>