@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 multisdelect-custom" appearance="outline" floatLabel="always">
  <mat-select (selectionChange)="onChange($event)" [formControl]="control" 
    [placeholder]="placeholderText" [multiple]="isMultipleSelect ? 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 ((options && options.length > 0) && !isLoading) {
    @for (option of options; 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>{{label ? label: 'Este campo'}} es <strong>requerido</strong></mat-error>
  }
</mat-form-field>