Upgrade to Angular 16

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

.browserslistrc

@@ -6,5 +6,7 @@ last 2 versions
 > 0.5%
 Firefox ESR
 not dead
+not kaios 2.5
+not op_mini all
 # For IE 9-11 support, please uncomment the next line and adjust as needed
 # IE 9-11

Dockerfile

@@ -4,7 +4,7 @@
 ARG BUILDER_IMAGE=node:22.9.0-alpine
 ARG NGINX_IMAGE=nginx:1.27.4-alpine3.21-slim
 
-FROM $BUILDER_IMAGE as builder
+FROM $BUILDER_IMAGE AS builder
 ARG NPM_REGISTRY_URL=https://registry.npmjs.org/
 ARG BUILD_ENVIRONMENT_OPTIONS="--configuration production"
 ARG PUPPETEER_DOWNLOAD_HOST_ARG=https://storage.googleapis.com
@@ -18,13 +18,12 @@ RUN apk add --no-cache git
 
 WORKDIR /usr/src/app
 
-ENV PATH /usr/src/app/node_modules/.bin:$PATH
+ENV PATH=/usr/src/app/node_modules/.bin:$PATH
 
 # Export Puppeteer env variables for installation with non-default registry.
-ENV PUPPETEER_DOWNLOAD_HOST $PUPPETEER_DOWNLOAD_HOST_ARG
+ENV PUPPETEER_DOWNLOAD_HOST=$PUPPETEER_DOWNLOAD_HOST_ARG
-ENV PUPPETEER_CHROMIUM_REVISION $PUPPETEER_CHROMIUM_REVISION_ARG
+ENV PUPPETEER_CHROMIUM_REVISION=$PUPPETEER_CHROMIUM_REVISION_ARG
-
+ENV PUPPETEER_SKIP_DOWNLOAD=$PUPPETEER_SKIP_DOWNLOAD_ARG
-ENV PUPPETEER_SKIP_DOWNLOAD $PUPPETEER_SKIP_DOWNLOAD_ARG
 
 COPY ./ /usr/src/app/
 
@@ -37,7 +36,7 @@ RUN npm install --location=global @angular/cli@16.0.2
 
 RUN npm install
 
-RUN ng build --output-path=/dist $BUILD_ENVIRONMENT_OPTIONS
+RUN sh -c "ng build --output-path=/dist $BUILD_ENVIRONMENT_OPTIONS"
 
 ###############
 ### STAGE 2: Serve app with nginx ###

angular.json

@@ -232,5 +232,13 @@
     "schematicCollections": [
       "@angular-eslint/schematics"
     ]
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

ngcc.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  packages: {
-    '@ckeditor/ckeditor5-angular': {
-      ignorableDeepImportMatchers: [
-        /@ckeditor\//
-      ]
-    }
-  }
-};

package.json

@@ -24,34 +24,33 @@
     "e2e": "ng e2e",
     "translations:extract": "ngx-translate-extract --input ./src --output ./src/translations/template.json --format=json --clean -sort --marker extract",
     "env": "node version.js",
-    "postinstall": "node version.js && ngcc",
+    "postinstall": "node version.js",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run"
   },
   "dependencies": {
-    "@angular-devkit/schematics": "14.2.12",
+    "@angular-devkit/schematics": "16.2.16",
-    "@angular-material-components/datetime-picker": "8.0.0",
+    "@angular-material-components/datetime-picker": "^16.0.1",
-    "@angular/animations": "14.3.0",
+    "@angular/animations": "16.2.12",
-    "@angular/cdk": "14.2.7",
+    "@angular/cdk": "^16.2.14",
-    "@angular/common": "14.3.0",
+    "@angular/common": "16.2.12",
-    "@angular/compiler": "14.3.0",
+    "@angular/compiler": "16.2.12",
-    "@angular/core": "14.3.0",
+    "@angular/core": "16.2.12",
-    "@angular/flex-layout": "^14.0.0-beta.40",
+    "@angular/forms": "16.2.12",
-    "@angular/forms": "14.3.0",
+    "@angular/localize": "16.2.12",
-    "@angular/localize": "14.3.0",
+    "@angular/material": "^16.2.14",
-    "@angular/material": "14.2.7",
+    "@angular/platform-browser": "16.2.12",
-    "@angular/platform-browser": "14.3.0",
+    "@angular/platform-browser-dynamic": "16.2.12",
-    "@angular/platform-browser-dynamic": "14.3.0",
+    "@angular/router": "16.2.12",
-    "@angular/router": "14.3.0",
     "@ckeditor/ckeditor5-angular": "6.0.1",
     "@ckeditor/ckeditor5-build-classic": "40.2.0",
-    "@fortawesome/angular-fontawesome": "0.11.1",
+    "@fortawesome/angular-fontawesome": "^0.13.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.2.1",
-    "@ngx-translate/core": "13.0.0",
+    "@ngx-translate/core": "^16.0.4",
-    "@ngx-translate/http-loader": "^6.0.0",
+    "@ngx-translate/http-loader": "^16.0.1",
     "@swimlane/ngx-graph": "^8.0.2",
     "@tailwindcss/forms": "^0.5.4",
     "chart.js": "3.0.0-alpha",
@@ -62,23 +61,23 @@
     "jspdf-autotable": "^5.0.2",
     "lodash": "4.17.21",
     "moment": "^2.29.4",
-    "ngx-mat-select-search": "5.0.0",
+    "ngx-mat-select-search": "^8.0.1",
     "rxjs": "6.6.7",
     "tslib": "^2.0.0",
     "vkbeautify": "^0.99.2",
     "xlsx": "^0.18.5",
-    "zone.js": "0.11.6"
+    "zone.js": "0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.2.12",
+    "@angular-devkit/build-angular": "^16.2.16",
-    "@angular-eslint/builder": "^19.2.1",
+    "@angular-eslint/builder": "^19.3.0",
-    "@angular-eslint/eslint-plugin": "^19.2.1",
+    "@angular-eslint/eslint-plugin": "^19.3.0",
-    "@angular-eslint/eslint-plugin-template": "^19.2.1",
+    "@angular-eslint/eslint-plugin-template": "^19.3.0",
-    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/schematics": "19.3.0",
-    "@angular-eslint/template-parser": "^19.2.1",
+    "@angular-eslint/template-parser": "^19.3.0",
-    "@angular/cli": "14.2.12",
+    "@angular/cli": "16.2.16",
-    "@angular/compiler-cli": "14.3.0",
+    "@angular/compiler-cli": "16.2.12",
-    "@angular/language-service": "14.3.0",
+    "@angular/language-service": "16.2.12",
     "@biesbjerg/ngx-translate-extract": "^7.0.4",
     "@cypress/schematic": "^2.5.2",
     "@ngx-rocket/scripts": "3.0.3",
@@ -91,10 +90,10 @@
     "@types/lodash": "4.14.132",
     "@types/node": "12.11.1",
     "@types/vkbeautify": "^0.99.2",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^8.26.1",
+    "@typescript-eslint/parser": "^7.2.0",
     "cypress": "^13.17.0",
-    "eslint": "^9.22.0",
+    "eslint": "^8.57.0",
     "git-describe": "^4.1.1",
     "htmlhint": "1.1.4",
     "https-proxy-agent": "2.2.1",
@@ -120,7 +119,7 @@
     "stylelint-scss": "^6.8.1",
     "tailwindcss": "^3.3.3",
     "ts-node": "8.2.0",
-    "typescript": "^4.6.4"
+    "typescript": "~4.9.5"
   },
   "repository": {
     "type": "git",

src/app/account-transfers/common-resolvers/list-transactions.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';
@@ -13,7 +13,7 @@ import { SettingsService } from 'app/settings/settings.service';
  * View Standing Instructions resolver.
  */
 @Injectable()
-export class ListTransactionsResolver implements Resolve<Object> {
+export class ListTransactionsResolver {
   /**
    * @param {AccountTransfersService} accountTransfersService Account Transfers service.
    * @param {SettingsService} settingsService Settings Service.

src/app/account-transfers/common-resolvers/make-account-transfer-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 { AccountTransfersService } from '../account-transfers.service';
  * View Standing Instructions resolver.
  */
 @Injectable()
-export class MakeAccountTransferTemplateResolver implements Resolve<Object> {
+export class MakeAccountTransferTemplateResolver {
   accountTypeId: string;
   id: any;
   /**

src/app/account-transfers/common-resolvers/standing-instructions-data-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 { AccountTransfersService } from '../account-transfers.service';
  * View Standing Instructions resolver.
  */
 @Injectable()
-export class StandingInstructionsDataAndTemplateResolver implements Resolve<Object> {
+export class StandingInstructionsDataAndTemplateResolver {
   /**
    * @param {accountTransfersService} AccountTransfersService Account Transfers service.
    */

src/app/account-transfers/common-resolvers/standing-instructions-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 { AccountTransfersService } from '../account-transfers.service';
  * View Standing Instructions resolver.
  */
 @Injectable()
-export class StandingInstructionsTemplateResolver implements Resolve<Object> {
+export class StandingInstructionsTemplateResolver {
   accountTypeId: string;
 
   /**

src/app/account-transfers/common-resolvers/view-account-transfer.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 { AccountTransfersService } from '../account-transfers.service';
  * View Account Transfer data resolver.
  */
 @Injectable()
-export class ViewAccountTransferResolver implements Resolve<Object> {
+export class ViewAccountTransferResolver {
   /**
    * @param {AccountTransfersService} AccountTransfersService Savings service.
    */

src/app/account-transfers/common-resolvers/view-standing-instructions.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 { AccountTransfersService } from '../account-transfers.service';
  * View Standing Instructions resolver.
  */
 @Injectable()
-export class ViewStandingInstructionsResolver implements Resolve<Object> {
+export class ViewStandingInstructionsResolver {
   /**
    * @param {accountTransfersService} AccountTransfersService Account Transfers service.
    */

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="createStandingInstructionsForm">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.name.hasError('required')">
@@ -12,12 +12,12 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Applicant' | translate }}</mat-label>
             <input matInput formControlName="applicant" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <mat-select required formControlName="transferType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let transferType of transferTypeData" [value]="transferType.id">
@@ -30,7 +30,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
               <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
@@ -43,7 +43,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
@@ -56,7 +56,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.From Account Type' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let fromAccountType of fromAccountTypeData" [value]="fromAccountType.id">
@@ -69,7 +69,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.From Account' | translate }}</mat-label>
             <mat-select required formControlName="fromAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let fromAccount of fromAccountData" [value]="fromAccount.id">
@@ -82,7 +82,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Destination' | translate }}</mat-label>
             <mat-select required formControlName="destination">
               <mat-option *ngFor="let destinationType of destinationTypeData" [value]="destinationType.id">
@@ -95,7 +95,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Office' | translate }}</mat-label>
             <mat-select [disabled]="ToOfficeId" required formControlName="toOfficeId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
@@ -108,7 +108,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Beneficiary' | translate }}</mat-label>
             <mat-select [disabled]="ToClientId" required formControlName="toClientId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toClientType of toClientTypeData" [value]="toClientType.id">
@@ -121,7 +121,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
@@ -134,7 +134,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
@@ -147,7 +147,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
               <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
@@ -160,7 +160,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input type="number" matInput required formControlName="amount" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.amount.hasError('required')">
@@ -169,7 +169,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="validFromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Validity from' | translate }}</mat-label>
             <input
               matInput
@@ -187,7 +187,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="validTillDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Validity To' | translate }}</mat-label>
             <input
               matInput
@@ -205,7 +205,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
               <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
@@ -218,7 +218,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Interval' | translate }}</mat-label>
             <input type="number" matInput required formControlName="recurrenceInterval" />
             <mat-error *ngIf="createStandingInstructionsForm.controls.recurrenceInterval.hasError('required')">
@@ -227,7 +227,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceFrequency">
               <mat-option
@@ -243,7 +243,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="recurrenceOnMonthDayDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="recurrenceOnMonthDayDatePicker.open()">
             <mat-label>{{ 'labels.inputs.On Month Day' | translate }}</mat-label>
             <input
               required
@@ -263,7 +263,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/account-transfers/edit-standing-instructions/edit-standing-instructions.component.html

@@ -2,28 +2,28 @@
   <mat-card>
     <form [formGroup]="editStandingInstructionsForm">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput formControlName="name" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Applicant' | translate }}</mat-label>
             <input matInput formControlName="applicant" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <input matInput formControlName="type" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.From Account Type' | translate }}</mat-label>
             <input matInput formControlName="fromAccountType" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Priority' | translate }}</mat-label>
             <mat-select required formControlName="priority">
               <mat-option *ngFor="let priorityType of priorityTypeData" [value]="priorityType.id">
@@ -36,7 +36,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
             <mat-select required formControlName="status">
               <mat-option *ngFor="let statusType of statusTypeData" [value]="statusType.id">
@@ -49,37 +49,37 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.From Account' | translate }}</mat-label>
             <input matInput formControlName="fromAccount" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Destination' | translate }}</mat-label>
             <input matInput formControlName="destination" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Office' | translate }}</mat-label>
             <input matInput formControlName="toOffice" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Beneficiary' | translate }}</mat-label>
             <input matInput formControlName="toClientId" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Account Type' | translate }}</mat-label>
             <input matInput formControlName="toAccountType" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.To Account' | translate }}</mat-label>
             <input matInput formControlName="toAccount" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Standing Instruction Type' | translate }}</mat-label>
             <mat-select formControlName="instructionType">
               <mat-option *ngFor="let instructionsType of instructionTypeData" [value]="instructionsType.id">
@@ -88,12 +88,12 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input matInput formControlName="amount" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="validFromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Validity from' | translate }}</mat-label>
             <input
               matInput
@@ -111,7 +111,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="validTillDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Validity To' | translate }}</mat-label>
             <input
               matInput
@@ -129,7 +129,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Type' | translate }}</mat-label>
             <mat-select required formControlName="recurrenceType">
               <mat-option *ngFor="let recurrenceType of recurrenceTypeData" [value]="recurrenceType.id">
@@ -142,12 +142,12 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Interval' | translate }}</mat-label>
             <input matInput formControlName="recurrenceInterval" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Recurrence Frequency' | translate }}</mat-label>
             <mat-select formControlName="recurrenceFrequency">
               <mat-option
@@ -159,7 +159,7 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="recurrenceOnMonthDayDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="recurrenceOnMonthDayDatePicker.open()">
             <mat-label>{{ 'labels.inputs.On Month Day' | translate }}</mat-label>
             <input
               matInput
@@ -174,7 +174,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]="['../view']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html

@@ -1,26 +1,26 @@
 <mat-card class="container">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row-wrap gap-2px responsive-column">
-    <div fxFlexFill *ngIf="isFromClient">
+    <div class="flex-fill" *ngIf="isFromClient">
-      <span fxFlex="40%">
+      <span class="flex-40">
         <h3 class="mat-h3">{{ 'labels.heading.Client Type' | translate }}</h3>
       </span>
-      <span fxFlex="60%">
+      <span class="flex-60">
         <h3 class="mat-h3">{{ clientName }}</h3>
       </span>
     </div>
 
-    <div fxFlexFill *ngIf="!isFromClient">
+    <div *ngIf="!isFromClient" class="flex-fill">
-      <mat-form-field fxFlex="30%">
+      <mat-form-field class="flex-30">
         <input matInput placeholder="ClientName" [formControl]="clientNameControl" />
       </mat-form-field>
-      <mat-form-field fxFlex="30%">
+      <mat-form-field class="flex-30">
         <input matInput placeholder="From Client Id" [formControl]="fromClientId" />
       </mat-form-field>
     </div>
 
     <mat-divider [inset]="true"></mat-divider>
 
-    <mat-form-field fxFlex="30%">
+    <mat-form-field class="flex-30">
       <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
       <mat-select [formControl]="transferType">
         <mat-option *ngFor="let transferTypeData of transferTypeDatas" [value]="transferTypeData.id">
@@ -29,7 +29,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="30%">
+    <mat-form-field class="flex-30">
       <input matInput placeholder="From Account Id" [formControl]="fromAccountId" />
     </mat-form-field>
 

src/app/account-transfers/list-transactions/list-transactions.component.html

@@ -1,28 +1,28 @@
 <div class="container m-b-20">
   <mat-card class="mat-elevation-z8">
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
+      <div class="layout-row-wrap">
-        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+        <div class="flex-25 header">
           {{ 'labels.inputs.From Account' | translate }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%">
+        <div class="flex-25">
           {{ listTransactionData.fromAccount.accountNo }}({{ listTransactionData.fromAccountType.value }})
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+        <div class="flex-25 header">
           {{ 'labels.inputs.To Account' | translate }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%">
+        <div class="flex-25">
           {{ listTransactionData.toAccount.accountNo }}({{ listTransactionData.toAccountType.value }})
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+        <div class="flex-25 header">
           {{ 'labels.inputs.Destination' | translate }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%">
+        <div class="flex-25">
           {{ listTransactionData.toClient.displayName }}
         </div>
       </div>
@@ -33,7 +33,7 @@
 <div class="mat-elevation-z8 container">
   <table mat-table [dataSource]="dataSource">
     <ng-container matColumnDef="transactionDate">
-      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Transaction Date | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transaction Date' | translate }}</th>
       <td mat-cell *matCellDef="let transaction">{{ transaction.transferDate | dateFormat }}</td>
     </ng-container>
 
@@ -43,7 +43,7 @@
     </ng-container>
 
     <ng-container matColumnDef="notes">
-      <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Notes | translate}}</th>
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Notes' | translate }}</th>
       <td mat-cell *matCellDef="let transaction">{{ transaction.transferDescription }}</td>
     </ng-container>
 

src/app/account-transfers/list-transactions/list-transactions.component.ts

@@ -1,7 +1,9 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
+
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
+
 import { ActivatedRoute } from '@angular/router';
 
 /**

src/app/account-transfers/make-account-interbank-transfers/make-account-interbank-transfers.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="makeAccountTransferForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row-wrap gap-2px responsive-column">
-    <mat-form-field fxFlex="98%" (click)="transferDatePicker.open()">
+    <mat-form-field class="flex-98" (click)="transferDatePicker.open()">
       <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
       <input
         matInput
@@ -18,27 +18,27 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="98%">
+    <mat-form-field class="flex-98">
       <mat-label>{{ 'labels.inputs.Bank' | translate }}</mat-label>
       <input matInput formControlName="toBank" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="98%">
+    <mat-form-field class="flex-98">
       <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
       <input matInput formControlName="toClientId" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="98%">
+    <mat-form-field class="flex-98">
       <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
       <input matInput formControlName="toAccountType" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="98%">
+    <mat-form-field class="flex-98">
       <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
       <input matInput formControlName="toAccountId" />
     </mat-form-field>
 
-    <mat-form-field fxFlex="98%" class="error-warn">
+    <mat-form-field class="flex-98 error-warn">
       <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
       <input #amntInput type="number" matInput required formControlName="transferAmount" />
       <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
@@ -51,7 +51,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="98%">
+    <mat-form-field class="flex-98">
       <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
       <textarea matInput formControlName="transferDescription" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">

src/app/account-transfers/make-account-interbank-transfers/make-account-interbank-transfers.component.ts

@@ -1,8 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
-import { MatInput } from '@angular/material/input';
-
 @Component({
   selector: 'mifosx-make-account-interbank-transfers',
   templateUrl: './make-account-interbank-transfers.component.html',

src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

@@ -7,47 +7,47 @@
   </div>
   <mat-card *ngIf="!isLoading">
     <mat-card-content>
-      <div fxLayout="row wrap" fxLayout.lt-md="column">
+      <div class="layout-row-wrap responsive-column">
-        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferring From Details' | translate }}</h3>
+        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferring From Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Applicant' | translate }}</span>
+          <span class="flex-40">{{ 'labels.inputs.Applicant' | translate }}</span>
-          <span fxFlex="60%">{{ accountTransferTemplateData.fromClient.displayName }}</span>
+          <span class="flex-60">{{ accountTransferTemplateData.fromClient.displayName }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
+          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}</span>
-          <span fxFlex="60%">{{ accountTransferTemplateData.fromOffice.name }}</span>
+          <span class="flex-60">{{ accountTransferTemplateData.fromOffice.name }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.From Account' | translate }}</span>
+          <span class="flex-40">{{ 'labels.inputs.From Account' | translate }}</span>
-          <span fxFlex="60%"
+          <span class="flex-60"
             >{{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
               accountTransferTemplateData.fromAccount.accountNo
             }}</span
           >
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.From Account Type' | translate }}</span>
+          <span class="flex-40">{{ 'labels.inputs.From Account Type' | translate }}</span>
-          <span fxFlex="60%">{{ accountTransferTemplateData.fromAccountType.value }}</span>
+          <span class="flex-60">{{ accountTransferTemplateData.fromAccountType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
+          <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
-          <span fxFlex="60%">{{ accountTransferTemplateData.currency.name }}</span>
+          <span class="flex-60">{{ accountTransferTemplateData.currency.name }}</span>
         </div>
       </div>
 
       <div *ngIf="interbank">
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <h3 class="mat-h3" fxFlex="40%" fxLayoutAlign="start center">
+          <h3 class="mat-h3 flex-40 align-start-center">
             {{ 'labels.heading.Transferred To' | translate }}
           </h3>
-          <mat-form-field fxFlex="40%">
+          <mat-form-field class="flex-40">
             <mat-label>{{ 'labels.inputs.Phone Number' | translate }}</mat-label>
             <input
               matInput
@@ -62,13 +62,7 @@
           </mat-form-field>
         </div>
 
-        <mat-card-actions
+        <mat-card-actions *ngIf="!interbankTransferForm" class="layout-row align-center gap-5px responsive-column">
-          *ngIf="!interbankTransferForm"
-          fxLayout="row"
-          fxLayout.xs="column"
-          fxLayoutAlign="center"
-          fxLayoutGap="5px"
-        >
           <button type="button" mat-raised-button [routerLink]="['../..']">
             {{ 'labels.buttons.Cancel' | translate }}
           </button>
@@ -88,8 +82,8 @@
       <mat-divider [inset]="true"></mat-divider>
 
       <form *ngIf="!interbank" [formGroup]="makeAccountTransferForm">
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="98%" (click)="transferDatePicker.open()">
+          <mat-form-field class="flex-98" (click)="transferDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
               matInput
@@ -107,7 +101,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
@@ -120,7 +114,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
             <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete" />
             <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
@@ -135,7 +129,7 @@
             </mat-option>
           </mat-autocomplete>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
@@ -148,7 +142,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
             <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
               <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
@@ -161,7 +155,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input type="number" matInput required formControlName="transferAmount" />
             <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
@@ -174,7 +168,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea
               matInput
@@ -196,13 +190,7 @@
       ></mifosx-make-account-interbank-transfers>
     </mat-card-content>
 
-    <mat-card-actions
+    <mat-card-actions *ngIf="!interbankTransferForm" class="layout-row align-center gap-5px responsive-column">
-      *ngIf="!interbank === !interbankTransferForm"
-      fxLayout="row"
-      fxLayout.xs="column"
-      fxLayoutAlign="center"
-      fxLayoutGap="5px"
-    >
       <button type="button" mat-raised-button [routerLink]="['../..']">
         {{ 'labels.buttons.Cancel' | translate }}
       </button>

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -15,7 +15,6 @@ import { AccountTransfersService } from '../account-transfers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
-import { MatInput } from '@angular/material/input';
 
 /** Environment Configuration */
 import { environment } from 'environments/environment';

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div fxLayoutAlign="end" class="container m-b-20" fxLayoutGap="2%">
+  <div class="container m-b-20 align-end gap-2px">
     <span *ngIf="!viewAccountTransferData.reversed">
       <button mat-raised-button color="warn" *mifosxHasPermission="'ADJUST_ACCOUNTTRANSFER'">
         <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Undo' | translate }}
@@ -9,16 +9,16 @@
 
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" fxLayout.lt-md="column">
+      <div class="layout-row-wrap responsive-column">
-        <div fxFlex="100%" [ngClass]="transactionColor()"></div>
+        <div class="flex-100" [ngClass]="transactionColor()"></div>
 
-        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transaction Details' | translate }}</h3>
+        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transaction Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
-          <span fxFlex="60%"
+          <span class="flex-60"
             >{{ viewAccountTransferData.currency.displaySymbol }}
             {{ viewAccountTransferData.transferAmount | formatNumber }} ({{
               viewAccountTransferData.currency.code
@@ -26,66 +26,66 @@
           >
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Destination' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Destination' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.transferDescription }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.transferDescription }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred From' | translate }}</h3>
+        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferred From' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.fromOffice.name }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.fromOffice.name }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Client' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Client' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.fromClient.displayName }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.fromClient.displayName }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Account Type' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Account Type' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.fromAccountType.value }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.fromAccountType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Account No' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Account No' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
         </div>
 
-        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred To' | translate }}</h3>
+        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferred To' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.toOffice.name }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.toOffice.name }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Client' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Client' | translate }}:</span>
-          <span fxFlex="60%"
+          <span class="flex-60"
             ><a [href]="transferToClient(viewAccountTransferData.toClient)">
               {{ viewAccountTransferData.toClient.displayName }}</a
             >
           </span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Account Type' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Account Type' | translate }}:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.toAccountType.value }}</span>
+          <span class="flex-60">{{ viewAccountTransferData.toAccountType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Account No' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Account No' | translate }}:</span>
-          <span fxFlex="60%"
+          <span class="flex-60"
             ><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
               {{ viewAccountTransferData.toAccount.accountNo }}</a
             >
@@ -94,7 +94,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" color="primary" mat-raised-button (click)="goBack()">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['../', 'edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -16,111 +16,111 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" fxLayout.lt-md="column">
+      <div class="layout-row-wrap responsive-column">
-        <h2 class="mat-h2" fxFlexFill>{{ standingInstructionsData.name }}</h2>
+        <h2 class="mat-h2 flex-fill">{{ standingInstructionsData.name }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Applicant' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Applicant' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.fromClient.displayName }}</span>
+          <span class="flex-60">{{ standingInstructionsData.fromClient.displayName }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Type' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.transferType.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.transferType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Priority' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Priority' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.priority.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.priority.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Status' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Status' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.status.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.status.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.From Account Type' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.From Account Type' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.fromAccountType.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.fromAccountType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.From Account' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.From Account' | translate }}:</span>
-          <span fxFlex="60%"
+          <span class="flex-60"
             >{{ standingInstructionsData.fromAccount.productName }} -
             {{ standingInstructionsData.fromAccount.accountNo }}</span
           >
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Destination' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Destination' | translate }}:</span>
-          <span fxFlex="60%">
+          <span class="flex-60">
             <span *ngIf="allowclientedit"> {{ 'labels.inputs.Within Bank' | translate }} </span>
             <span *ngIf="!allowclientedit"> {{ 'labels.inputs.Own Account' | translate }} </span>
           </span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.To Office' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.To Office' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.toOffice.name }}</span>
+          <span class="flex-60">{{ standingInstructionsData.toOffice.name }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Beneficiary' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Beneficiary' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.toClient.displayName }}</span>
+          <span class="flex-60">{{ standingInstructionsData.toClient.displayName }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.To Account Type' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.To Account Type' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.toAccountType.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.toAccountType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.To Account' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.To Account' | translate }}:</span>
-          <span fxFlex="60%"
+          <span class="flex-60"
             >{{ standingInstructionsData.toAccount.productName }} -
             {{ standingInstructionsData.toAccount.accountNo }}</span
           >
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Standing Instruction Type' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Standing Instruction Type' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.instructionType.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.instructionType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Amount' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Amount' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.amount }}</span>
+          <span class="flex-60">{{ standingInstructionsData.amount }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Validity' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Validity' | translate }}:</span>
-          <span fxFlex="60%"
+          <span class="flex-60"
             >{{ standingInstructionsData.validFrom | dateFormat }} -
             {{ standingInstructionsData.validTill | dateFormat }}</span
           >
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Recurrence Type' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Recurrence Type' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.recurrenceType.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.recurrenceType.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Interval' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Interval' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.recurrenceInterval }}</span>
+          <span class="flex-60">{{ standingInstructionsData.recurrenceInterval }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.Recurrence Frequency' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.Recurrence Frequency' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.recurrenceFrequency.value }}</span>
+          <span class="flex-60">{{ standingInstructionsData.recurrenceFrequency.value }}</span>
         </div>
 
-        <div fxFlexFill>
+        <div class="flex-fill">
-          <span fxFlex="40%">{{ 'labels.inputs.On Month Day' | translate }}:</span>
+          <span class="flex-40">{{ 'labels.inputs.On Month Day' | translate }}:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.recurrenceOnMonthDay | dateFormat }}</span>
+          <span class="flex-60">{{ standingInstructionsData.recurrenceOnMonthDay | dateFormat }}</span>
         </div>
       </div>
     </mat-card-content>

src/app/accounting/accounting-rules/accounting-rule.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 { AccountingService } from '../accounting.service';
  * Accounting rule data resolver.
  */
 @Injectable()
-export class AccountingRuleResolver implements Resolve<Object> {
+export class AccountingRuleResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/accounting-rules/accounting-rules-template.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Accounting rules template data resolver.
  */
 @Injectable()
-export class AccountingRulesTemplateResolver implements Resolve<Object> {
+export class AccountingRulesTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/accounting-rules/accounting-rules.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_ACCOUNTINGRULE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Add Rule' | translate }}
@@ -6,8 +6,8 @@
 </div>
 
 <div class="container">
-  <div fxLayout="row">
+  <div class="layout-row">
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>

src/app/accounting/accounting-rules/accounting-rules.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Accounting rules data resolver.
  */
 @Injectable()
-export class AccountingRulesResolver implements Resolve<Object> {
+export class AccountingRulesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/accounting-rules/create-rule/create-rule.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
@@ -12,7 +12,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -25,9 +25,14 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
+            <mat-label class="flex-50"
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
+              >{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5percent radio-group-spacing"
+              formControlName="debitRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -35,7 +40,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -45,13 +50,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
+            class="flex-48 layout-row gap-2percent responsive-column"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
             *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
@@ -60,16 +62,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
                 {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
+            <mat-label class="flex-50"
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
+              >{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5-percent radio-group-spacing"
+              formControlName="creditRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -77,7 +84,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -87,13 +94,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
+            class="flex-48 layout-row gap-2percent responsive-column"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
             *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
@@ -102,21 +106,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50" ngClass.gt-md="entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
                 {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </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/accounting/accounting-rules/create-rule/create-rule.component.scss

@@ -12,3 +12,15 @@
     right: 0;
   }
 }
+
+.radio-group-spacing {
+  display: flex;
+  gap: 2rem;
+  flex-direction: row;
+}
+
+@media (width <= 768px) {
+  .radio-group-spacing {
+    flex-direction: column;
+  }
+}

src/app/accounting/accounting-rules/edit-rule/edit-rule.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="accountingRuleForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="accountingRuleForm.controls.name.hasError('required')">
@@ -12,7 +12,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -25,9 +25,14 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label>
+            <mat-label class="flex-50"
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="debitRuleType">
+              >{{ 'labels.inputs.Affected GL Entry (Debit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5percent radio-group-spacing"
+              formControlName="debitRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -35,7 +40,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.debitRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Debit' | translate }}</mat-label>
             <mat-select formControlName="accountToDebit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -45,13 +50,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
+            class="flex-48 layout-row gap-2percent responsive-column"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
             *ngIf="accountingRuleForm.controls.debitRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Debit Tags' | translate }}</mat-label>
               <mat-select formControlName="debitTags" multiple>
                 <mat-option *ngFor="let debitTag of debitTagData" [value]="debitTag.id">
@@ -60,16 +62,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50 entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleDebitEntries" class="entries">
                 {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <div fxFlex="48%" fxLayout="row" fxLayout.lt-md="column" class="rule-wrapper">
+          <div class="rule-wrapper flex-48 layout-row responsive-column">
-            <mat-label fxFlex="50%">{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label>
+            <mat-label class="flex-50"
-            <mat-radio-group fxFlex="50%" fxLayout="row" fxLayoutGap="5%" formControlName="creditRuleType">
+              >{{ 'labels.inputs.Affected GL Entry (Credit) Rule Type' | translate }} *</mat-label
+            >
+            <mat-radio-group
+              class="flex-50 layout-row gap-5-percent radio-group-spacing"
+              formControlName="creditRuleType"
+            >
               <mat-radio-button value="fixedAccount">{{ 'labels.inputs.Fixed Account' | translate }}</mat-radio-button>
               <mat-radio-button value="listOfAccounts">{{
                 'labels.inputs.List of Accounts' | translate
@@ -77,7 +84,7 @@
             </mat-radio-group>
           </div>
 
-          <mat-form-field fxFlex="48%" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
+          <mat-form-field class="flex-48" *ngIf="accountingRuleForm.controls.creditRuleType.value === 'fixedAccount'">
             <mat-label>{{ 'labels.inputs.Account to Credit' | translate }}</mat-label>
             <mat-select formControlName="accountToCredit">
               <mat-option *ngFor="let glAccount of glAccountData" [value]="glAccount.id">
@@ -87,13 +94,10 @@
           </mat-form-field>
 
           <div
-            fxFlex="48%"
+            class="flex-48 layout-row gap-2percent responsive-column"
-            fxLayout="row"
-            fxLayoutGap="2%"
-            fxLayout.lt-md="column"
             *ngIf="accountingRuleForm.controls.creditRuleType.value === 'listOfAccounts'"
           >
-            <mat-form-field fxFlex="50%">
+            <mat-form-field class="flex-50">
               <mat-label>{{ 'labels.inputs.Credit Tags' | translate }}</mat-label>
               <mat-select formControlName="creditTags" multiple>
                 <mat-option *ngFor="let creditTag of creditTagData" [value]="creditTag.id">
@@ -102,21 +106,21 @@
               </mat-select>
             </mat-form-field>
 
-            <div fxFlex="50%" ngClass.gt-md="entries-wrapper">
+            <div class="flex-50 entries-wrapper">
               <mat-checkbox labelPosition="before" formControlName="allowMultipleCreditEntries" class="entries">
                 {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
               </mat-checkbox>
             </div>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </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/accounting/accounting-rules/edit-rule/edit-rule.component.scss

@@ -12,3 +12,15 @@
     right: 0;
   }
 }
+
+.radio-group-spacing {
+  display: flex;
+  gap: 2rem;
+  flex-direction: row;
+}
+
+@media (width <= 768px) {
+  .radio-group-spacing {
+    flex-direction: column;
+  }
+}

src/app/accounting/accounting-rules/view-rule/view-rule.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -14,40 +14,40 @@
   </button>
 </div>
 
-<div class="container" fxLayout="row" fxLayoutGap="2%" fxLayout.lt-md="column">
+<div class="container layout-row gap-2-percent responsive-column">
-  <div fxFlex="48%">
+  <div class="flex-48">
     <mat-card>
       <mat-card-content>
-        <div fxLayout="row wrap" class="content">
+        <div class="layout-row-wrap">
-          <div fxFlex="50%" class="header">
+          <div class="flex-50 header">
             {{ 'labels.inputs.Office' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ accountingRule.officeName }}
           </div>
 
-          <div fxFlex="50%" class="header" *ngIf="accountingRule.description">
+          <div class="flex-50 header" *ngIf="accountingRule.description">
             {{ 'labels.inputs.Description' | translate }}
           </div>
 
-          <div fxFlex="50%" *ngIf="accountingRule.description">
+          <div class="flex-50" *ngIf="accountingRule.description">
             {{ accountingRule.description }}
           </div>
 
-          <div fxFlex="50%" class="header">
+          <div class="flex-50 header">
             {{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ accountingRule.allowMultipleDebitEntries }}
           </div>
 
-          <div fxFlex="50%" class="header">
+          <div class="flex-50 header">
             {{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
           </div>
 
-          <div fxFlex="50%">
+          <div class="flex-50">
             {{ accountingRule.allowMultipleCreditEntries }}
           </div>
         </div>
@@ -55,11 +55,11 @@
     </mat-card>
   </div>
 
-  <div fxFlex>
+  <div class="flex-fill">
     <mat-card>
       <mat-card-content>
-        <div fxLayout="row" class="content">
+        <div class="layout-row content">
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitTags">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.debitTags">
             <div class="header">
               {{ 'labels.inputs.Debit Tags' | translate }}
             </div>
@@ -68,7 +68,7 @@
             </div>
           </div>
 
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.debitAccounts">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.debitAccounts">
             <div class="header">
               {{ 'labels.inputs.Debit Account Name' | translate }}
             </div>
@@ -77,7 +77,7 @@
             </div>
           </div>
 
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditTags">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.creditTags">
             <div class="header">
               {{ 'labels.inputs.Credit Tags' | translate }}
             </div>
@@ -86,7 +86,7 @@
             </div>
           </div>
 
-          <div fxFlex="50%" fxLayout="column" *ngIf="accountingRule.creditAccounts">
+          <div class="flex-50 layout-column" *ngIf="accountingRule.creditAccounts">
             <div class="header">
               {{ 'labels.inputs.Credit Account Name' | translate }}
             </div>

src/app/accounting/accounting.component.html

@@ -1,152 +1,315 @@
 <div class="container">
   <mat-card>
-    <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
+    <div class="layout-row responsive-column gap-20px">
-      <div fxFlex="50%">
+      <div class="flex-50">
         <mat-nav-list>
           <mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
-            <mat-icon matListIcon [routerLink]="['journal-entries/frequent-postings']">
+            <div class="menu-list-item-content">
-              <fa-icon icon="sync" size="sm"></fa-icon>
+              <div class="menu-left-section" [routerLink]="['journal-entries/frequent-postings']">
-            </mat-icon>
+                <mat-icon matListIcon>
-            <h4 matLine [routerLink]="['journal-entries/frequent-postings']">
+                  <fa-icon icon="sync" size="sm"></fa-icon>
-              {{ 'labels.heading.Frequent Postings' | translate }}
+                </mat-icon>
-            </h4>
+                <div matLine>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
+                  {{ 'labels.heading.Frequent Postings' | translate }}
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+                  <p
-            <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['journal-entries/frequent-postings']">
+                    matLine
-              {{ 'labels.text.These are predefined postings' | translate }}
+                    *ngIf="arrowBooleans[0]"
-            </p>
+                    [routerLink]="['journal-entries/frequent-postings']"
+                    class="menu-explanation"
+                  >
+                    {{ 'labels.text.These are predefined postings' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(0)"
+                  *ngIf="!arrowBooleans[0]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <div #createJournalEntries>
             <mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'">
-              <mat-icon matListIcon [routerLink]="['journal-entries/create']">
+              <div class="menu-list-item-content">
-                <fa-icon icon="plus" size="sm"></fa-icon>
+                <div class="menu-left-section" [routerLink]="['journal-entries/create']">
-              </mat-icon>
+                  <mat-icon matListIcon>
-              <h4 matLine [routerLink]="['journal-entries/create']">
+                    <fa-icon icon="plus" size="sm"></fa-icon>
-                {{ 'labels.heading.Create Journal Entries' | translate }}
+                  </mat-icon>
-              </h4>
+                  <div matLine>
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
+                    {{ 'labels.heading.Create Journal Entries' | translate }}
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+                    <p
-              <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['journal-entries/create']">
+                      matLine
-                {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
+                      *ngIf="arrowBooleans[1]"
-              </p>
+                      [routerLink]="['journal-entries/create']"
+                      class="menu-explanation"
+                    >
+                      {{ 'labels.text.Manual journal entry transactions recorded in a journal' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(1)"
+                    *ngIf="!arrowBooleans[1]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(1)"
+                    *ngIf="arrowBooleans[1]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'">
-            <mat-icon matListIcon [routerLink]="['journal-entries']">
+            <div class="menu-list-item-content">
-              <fa-icon icon="search" size="sm"></fa-icon>
+              <div class="menu-left-section" [routerLink]="['journal-entries']">
-            </mat-icon>
+                <mat-icon matListIcon>
-            <h4 matLine [routerLink]="['journal-entries']">
+                  <fa-icon icon="search" size="sm"></fa-icon>
-              {{ 'labels.heading.Search Journal Entries' | translate }}
+                </mat-icon>
-            </h4>
+                <div matLine>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
+                  {{ 'labels.heading.Search Journal Entries' | translate }}
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+                  <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']" class="menu-explanation">
-            <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['journal-entries']">
+                    {{ 'labels.text.Advanced search option for journal entries' | translate }}
-              {{ 'labels.text.Advanced search option for journal entries' | translate }}
+                  </p>
-            </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(2)"
+                  *ngIf="!arrowBooleans[2]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <div #accountsLinked>
             <mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'">
-              <mat-icon matListIcon [routerLink]="['financial-activity-mappings']">
+              <div class="menu-list-item-content">
-                <fa-icon icon="link" size="sm"></fa-icon>
+                <div class="menu-left-section" [routerLink]="['financial-activity-mappings']">
-              </mat-icon>
+                  <mat-icon matListIcon>
-              <h4 matLine [routerLink]="['financial-activity-mappings']">
+                    <fa-icon icon="link" size="sm"></fa-icon>
-                {{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}
+                  </mat-icon>
-              </h4>
+                  <div matLine>
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
+                    {{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
+                    <p
-              <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['financial-activity-mappings']">
+                      matLine
-                {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
+                      *ngIf="arrowBooleans[3]"
-              </p>
+                      [routerLink]="['financial-activity-mappings']"
+                      class="menu-explanation"
+                    >
+                      {{ 'labels.text.List of Financial Activities and GL Account Mappings' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(3)"
+                    *ngIf="!arrowBooleans[3]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(3)"
+                    *ngIf="arrowBooleans[3]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <div #migrateOpeningBalances>
             <mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'">
-              <mat-icon matListIcon [routerLink]="['migrate-opening-balances']">
+              <div class="menu-list-item-content">
-                <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
+                <div class="menu-left-section" [routerLink]="['migrate-opening-balances']">
-              </mat-icon>
+                  <mat-icon matListIcon>
-              <h4 matLine [routerLink]="['migrate-opening-balances']">
+                    <fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
-                {{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}
+                  </mat-icon>
-              </h4>
+                  <div matLine>
-              <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
+                    {{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}
-              <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
+                    <p
-              <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['migrate-opening-balances']">
+                      matLine
-                {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
+                      *ngIf="arrowBooleans[4]"
-              </p>
+                      [routerLink]="['migrate-opening-balances']"
+                      class="menu-explanation"
+                    >
+                      {{ 'labels.text.Set or update office-level opening balances for GL accounts' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(4)"
+                    *ngIf="!arrowBooleans[4]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(4)"
+                    *ngIf="arrowBooleans[4]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
         </mat-nav-list>
       </div>
 
-      <div fxFlex="50%">
+      <div class="flex-50">
         <mat-nav-list>
           <div #chartofAccounts>
             <mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'">
-              <mat-icon matListIcon [routerLink]="['chart-of-accounts']">
+              <div class="menu-list-item-content">
-                <fa-icon icon="sitemap" size="sm"></fa-icon>
+                <div class="menu-left-section" [routerLink]="['chart-of-accounts']">
-              </mat-icon>
+                  <mat-icon matListIcon>
-              <h4 matLine [routerLink]="['chart-of-accounts']">{{ 'labels.heading.Chart of Accounts' | translate }}</h4>
+                    <fa-icon icon="sitemap" size="sm"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
+                  </mat-icon>
-              <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
+                  <div matLine>
-              <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']">
+                    {{ 'labels.heading.Chart of Accounts' | translate }}
-                {{ 'labels.text.List of accounts used by the organization' | translate }}
+                    <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['chart-of-accounts']" class="menu-explanation">
-              </p>
+                      {{ 'labels.text.List of accounts used by the organization' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(5)"
+                    *ngIf="!arrowBooleans[5]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(5)"
+                    *ngIf="arrowBooleans[5]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <div #closingEntries>
             <mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'">
-              <mat-icon matListIcon [routerLink]="['closing-entries']">
+              <div class="menu-list-item-content">
-                <fa-icon icon="archive" size="sm"></fa-icon>
+                <div class="menu-left-section" [routerLink]="['closing-entries']">
-              </mat-icon>
+                  <mat-icon matListIcon>
-              <h4 matLine [routerLink]="['closing-entries']">{{ 'labels.heading.Closing Entries' | translate }}</h4>
+                    <fa-icon icon="archive" size="sm"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
+                  </mat-icon>
-              <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
+                  <div matLine>
-              <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']">
+                    {{ 'labels.heading.Closing Entries' | translate }}
-                {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
+                    <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['closing-entries']" class="menu-explanation">
-              </p>
+                      {{ 'labels.text.Journal entries made at the end of accounting period' | translate }}
+                    </p>
+                  </div>
+                </div>
+                <div class="menu-right-section">
+                  <fa-icon
+                    (click)="arrowBooleansToggle(6)"
+                    *ngIf="!arrowBooleans[6]"
+                    icon="arrow-down"
+                    size="md"
+                  ></fa-icon>
+                  <fa-icon
+                    (click)="arrowBooleansToggle(6)"
+                    *ngIf="arrowBooleans[6]"
+                    icon="arrow-up"
+                    size="md"
+                  ></fa-icon>
+                </div>
+              </div>
             </mat-list-item>
           </div>
 
           <mat-list-item *mifosxHasPermission="'READ_ACCOUNTINGRULE'">
-            <mat-icon matListIcon [routerLink]="['accounting-rules']">
+            <div class="menu-list-item-content">
-              <fa-icon icon="list" size="sm"></fa-icon>
+              <div class="menu-left-section" [routerLink]="['accounting-rules']">
-            </mat-icon>
+                <mat-icon matListIcon>
-            <h4 matLine [routerLink]="['accounting-rules']">{{ 'labels.heading.Accounting Rules' | translate }}</h4>
+                  <fa-icon icon="list" size="sm"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
+                </mat-icon>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
+                <div matLine>
-            <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']">
+                  {{ 'labels.heading.Accounting Rules' | translate }}
-              {{ 'labels.text.List of all accounting rules' | translate }}
+                  <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['accounting-rules']" class="menu-explanation">
-            </p>
+                    {{ 'labels.text.List of all accounting rules' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(7)"
+                  *ngIf="!arrowBooleans[7]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'EXECUTE_PERIODICACCRUALACCOUNTING'">
-            <mat-icon matListIcon [routerLink]="['periodic-accruals']">
+            <div class="menu-list-item-content">
-              <fa-icon icon="calendar" size="sm"></fa-icon>
+              <div class="menu-left-section" [routerLink]="['periodic-accruals']">
-            </mat-icon>
+                <mat-icon matListIcon>
-            <h4 matLine [routerLink]="['periodic-accruals']">{{ 'labels.heading.Accruals' | translate }}</h4>
+                  <fa-icon icon="calendar" size="sm"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
+                </mat-icon>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
+                <div matLine>
-            <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']">
+                  {{ 'labels.heading.Accruals' | translate }}
-              {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
+                  <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['periodic-accruals']" class="menu-explanation">
-            </p>
+                    {{ 'labels.text.Accrues income, expenses and liabilities' | translate }}
+                  </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(8)"
+                  *ngIf="!arrowBooleans[8]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
 
           <mat-list-item *mifosxHasPermission="'VIEW_PROVISIONING_ENTRIES'">
-            <mat-icon matListIcon [routerLink]="['provisioning-entries']">
+            <div class="menu-list-item-content">
-              <fa-icon icon="cogs" size="sm"></fa-icon>
+              <div class="menu-left-section" [routerLink]="['provisioning-entries']">
-            </mat-icon>
+                <mat-icon matListIcon>
-            <h4 matLine [routerLink]="['provisioning-entries']">
+                  <fa-icon icon="cogs" size="sm"></fa-icon>
-              {{ 'labels.heading.Provisioning Entries' | translate }}
+                </mat-icon>
-            </h4>
+                <div matLine>
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
+                  {{ 'labels.heading.Provisioning Entries' | translate }}
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
+                  <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']" class="menu-explanation">
-            <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['provisioning-entries']">
+                    {{ 'labels.text.Create provisioning entries' | translate }}
-              {{ 'labels.text.Create provisioning entries' | translate }}
+                  </p>
-            </p>
+                </div>
+              </div>
+              <div class="menu-right-section">
+                <fa-icon
+                  (click)="arrowBooleansToggle(9)"
+                  *ngIf="!arrowBooleans[9]"
+                  icon="arrow-down"
+                  size="md"
+                ></fa-icon>
+                <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
+              </div>
+            </div>
           </mat-list-item>
         </mat-nav-list>
       </div>
@@ -157,7 +320,7 @@
 <ng-template #templateChartofAccounts let-popover="popover">
   <h2>{{ 'labels.heading.Chart of Accounts' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.The Chart of Accounts - General Ledger Setup' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -173,7 +336,7 @@
 <ng-template #templateAccountsLinked let-popover="popover">
   <h2>{{ 'labels.heading.Accounts Linked to Financial Activities' | translate }}</h2>
   <p class="mw400">{{ 'labels.text.Accounts linked to Financial Activities' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -189,7 +352,7 @@
 <ng-template #templateMigrateOpeningBalances let-popover="popover">
   <h2>{{ 'labels.heading.Migrate Opening Balances (Office-wise)' | translate }}</h2>
   <p class="mw400">{{ 'labels.text.GLAccount Balances Application' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -205,7 +368,7 @@
 <ng-template #templateClosingEntries let-popover="popover">
   <h2>{{ 'labels.heading.Closing Entries' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Accounting to journal entries' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -221,7 +384,7 @@
 <ng-template #templateCreateJournalEntries let-popover="popover">
   <h2>{{ 'labels.heading.Create Journal Entries' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Journal Entries Transactions' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <div #buttonTreeView>
     <mat-button-toggle-group [formControl]="viewGroup">
       <mat-button-toggle value="listView">
@@ -25,8 +25,8 @@
 <!-- List View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'listView'">
-  <div #filter fxLayout="row" fxLayoutGap="20px">
+  <div #filter class="layout-row gap-20px">
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
@@ -110,14 +110,14 @@
 <!-- Tree View -->
 
 <div class="container" [hidden]="viewGroup.value !== 'treeView'">
-  <div class="m-b-20" fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
+  <div class="m-b-20 layout-row align-start gap-20px">
     <button mat-raised-button (click)="toggleExpandCollapse()">
       {{ (isTreeExpanded ? 'labels.buttons.Collapse All' : 'labels.buttons.Expand All') | translate }}
     </button>
   </div>
 
-  <div fxLayout="row" fxLayoutGap="4%" fxLayout.lt-md="column">
+  <div class="layout-row gap-4percent responsive-column">
-    <div class="mat-elevation-z8" fxFlex>
+    <div class="mat-elevation-z8 flex">
       <mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl" class="gl-account-tree">
         <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
           <li class="mat-tree-node">
@@ -151,55 +151,55 @@
       </mat-tree>
     </div>
 
-    <div fxFlex="48%" *ngIf="glAccount">
+    <div class="flex-48" *ngIf="glAccount">
       <mat-card>
         <mat-card-content>
-          <div fxLayout="row wrap" class="content">
+          <div class="layout-row-wrap">
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Account Name' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.name }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.glCode }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Account Type' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ 'labels.inputs.accounting.' + glAccount.type | translate }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Account Usage' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.usage }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.manualEntriesAllowed }}
             </div>
 
-            <div fxFlex="50%" class="header">
+            <div class="flex-50 header">
               {{ 'labels.inputs.Description' | translate }}
             </div>
 
-            <div fxFlex="50%">
+            <div class="flex-50">
               {{ glAccount.description }}
             </div>
           </div>
@@ -212,7 +212,7 @@
 <ng-template #templateButtonTreeView let-popover="popover">
   <h2>{{ 'labels.heading.Tree View' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Alternative way-Tree view' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -232,7 +232,7 @@
 <ng-template #templateButtonAddAccount let-popover="popover">
   <h2>{{ 'labels.heading.Add Account' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Create New GL Account' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -255,7 +255,7 @@
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter GL accounts.' | translate }}</h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -280,7 +280,7 @@
   <h4 class="mw300">
     {{ 'labels.heading.List of chart of all the accounts being used by your organization.' | translate }}
   </h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/chart-of-accounts/chart-of-accounts.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Chart of acocunts data resolver.
  */
 @Injectable()
-export class ChartOfAccountsResolver implements Resolve<Object> {
+export class ChartOfAccountsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/chart-of-accounts/create-gl-account/chart-of-accounts-template.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../../accounting.service';
  * Chart of accounts template data resolver.
  */
 @Injectable()
-export class ChartOfAccountsTemplateResolver implements Resolve<Object> {
+export class ChartOfAccountsTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form #accountFormRef [formGroup]="glAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
@@ -25,7 +25,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
@@ -38,7 +38,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
             <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
@@ -48,7 +48,7 @@
           </mat-form-field>
 
           <mifosx-gl-account-selector
-            fxFlex="48%"
+            class="flex-48"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -56,7 +56,7 @@
           >
           </mifosx-gl-account-selector>
 
-          <mat-form-field fxFlex="28%">
+          <mat-form-field class="flex-28">
             <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
@@ -65,20 +65,20 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="18%" class="manual-entries-allowed-wrapper">
+          <div class="manual-entries-allowed-wrapper flex-18">
             <mat-checkbox labelPosition="before" formControlName="manualEntriesAllowed" class="manual-entries-allowed">
               {{ 'labels.inputs.Manual Entries Allowed' | translate }}
             </mat-checkbox>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </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]="[cancelRoute]">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
@@ -105,7 +105,7 @@
       >{{ 'labels.inputs.Chart of Accounts' | translate }}</a
     >
   </p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="glAccountForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
             <mat-error *ngIf="glAccountForm.controls.name.hasError('required')">
@@ -25,7 +25,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Usage' | translate }}</mat-label>
             <mat-select required formControlName="usage">
               <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
@@ -38,7 +38,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.GL Code' | translate }}</mat-label>
             <input matInput required formControlName="glCode" />
             <mat-error *ngIf="glAccountForm.controls.glCode.hasError('required')">
@@ -48,7 +48,7 @@
           </mat-form-field>
 
           <mifosx-gl-account-selector
-            fxFlex="48%"
+            class="flex-48"
             [inputFormControl]="glAccountForm.controls.parentId"
             [glAccountList]="parentData"
             [required]="false"
@@ -56,7 +56,7 @@
           >
           </mifosx-gl-account-selector>
 
-          <mat-form-field fxFlex="28%">
+          <mat-form-field class="flex-28">
             <mat-label>{{ 'labels.inputs.Tag' | translate }}</mat-label>
             <mat-select formControlName="tagId">
               <mat-option *ngFor="let tag of tagData" [value]="tag.id">
@@ -65,7 +65,7 @@
             </mat-select>
           </mat-form-field>
 
-          <div fxFlex="18%" class="manual-entries-allowed-wrapper">
+          <div class="manual-entries-allowed-wrapper flex-18">
             <mat-checkbox
               labelPosition="before"
               required
@@ -76,14 +76,14 @@
             </mat-checkbox>
           </div>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </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/accounting/chart-of-accounts/gl-account-and-chart-of-accounts-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';
@@ -13,7 +13,7 @@ import { AccountingService } from '../accounting.service';
  * GL Account and chart of accounts template data resolver.
  */
 @Injectable()
-export class GlAccountAndChartOfAccountsTemplateResolver implements Resolve<Object> {
+export class GlAccountAndChartOfAccountsTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <span *mifosxHasPermission="'CREATE_GLACCOUNT'">
     <button
       mat-raised-button
@@ -38,68 +38,68 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
+      <div class="layout-row-wrap">
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ 'labels.inputs.accounting.' + glAccount.type?.value | translate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.GL Code' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccount.glCode }}
         </div>
 
-        <div fxFlex="50%" class="header" *ngIf="glAccount.parent">
+        <div class="flex-50 header" *ngIf="glAccount.parent">
           {{ 'labels.inputs.Parent Account Name' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="glAccount.parent">
+        <div class="flex-50" *ngIf="glAccount.parent">
           <a class="tab-link" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view/' + glAccount.parent.id]">
             <mifosx-gl-account-display [glAccount]="glAccount.parent"></mifosx-gl-account-display>
           </a>
         </div>
 
-        <div fxFlex="50%" class="header" *ngIf="glAccount.tagId.id">
+        <div class="flex-50 header" *ngIf="glAccount.tagId.id">
           {{ 'labels.inputs.Tag' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="glAccount.tagId.id">
+        <div class="flex-50" *ngIf="glAccount.tagId.id">
           {{ glAccount.tagId.name }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Account Usage' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccount.usage?.value }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Manual Entries Allowed' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccount.manualEntriesAllowed | yesNo }}
         </div>
 
-        <div fxFlex="50%" class="header" *ngIf="glAccount.description">
+        <div class="flex-50 header" *ngIf="glAccount.description">
           {{ 'labels.inputs.Description' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="glAccount.description">
+        <div class="flex-50" *ngIf="glAccount.description">
           {{ glAccount.description }}
         </div>
       </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" color="primary" mat-raised-button (click)="goBack()">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/accounting/closing-entries/closing-entries.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <div #buttonCreateClosure>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
@@ -7,8 +7,8 @@
   </div>
 </div>
 
-<div #filter class="container" fxLayout="row">
+<div #filter class="container layout-row">
-  <mat-form-field fxFlex>
+  <mat-form-field class="flex-fill">
     <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
@@ -60,7 +60,7 @@
 <ng-template #templateButtonCreateClosure let-popover="popover">
   <h2>{{ 'labels.heading.Create Closure' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Create new closure' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -79,7 +79,7 @@
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter closures by office.' | translate }}</h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -107,7 +107,7 @@
       'labels.inputs.Closing Entries' | translate
     }}</a>
   </h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/closing-entries/closing-entries.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Closing entries data resolver.
  */
 @Injectable()
-export class ClosingEntriesResolver implements Resolve<Object> {
+export class ClosingEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/closing-entries/closing-entry.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 { AccountingService } from '../accounting.service';
  * Closing entry data resolver.
  */
 @Injectable()
-export class ClosingEntryResolver implements Resolve<Object> {
+export class ClosingEntryResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/closing-entries/create-closure/create-closure.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
@@ -41,7 +41,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/accounting/closing-entries/edit-closure/edit-closure.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="accountingClosureForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
@@ -26,7 +26,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/accounting/closing-entries/view-closure/view-closure.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-2px responsive-column container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -12,60 +12,60 @@
 <div class="container" *ngIf="glAccountClosure">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
+      <div class="layout-row-wrap">
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Office' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.officeName }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Closure Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.closingDate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Closed By' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.createdByUsername }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Updated By' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.lastUpdatedByUsername }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Updated On' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.lastUpdatedDate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Closure Creation Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.createdDate }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Comments' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ glAccountClosure.comments }}
         </div>
       </div>

src/app/accounting/common-resolvers/accounting-rules-associations.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Accounting rules associations data resolver.
  */
 @Injectable()
-export class AccountingRulesAssociationsResolver implements Resolve<Object> {
+export class AccountingRulesAssociationsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/currencies.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Currencies data resolver.
  */
 @Injectable()
-export class CurrenciesResolver implements Resolve<Object> {
+export class CurrenciesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/gl-accounts.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * GL accounts data resolver.
  */
 @Injectable()
-export class GlAccountsResolver implements Resolve<Object> {
+export class GlAccountsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/journal-entry-transaction.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 { AccountingService } from '../accounting.service';
  * Transaction data resolver.
  */
 @Injectable()
-export class JournalEntryTransactionResolver implements Resolve<Object> {
+export class JournalEntryTransactionResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/loan-products.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Loan products data resolver.
  */
 @Injectable()
-export class LoanProductsResolver implements Resolve<Object> {
+export class LoanProductsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/offices.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Offices data resolver.
  */
 @Injectable()
-export class OfficesResolver implements Resolve<Object> {
+export class OfficesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/payment-types.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Payment types data resolver.
  */
 @Injectable()
-export class PaymentTypesResolver implements Resolve<Object> {
+export class PaymentTypesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/common-resolvers/provisioning-categories.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Provisioning categories data resolver.
  */
 @Injectable()
-export class ProvisioningCategoriesResolver implements Resolve<Object> {
+export class ProvisioningCategoriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/create-journal-entry/create-journal-entry.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="journalEntryForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div #createJournalFormRef class="layout-row-wrap responsive-column gap-2percent">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
@@ -30,15 +30,13 @@
           </mat-form-field>
 
           <div
-            fxFlexFill
+            class="flex-fill layout-row-wrap responsive-column"
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
             formArrayName="debits"
             *ngFor="let debit of debits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
               <mifosx-gl-account-selector
-                fxFlex="48%"
+                class="flex-48"
                 [inputFormControl]="debits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -46,7 +44,7 @@
               >
               </mifosx-gl-account-selector>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
@@ -55,7 +53,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -73,15 +71,13 @@
           </div>
 
           <div
-            fxFlexFill
+            class="flex-fill layout-row-wrap responsive-column"
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
             formArrayName="credits"
             *ngFor="let credit of credits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
               <mifosx-gl-account-selector
-                fxFlex="48%"
+                class="flex-48"
                 [inputFormControl]="credits.at(i).controls.glAccountId"
                 [glAccountList]="glAccountData"
                 [required]="true"
@@ -89,7 +85,7 @@
               >
               </mifosx-gl-account-selector>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
@@ -98,7 +94,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -115,12 +111,12 @@
             </div>
           </div>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
             <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
               matInput
@@ -138,7 +134,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
@@ -147,39 +143,39 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
             <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
             <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
             <input matInput formControlName="routingCode" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
             <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
             <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </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>
@@ -204,7 +200,7 @@
       'labels.inputs.Add Journal Entries' | translate
     }}</a>
   </p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/financial-activity-mappings/create-financial-activity-mapping/create-financial-activity-mapping.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
@@ -27,7 +27,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/accounting/financial-activity-mappings/create-financial-activity-mapping/financial-activity-mappings-template.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../../accounting.service';
  * Financial activity mappings template data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingsTemplateResolver implements Resolve<Object> {
+export class FinancialActivityMappingsTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/edit-financial-activity-mapping/edit-financial-activity-mapping.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="financialActivityMappingForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Financial Activity' | translate }}</mat-label>
             <mat-select required formControlName="financialActivityId">
@@ -23,7 +23,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/accounting/financial-activity-mappings/edit-financial-activity-mapping/financial-activity-mapping-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 { AccountingService } from '../../accounting.service';
  * Financial activity mapping and template data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingAndTemplateResolver implements Resolve<Object> {
+export class FinancialActivityMappingAndTemplateResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
+<div class="layout-row align-end container m-b-20">
   <div #buttonDefineMapping>
     <button
       mat-raised-button
@@ -51,7 +51,7 @@
 <ng-template #templateButtonDefineMapping let-popover="popover">
   <h2>{{ 'labels.heading.Define New Mapping' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.To define new mapping.' | translate }}</p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>
@@ -77,7 +77,7 @@
       >{{ 'labels.heading.Accounts linked to Financial Activities' | translate }}</a
     >
   </h4>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/financial-activity-mappings/financial-activity-mappings.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Financial activity mappings data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingsResolver implements Resolve<Object> {
+export class FinancialActivityMappingsResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/financial-activity-mapping.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 { AccountingService } from '../../accounting.service';
  * Financial activity mapping data resolver.
  */
 @Injectable()
-export class FinancialActivityMappingResolver implements Resolve<Object> {
+export class FinancialActivityMappingResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/financial-activity-mappings/view-financial-activity-mapping/view-financial-activity-mapping.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" class="container m-b-20">
+<div class="layout-row align-end gap-2percent container m-b-20">
   <button
     mat-raised-button
     color="primary"
@@ -22,23 +22,23 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
+      <div class="layout-row-wrap">
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Financial Activity' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           ({{ financialActivityAccount?.financialActivityData.id }})
           {{
             'labels.accounting.financialActivity.' + financialActivityAccount?.financialActivityData.name | translate
           }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Account Type' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{
             'labels.inputs.accounting.' + financialActivityAccount?.financialActivityData.mappedGLAccountType
               | translate
@@ -46,7 +46,7 @@
         </div>
 
         <mifosx-gl-account-display
-          fxFlex="100%"
+          class="flex-100"
           [glAccount]="financialActivityAccount?.glAccountData"
           [accountTitle]="'Account Name'"
         >
@@ -54,7 +54,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" color="primary" mat-raised-button [routerLink]="['../..']">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/accounting/frequent-postings/frequent-postings.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="frequentPostingsForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div class="layout-row-wrap gap-2px responsive-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Accounting Rule' | translate }}</mat-label>
             <mat-select required formControlName="accountingRule">
               <mat-option *ngFor="let accountingRule of accountingRuleData" [value]="accountingRule">
@@ -29,7 +29,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
@@ -42,17 +42,15 @@
             </mat-error>
           </mat-form-field>
 
-          <span fxFlex="48%" fxHide.lt-md></span>
+          <span class="flex-48 hide-lt-md"></span>
 
           <div
-            fxFlexFill
+            class="flex-fill layout-row-wrap responsive-column"
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
             formArrayName="debits"
             *ngFor="let debit of debits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-              <mat-form-field fxFlex="48%">
+              <mat-form-field class="flex-48">
                 <mat-label>{{ 'labels.inputs.Affected GL Entry (Debit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option *ngFor="let affectedGLEntryDebit of debitAccountData" [value]="affectedGLEntryDebit.id">
@@ -65,7 +63,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Debit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="debits.at(i).controls.amount.hasError('required')">
@@ -74,7 +72,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(debits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -92,14 +90,12 @@
           </div>
 
           <div
-            fxFlexFill
+            class="flex-fill layout-row-wrap responsive-column"
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
             formArrayName="credits"
             *ngFor="let credit of credits.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-              <mat-form-field fxFlex="48%">
+              <mat-form-field class="flex-48">
                 <mat-label>{{ 'labels.inputs.Affected GL Entry (Credit)' | translate }}</mat-label>
                 <mat-select required formControlName="glAccountId">
                   <mat-option
@@ -115,7 +111,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <mat-form-field fxFlex="43%">
+              <mat-form-field class="flex-43">
                 <mat-label>{{ 'labels.inputs.Credit Amount' | translate }}</mat-label>
                 <input type="number" matInput required formControlName="amount" />
                 <mat-error *ngIf="credits.at(i).controls.amount.hasError('required')">
@@ -124,7 +120,7 @@
                 </mat-error>
               </mat-form-field>
 
-              <span fxFlex>
+              <span class="flex-fill">
                 <button *ngIf="i !== 0" type="button" mat-icon-button (click)="removeAffectedGLEntry(credits, i)">
                   <fa-icon icon="minus-circle" size="lg"></fa-icon>
                 </button>
@@ -141,12 +137,12 @@
             </div>
           </div>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Reference Number' | translate }}</mat-label>
             <input matInput formControlName="referenceNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="transactionDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
             <input
               matInput
@@ -164,7 +160,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Payment Type' | translate }}</mat-label>
             <mat-select formControlName="paymentTypeId">
               <mat-option *ngFor="let paymentType of paymentTypeData" [value]="paymentType.id">
@@ -173,39 +169,39 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Account Number' | translate }}</mat-label>
             <input matInput formControlName="accountNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Cheque Number' | translate }}</mat-label>
             <input matInput formControlName="checkNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Routing Code' | translate }}</mat-label>
             <input matInput formControlName="routingCode" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Receipt Number' | translate }}</mat-label>
             <input matInput formControlName="receiptNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Bank Number' | translate }}</mat-label>
             <input matInput formControlName="bankNumber" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field class="flex-98">
             <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
             <textarea matInput formControlName="comments" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
         </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/accounting/migrate-opening-balances/migrate-opening-balances.component.html

@@ -3,9 +3,9 @@
   <mat-card>
     <form [formGroup]="openingBalancesForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+        <div #searchFormRef class="layout-row-wrap responsive-column gap-2px">
-          <div class="m-r-30" fxFlex="83%">
+          <div class="m-r-30 flex-83">
-            <mat-form-field fxFlex="96%">
+            <mat-form-field class="flex-96">
               <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of officeData" [value]="office.id">
@@ -19,23 +19,23 @@
             </mat-form-field>
           </div>
 
-          <div fxFlex="15%">
+          <div class="flex-15">
             <button mat-raised-button color="primary" (click)="retrieveOpeningBalances()">
               {{ 'labels.buttons.Retrieve' | translate }}
             </button>
           </div>
         </div>
 
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="openingBalancesData">
+        <div class="layout-row-wrap gap-2percent responsive-column" *ngIf="openingBalancesData">
           <mifosx-gl-account-display
-            fxFlex="100%"
+            class="flex-100"
             [accountTitle]="'Opening Balances Contra Account'"
             [glAccount]="openingBalancesData.contraAccount"
             [withTitle]="'50%'"
           >
           </mifosx-gl-account-display>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
@@ -48,7 +48,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="openingBalancesDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="openingBalancesDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Opening Balances Date' | translate }}</mat-label>
             <input
               matInput
@@ -66,40 +66,38 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" class="content" fxFlex="100%">
+          <div class="layout-row-wrap gap-2percent responsive-column flex-100 content">
-            <div class="header" fxFlex="8%">
+            <div class="header flex-8">
               {{ 'labels.inputs.Type' | translate }}
             </div>
 
-            <div class="header" fxFlex="18%">
+            <div class="header flex-18">
               {{ 'labels.inputs.GL Code' | translate }}
             </div>
 
-            <div class="header" fxFlex="18%">
+            <div class="header flex-18">
+              {{ 'labels.inputs.GL Name' | translate }}
               {{ 'labels.inputs.Account' | translate }}
             </div>
 
-            <div class="header r-amount" fxFlex="23%">
+            <div class="header r-amount flex-18">
               {{ 'labels.inputs.Total Debit' | translate }}:
               {{ debitsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
 
-            <div class="header r-amount" fxFlex="23%">
+            <div class="header r-amount flex-23">
               {{ 'labels.inputs.Total Credit' | translate }}:
               {{ creditsSum | currency: currencyCode : 'symbol-narrow' : '1.2-2' }}
             </div>
           </div>
 
           <div
-            fxFlexFill
+            class="flex-fill layout-row-wrap responsive-column content"
-            fxLayout="row wrap"
-            fxLayout.lt-md="column"
-            class="content"
             formArrayName="glAccountEntries"
             *ngFor="let credit of glAccountEntries.controls; let i = index"
           >
-            <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
+            <div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
-              <div fxFlex="8%">
+              <div class="flex-8">
                 {{
                   openingBalancesData.glAccounts[i].glAccountType.value !==
                   openingBalancesData.glAccounts[i - 1]?.glAccountType.value
@@ -108,22 +106,22 @@
                 }}
               </div>
 
-              <div fxFlex="13%">
+              <div class="flex-13">
                 {{ openingBalancesData.glAccounts[i].glAccountCode }}
               </div>
 
-              <div fxFlex="29%">
+              <div class="flex-29">
                 {{ openingBalancesData.glAccounts[i].glAccountName }}
               </div>
 
-              <div fxFlex="20%">
+              <div class="flex-20">
                 <mat-form-field>
                   <mat-label>{{ 'labels.inputs.Debit' | translate }}</mat-label>
                   <input matInput type="number" formControlName="debit" />
                 </mat-form-field>
               </div>
 
-              <div fxFlex="20%">
+              <div class="flex-20">
                 <mat-form-field>
                   <mat-label>{{ 'labels.inputs.Credit' | translate }}</mat-label>
                   <input matInput type="number" formControlName="credit" />
@@ -134,13 +132,7 @@
         </div>
       </mat-card-content>
 
-      <mat-card-actions
+      <mat-card-actions class="layout-row gap-5px align-center responsive-column" *ngIf="openingBalancesData">
-        fxLayout="row"
-        fxLayout.xs="column"
-        fxLayoutAlign="center"
-        fxLayoutGap="5px"
-        *ngIf="openingBalancesData"
-      >
         <button type="button" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Cancel' | translate }}
         </button>
@@ -167,7 +159,7 @@
       >{{ 'labels.inputs.Migrate opening balances (Office-wise)' | translate }}</a
     >
   </p>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
+  <div class="layout-row align-end gap-2px responsive-column">
     <button mat-raised-button color="warn" (click)="popover.close(); configurationWizardService.closeConfigWizard()">
       {{ 'labels.buttons.Close' | translate }}
     </button>

src/app/accounting/periodic-accruals/periodic-accruals.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="periodicAccrualsForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row">
+        <div class="layout-row">
-          <mat-form-field fxFlex (click)="tillDatePicker.open()">
+          <mat-form-field class="flex-fill" (click)="tillDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Accrue Till Date' | translate }}</mat-label>
             <input
               matInput
@@ -23,7 +23,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/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="provisioningEntryForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
-          <mat-form-field fxFlex (click)="datePicker.open()">
+          <mat-form-field class="flex-fill" (click)="datePicker.open()">
             <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
             <input
               matInput
@@ -21,7 +21,7 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex>
+          <div class="flex-fill">
             <mat-checkbox labelPosition="before" formControlName="createjournalentries">
               {{ 'labels.inputs.Create Journal Entries' | translate }}
             </mat-checkbox>
@@ -29,7 +29,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/accounting/provisioning-entries/provisioning-entries.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+<div class="container m-b-20 layout-row align-end gap-20px">
   <button
     mat-raised-button
     color="primary"
@@ -11,8 +11,8 @@
 </div>
 
 <div class="container">
-  <div fxLayout="row">
+  <div class="layout-row">
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>

src/app/accounting/provisioning-entries/provisioning-entries.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { AccountingService } from '../accounting.service';
  * Provisioning entries data resolver.
  */
 @Injectable()
-export class ProvisioningEntriesResolver implements Resolve<Object> {
+export class ProvisioningEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry-entries.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 { AccountingService } from '../../accounting.service';
  * Provisioning entry entries data resolver.
  */
 @Injectable()
-export class ProvisioningEntryEntriesResolver implements Resolve<Object> {
+export class ProvisioningEntryEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-entry/provisioning-entry.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 { AccountingService } from '../../accounting.service';
  * Provisioning entry data resolver.
  */
 @Injectable()
-export class ProvisioningEntryResolver implements Resolve<Object> {
+export class ProvisioningEntryResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-entry/view-provisioning-entry.component.html

@@ -1,5 +1,5 @@
 <div class="container" *ngIf="provisioningEntry">
-  <div class="m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+  <div class="m-b-20 layout-row align-end gap-20px">
     <button
       mat-raised-button
       color="primary"
@@ -14,28 +14,27 @@
 
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content" fxLayout.lt-md="column">
+      <div class="layout-row-wrap responsive-column content">
-        <div fxFlex="16%" class="header">
+        <div class="flex-16 header">
           {{ 'labels.inputs.Created By' | translate }}
         </div>
-
+        <div class="flex-16">
-        <div fxFlex="16%">
           {{ provisioningEntry.createdUser }}
         </div>
 
-        <div fxFlex="16%" class="header">
+        <div class="flex-16 header">
           {{ 'labels.inputs.Created On' | translate }}
         </div>
 
-        <div fxFlex="16%">
+        <div class="flex-16">
           {{ provisioningEntry.createdDate }}
         </div>
 
-        <div fxFlex="18%" class="header">
+        <div class="flex-18 header">
           {{ 'labels.inputs.Amount to be Reserved' | translate }}
         </div>
 
-        <div fxFlex="18%">
+        <div class="flex-18">
           {{ provisioningEntry.reservedAmount }}
         </div>
       </div>
@@ -44,18 +43,18 @@
 </div>
 
 <!-- Search -->
-<div class="container m-t-20" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+<div class="container m-t-20 layout-row-wrap responsive-column gap-2percent">
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Loan Product' | translate }}</mat-label>
     <input matInput [formControl]="loanProduct" [matAutocomplete]="loanProductAutocomplete" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Provisioning Category' | translate }}</mat-label>
     <input matInput [formControl]="provisioningCategory" [matAutocomplete]="provisioningCategoryAutocomplete" />
   </mat-form-field>

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/provisioning-journal-entries.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 { AccountingService } from '../../accounting.service';
  * Provisioning journal entries data resolver.
  */
 @Injectable()
-export class ProvisioningJournalEntriesResolver implements Resolve<Object> {
+export class ProvisioningJournalEntriesResolver {
   /**
    * @param {AccountingService} accountingService Accounting service.
    */

src/app/accounting/provisioning-entries/view-provisioning-journal-entries/view-provisioning-journal-entries.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <div fxLayout="row" fxLayoutGap="20px">
+  <div class="layout-row gap-20px">
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>

src/app/accounting/revert-transaction/revert-transaction.component.html

@@ -2,7 +2,7 @@
   <h1 mat-dialog-title>{{ 'labels.heading.Revert Transaction' | translate }}</h1>
   <div mat-dialog-content>
     <p>{{ 'labels.text.Revert this transaction?' | translate }}</p>
-    <mat-form-field fxFlexFill>
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Comments' | translate }}</mat-label>
       <textarea matInput [formControl]="comments"></textarea>
     </mat-form-field>

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -1,11 +1,11 @@
-<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+<div class="container layout-row-wrap gap-2px responsive-column">
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
     <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
   </mat-form-field>
 
   <mifosx-gl-account-selector
-    fxFlex="31%"
+    class="flex-31"
     [inputFormControl]="glAccount"
     [glAccountList]="glAccountData"
     [required]="true"
@@ -13,7 +13,7 @@
   >
   </mifosx-gl-account-selector>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
     <mat-select [formControl]="entryTypeFilter" (selectionChange)="applyFilter($event.value, 'manualEntriesOnly')">
       <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
@@ -22,7 +22,7 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="transactionDateFromPicker.open()">
+  <mat-form-field class="flex-31" (click)="transactionDateFromPicker.open()">
     <mat-label>{{ 'labels.inputs.Transaction Date From' | translate }}</mat-label>
     <input
       matInput
@@ -35,7 +35,7 @@
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="transactionDateToPicker.open()">
+  <mat-form-field class="flex-31" (click)="transactionDateToPicker.open()">
     <mat-label>{{ 'labels.inputs.Transaction Date To' | translate }}</mat-label>
     <input
       matInput
@@ -48,12 +48,12 @@
     <mat-datepicker #transactionDateToPicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Transaction ID' | translate }}</mat-label>
     <input matInput [formControl]="transactionId" />
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="submittedOnDateFromPicker.open()">
+  <mat-form-field class="flex-31" (click)="submittedOnDateFromPicker.open()">
     <mat-label>{{ 'labels.inputs.Submitted on Date From' | translate }}</mat-label>
     <input
       matInput
@@ -65,7 +65,7 @@
     <mat-datepicker #submittedOnDateFromPicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="submittedOnDateToPicker.open()">
+  <mat-form-field class="flex-31" (click)="submittedOnDateToPicker.open()">
     <mat-label>{{ 'labels.inputs.Submitted on Date To' | translate }} </mat-label>
     <input
       matInput

src/app/centers/centers-view/center-actions/activate-center/activate-center.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="activateCenterForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <mat-form-field fxFlex (click)="activationDatePicker.open()">
+        <mat-form-field class="flex-fill" (click)="activationDatePicker.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/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="centerMeetingForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Meeting Start Date' | translate }}</mat-label>
             <input
@@ -66,12 +66,12 @@
         </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>
         <button mat-raised-button color="primary" [disabled]="!centerMeetingForm.valid" (click)="submit()">
-          {{"labels.buttons.Submit | translate}}
+          {{ 'labels.buttons.Submit' | translate }}
         </button>
       </mat-card-actions>
     </form>

src/app/centers/centers-view/center-actions/center-assign-staff/center-assign-staff.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <form [formGroup]="centerAssignStaffForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of staffData" [value]="staff.id">
@@ -18,7 +18,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/centers/centers-view/center-actions/center-attendance/center-attendance.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-  <mat-card fxLayout="column" fxLayoutGap="3%">
+  <mat-card class="layout-column gap-3percent">
-    <mat-form-field fxFlex>
+    <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Meeting Date' | translate }}</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
@@ -37,7 +37,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
 
-    <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/centers/centers-view/center-actions/close-center/close-center.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="closeCenterForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field (click)="closureDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
             <input
@@ -21,7 +21,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
@@ -36,7 +36,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/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="centerEditMeetingScheduleForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
             <mat-select formControlName="presentMeetingDate">
@@ -36,7 +36,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/centers/centers-view/center-actions/edit-center-meeting/edit-center-meeting.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end">
+<div class="container m-b-20 layout-row align-end">
   <button mat-raised-button color="primary" (click)="editSchedule()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit Schedule' | translate }}
@@ -9,7 +9,7 @@
   <mat-card>
     <form [formGroup]="centerEditMeetingForm">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
@@ -72,7 +72,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/centers/centers-view/center-actions/manage-groups/manage-groups.component.html

@@ -1,6 +1,6 @@
-<div class="container" fxLayout="row" fxLayoutGap="3%">
+<div class="container layout-row gap-3percent">
-  <mat-card fxFlex class="group-card" fxLayout="column" fxLayoutGap="2%">
+  <mat-card class="group-card flex-fill layout-column gap-2percent">
-    <mat-form-field fxFlex="30%">
+    <mat-form-field class="flex-30">
       <mat-label>{{ 'labels.inputs.Add Groups' | translate }}</mat-label>
       <input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete" />
     </mat-form-field>
@@ -33,13 +33,13 @@
     </div>
   </mat-card>
 
-  <mat-card fxFlex="40%">
+  <mat-card class="flex-40">
     <h3 matSubheader>{{ 'labels.heading.Group Members' | translate }}</h3>
 
     <mat-nav-list *ngIf="groupMembers?.length">
       <div mat-list-item *ngFor="let group of groupMembers; index as i">
         <span matLine class="p-t-10">{{ group.name }}</span>
-        <div fxFlex></div>
+        <div class="flex-fill"></div>
         <button mat-icon-button color="warn" (click)="removeGroup(i, group)">
           <fa-icon icon="trash"></fa-icon>
         </button>

src/app/centers/centers-view/centers-view.component.html

@@ -1,5 +1,5 @@
 <mat-card class="center-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>
@@ -8,7 +8,7 @@
       </div>
       <div class="mat-typography center-card-title">
         <mat-card-title>
-          <h3 fxFlex="95%">
+          <h3 class="flex-95">
             <i
               class="fa fa-stop"
               matTooltip="{{ centerViewData.status.value }}"
@@ -16,7 +16,7 @@
             ></i>
             <b>{{ 'labels.heading.Center Name' | translate }} :</b> {{ centerViewData.name }}
           </h3>
-          <div fxFlex="5%" *ngIf="!(centerViewData.status.value === 'Closed')">
+          <div class="flex-5" *ngIf="!(centerViewData.status.value === 'Closed')">
             <button mat-icon-button [matMenuTriggerFor]="centerMenu" aria-label="Center actions" yPosition="below">
               <mat-icon matListIcon class="actions-menu">
                 <fa-icon icon="bars" size="sm"></fa-icon>
@@ -25,8 +25,8 @@
           </div>
         </mat-card-title>
         <mat-card-subtitle>
-          <div fxLayout="row" fxLayout.lt-md="column">
+          <div class="layout-row responsive-column">
-            <div fxFlex="50%">
+            <div class="flex-50">
               <p>
                 {{ 'labels.inputs.Account' | translate }} #:{{ centerViewData.accountNo }} <br />
                 {{ 'labels.inputs.Office' | translate }}: {{ centerViewData.officeName }} <br />
@@ -43,7 +43,7 @@
                 }}<br />
               </p>
             </div>
-            <div fxFlex="45%" class="center-meeting" fxLayoutAlign="start start">
+            <div class="center-meeting flex-45 align-start-start">
               <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
                 <p>
                   {{ 'labels.inputs.Next Meeting on' | translate }}:
@@ -140,7 +140,7 @@
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-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']"
@@ -173,6 +173,8 @@
         </a>
       </span>
     </nav>
-    <router-outlet></router-outlet>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
   </mat-card-content>
 </mat-card>

src/app/centers/centers-view/general-tab/general-tab.component.html

@@ -3,7 +3,7 @@
     <h3 class="closedCenter">{{ 'labels.heading.Center Closed' | translate }}</h3>
   </div>
   <h3>{{ 'labels.heading.Summary Details' | translate }}</h3>
-  <div fxLayout="row" fxLayoutGap="32px" class="summary-details-container">
+  <div class="layout-row gap-32px summary-details-container">
     <p>
       {{ 'labels.inputs.Active Clients' | translate }}: {{ centerSummaryData.activeClients }}<br />
       {{ 'labels.inputs.Active Group Loans' | translate }}: {{ centerSummaryData.activeGroupLoans }}<br />

src/app/centers/centers-view/notes-tab/notes-tab.component.html

@@ -4,12 +4,10 @@
     <form
       #formRef="ngForm"
       [formGroup]="noteForm"
-      fxLayout="row"
+      class="layout-row align-start-baseline gap-20px"
-      fxLayoutAlign="start baseline"
-      fxLayoutGap="20px"
       (ngSubmit)="submit()"
     >
-      <mat-form-field fxFlex="calc(90%-20px)">
+      <mat-form-field class="flex-90-minus-20px">
         <textarea
           formControlName="note"
           matInput
@@ -18,7 +16,7 @@
       </mat-form-field>
       <button
         mat-raised-button
-        fxFlex
+        class="flex-fill"
         color="primary"
         [disabled]="!noteForm.valid"
         *mifosxHasPermission="'CREATE_GROUPNOTE'"
@@ -36,7 +34,7 @@
         ><br />
         <span>{{ 'labels.inputs.Date' | translate }}: {{ centerNote.createdOn | dateFormat }}</span>
       </p>
-      <div fxLayout="row" fxLayoutAlign="flex-start">
+      <div class="layout-row align-start">
         <button mat-button color="primary" (click)="editNote(centerNote.id, centerNote.note, i)">
           <fa-icon icon="edit"></fa-icon>
         </button>

src/app/centers/centers.component.html

@@ -1,5 +1,5 @@
 <mat-card class="container">
-  <div fxLayout="row" fxLayoutAlign="start center">
+  <div class="layout-row align-start-center">
     <div class="search-box">
       <mat-form-field>
         <input matInput placeholder="Search by Name" [formControl]="name" />
@@ -11,7 +11,7 @@
         {{ 'labels.inputs.Show Closed Centers' | translate }}
       </mat-checkbox>
     </div>
-    <div class="action-button" fxLayoutGap="25px">
+    <div class="action-button gap-25px">
       <button
         mat-raised-button
         color="primary"

src/app/centers/centers.component.ts

@@ -1,6 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
+
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { UntypedFormControl } from '@angular/forms';

src/app/centers/centers.module.ts

@@ -25,6 +25,13 @@ import { EditCenterMeetingScheduleComponent } from './centers-view/center-action
 import { ManageGroupsComponent } from './centers-view/center-actions/manage-groups/manage-groups.component';
 import { StaffAssignmentHistoryComponent } from './centers-view/center-actions/staff-assignment-history/staff-assignment-history.component';
 import { EditCenterComponent } from './edit-center/edit-center.component';
+import { CenterViewResolver } from './common-resolvers/center-view.resolver';
+import { CenterDatatablesResolver } from './common-resolvers/center-datatables.resolver';
+import { CenterDatatableResolver } from './common-resolvers/center-datatable.resolver';
+import { CenterSummaryResolver } from './common-resolvers/center-summary.resolver';
+import { CenterResourceResolver } from './common-resolvers/center-resource.resolver';
+import { SavingsAccountResolver } from './common-resolvers/savings-account.resolver';
+import { CenterNotesResolver } from './common-resolvers/center-notes.resolver';
 
 /**
  * Centers Module
@@ -56,6 +63,15 @@ import { EditCenterComponent } from './edit-center/edit-center.component';
     ManageGroupsComponent,
     StaffAssignmentHistoryComponent,
     EditCenterComponent
+  ],
+  providers: [
+    CenterViewResolver,
+    CenterDatatableResolver,
+    CenterDatatablesResolver,
+    CenterSummaryResolver,
+    CenterResourceResolver,
+    SavingsAccountResolver,
+    CenterNotesResolver
   ]
 })
 export class CentersModule {}

src/app/centers/common-resolvers/center-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 { CentersService } from '../centers.service';
  * Group Actions data resolver.
  */
 @Injectable()
-export class CenterActionsResolver implements Resolve<Object> {
+export class CenterActionsResolver {
   /**
    * @param {CentersService} centersService Savings service.
    */

src/app/centers/common-resolvers/center-data-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 { CentersService } from '../centers.service';
  * Centers data and template resolver.
  */
 @Injectable()
-export class CenterDataAndTemplateResolver implements Resolve<Object> {
+export class CenterDataAndTemplateResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-datatable.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 { CentersService } from '../centers.service';
  * Centers notes data resolver.
  */
 @Injectable()
-export class CenterDatatableResolver implements Resolve<Object> {
+export class CenterDatatableResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-datatables.resolver.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { Resolve } from '@angular/router';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -12,7 +11,7 @@ import { CentersService } from '../centers.service';
  * center datatables resolver.
  */
 @Injectable()
-export class CenterDatatablesResolver implements Resolve<Object> {
+export class CenterDatatablesResolver {
   /**
    * @param {centersService} centersService centers service.
    */

src/app/centers/common-resolvers/center-notes.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 { CentersService } from '../centers.service';
  * Centers notes data resolver.
  */
 @Injectable()
-export class CenterNotesResolver implements Resolve<Object> {
+export class CenterNotesResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-resource.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 { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class CenterResourceResolver implements Resolve<Object> {
+export class CenterResourceResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-summary.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 { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class CenterSummaryResolver implements Resolve<Object> {
+export class CenterSummaryResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/center-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 { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class CenterViewResolver implements Resolve<Object> {
+export class CenterViewResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */

src/app/centers/common-resolvers/savings-account.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 { CentersService } from '../centers.service';
  * Centers data resolver.
  */
 @Injectable()
-export class SavingsAccountResolver implements Resolve<Object> {
+export class SavingsAccountResolver {
   /**
    * @param {CentersService} CentersService Centers service.
    */