@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">
    <textarea matInput 
        class="form-control" 
        [formControl]="control" 
        [placeholder]="placeholderText" 
        [rows]="rows"
        [cols]="cols"
        [cdkTextareaAutosize]="autosize"
        [style.resize]="resize"
    ></textarea>
    
    
    @if (control?.hasError('email') && !control?.hasError('required')) {
        <mat-error>El email no es válido</mat-error>
    }
    
    @if (control?.hasError('required')) {
        <mat-error>
            {{label ? label: 'Este campo'}} es <strong>requerido</strong>
        </mat-error>
    }
    
    @if (control?.hasError('minlength')) {
        <mat-error>
            El mínimo permitido son {{minlength}} caracteres
        </mat-error>
    }

    @if (control?.hasError('errorCommons')) {
        <mat-error>
            {{messageErrorCustom}}
        </mat-error>
    }

    @if (control?.hasError('maxlength')) {
        <mat-error>
            El máximo permitido son {{maxlength}} caracteres
        </mat-error>
    }
    
</mat-form-field>