Chore: Eslint v9

Chore: Angular Zoneless
Chore: Removed Angular-Hotkeys dependency
Fix: Localization works properly now
Chore: Using Material 3 theme now
Chore: Removed toaster service to use snackbar directly
Fix: F2 Date working on all components now

overlord/src/app/ledger/ledger.component.html

@@ -16,8 +16,8 @@
           <mat-label>Start Date</mat-label>
           <input
             matInput
+            #startDateElement
             [matDatepicker]="startDate"
-            (focus)="startDate.open()"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -26,13 +26,7 @@
         </mat-form-field>
         <mat-form-field class="flex-auto">
           <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
+          <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>
@@ -109,7 +103,7 @@
 
       <!-- Running Column -->
       <ng-container matColumnDef="running">
-        <mat-header-cell *matHeaderCellDef mat-sort-header class="right">Running</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef class="right">Running</mat-header-cell>
         <mat-cell *matCellDef="let row" class="right">{{ row.running | currency: 'INR' | accounting }}</mat-cell>
         <mat-footer-cell *matFooterCellDef class="right">{{ running | currency: 'INR' | accounting }}</mat-footer-cell>
       </ng-container>

overlord/src/app/ledger/ledger.component.ts

@@ -92,9 +92,10 @@ import { LedgerService } from './ledger.service';
   ],
 })
 export class LedgerComponent implements OnInit, AfterViewInit {
-  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
-  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort?: MatSort;
+  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
+  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
+  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort!: MatSort;
   info: Ledger = new Ledger();
   dataSource: LedgerDataSource = new LedgerDataSource(this.info.body);
   form: FormGroup<{
@@ -112,6 +113,13 @@ export class LedgerComponent implements OnInit, AfterViewInit {
 
   accounts: Observable<Account[]>;
 
+  @HostListener('window:keydown.f2', ['$event'])
+  focusDate(event: KeyboardEvent) {
+    event.preventDefault();
+    this.startDate.nativeElement.focus();
+    this.startDate.nativeElement.select();
+  }
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,