Upgrade to Angular 16

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

src/app/organization/sms-campaigns/common-resolvers/sms-campaign-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';
  * SMS Campaign Template resolver.
  */
 @Injectable()
-export class SmsCampaignTemplateResolver implements Resolve<Object> {
+export class SmsCampaignTemplateResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/sms-campaigns/common-resolvers/sms-campaign.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 'app/organization/organization.service';
  * SMS Campaign data resolver.
  */
 @Injectable()
-export class SmsCampaignResolver implements Resolve<Object> {
+export class SmsCampaignResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/sms-campaigns/common-resolvers/sms-campaigns.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';
  * SMS Campaigns data resolver.
  */
 @Injectable()
-export class SmsCampaignsResolver implements Resolve<Object> {
+export class SmsCampaignsResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-message-step/campaign-message-step.component.html

@@ -1,12 +1,12 @@
-<div fxLayout="column">
-  <mat-form-field fxFlex="98%">
+<div class="layout-column">
+  <mat-form-field class="flex-98">
     <mat-label>{{ 'labels.inputs.Campaign Message' | translate }}</mat-label>
     <textarea matInput [formControl]="message"></textarea>
   </mat-form-field>
 
-  <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Template Parameters' | translate }}</h3>
+  <h3 class="mat-h3 flex-98">{{ 'labels.heading.Template Parameters' | translate }}</h3>
 
-  <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+  <div class="layout-row-wrap layout-xs-column layout-align-center">
     <button
       mat-stroked-button
       color="primary"
@@ -18,7 +18,7 @@
     </button>
   </div>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Previous' | translate }}

src/app/organization/sms-campaigns/sms-campaign-stepper/campaign-preview-step/campaign-preview-step.component.html

@@ -17,13 +17,13 @@
       {{ campaign.editFlag ? campaign.reportName : campaign.paramValue?.reportName }}
     </mat-list-item>
 
-    <div fxLayout="column" fxLayoutGap="10px" class="template-message">
+    <div class="layout-column gap-10px template-message">
       <h3>{{ 'labels.heading.Campaign Message' | translate }} :</h3>
       <textarea matInput disabled>{{ campaign.editFlag ? editedCampaignMessage : campaign.message }}</textarea>
     </div>
   </mat-list>
 
-  <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+  <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button [routerLink]="['../']">
       {{ 'labels.buttons.Cancel' | translate }}
     </button>

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html

@@ -1,13 +1,13 @@
-<div fxLayout="column">
-  <mat-divider fxFlex="98%"></mat-divider>
+<div class="layout-column">
+  <mat-divider class="flex-98"></mat-divider>
 
-  <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Business Rule Parameters' | translate }}</h3>
+  <h3 class="mat-h3 flex-98">{{ 'labels.heading.Business Rule Parameters' | translate }}</h3>
 
   <form [formGroup]="ReportForm">
-    <div fxLayout="row wrap" fxLayoutGap="2%">
+    <div class="layout-row-wrap gap-2percent">
       <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
         <ng-container *ngIf="ReportForm.controls[param.name]">
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'text'">
+          <mat-form-field class="flex-48" *ngSwitchCase="'text'">
             <mat-label>{{ param.label }}</mat-label>
             <input matInput required [formControlName]="param.name" />
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
+          <mat-form-field class="flex-48" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
             <mat-label>{{ param.label }}</mat-label>
             <input
               matInput
@@ -34,7 +34,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'select'">
+          <mat-form-field class="flex-48" *ngSwitchCase="'select'">
             <mat-label>{{ param.label }}</mat-label>
             <mat-select required [formControlName]="param.name" [compareWith]="compareOptions">
               <mat-option *ngFor="let option of param.selectOptions" [value]="option">
@@ -52,7 +52,7 @@
   </form>
 </div>
 
-<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
+<div class="layout-row responsive-column align-center gap-2px margin-t">
   <button mat-raised-button matStepperPrevious disabled>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Previous' | translate }}

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-sms-campaign-step.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="smsCampaignDetailsForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Campaign Name' | translate }}</mat-label>
       <input matInput formControlName="campaignName" required />
       <mat-error>
@@ -9,7 +9,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
+    <mat-form-field class="flex-48" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
       <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
       <mat-select formControlName="providerId">
         <mat-option *ngFor="let provider of smsProviders" [value]="provider.id">
@@ -18,7 +18,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Trigger Type' | translate }}</mat-label>
       <mat-select formControlName="triggerType" required>
         <mat-option *ngFor="let triggerType of triggerTypes" [value]="triggerType.id">
@@ -31,12 +31,12 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox labelPosition="before" formControlName="isNotification" fxFlex="48%">
+    <mat-checkbox labelPosition="before" formControlName="isNotification" class="flex-48">
       {{ 'labels.inputs.Is Notification' | translate }}?
     </mat-checkbox>
 
     <mat-form-field
-      fxFlex="48%"
+      class="flex-48"
       *ngIf="smsCampaignDetailsForm.controls.recurrenceStartDate"
       (click)="recurrenceStartDatePicker.open()"
     >
@@ -57,7 +57,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Business Rule' | translate }}</mat-label>
       <mat-select formControlName="runReportId" required>
         <mat-option *ngFor="let rule of businessRules" [value]="rule.reportId">

src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.html

@@ -1,13 +1,13 @@
-<div fxLayout="column">
-  <mat-divider fxFlex="98%"></mat-divider>
+<div class="layout-column">
+  <mat-divider class="flex-98"></mat-divider>
 
-  <h3 fxFlex="98%" class="mat-h3">{{ 'labels.heading.Business Rule Parameters' | translate }}</h3>
+  <h3 class="mat-h3 flex-98">{{ 'labels.heading.Business Rule Parameters' | translate }}</h3>
 
   <form [formGroup]="ReportForm">
-    <div fxLayout="row wrap" fxLayoutGap="2%">
+    <div class="layout-row-wrap gap-2percent">
       <ng-container *ngFor="let param of paramData" [ngSwitch]="param.displayType">
         <ng-container *ngIf="ReportForm.contains(param.name)">
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'text'">
+          <mat-form-field class="flex-48" *ngSwitchCase="'text'">
             <mat-label>{{ param.label }}</mat-label>
             <input matInput required [formControlName]="param.name" />
             <mat-error *ngIf="ReportForm.controls[param.name].hasError('required')">
@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
+          <mat-form-field class="flex-48" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
             <mat-label>{{ param.label }}</mat-label>
             <input
               matInput
@@ -34,7 +34,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'select'">
+          <mat-form-field class="flex-48" *ngSwitchCase="'select'">
             <mat-label>{{ param.label }}</mat-label>
             <mat-select required [formControlName]="param.name">
               <mat-option *ngFor="let option of param.selectOptions" [value]="option">
@@ -52,7 +52,7 @@
   </form>
 </div>
 
-<div class="margin-t" fxLayoutAlign="center">
+<div class="layout-align-center margin-t">
   <button
     mat-raised-button
     matStepperNext

src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="smsCampaignDetailsForm">
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
-    <mat-form-field fxFlex="48%">
+  <div class="layout-row-wrap gap-2percent responsive-column align-start-center">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Campaign Name' | translate }}</mat-label>
       <input matInput formControlName="campaignName" required />
       <mat-error>
@@ -9,7 +9,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
+    <mat-form-field class="flex-48" *ngIf="!smsCampaignDetailsForm.controls.isNotification.value">
       <mat-label>{{ 'labels.inputs.SMS Provider' | translate }}</mat-label>
       <mat-select formControlName="providerId">
         <mat-option *ngFor="let provider of smsProviders" [value]="provider.id">
@@ -18,7 +18,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Trigger Type' | translate }}</mat-label>
       <mat-select formControlName="triggerType" required>
         <mat-option *ngFor="let triggerType of triggerTypes" [value]="triggerType.id">
@@ -31,12 +31,12 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox labelPosition="before" formControlName="isNotification" fxFlex="48%">
+    <mat-checkbox labelPosition="before" formControlName="isNotification" class="flex-48">
       {{ 'labels.inputs.Is Notification' | translate }}?
     </mat-checkbox>
 
     <mat-form-field
-      fxFlex="48%"
+      class="flex-48"
       *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')"
       (click)="recurrenceStartDatePicker.open()"
     >
@@ -57,7 +57,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.contains('frequency')">
+    <mat-form-field class="flex-48" *ngIf="smsCampaignDetailsForm.contains('frequency')">
       <mat-label>{{ 'labels.inputs.Repeats' | translate }}</mat-label>
       <mat-select formControlName="frequency" required>
         <mat-option [value]="1">{{ 'labels.inputs.Daily' | translate }}</mat-option>
@@ -71,7 +71,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.contains('interval')">
+    <mat-form-field class="flex-48" *ngIf="smsCampaignDetailsForm.contains('interval')">
       <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
       <mat-select formControlName="interval" required>
         <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
@@ -84,7 +84,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.contains('repeatsOnDay')">
+    <mat-form-field class="flex-48" *ngIf="smsCampaignDetailsForm.contains('repeatsOnDay')">
       <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
       <mat-select formControlName="repeatsOnDay" required>
         <mat-option value="1">{{ 'labels.inputs.Monday' | translate }}</mat-option>
@@ -101,7 +101,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Business Rule' | translate }}</mat-label>
       <mat-select formControlName="runReportId" required>
         <mat-option *ngFor="let rule of businessRules" [value]="rule.reportId">
@@ -116,11 +116,7 @@
   </div>
 
   <div
-    fxLayout="row"
-    class="margin-t"
-    fxLayout.xs="column"
-    fxLayoutAlign="center"
-    fxLayoutGap="2%"
+    class="layout-row layout-xs-column layout-align-center margin-t gap-2percent"
     *ngIf="!smsCampaignDetailsForm.controls.runReportId.value"
   >
     <button mat-raised-button matStepperPrevious disabled>

src/app/organization/sms-campaigns/sms-campaigns.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_SMSCAMPAIGN'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Create SMS Campaign' | translate }}
@@ -6,8 +6,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/sms-campaigns/view-campaign/view-campaign.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="flex-end" class="action-buttons m-b-20">
+  <div class="layout-row align-flex-end action-buttons m-b-20 gap-1percent">
     <span *ngIf="smsCampaignData.campaignStatus.value !== 'active'">
       <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_SMSCAMPAIGN'" [routerLink]="['edit']">
         <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
@@ -74,7 +74,7 @@
                 {{ 'labels.inputs.Recurrence' | translate }} : {{ smsCampaignData.recurrence }}
               </mat-list-item>
 
-              <div fxLayout="column" fxLayoutGap="10px" class="template-message">
+              <div class="layout-column gap-10px template-message">
                 <h3>{{ 'labels.heading.Template Message' | translate }} :</h3>
                 <textarea matInput disabled>{{ smsCampaignData.campaignMessage }}</textarea>
               </div>
@@ -85,7 +85,7 @@
         <mat-tab *ngFor="let tab of smsTabs" [label]="tab.label">
           <div class="tab-content mat-typography">
             <form [formGroup]="smsForm" (ngSubmit)="search()">
-              <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
+              <div class="layout-row layout-align-center gap-3percent">
                 <mat-form-field (click)="fromDatePicker.open()">
                   <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
                   <input