Migrate fire calculator

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

@@ -7,20 +7,20 @@
         </mat-form-field>-->
 
         <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Savings Rate</mat-label>
+          <mat-label i18n>Savings Rate per Month</mat-label>
           <input
             formControlName="paymentPerPeriod"
             matInput
             step="100"
             type="number"
           />
-          <span class="ml-2" i18n matSuffix>{{ currency }} per month</span>
+          <span matTextSuffix>{{ currency }}</span>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Investment Horizon</mat-label>
           <input formControlName="time" matInput type="number" />
-          <span class="ml-2" i18n matSuffix>years</span>
+          <span i18n matTextSuffix>years</span>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
@@ -31,7 +31,7 @@
             step="0.25"
             type="number"
           />
-          <span class="ml-2" matSuffix>%</span>
+          <div matTextSuffix>%</div>
         </mat-form-field>
 
         <gf-value

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

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfValueModule } from '../value';