@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"  appearance="outline" floatLabel="always">
  <input kitAppCustomDateFormat [monthOnly]="monthOnly" [readonly]="monthOnly" matInput [matDatepicker]="picker" [formControl]="control" [placeholder]="placeholdertext" [min]="minDate" [max]="maxDate">
  <lucide-angular color="#5D6F85" class="cursor-pointer" (click)="picker.open()" size="20" [img]="calendarI"></lucide-angular>
  <mat-datepicker #picker [startView]="monthOnly ? 'year' : 'month'" (monthSelected)="onMonthSelected($event, picker)"></mat-datepicker>
  @if (control.hasError('control') && !control.hasError('required')) {
    <mat-error>Por favor ingrese una fecha</mat-error>
  }
  @if (control.hasError('required')) {
    <mat-error>Fecha es <strong>obligatorio</strong></mat-error>
  }
  @if (control.hasError('errorCommons')) {
    <mat-error>{{messageErrorCustom}}</mat-error>
  }
</mat-form-field>