Upgrade to Angular 16

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

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">
-          <mat-form-field fxFlex (click)="datePicker.open()">
+        <div class="layout-column">
+          <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">
-    <mat-form-field fxFlex>
+  <div class="layout-row">
+    <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 fxFlex="16%" class="header">
+      <div class="layout-row-wrap responsive-column content">
+        <div class="flex-16 header">
           {{ 'labels.inputs.Created By' | translate }}
         </div>
-
-        <div fxFlex="16%">
+        <div class="flex-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">
-  <mat-form-field fxFlex="31%">
+<div class="container m-t-20 layout-row-wrap responsive-column gap-2percent">
+  <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">
-    <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>