@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="example-full-width custom-label-outside custom-label-range-picker" appearance="outline" floatLabel="always">
    <lucide-angular color="#5D6F85" class="cursor-pointer d-flex" (click)="picker.open()" size="16" [img]="calendarIcon"></lucide-angular>
    <mat-date-range-input [formGroup]="rangeFormGroup" [rangePicker]="picker" [min]="minDate" [max]="maxDate">
        <input kitAppCustomDateFormat matStartDate [formControl]="controlStart" [placeholder]="placeholderStart">
        <input kitAppCustomDateFormat matEndDate [formControl]="controlEnd" [placeholder]="placeholderEnd">
    </mat-date-range-input>
    
    <mat-date-range-picker #picker></mat-date-range-picker>

    @if (hasStartError('required') || hasEndError('required')) {
        <mat-error>Fecha es <strong>obligatorio</strong></mat-error>
    }
    @if (hasStartError('matStartDateInvalid')) {
        <mat-error>Fecha inicio inválida</mat-error>
    }
    @if (hasEndError('matEndDateInvalid')) {
        <mat-error>Fecha fin inválida</mat-error>
    }
    @if (hasStartError('errorCommons') || hasEndError('errorCommons')) {
        <mat-error>{{messageErrorCustom}}</mat-error>
    }
</mat-form-field>