Task/widen input types in fire calculator component (#8015)

Widen input types

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -2,7 +2,7 @@ import {
   getTooltipOptions,
   transformTickToAbbreviation
 } from '@ghostfolio/common/chart-helper';
-import { primaryColorRgb } from '@ghostfolio/common/config';
+import { DEFAULT_CURRENCY, primaryColorRgb } from '@ghostfolio/common/config';
 import { formatMonthAndYear, getLocale } from '@ghostfolio/common/helper';
 import { FireCalculationCompleteEvent } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
@@ -53,6 +53,7 @@ import {
   addDays,
   addYears,
   getMonth,
+  parseISO,
   setMonth,
   setYear,
   startOfMonth,
@@ -60,7 +61,7 @@ import {
 } from 'date-fns';
 import { addIcons } from 'ionicons';
 import { calendarClearOutline } from 'ionicons/icons';
-import { isNumber } from 'lodash-es';
+import { isNumber, isString } from 'lodash-es';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { debounceTime } from 'rxjs';
 
@@ -86,16 +87,16 @@ import { FireCalculatorService } from './fire-calculator.service';
   templateUrl: './fire-calculator.component.html'
 })
 export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
-  @Input() annualInterestRate = 0;
+  @Input() public annualInterestRate?: number = 0;
-  @Input() colorScheme?: ColorScheme;
+  @Input() public colorScheme?: ColorScheme;
-  @Input() currency: string;
+  @Input() public currency?: string;
-  @Input() deviceType: string;
+  @Input() public deviceType: string;
-  @Input() fireWealth = 0;
+  @Input() public fireWealth = 0;
-  @Input() hasPermissionToUpdateUserSettings: boolean;
+  @Input() public hasPermissionToUpdateUserSettings: boolean;
-  @Input() locale = getLocale();
+  @Input() public locale?: string = getLocale();
-  @Input() projectedTotalAmount = 0;
+  @Input() public projectedTotalAmount?: number = 0;
-  @Input() retirementDate: Date;
+  @Input() public retirementDate?: Date | string;
-  @Input() savingsRate = 0;
+  @Input() public savingsRate?: number = 0;
 
   public calculatorForm = this.formBuilder.group({
     annualInterestRate: new FormControl<number | null>(null),
@@ -243,11 +244,13 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
     if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
       this.calculatorForm.setValue(
         {
-          annualInterestRate: this.annualInterestRate,
+          annualInterestRate: this.annualInterestRate ?? 0,
-          paymentPerPeriod: this.savingsRate,
+          paymentPerPeriod: this.savingsRate ?? 0,
           principalInvestmentAmount: this.fireWealth,
-          projectedTotalAmount: this.projectedTotalAmount,
+          projectedTotalAmount: this.projectedTotalAmount ?? 0,
-          retirementDate: this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE
+          retirementDate: isString(this.retirementDate)
+            ? parseISO(this.retirementDate)
+            : (this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE)
         },
         {
           emitEvent: false
@@ -353,7 +356,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
                     );
 
                     return `Total: ${new Intl.NumberFormat(this.locale, {
-                      currency: this.currency,
+                      currency: this.currency ?? DEFAULT_CURRENCY,
                       currencyDisplay: 'code',
                       style: 'currency'
                     }).format(totalAmount)}`;
@@ -367,7 +370,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
 
                     if (context.parsed.y !== null) {
                       label += new Intl.NumberFormat(this.locale, {
-                        currency: this.currency,
+                        currency: this.currency ?? DEFAULT_CURRENCY,
                         currencyDisplay: 'code',
                         style: 'currency'
                       }).format(context.parsed.y);
@@ -510,7 +513,8 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
     } else {
       const today = new Date();
       const retirementDate =
-        this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE;
+        this.calculatorForm.get('retirementDate')?.value ??
+        this.DEFAULT_RETIREMENT_DATE;
 
       return (
         12 * (retirementDate.getFullYear() - today.getFullYear()) +