Upgrade to Angular 16

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

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-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 { OrganizationService } from '../../organization.service';
  * Provisioning criteria and template resolver.
  */
 @Injectable()
-export class LoanProvisioningCriteriaAndTemplateResolver implements Resolve<Object> {
+export class LoanProvisioningCriteriaAndTemplateResolver {
   /**
    * @param {OrganizationService} organizationService Products service.
    */

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria-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 { OrganizationService } from '../../organization.service';
  * Provisioning criteria template resolver.
  */
 @Injectable()
-export class LoanProvisioningCriteriaTemplateResolver implements Resolve<Object> {
+export class LoanProvisioningCriteriaTemplateResolver {
   /**
    * @param {OrganizationService} organizationService Products service.
    */

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criteria.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 { OrganizationService } from '../../organization.service';
  * Loan Provisioning Criteria data resolver.
  */
 @Injectable()
-export class LoanProvisioningCriteriaResolver implements Resolve<Object> {
+export class LoanProvisioningCriteriaResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/loan-provisioning-criteria/common-resolvers/loan-provisioning-criterias.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 { OrganizationService } from '../../organization.service';
  * Charges data resolver.
  */
 @Injectable()
-export class LoanProvisioningCriteriasResolver implements Resolve<Object> {
+export class LoanProvisioningCriteriasResolver {
   /**
    * @param {OrganizationService} organizationService Products service.
    */

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <div>
       <form [formGroup]="provisioningCriteriaForm">
-        <div fxLayout="row" fxLayoutGap="2%">
-          <mat-form-field fxFlex>
+        <div class="layout-row gap-2percent">
+          <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName" />
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
@@ -12,7 +12,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" multiple>
               <mat-option *ngFor="let product of loanProvisioningCriteriaTemplate.loanProducts" [value]="product">
@@ -81,7 +81,7 @@
       </table>
     </div>
 
-    <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
+    <div class="m-t-20 layout-row layout-align-center gap-20px">
       <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
       <button
         mat-raised-button

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html

@@ -2,8 +2,8 @@
   <mat-card>
     <div>
       <form [formGroup]="provisioningCriteriaForm">
-        <div fxLayout="row" fxLayoutGap="2%">
-          <mat-form-field fxFlex>
+        <div class="layout-row gap-2percent">
+          <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName" />
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
@@ -12,7 +12,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex>
+          <mat-form-field class="flex-fill">
             <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
               <mat-option *ngFor="let product of loanProducts" [value]="product">
@@ -84,7 +84,7 @@
       </table>
     </div>
 
-    <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
+    <div class="m-t-20 layout-row layout-align-center gap-20px">
       <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
       <button
         mat-raised-button

src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.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" fxLayoutGap="20px">
-    <mat-form-field fxFlex>
+  <div class="layout-row gap-20px">
+    <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/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.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_CRITERIA'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -12,13 +12,13 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <h2 class="mat-h2" fxFlexFill>{{ provisioningData.criteriaName }}</h2>
+      <div class="layout-row-wrap">
+        <h2 class="mat-h2 flex-fill">{{ provisioningData.criteriaName }}</h2>
         <mat-divider [inset]="true"></mat-divider>
 
-        <div fxFlexFill class="loanProduct">
-          <span fxFlex="40%">{{ 'labels.inputs.Loan Product' | translate }}:</span>
-          <span fxFlex="60%">{{ loanProducts }}</span>
+        <div class="loanProduct flex-fill">
+          <span class="flex-40">{{ 'labels.inputs.Loan Product' | translate }}:</span>
+          <span class="flex-60">{{ loanProducts }}</span>
         </div>
       </div>