@if(filter.label) {
    <mat-label [class.required]="isControlRequired()">{{filter.label}}</mat-label>
}
    <mat-form-field class="example-full-width custom-label-outside"  appearance="outline" floatLabel="always">
        <input 
            kitAppCustomDateFormat 
            matInput 
            [matDatepicker]="picker" 
            [formControl]="filterForm" 
            [placeholder]="filter.placeholder ? filter.placeholder : '' " 
            [min]="filter.minDate" 
            [max]="filter.maxDate"
        >
        <lucide-angular 
            color="#5D6F85" 
            class="cursor-pointer" 
            size="20"
            [img]="iconCalendar"
            (click)="picker.open()"  
        ></lucide-angular>

        <mat-datepicker #picker></mat-datepicker>
        @if (filterForm.hasError('control') && !filterForm.hasError('required')) {
            <mat-error>Por favor ingrese una fecha</mat-error>
        }
        @if (filterForm.hasError('required')) {
            <mat-error>Fecha es <strong>obligatorio</strong></mat-error>
        }
        @if (filterForm.hasError('errorCommons')) {
            <mat-error>{{filter.customErrorMessage ? filter.customErrorMessage : ''}}</mat-error>
        }
</mat-form-field>