Upgrade to Angular 16

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

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography" *ngIf="checkerData">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <div class="search-box" fxFlex="40%">
-      <mat-form-field fxFlex="90%">
+  <div class="layout-row align-start-center">
+    <div class="search-box flex-40">
+      <mat-form-field class="flex-fill flex-90">
         <input
           matInput
           placeholder="{{ 'labels.text.Search by user' | translate }}"
@@ -9,7 +9,7 @@
         />
       </mat-form-field>
     </div>
-    <div fxFlex="60%" fxLayoutGap="0.5rem">
+    <div class="flex-60 gap-8px">
       <button mat-raised-button color="success" (click)="approveChecker()">
         <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
       </button>
@@ -23,8 +23,8 @@
   </div>
 
   <form [formGroup]="makerCheckerSearchForm">
-    <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-      <mat-form-field fxFlex="31%" (click)="makerDateTimeFromPicker.open()">
+    <div class="layout-row-wrap gap-2px responsive-column">
+      <mat-form-field class="flex-fill flex-31" (click)="makerDateTimeFromPicker.open()">
         <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
         <input
           matInput
@@ -37,7 +37,7 @@
         <mat-datepicker #makerDateTimeFromPicker></mat-datepicker>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%" (click)="makerDateTimetoPicker.open()">
+      <mat-form-field class="flex-fill flex-31" (click)="makerDateTimetoPicker.open()">
         <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
         <input
           matInput
@@ -50,7 +50,7 @@
         <mat-datepicker #makerDateTimetoPicker></mat-datepicker>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field class="flex-31">
         <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
         <mat-select formControlName="actionName">
           <mat-option *ngFor="let action of makerCheckerTemplate.actionNames" [value]="action">
@@ -59,7 +59,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field class="flex-31">
         <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
         <mat-select formControlName="entityName">
           <mat-option *ngFor="let entity of makerCheckerTemplate.entityNames" [value]="entity">
@@ -68,7 +68,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field class="flex-31">
         <mat-label>{{ 'labels.inputs.Resource ID' | translate }}</mat-label>
         <input matInput formControlName="resourceId" />
       </mat-form-field>

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.scss

@@ -32,11 +32,11 @@
   background-color: #e8f4fd;
   padding: 6px 16px;
   font-size: 0.875rem;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
   font-weight: 400;
   line-height: 1.43;
   border-radius: 4px;
-  letter-spacing: 0.0107em;
+  letter-spacing: normal;
   margin: 10px;
 
   .message {

src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography" *ngIf="showData">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <div class="search-box" fxFlex="40%">
-      <mat-form-field fxFlex="90%">
+  <div class="layout-row align-start-center">
+    <div class="search-box flex-40">
+      <mat-form-field class="flex-fill flex-90">
         <input
           matInput
           placeholder="{{ 'labels.text.Filter by name' | translate }}"
@@ -9,7 +9,7 @@
         />
       </mat-form-field>
     </div>
-    <div fxFlex="60%">
+    <div class="flex-60">
       <button mat-raised-button color="success" *mifosxHasPermission="'ACTIVATE_CLIENT'" (click)="approveClients()">
         <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
       </button>

src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.scss

@@ -16,11 +16,11 @@
   background-color: #e8f4fd;
   padding: 6px 16px;
   font-size: 0.875rem;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
   font-weight: 400;
   line-height: 1.43;
   border-radius: 4px;
-  letter-spacing: 0.0107em;
+  letter-spacing: normal;
   margin: 10px;
 
   .message {

src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography" *ngIf="showData">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <div class="search-box" fxFlex="40%">
-      <mat-form-field fxFlex="90%">
+  <div class="layout-row align-start-center">
+    <div class="search-box flex-40">
+      <mat-form-field class="flex-fill flex-90">
         <input
           matInput
           placeholder="{{ 'labels.text.Filter by name' | translate }}"
@@ -9,7 +9,7 @@
         />
       </mat-form-field>
     </div>
-    <div fxFlex="60%">
+    <div class="flex-60">
       <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="approveLoan()">
         <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
       </button>

src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.scss

@@ -16,11 +16,11 @@
   background-color: #e8f4fd;
   padding: 6px 16px;
   font-size: 0.875rem;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
   font-weight: 400;
   line-height: 1.43;
   border-radius: 4px;
-  letter-spacing: 0.0107em;
+  letter-spacing: normal;
   margin: 10px;
 
   .message {

src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography" *ngIf="loans && loans.length > 0">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <div class="search-box" fxFlex="40%">
-      <mat-form-field fxFlex="90%">
+  <div class="layout-row align-start-center">
+    <div class="search-box flex-40">
+      <mat-form-field class="flex-fill flex-90">
         <input
           matInput
           placeholder="{{ 'labels.text.Filter by name' | translate }}"
@@ -9,7 +9,7 @@
         />
       </mat-form-field>
     </div>
-    <div fxFlex="60%">
+    <div class="flex-60">
       <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="disburseLoan()">
         <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.menus.Disburse' | translate }}
       </button>

src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.scss

@@ -16,11 +16,11 @@
   background-color: #e8f4fd;
   padding: 6px 16px;
   font-size: 0.875rem;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
   font-weight: 400;
   line-height: 1.43;
   border-radius: 4px;
-  letter-spacing: 0.0107em;
+  letter-spacing: normal;
   margin: 10px;
 
   .message {

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography" *ngIf="loans && loans.length > 0">
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <div class="search-box" fxFlex="40%">
-      <mat-form-field fxFlex="90%">
+  <div class="layout-row align-start-center">
+    <div class="search-box flex-40">
+      <mat-form-field class="flex-90">
         <input
           matInput
           placeholder="{{ 'labels.text.Filter by name' | translate }}"
@@ -9,7 +9,7 @@
         />
       </mat-form-field>
     </div>
-    <div fxFlex="60%">
+    <div class="flex-60">
       <button
         mat-raised-button
         color="success"

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.scss

@@ -16,11 +16,11 @@
   background-color: #e8f4fd;
   padding: 6px 16px;
   font-size: 0.875rem;
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
   font-weight: 400;
   line-height: 1.43;
   border-radius: 4px;
-  letter-spacing: 0.0107em;
+  letter-spacing: normal;
   margin: 10px;
 
   .message {

src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html

@@ -1,7 +1,7 @@
 <div class="container">
   <mat-card class="tasks-card">
     <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]="['./checker-inbox']"
@@ -54,7 +54,9 @@
         </a>
       </nav>
 
-      <router-outlet></router-outlet>
+      <mat-tab-nav-panel #tabPanel>
+        <router-outlet></router-outlet>
+      </mat-tab-nav-panel>
     </mat-card-content>
   </mat-card>
 </div>

src/app/tasks/common-resolvers/getCheckerInboxDetail.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 { TasksService } from '../tasks.service';
  * Checker Inbox Detail resolver.
  */
 @Injectable()
-export class GetCheckerInboxDetailResolver implements Resolve<Object> {
+export class GetCheckerInboxDetailResolver {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/common-resolvers/getGroupedClientsData.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 { TasksService } from '../tasks.service';
  * Grouped Client Data data resolver.
  */
 @Injectable()
-export class GetGroupedClientsData implements Resolve<Object> {
+export class GetGroupedClientsData {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/common-resolvers/getLoansToBeApproved.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 { TasksService } from '../tasks.service';
  * Loans data resolver.
  */
 @Injectable()
-export class GetLoansToBeApproved implements Resolve<Object> {
+export class GetLoansToBeApproved {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/common-resolvers/getLoansToBeDisbursed.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 { TasksService } from '../tasks.service';
  * Loans data resolver.
  */
 @Injectable()
-export class GetLoansToBeDisbursed implements Resolve<Object> {
+export class GetLoansToBeDisbursed {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/common-resolvers/getOffices.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 { TasksService } from '../tasks.service';
  * Offices data resolver.
  */
 @Injectable()
-export class GetOffices implements Resolve<Object> {
+export class GetOffices {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/common-resolvers/getRescheduleLoans.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 { TasksService } from '../tasks.service';
  * Pending Reschedule Loans data resolver.
  */
 @Injectable()
-export class GetRescheduleLoans implements Resolve<Object> {
+export class GetRescheduleLoans {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/common-resolvers/getmakercheckers.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 { TasksService } from '../tasks.service';
  * Maker Checker Data data resolver.
  */
 @Injectable()
-export class GetMakerCheckers implements Resolve<Object> {
+export class GetMakerCheckers {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/common-resolvers/makerCheckerTemplate.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 { TasksService } from '../tasks.service';
  * Maker Checker Template resolver.
  */
 @Injectable()
-export class MakerCheckerTemplate implements Resolve<Object> {
+export class MakerCheckerTemplate {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/tasks/view-checker-inbox/view-checker-inbox.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="1%" fxLayout.lt-md="column" class="container m-b-20">
+<div class="layout-row align-end gap-1percent layout-lt-md-column container m-b-20">
   <button mat-raised-button color="success" (click)="approveChecker()">
     <fa-icon icon="check" class="m-r-10"></fa-icon>{{ 'labels.buttons.Approve' | translate }}
   </button>
@@ -13,74 +13,74 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" fxLayout.lt-md="column">
-        <h2 class="mat-h2" fxFlexFill>{{ 'labels.heading.View Checker Inbox' | translate }}</h2>
+      <div class="layout-row-wrap responsive-column">
+        <h2 class="mat-h2 flex-fill">{{ 'labels.heading.View Checker Inbox' | translate }}</h2>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
+        <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
 
         <mat-divider [inset]="true"></mat-divider>
 
-        <div fxFlexFill>
-          <span fxFlex="40%">{{ 'labels.inputs.ID' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.id }}</span>
+        <div class="flex-fill">
+          <span class="flex-40">{{ 'labels.inputs.ID' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.id }}</span>
         </div>
 
-        <div fxFlexFill>
-          <span fxFlex="40%">{{ 'labels.inputs.Status' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.processingResult }}</span>
+        <div class="flex-fill">
+          <span class="flex-40">{{ 'labels.inputs.Status' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.processingResult }}</span>
         </div>
 
-        <div fxFlexFill>
-          <span fxFlex="40%">{{ 'labels.inputs.User' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.maker }}</span>
+        <div class="flex-fill">
+          <span class="flex-40">{{ 'labels.inputs.User' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.maker }}</span>
         </div>
 
-        <div fxFlexFill>
-          <span fxFlex="40%">{{ 'labels.inputs.Action' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.actionName }}</span>
+        <div class="flex-fill">
+          <span class="flex-40">{{ 'labels.inputs.Action' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.actionName }}</span>
         </div>
 
-        <div fxFlexFill>
-          <span fxFlex="40%">{{ 'labels.inputs.Entity' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.entityName }}</span>
+        <div class="flex-fill">
+          <span class="flex-40">{{ 'labels.inputs.Entity' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.entityName }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="checkerInboxDetail.resourceId">
-          <span fxFlex="40%">{{ 'labels.inputs.Resource ID' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.resourceId }}</span>
+        <div class="flex-fill" *ngIf="checkerInboxDetail.resourceId">
+          <span class="flex-40">{{ 'labels.inputs.Resource ID' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.resourceId }}</span>
         </div>
 
-        <div fxFlexFill>
-          <span fxFlex="40%">{{ 'labels.inputs.Date' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.madeOnDate | dateFormat }}</span>
+        <div class="flex-fill">
+          <span class="flex-40">{{ 'labels.inputs.Date' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.madeOnDate | dateFormat }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="checkerInboxDetail.officeName">
-          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.officeName }}</span>
+        <div class="flex-fill" *ngIf="checkerInboxDetail.officeName">
+          <span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.officeName }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="checkerInboxDetail.savingsAccountNo">
-          <span fxFlex="40%">{{ 'labels.inputs.Savings Account Number' | translate }}:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.savingsAccountNo }}</span>
+        <div class="flex-fill" *ngIf="checkerInboxDetail.savingsAccountNo">
+          <span class="flex-40">{{ 'labels.inputs.Savings Account Number' | translate }}:</span>
+          <span class="flex-60">{{ checkerInboxDetail.savingsAccountNo }}</span>
         </div>
 
-        <div fxFlexFill *ngIf="checkerInboxDetail.groupLevelName">
-          <span fxFlex="40%"> {{ checkerInboxDetail.groupLevelName }}</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.groupName }}</span>
+        <div class="flex-fill" *ngIf="checkerInboxDetail.groupLevelName">
+          <span class="flex-40"> {{ checkerInboxDetail.groupLevelName }}</span>
+          <span class="flex-60">{{ checkerInboxDetail.groupName }}</span>
         </div>
 
         <ng-container *ngIf="displayJSONData">
-          <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Command' | translate }}</h3>
+          <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Command' | translate }}</h3>
 
           <mat-divider [inset]="true"></mat-divider>
 
           <ng-container *ngFor="let json of jsondata | keyvalue">
-            <div fxFlexFill>
-              <span fxFlex="40%">{{ json.key }}:</span>
-              <span fxFlex="60%">{{ json.value }}</span>
+            <div class="flex-fill">
+              <span class="flex-40">{{ json.key }}:</span>
+              <span class="flex-60">{{ json.value }}</span>
             </div>
           </ng-container>
         </ng-container>