Upgrade to Angular 16

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

src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html

@@ -2,28 +2,28 @@
   <mat-card>
     <form [formGroup]="allocateCashForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required formControlName="office" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="tellerName" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <input matInput required formControlName="cashier" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
             <input matInput formControlName="assignmentPeriod" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="cashDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
             <input
               matInput
@@ -41,7 +41,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of cashierData.currencyOptions" [value]="currency.code">
@@ -54,7 +54,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input matInput required formControlName="txnAmount" />
             <mat-error *ngIf="allocateCashForm.controls.txnAmount.hasError('required')">
@@ -63,7 +63,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
             <input matInput required formControlName="txnNote" />
             <mat-error *ngIf="allocateCashForm.controls.txnNote.hasError('required')">
@@ -74,7 +74,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/organization/tellers/cashiers/cashiers.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/tellers/cashiers/create-cashier/create-cashier.component.html

@@ -2,18 +2,18 @@
   <mat-card>
     <form [formGroup]="createCashierForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierTemplate.officeName" disabled />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierTemplate.tellerName" disabled />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of cashierTemplate.staffOptions" [value]="staff.id">
@@ -26,12 +26,12 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
             <input matInput autofocus formControlName="description" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
             <input
               matInput
@@ -49,7 +49,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
             <input
               matInput
@@ -67,7 +67,7 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex="48%" class="space">
+          <div class="space flex-48">
             <mat-checkbox labelPosition="before" formControlName="isFullDay">
               {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
@@ -75,7 +75,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/organization/tellers/cashiers/edit-cashier/edit-cashier.component.html

@@ -2,18 +2,18 @@
   <mat-card>
     <form [formGroup]="editCashierForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierData.template.officeName" disabled />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required autofocus [value]="cashierData.data.tellerName" disabled />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" *ngIf="isStaffId">
+          <mat-form-field class="flex-48" *ngIf="isStaffId">
             <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId">
               <mat-option *ngFor="let staff of cashierData.template.staffOptions" [value]="staff.id">
@@ -22,7 +22,7 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" *ngIf="!isStaffId">
+          <mat-form-field class="flex-48" *ngIf="!isStaffId">
             <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <mat-select formControlName="staffId" *ngIf="!isStaffId">
               <mat-option [value]="cashierData.data.staffId">
@@ -31,12 +31,12 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Description/Notes' | translate }}</mat-label>
             <input matInput autofocus formControlName="description" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="fromDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="fromDatePicker.open()">
             <mat-label>{{ 'labels.inputs.From' | translate }}</mat-label>
             <input
               matInput
@@ -54,7 +54,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="toDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="toDatePicker.open()">
             <mat-label>{{ 'labels.inputs.To' | translate }}</mat-label>
             <input
               matInput
@@ -72,7 +72,7 @@
             </mat-error>
           </mat-form-field>
 
-          <div fxFlex="48%" class="space">
+          <div class="space flex-48">
             <mat-checkbox labelPosition="before" formControlName="isFullDay">
               {{ 'labels.inputs.Full Day' | translate }}?
             </mat-checkbox>
@@ -80,7 +80,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/organization/tellers/cashiers/settle-cash/settle-cash.component.html

@@ -2,28 +2,28 @@
   <mat-card>
     <form [formGroup]="settleCashForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
-          <mat-form-field fxFlex="48%">
+        <div class="layout-row-wrap gap-2px responsive-column">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <input matInput required formControlName="office" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="tellerName" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Cashier' | translate }}</mat-label>
             <input matInput required formControlName="cashier" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Assignment Period' | translate }}</mat-label>
             <input matInput formControlName="assignmentPeriod" />
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
+          <mat-form-field class="flex-48" (click)="cashDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Date' | translate }}</mat-label>
             <input
               matInput
@@ -41,7 +41,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
             <mat-select required formControlName="currencyCode">
               <mat-option *ngFor="let currency of cashierData.currencyOptions" [value]="currency.code">
@@ -54,7 +54,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
             <input matInput required formControlName="txnAmount" />
             <mat-error *ngIf="settleCashForm.controls.txnAmount.hasError('required')">
@@ -63,7 +63,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Notes/Comments' | translate }}</mat-label>
             <input matInput required formControlName="txnNote" />
             <mat-error *ngIf="settleCashForm.controls.txnNote.hasError('required')">
@@ -74,7 +74,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/organization/tellers/cashiers/transactions/transactions.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="row" fxLayoutGap="1%" fxLayoutAlign="end" class="container m-b-20">
+<div class="layout-row gap-1percent layout-align-end container m-b-20">
   <button
     mat-raised-button
     color="primary"
@@ -22,47 +22,45 @@
 <div class="container m-b-20" *ngIf="cashierData">
   <mat-card class="mat-elevation-z8">
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+      <div class="layout-row-wrap">
+        <div class="flex-25 header">
           {{ 'labels.inputs.Branch' | translate }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%">
+        <div class="flex-25">
           {{ cashierData.officeName }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+        <div class="flex-25 header">
           {{ 'labels.inputs.Teller' | translate }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%">
+        <div class="flex-25">
           {{ cashierData.tellerName }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+        <div class="flex-25 header">
           {{ 'labels.inputs.Cashier' | translate }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%">
+        <div class="flex-25">
           {{ cashierData.cashierName }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
+        <div class="flex-25 header">
           {{ 'labels.inputs.Net Cash' | translate }}
         </div>
 
-        <div fxFlex="25%" fxFlex.lt-md="50%">
-          {{ cashierData.netCash | formatNumber }} [{{ currencySelector.value }}]
-        </div>
+        <div class="flex-25">{{ cashierData.netCash | formatNumber }} [{{ currencySelector.value }}]</div>
       </div>
     </mat-card-content>
   </mat-card>
 </div>
 
 <div class="container">
-  <mat-card fxLayout="column" fxLayoutGap="2%" class="mat-elevation-z8">
-    <div fxLayout="row" fxLayoutGap="2%">
-      <mat-form-field fxFlex>
+  <mat-card class="layout-column gap-2percent mat-elevation-z8">
+    <div class="layout-row gap-2percent">
+      <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/tellers/cashiers/view-cashier/view-cashier.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_CASHIER'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -12,58 +12,58 @@
 <div class="container">
   <mat-card>
     <mat-card-content>
-      <div fxLayout="row wrap" class="content">
-        <div fxFlex="50%" class="header">
+      <div class="layout-row-wrap">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Name' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ cashierData.staffName }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Teller' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ cashierData.tellerName }}
         </div>
 
-        <div fxFlex="50%" class="header" *ngIf="cashierData.description !== ''">
+        <div class="flex-50 header" *ngIf="cashierData.description !== ''">
           {{ 'labels.inputs.Description' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="cashierData.description !== ''">
+        <div class="flex-50" *ngIf="cashierData.description !== ''">
           {{ cashierData.description }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Start Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ cashierData.startDate | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.End Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ cashierData.endDate | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="header">
+        <div class="flex-50 header">
           {{ 'labels.inputs.Full Day/Time' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ cashierData.isFullDay }}
         </div>
       </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" color="primary" mat-raised-button [routerLink]="['..']">
         {{ 'labels.buttons.Back' | translate }}
       </button>

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

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

src/app/organization/tellers/common-resolvers/edit-cashier.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';
  * Cashier Template resolver.
  */
 @Injectable()
-export class EditCashierResolver implements Resolve<Object> {
+export class EditCashierResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

src/app/organization/tellers/common-resolvers/teller-transaction-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 'app/organization/organization.service';
  * Cashier transaction data resolver.
  */
 @Injectable()
-export class CashierTransactionTemplateResolver implements Resolve<Object> {
+export class CashierTransactionTemplateResolver {
   /**
    * @param {OrganizationService} organizationService Organization service.
    */

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

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

src/app/organization/tellers/create-teller/create-teller.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="tellerForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -80,7 +80,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/organization/tellers/edit-teller/edit-teller.component.html

@@ -2,7 +2,7 @@
   <mat-card>
     <form [formGroup]="tellerForm" (ngSubmit)="submit()">
       <mat-card-content>
-        <div fxLayout="column">
+        <div class="layout-column">
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Teller Name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
@@ -76,7 +76,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/organization/tellers/tellers.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_TELLER'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Create Teller' | 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/tellers/view-teller/view-teller.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_TELLER'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Edit' | translate }}
@@ -12,52 +12,52 @@
 <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.Teller Name' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ tellerData.name }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Office' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ tellerData.officeName }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="tellerData.description">
+        <div class="flex-50 mat-body-strong" *ngIf="tellerData.description">
           {{ 'labels.inputs.Description' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="tellerData.description">
+        <div class="flex-50" *ngIf="tellerData.description">
           {{ tellerData.description }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Start Date' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ tellerData.startDate | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong" *ngIf="tellerData.endDate">
+        <div class="flex-50 mat-body-strong" *ngIf="tellerData.endDate">
           {{ 'labels.inputs.End Date' | translate }}
         </div>
 
-        <div fxFlex="50%" *ngIf="tellerData.endDate">
+        <div class="flex-50" *ngIf="tellerData.endDate">
           {{ tellerData.endDate | dateFormat }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Status' | translate }}
         </div>
 
-        <div fxFlex="50%">
+        <div class="flex-50">
           {{ tellerData.status | titlecase }}
         </div>
       </div>