@if(label) {
  <div class="w-100 d-flex justify-content-between align-items-center h-label label-mb ">
        <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="custom-label-outside custom-select-basic" appearance="outline" floatLabel="always">
  <mat-select (selectionChange)="onChange($event)" [formControl]="control" [placeholder]="placeholderText"
    [multiple]="isMultipleSelect ? true:false"
    [compareWith]="valueOptionIsNotObject ? defaultCompareWithFn:compareWithFn">
    
    @if ((options && options.length > 0)) {
      @for (option of options; track option) {
        <mat-option #optionsTemplate [value]="valueOptionIsNotObject ? { value: option.value, label: option.label } : { value: option.value, label: option.label }">
          <span class="d-flex align-items-center gap-3">
             @if (option.icon) {
            <lucide-angular 
            [img]="option.icon.iconSvg" 
            [size]="option.icon.size" 
            [class]="option.icon.class">
        </lucide-angular>
          }
          {{option.label}}
          </span>
         
        </mat-option>
      }
    } @else {
      <mat-option [value]="">No se encontraron ítems</mat-option>
    }

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