Upgrade to Angular 16

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

src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
+<div class="container m-b-20 space-top layout-row layout-row gap-20px">
   <div #cobCatchUpStatus>
     <h2 class="no-m">
       {{ 'labels.heading.COB Catch-Up is' | translate }}:<span class="m-l-20 m-r-20">{{

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html

@@ -1,11 +1,11 @@
 <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="Filter by loan Id or error" (keyup)="applyFilter($event.target.value)" />
       </mat-form-field>
     </div>
-    <div fxFlex="60%" *ngIf="allowRunInlineJob">
+    <div class="flex-60" *ngIf="allowRunInlineJob">
       <button mat-raised-button color="success" *mifosxHasPermission="'EXECUTE_INLINE_JOB'" (click)="runInlineCOB()">
         <fa-icon icon="play" class="m-r-10"></fa-icon>{{ 'Start inline COB' | translate }}
       </button>

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
+import { Router, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
 import { TasksService } from 'app/tasks/tasks.service';
 import { Observable, of } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
-export class LoanLockedResolver implements Resolve<boolean> {
+export class LoanLockedResolver {
   /**
    * @param {TasksService} tasksService Tasks service.
    */

src/app/system/manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="jobForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
             <input matInput required formControlName="displayName" />
@@ -26,7 +26,7 @@
           </mat-checkbox>
         </div>
 
-        <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/system/manage-jobs/scheduler-jobs/manage-scheduler-job.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 { SystemService } from '../../system.service';
  * Edit Scheduler Job data resolver.
  */
 @Injectable()
-export class ManageSchedulerJobResolver implements Resolve<Object> {
+export class ManageSchedulerJobResolver {
   /**
    * @param {SystemService} systemService System service.
    */

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
+<div class="container m-b-20 space-top layout-row gap-20px">
   <div #schedulerStatus>
     <h2 class="no-m">
       {{ 'labels.heading.Scheduler Status' | translate }}:<span class="m-l-20 m-r-20">{{
@@ -17,14 +17,14 @@
 </div>
 
 <div class="container">
-  <div #filter fxLayout="row" fxLayoutGap="20px">
-    <mat-form-field fxFlex>
+  <div #filter 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>
   </div>
 
-  <div class="space-top" fxLayout="row" fxLayoutGap="20px">
+  <div class="space-top layout-row gap-20percent">
     <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="play" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Run Selected Jobs' | translate }}
@@ -152,7 +152,7 @@
   </div>
 </div>
 
-<div class="container space-top" fxLayout="row" fxLayoutGap="20px">
+<div class="container space-top layout-row gap-20percent">
   <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Run Selected Jobs' | translate }}
@@ -165,7 +165,7 @@
 
 <ng-template #templateSchedulerStatus let-data let-popover="popover">
   <h4>{{ 'labels.heading.Scheduler status' | 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>
@@ -184,7 +184,7 @@
 
 <ng-template #templateFilter let-data let-popover="popover">
   <h4>{{ 'labels.heading.Search bar to filter jobs' | 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>
@@ -212,7 +212,7 @@
       'labels.heading.Schedular Jobs' | 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/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html

@@ -1,6 +1,6 @@
 <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 By Version' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
@@ -72,7 +72,7 @@
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
-    <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+    <div class="layout-row layout-align-center gap-2percent layout-lt-md-column">
       <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.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, forkJoin } from 'rxjs';
@@ -12,7 +12,7 @@ import { SystemService } from '../../../system.service';
  * View History Scheduler Jobs data resolver.
  */
 @Injectable()
-export class ViewHistorySchedulerJobsResolver implements Resolve<Object> {
+export class ViewHistorySchedulerJobsResolver {
   /**
    * @param {SystemService} systemService System service.
    */

src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
+<div class="container m-b-20 layout-row layout-lt-md-column align-end gap-2percent">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -11,34 +11,34 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="mat-body-strong">
+      <div class="layout-row-wrap">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Job Name' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ jobData.displayName }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Cron Expression' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ jobData.cronExpression }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">{{ 'labels.inputs.Is Active Job' | translate }}?</div>
+        <div class="flex-50 mat-body-strong">{{ 'labels.inputs.Is Active Job' | translate }}?</div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ jobData.active | yesNo }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Follow' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           <a href="http://www.cronmaker.com/">
             {{ 'labels.text.Click Here To Generate Cron Expression' | translate }}
           </a>
@@ -47,7 +47,7 @@
     </mat-card-content>
 
     <mat-card-actions>
-      <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">
+      <div class="layout-row layout-align-center gap-2percent column-on-mobile">
         <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
           {{ 'labels.buttons.Back' | translate }}
         </button>

src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.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 { SystemService } from '../../../system.service';
  * Selected Scheduler Jobs data resolver.
  */
 @Injectable()
-export class ViewSchedulerJobResolver implements Resolve<Object> {
+export class ViewSchedulerJobResolver {
   /**
    * @param {SystemService} systemService System service.
    */

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html

@@ -1,5 +1,5 @@
-<div class="container space-top" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-  <mat-form-field fxFlex="31%">
+<div class="container space-top layout-row-wrap gap-2percent layout-lt-md-column">
+  <mat-form-field class="flex-31">
     <mat-label>{{ 'labels.inputs.Job Name' | translate }}</mat-label>
     <mat-select [formControl]="jobName" (selectionChange)="getWorkflowJobSteps($event.value)">
       <mat-option *ngFor="let job of jobNameOptions" [value]="job">
@@ -8,7 +8,7 @@
     </mat-select>
   </mat-form-field>
 
-  <div class="action-button" fxLayoutGap="25px" *ngIf="jobStepName">
+  <div class="action-button gap-25percent" *ngIf="jobStepName">
     <button mat-raised-button color="primary" (click)="addJobStep()">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate }}
     </button>
@@ -56,11 +56,7 @@
 
   <div
     *ngIf="stepOrderHasChanged"
-    fxLayout="row"
-    class="container margin-t space-top"
-    fxLayout.xs="column"
-    fxLayoutAlign="center"
-    fxLayoutGap="2%"
+    class="container margin-t space-top layout-row gap-2percent layout-align-center layout-column-xs"
   >
     <button mat-raised-button [routerLink]="['../']">
       {{ 'labels.buttons.Cancel' | translate }}

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.resolver.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { SystemService } from 'app/system/system.service';
 import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
-export class WorkflowJobResolver implements Resolve<boolean> {
+export class WorkflowJobResolver {
   /**
    * @param {SystemService} systemService System service.
    */