import { Component, Input, Output, EventEmitter, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { trigger, state, style, transition, animate } from '@angular/animations'; @Component({ selector: 'universal-date-picker', standalone: true, imports: [ CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule ], template: ` <mat-form-field appearance="outline" class="universal-date-picker w-full" [@fieldFocus]="control.value ? 'focused' : 'idle'"> <mat-label>{{ label }}</mat-label> <input matInput [placeholder]="placeholder" [formControl]="control" [matDatepicker]="picker" class="date-input"> <mat-datepicker-toggle matIconSuffix [for]="picker" class="date-toggle"></mat-datepicker-toggle> <mat-datepicker #picker class="date-calendar"></mat-datepicker> </mat-form-field> `, styles: [] }) export class UniversalDatePickerComponent { @Input() label: string = ''; @Input() placeholder: string = ''; @Input() control: FormControl = new FormControl(); @Output() valueChange = new EventEmitter<any>(); ngOnInit() { this.control.valueChanges.subscribe(value => { this.valueChange.emit(value); }); } } style and animate