Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch

src/app/shares/common-resolvers/share-account-actions.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { SharesService } from '../shares.service';
  * Shares Account Actions data resolver.
  */
 @Injectable()
-export class ShareAccountActionsResolver implements Resolve<Object> {
+export class ShareAccountActionsResolver {
   /**
    * @param {sharesService} SharesService Shares service.
    */

src/app/shares/common-resolvers/share-account-and-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { SharesService } from '../shares.service';
  * Shares Account data and template resolver.
  */
 @Injectable()
-export class SharesAccountAndTemplateResolver implements Resolve<Object> {
+export class SharesAccountAndTemplateResolver {
   /**
    * @param {SharesService} SharesService Shares service.
    */

src/app/shares/common-resolvers/share-account-view.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { SharesService } from '../shares.service';
  * Shares Account data resolver.
  */
 @Injectable()
-export class SharesAccountViewResolver implements Resolve<Object> {
+export class SharesAccountViewResolver {
   /**
    * @param {SharesService} SharesService Shares service.
    */

src/app/shares/common-resolvers/shares-account-template.resolver.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +12,7 @@ import { SharesService } from '../shares.service';
  * Shares Account Template resolver.
  */
 @Injectable()
-export class SharesAccountTemplateResolver implements Resolve<Object> {
+export class SharesAccountTemplateResolver {
   /**
    * @param {SharesService} SharesService Shares service.
    */

src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="activateSharesAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="activatedDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="activatedDatePicker.open()">
           <mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
           <input
             matInput
@@ -21,7 +21,7 @@
         </mat-form-field>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="applySharesForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="requestedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Request Date' | translate }}</mat-label>
             <input
@@ -37,7 +37,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="approveSharesAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="approvedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Approved On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeSharesAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="redeemSharesForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="requestedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Request Date' | translate }}</mat-label>
             <input
@@ -37,7 +37,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="rejectSharesAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="rejectedDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Rejected On Date' | translate }}</mat-label>
             <input
@@ -28,7 +28,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html

@@ -9,7 +9,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
         <button type="button" mat-raised-button [routerLink]="['../../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/shares/shares-account-stepper/shares-account-charges-step/shares-account-charges-step.component.html

@@ -1,5 +1,5 @@
-<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  <mat-form-field fxFlex="48%">
+<div class="layout-row-wrap gap-2px responsive-column">
+  <mat-form-field class="flex-48">
     <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
     <mat-select #charge>
       <mat-option
@@ -11,7 +11,7 @@
     </mat-select>
   </mat-form-field>
 
-  <div fxFlex="48%" fxFlexAlign="center">
+  <div class="flex-48 align-center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Add' | translate }}
@@ -19,8 +19,7 @@
   </div>
 
   <table
-    fxFlex="98%"
-    class="mat-elevation-z1"
+    class="flex-98 mat-elevation-z1"
     mat-table
     [dataSource]="chargesDataSource"
     [hidden]="chargesDataSource.length === 0"
@@ -70,7 +69,7 @@
   </table>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="sharesAccountDetailsForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap gap-2px responsive-column">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
@@ -13,7 +13,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
+    <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
       <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
       <input
         matInput
@@ -31,13 +31,13 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
       <input matInput formControlName="externalId" />
     </mat-form-field>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html

@@ -1,67 +1,67 @@
-<div fxLayout="row wrap" fxLayout.lt-md="column">
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
+<div class="layout-row-wrap responsive-column">
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccount.productId | find: sharesAccountTemplate.productOptions : 'id' : 'name' }}</span>
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
+    <span class="flex-60">{{
+      sharesAccount.productId | find: sharesAccountTemplate.productOptions : 'id' : 'name'
+    }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccount.submittedDate | dateFormat }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
+    <span class="flex-60">{{ sharesAccount.submittedDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
-    <span fxFlex="60%" *ngIf="sharesAccount.externalId">
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
+    <span class="flex-60" *ngIf="sharesAccount.externalId">
       <mifosx-external-identifier externalId="{{ sharesAccount.externalId }}"></mifosx-external-identifier>
     </span>
-    <span fxFlex="60%" *ngIf="!sharesAccount.externalId">
+    <span class="flex-60" *ngIf="!sharesAccount.externalId">
       {{ 'labels.inputs.Unassigned' | translate }}
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
+  <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
 
-  <mat-divider fxFlexFill></mat-divider>
-
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
-    <span fxFlex="60%">{{
+  <mat-divider class="flex-fill"></mat-divider>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
+    <span class="flex-60">{{
       sharesAccountTermsForm.get('currencyCode').value
         | find: [sharesAccountProductTemplate.currency] : 'code' : 'displayLabel'
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Total Number of Shares' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccount.requestedShares | formatNumber }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Total Number of Shares' | translate }}</span>
+    <span class="flex-60">{{ sharesAccount.requestedShares | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Current Price' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccountTermsForm.get('unitPrice').value | formatNumber }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Current Price' | translate }}</span>
+    <span class="flex-60">{{ sharesAccountTermsForm.get('unitPrice').value | formatNumber }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Amount' | translate }}</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Amount' | translate }}</span>
+    <span class="flex-60">{{
       sharesAccount.requestedShares * sharesAccountTermsForm.get('unitPrice').value | formatNumber
     }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Default Savings Account' | translate }}</span>
-    <span fxFlex="60%">{{
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Default Savings Account' | translate }}</span>
+    <span class="flex-60">{{
       sharesAccount.savingsAccountId | find: sharesAccountProductTemplate.clientSavingsAccounts : 'id' : 'accountNo'
     }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="sharesAccount.minimumActivePeriod">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Active Period' | translate }}</span>
-    <span fxFlex="60%"
+  <div class="flex-fill" *ngIf="sharesAccount.minimumActivePeriod">
+    <span class="flex-40">{{ 'labels.inputs.Minimum Active Period' | translate }}</span>
+    <span class="flex-60"
       >{{ sharesAccount.minimumActivePeriod }}&nbsp;{{
         sharesAccount.minimumActivePeriodFrequencyType
           | find: sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions : 'id' : 'value'
@@ -70,9 +70,9 @@
     >
   </div>
 
-  <div fxFlexFill *ngIf="sharesAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
-    <span fxFlex="60%"
+  <div class="flex-fill" *ngIf="sharesAccount.lockinPeriodFrequency">
+    <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+    <span class="flex-60"
       >{{ sharesAccount.lockinPeriodFrequency }}&nbsp;{{
         sharesAccount.lockinPeriodFrequencyType
           | find: sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value'
@@ -81,22 +81,21 @@
     >
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Application Date' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccount.applicationDate | dateFormat }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Application Date' | translate }}</span>
+    <span class="flex-60">{{ sharesAccount.applicationDate | dateFormat }}</span>
   </div>
 
-  <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccount.allowDividendCalculationForInactiveClients | yesNo }}</span>
+  <div class="flex-fill">
+    <span class="flex-40">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}</span>
+    <span class="flex-60">{{ sharesAccount.allowDividendCalculationForInactiveClients | yesNo }}</span>
   </div>
 
-  <div fxFlexFill *ngIf="sharesAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
-    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
+  <div *ngIf="sharesAccount.charges.length" class="layout-row-wrap responsive-column flex-fill">
+    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
 
-    <mat-divider fxFlexFill></mat-divider>
-
-    <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="sharesAccount.charges">
+    <mat-divider class="flex-fill"></mat-divider>
+    <table class="flex-fill mat-elevation-z1" mat-table [dataSource]="sharesAccount.charges">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let charge">
@@ -131,7 +130,7 @@
   </div>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html

@@ -1,16 +1,16 @@
 <form [formGroup]="sharesAccountTermsForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
       <input matInput formControlName="currencyCode" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Current Price' | translate }}</mat-label>
       <input type="number" matInput formControlName="unitPrice" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Total Number of Shares' | translate }}</mat-label>
       <input type="number" matInput formControlName="requestedShares" required />
       <mat-error>
@@ -18,11 +18,11 @@
         <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
     </mat-form-field>
-    <span fxFlex="48%" *ngIf="currency">{{
+    <span class="flex-48" *ngIf="currency">{{
       calculateCurrenValue() | currency: currency.code : 'symbol-narrow' : '1.2-2'
     }}</span>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
       <mat-select formControlName="savingsAccountId" required>
         <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
@@ -35,7 +35,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="applicationDatePicker.open()">
+    <mat-form-field class="flex-48" (click)="applicationDatePicker.open()">
       <mat-label>{{ 'labels.inputs.Application Date' | translate }}</mat-label>
       <input
         matInput
@@ -53,18 +53,18 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox labelPosition="before" formControlName="allowDividendCalculationForInactiveClients" fxFlex="48%">
+    <mat-checkbox labelPosition="before" formControlName="allowDividendCalculationForInactiveClients" class="flex-48">
       {{ 'labels.inputs.Allow dividends for inactive clients' | translate }}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Active Period' | translate }}</h4>
+    <h4 class="mat-h4 flex-98">{{ 'labels.heading.Minimum Active Period' | translate }}</h4>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
       <input type="number" matInput formControlName="minimumActivePeriod" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="minimumActivePeriodFrequencyType">
         <mat-option
@@ -76,14 +76,14 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
+    <h4 class="mat-h4 flex-98">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
       <input type="number" matInput formControlName="lockinPeriodFrequency" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option
@@ -96,7 +96,7 @@
     </mat-form-field>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/shares/shares-account-view/general-tab/general-tab.component.html

@@ -1,6 +1,6 @@
 <div class="tab-container mat-typography">
-  <div class="shares-account-tables" fxLayout="row" fxLayoutGap="2%">
-    <div fxFlex="49%">
+  <div class="shares-account-tables layout-row gap-2percent">
+    <div class="flex-49">
       <h4 class="table-headers">{{ 'labels.heading.Shares Details' | translate }}</h4>
       <table>
         <tbody>
@@ -44,7 +44,7 @@
       </table>
     </div>
 
-    <div fxFlex="49%">
+    <div class="flex-49">
       <h4 class="table-headers">{{ 'labels.heading.Account Summary' | translate }}</h4>
       <table>
         <tbody>

src/app/shares/shares-account-view/shares-account-view.component.html

@@ -1,5 +1,5 @@
 <mat-card class="account-card">
-  <mat-card-header fxLayout="column" class="header">
+  <mat-card-header class="header layout-column">
     <mat-card-title-group class="header-title-group">
       <div class="profile-image-container">
         <div>
@@ -14,8 +14,8 @@
 
       <div class="mat-typography account-card-title">
         <mat-card-title>
-          <div fxLayout="row" fxLayout.lt-md="column">
-            <div fxFlex="60%">
+          <div class="layout-row responsive-column">
+            <div class="flex-60">
               <h3>
                 <i
                   class="fa fa-stop"
@@ -58,9 +58,8 @@
               </div>
             </div>
 
-            <span fxFlex="auto"></span>
-
-            <div fxFlex="4%">
+            <span class="flex-auto"></span>
+            <div class="flex-40">
               <button
                 mat-icon-button
                 [matMenuTriggerFor]="accountMenu"
@@ -102,7 +101,7 @@
   </mat-card-header>
 
   <mat-card-content class="content">
-    <nav mat-tab-nav-bar class="navigation-tabs">
+    <nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
       <a
         mat-tab-link
         [routerLink]="['./general']"
@@ -145,6 +144,8 @@
       </a>
     </nav>
 
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </mat-card-content>
 </mat-card>