build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.

src/app/shared/account-number/account-number.component.html

@@ -1,8 +1,12 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
   <span class="m-l-5" *ngIf="accountType">
-    <a href="{{getAccountLink()}}">{{ accountNo }}</a>
+    <a href="{{ getAccountLink() }}">{{ accountNo }}</a>
   </span>
   <span class="m-l-5" *ngIf="!accountType">{{ accountNo }}</span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
 </span>

src/app/shared/accounting/gl-account-display/gl-account-display.component.html

@@ -1,13 +1,13 @@
 <span *ngIf="accountTitle">
-  <div fxFlex="{{withTitle}}" class="header">
-    {{'labels.inputs.' + accountTitle | translate}}
+  <div fxFlex="{{ withTitle }}" class="header">
+    {{ 'labels.inputs.' + accountTitle | translate }}
   </div>
 
-  <div fxFlex="{{withAccount}}">
-    {{glAccountValue()}}
+  <div fxFlex="{{ withAccount }}">
+    {{ glAccountValue() }}
   </div>
 </span>
 
 <div fxFlex="100%" *ngIf="!accountTitle">
-  {{glAccountValue()}}
+  {{ glAccountValue() }}
 </div>

src/app/shared/accounting/gl-account-selector/gl-account-selector.component.html

@@ -1,5 +1,5 @@
 <mat-form-field fxFlex="100%" *ngIf="required">
-  <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
 
   <mat-select required [formControl]="inputFormControl">
     <mat-option>
@@ -10,18 +10,21 @@
     </mat-option>
   </mat-select>
   <mat-error *ngIf="inputFormControl.hasError('required')">
-    {{"labels.inputs.Account"| translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
+    {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
+    <strong>{{ 'labels.commons.required' | translate }}</strong>
   </mat-error>
 </mat-form-field>
 
 <mat-form-field fxFlex="100%" *ngIf="!required">
-  <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
 
   <mat-select [formControl]="inputFormControl">
     <mat-option>
-      <ngx-mat-select-search [formControl]="filterFormCtrl"
-        placeholderLabel="{{placeHolderLabel}}"
-        noEntriesFoundLabel="{{noEntriesFoundLabel}}">
+      <ngx-mat-select-search
+        [formControl]="filterFormCtrl"
+        placeholderLabel="{{ placeHolderLabel }}"
+        noEntriesFoundLabel="{{ noEntriesFoundLabel }}"
+      >
       </ngx-mat-select-search>
     </mat-option>
     <mat-option *ngFor="let glAccount of glAccountData | async" [value]="glAccount.id">

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html

@@ -1,8 +1,12 @@
 <div *ngIf="isJournalEntryLoaded">
-
   <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
-    <button mat-raised-button color="primary" (click)="revertTransaction()"
-      *mifosxHasPermission="'REVERSE_JOURNALENTRY'" [disabled]="dataSource?.data[0].reversed">
+    <button
+      mat-raised-button
+      color="primary"
+      (click)="revertTransaction()"
+      *mifosxHasPermission="'REVERSE_JOURNALENTRY'"
+      [disabled]="dataSource?.data[0].reversed"
+    >
       <span *ngIf="!dataSource.data[0].reversed">
         <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Revert Transaction' | translate }}
       </span>
@@ -11,13 +15,9 @@
   </div>
 
   <div class="container m-b-20" *ngIf="isViewTransaction()">
-
     <mat-card class="mat-elevation-z8" *ngIf="dataSource">
-
       <mat-card-content>
-
         <div fxLayout="row wrap" class="content">
-
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
             {{ 'labels.inputs.Office' | translate }}
           </div>
@@ -49,65 +49,77 @@
           <div fxFlex="25%" fxFlex.lt-md="50%">
             {{ dataSource.data[0].submittedOnDate | datetimeFormat }}
           </div>
-
         </div>
-
       </mat-card-content>
-
     </mat-card>
-
   </div>
 
   <div class="mat-elevation-z8 container" fxLayoutAlign="center" fxLayout="row wrap">
-
     <table mat-table [dataSource]="dataSource" matSort>
-
       <ng-container matColumnDef="id">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Entry ID' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountType">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Type' | translate }}</th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountType.value }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountCode">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Code' |
-          translate }} </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Account Code' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountCode }}</td>
       </ng-container>
 
       <ng-container matColumnDef="glAccountName">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Name' |
-          translate }} </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Account Name' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">{{ transaction.glAccountName }}</td>
       </ng-container>
 
       <ng-container matColumnDef="debit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{
-            (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
-          </span></td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Debit' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">
+          <span *ngIf="transaction.entryType.value === 'DEBIT'">
+            {{ transaction.currency.displaySymbol || transaction.currency.code }}
+            {{ transaction.amount | formatNumber }}
+          </span>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="credit">
-        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }}</th>
-        <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{
-            (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }}
-          </span></td>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header>
+          {{ 'labels.inputs.Credit' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let transaction">
+          <span *ngIf="transaction.entryType.value === 'CREDIT'">
+            {{ transaction.currency.displaySymbol || transaction.currency.code }}
+            {{ transaction.amount | formatNumber }}
+          </span>
+        </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="viewJournalEntry(row)" class="select-row"></tr>
-
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        (click)="viewJournalEntry(row)"
+        class="select-row"
+      ></tr>
     </table>
 
     <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
-      <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate
-        }}</button>
+      <button type="button" color="primary" mat-raised-button (click)="goBack()">
+        {{ 'labels.buttons.Back' | translate }}
+      </button>
     </div>
-
   </div>
 </div>
 
@@ -115,12 +127,13 @@
   <div class="alert">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      {{"labels.text.No data found" | translate}}
+      {{ 'labels.text.No data found' | translate }}
     </div>
   </div>
 
   <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
-    <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate
-      }}</button>
+    <button type="button" color="primary" mat-raised-button (click)="goBack()">
+      {{ 'labels.buttons.Back' | translate }}
+    </button>
   </div>
 </div>

src/app/shared/accounting/view-journal-entry/view-journal-entry.component.html

@@ -1,9 +1,7 @@
 <h1 mat-dialog-title>{{ 'labels.heading.View Journal Entry' | translate }}</h1>
 
 <div mat-dialog-content>
-
   <table>
-
     <tr>
       <th>{{ 'labels.inputs.Office' | translate }}</th>
       <td>{{ data.journalEntry.officeName }}</td>
@@ -44,9 +42,7 @@
         <span *ngIf="data.journalEntry.entryType.value === 'CREDIT'">{{ 'labels.inputs.Credit' | translate }}</span>
         <span *ngIf="data.journalEntry.entryType.value === 'DEBIT'">{{ 'labels.inputs.Debit' | translate }}</span>
       </th>
-      <td>
-        {{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | formatNumber }}
-      </td>
+      <td>{{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | formatNumber }}</td>
     </tr>
 
     <tr>
@@ -107,9 +103,7 @@
       <th>{{ 'labels.inputs.Submitted on' | translate }}</th>
       <td>{{ data.journalEntry.submittedOnDate | datetimeFormat }}</td>
     </tr>
-
   </table>
-
 </div>
 
 <mat-dialog-actions align="end">

src/app/shared/accounting/view-savings-accounting-details/view-savings-accounting-details.component.html

@@ -1,59 +1,114 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
+  <div fxFlexFill fxFlex="98%" *ngIf="accountingRule" fxLayout="row wrap" fxLayout.lt-md="column">
+    <span fxFlex="40%">{{ 'labels.inputs.Type' | translate }}:</span>
+    <span fxFlex="60%">{{ 'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate }}</span>
+  </div>
 
-    <div fxFlexFill fxFlex="98%" *ngIf="accountingRule" fxLayout="row wrap" fxLayout.lt-md="column">
-        <span fxFlex="40%">{{'labels.inputs.Type' | translate}}:</span>
-        <span fxFlex="60%">{{'labels.accounting.' + getAccountingRuleName(accountingRule.value) | translate}}</span>
-    </div>
+  <div fxFlexFill *ngIf="isCashOrAccrualAccounting()" fxLayout="row wrap" fxLayout.lt-md="column">
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Assets' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Saving reference'"
+      [glAccount]="accountingMappings.savingsReferenceAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Overdraft portfolio'"
+      *ngIf="accountingMappings.overdraftPortfolioControl"
+      [glAccount]="accountingMappings.overdraftPortfolioControl"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Fees Receivable'"
+      *ngIf="isAccrualAccounting()"
+      [glAccount]="accountingMappings.feeReceivableAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Penalties Receivable'"
+      *ngIf="isAccrualAccounting()"
+      [glAccount]="accountingMappings.penaltyReceivableAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
 
-    <div fxFlexFill *ngIf="isCashOrAccrualAccounting()" fxLayout="row wrap" fxLayout.lt-md="column">
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Liabilities' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Saving control'"
+      [glAccount]="accountingMappings.savingsControlAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Savings transfers in suspense'"
+      [glAccount]="accountingMappings.transfersInSuspenseAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Interest Payable'"
+      *ngIf="isAccrualAccounting()"
+      [glAccount]="accountingMappings.interestPayableAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Escheat liability'"
+      *ngIf="accountingMappings.escheatLiabilityAccount"
+      [glAccount]="accountingMappings.escheatLiabilityAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
 
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Assets' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Saving reference'"
-            [glAccount]="accountingMappings.savingsReferenceAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Overdraft portfolio'" *ngIf="accountingMappings.overdraftPortfolioControl"
-            [glAccount]="accountingMappings.overdraftPortfolioControl" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Fees Receivable'" *ngIf="isAccrualAccounting()"
-            [glAccount]="accountingMappings.feeReceivableAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Penalties Receivable'" *ngIf="isAccrualAccounting()"
-            [glAccount]="accountingMappings.penaltyReceivableAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Income' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from fees'"
+      [glAccount]="accountingMappings.incomeFromFeeAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from penalties'"
+      [glAccount]="accountingMappings.incomeFromPenaltyAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Income from Interest'"
+      *ngIf="accountingMappings.incomeFromInterest"
+      [glAccount]="accountingMappings.incomeFromInterest"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
 
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Liabilities' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Saving control'"
-            [glAccount]="accountingMappings.savingsControlAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Savings transfers in suspense'"
-            [glAccount]="accountingMappings.transfersInSuspenseAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Interest Payable'" *ngIf="isAccrualAccounting()"
-            [glAccount]="accountingMappings.interestPayableAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Escheat liability'"
-            *ngIf="accountingMappings.escheatLiabilityAccount" [glAccount]="accountingMappings.escheatLiabilityAccount"
-            [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Income' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income from fees'"
-            [glAccount]="accountingMappings.incomeFromFeeAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income from penalties'"
-            [glAccount]="accountingMappings.incomeFromPenaltyAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Income from Interest'" *ngIf="accountingMappings.incomeFromInterest"
-            [glAccount]="accountingMappings.incomeFromInterest" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-
-        <h4 fxFlexFill class="mat-h4">{{'labels.heading.Expenses' | translate}}</h4>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Interest on savings'"
-            [glAccount]="accountingMappings.interestOnSavingsAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-        <mifosx-gl-account-display fxFlex="100%" [accountTitle]="'Write-off'" *ngIf="accountingMappings.writeOffAccount"
-            [glAccount]="accountingMappings.writeOffAccount" [withTitle]="'40%'">
-        </mifosx-gl-account-display>
-    </div>
-
-</div>
+    <h4 fxFlexFill class="mat-h4">{{ 'labels.heading.Expenses' | translate }}</h4>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Interest on savings'"
+      [glAccount]="accountingMappings.interestOnSavingsAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+    <mifosx-gl-account-display
+      fxFlex="100%"
+      [accountTitle]="'Write-off'"
+      *ngIf="accountingMappings.writeOffAccount"
+      [glAccount]="accountingMappings.writeOffAccount"
+      [withTitle]="'40%'"
+    >
+    </mifosx-gl-account-display>
+  </div>
+</div>

src/app/shared/cancel-dialog/cancel-dialog.component.html

@@ -1,9 +1,15 @@
 <h1 mat-dialog-title>{{ 'labels.buttons.Cancel' | translate }}</h1>
 <div mat-dialog-content>
-  <p *ngIf="!data.cancelContext">{{ 'labels.text.Are you sure you want to leave this page and lose all inputted data' | translate }}?</p>
-  <p *ngIf="data.cancelContext">{{ 'labels.text.Are you sure you want to cancel' | translate }} {{ data.cancelContext }} ?</p>
+  <p *ngIf="!data.cancelContext">
+    {{ 'labels.text.Are you sure you want to leave this page and lose all inputted data' | translate }}?
+  </p>
+  <p *ngIf="data.cancelContext">
+    {{ 'labels.text.Are you sure you want to cancel' | translate }} {{ data.cancelContext }} ?
+  </p>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.No' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ cancel: true }">{{ 'labels.buttons.Yes' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ cancel: true }">
+    {{ 'labels.buttons.Yes' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/shared/change-password-dialog/change-password-dialog.component.html

@@ -1,46 +1,64 @@
 <h1 mat-dialog-title>{{ 'labels.heading.Change Password' | translate }}</h1>
 
 <div mat-dialog-content>
-
   <form [formGroup]="changePasswordForm">
-
     <div fxLayout="column">
-
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
-        <input matInput formControlName="password" type="password">
+        <input matInput formControlName="password" type="password" />
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('required')">
-          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('minlength')">
-          {{'labels.commons.Password should be at least' | translate }} <strong>{{'labels.commons.12 characters long' | translate }}</strong>
+          {{ 'labels.commons.Password should be at least' | translate }}
+          <strong>{{ 'labels.commons.12 characters long' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('maxlength')">
-          {{'labels.commons.Password should not be more than' | translate }} <strong>{{'labels.commons.50 characters long' | translate }}</strong>
+          {{ 'labels.commons.Password should not be more than' | translate }}
+          <strong>{{ 'labels.commons.50 characters long' | translate }}</strong>
         </mat-error>
-        <mat-error *ngIf="changePasswordForm.controls.password.hasError('pattern') && !(changePasswordForm.controls.password.hasError('minlength') || changePasswordForm.controls.password.hasError('maxlength'))">
-          {{'labels.commons.Password should include a' | translate }} <strong>{{'labels.commons.numeral' | translate }}</strong> {{'labels.commons.and at' | translate }} <strong>{{'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{'labels.commons.lowercase and special character' | translate }}</strong>
+        <mat-error
+          *ngIf="
+            changePasswordForm.controls.password.hasError('pattern') &&
+            !(
+              changePasswordForm.controls.password.hasError('minlength') ||
+              changePasswordForm.controls.password.hasError('maxlength')
+            )
+          "
+        >
+          {{ 'labels.commons.Password should include a' | translate }}
+          <strong>{{ 'labels.commons.numeral' | translate }}</strong> {{ 'labels.commons.and at' | translate }}
+          <strong>{{ 'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{
+            'labels.commons.lowercase and special character' | translate
+          }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
         <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
-        <input matInput formControlName="repeatPassword" type="password">
+        <input matInput formControlName="repeatPassword" type="password" />
         <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('required')">
-          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('notequal')">
-          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.does not match' | translate }}</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.does not match' | translate }}</strong>
         </mat-error>
       </mat-form-field>
-
     </div>
-
   </form>
-
 </div>
 
 <mat-dialog-actions align="center">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [disabled]="!changePasswordForm.valid" [mat-dialog-close]="{password:changePasswordForm.get('password').value,repeatPassword:changePasswordForm.get('repeatPassword').value}">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button
+    mat-raised-button
+    color="warn"
+    [disabled]="!changePasswordForm.valid"
+    [mat-dialog-close]="{
+      password: changePasswordForm.get('password').value,
+      repeatPassword: changePasswordForm.get('repeatPassword').value
+    }"
+  >
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/shared/confirmation-dialog/confirmation-dialog.component.html

@@ -1,8 +1,10 @@
-<h1 mat-dialog-title>{{data.heading}}</h1>
+<h1 mat-dialog-title>{{ data.heading }}</h1>
 <div mat-dialog-content>
   <p>{{ data.dialogContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color={{color}} [mat-dialog-close]="{ confirm: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="{{ color }}" [mat-dialog-close]="{ confirm: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/shared/delete-dialog/delete-dialog.component.html

@@ -4,5 +4,7 @@
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/shared/disable-dialog/disable-dialog.component.html

@@ -4,5 +4,7 @@
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ disable: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ disable: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/shared/dropdown/dropdown.component.html

@@ -1,12 +1,11 @@
 <mat-form-field fxFlex fxFlex="28%">
-    <mat-label>{{getLabelText()}}</mat-label>
-    <mat-select placeholder="{{getPlaceHolderText()}}" formControlName="controlSelect">
-        <mat-option *ngFor="let option of selectOptions" [value]="option.id">
-            {{ option.value | translateKey:'catalogs' }}
-        </mat-option>
-    </mat-select>
-    <button mat-button *ngIf="controlSelect" matSuffix mat-icon-button
-        aria-label="Clear" (click)="clearProperty($event)">
-        <mat-icon>{{'labels.buttons.Close' | translate }}</mat-icon>
-    </button>
+  <mat-label>{{ getLabelText() }}</mat-label>
+  <mat-select placeholder="{{ getPlaceHolderText() }}" formControlName="controlSelect">
+    <mat-option *ngFor="let option of selectOptions" [value]="option.id">
+      {{ option.value | translateKey: 'catalogs' }}
+    </mat-option>
+  </mat-select>
+  <button mat-button *ngIf="controlSelect" matSuffix mat-icon-button aria-label="Clear" (click)="clearProperty($event)">
+    <mat-icon>{{ 'labels.buttons.Close' | translate }}</mat-icon>
+  </button>
 </mat-form-field>

src/app/shared/enable-dialog/enable-dialog.component.html

@@ -4,5 +4,7 @@
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ enable: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ enable: true }">
+    {{ 'labels.buttons.Confirm' | translate }}
+  </button>
 </mat-dialog-actions>

src/app/shared/entity-name/entity-name.component.html

@@ -1,5 +1,11 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
-  <span class="m-l-5"><b>{{ entityName }}</b></span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
+  <span class="m-l-5"
+    ><b>{{ entityName }}</b></span
+  >
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"
+    ><b><fa-icon icon="copy" size="sm" title="{{ 'labels.text.Copy Account Number' | translate }}"></fa-icon></b
+  ></span>
 </span>

src/app/shared/error-dialog/error-dialog.component.html

@@ -1,10 +1,10 @@
-<h1 mat-dialog-title>{{'Error Log' | translate}}</h1>
+<h1 mat-dialog-title>{{ 'Error Log' | translate }}</h1>
 
 <div mat-dialog-content>
-    <p *ngIf="!showAsCode"> {{ data }}</p>
-    <span *ngIf="showAsCode" [innerHTML]="data"></span>
+  <p *ngIf="!showAsCode">{{ data }}</p>
+  <span *ngIf="showAsCode" [innerHTML]="data"></span>
 </div>
 
 <mat-dialog-actions align="left">
-    <button mat-raised-button mat-dialog-close>{{'Cancel' | translate}}</button>
+  <button mat-raised-button mat-dialog-close>{{ 'Cancel' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/external-identifier/external-identifier.component.html

@@ -1,8 +1,16 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" *ngIf="!emptyValue">
-  <span (click)="copyValue()" *ngIf="displayL && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
-  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
+  <span (click)="copyValue()" *ngIf="displayL && iconVisible"
+    ><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon
+  ></span>
+  <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"
+    ><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon
+  ></span>
   <span class="m-l-5" *ngIf="!completed">{{ externalId | externalIdentifier }}</span>
   <span class="m-l-5" *ngIf="completed">{{ externalId }}</span>
-  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
-  <span class="m-l-3" (click)="copyValue()" *ngIf="displayR && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
+  <span class="m-l-5" *ngIf="displayR && !completed && iconVisible && isLongValue()"
+    ><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon
+  ></span>
+  <span class="m-l-3" (click)="copyValue()" *ngIf="displayR && iconVisible"
+    ><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon
+  ></span>
 </span>

src/app/shared/file-upload/file-upload.component.html

@@ -1,7 +1,6 @@
 <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="2%">
-
   <mat-form-field [fxFlex]="flex || '83%'">
-    <input matInput [readonly]="true" [value]="fileName || ''" placeholder="No file selected">
+    <input matInput [readonly]="true" [value]="fileName || ''" placeholder="No file selected" />
   </mat-form-field>
 
   <span fxFlex="10%" fxFlexAlign="center">
@@ -11,7 +10,6 @@
       {{ 'labels.buttons.Browse' | translate }}
     </button>
   </span>
-
 </div>
 
-<input type="file" #uploadFile accept="{{acceptFilter}}" (change)="onFileSelect($event)" [style.display]="'none'">
+<input type="file" #uploadFile accept="{{ acceptFilter }}" (change)="onFileSelect($event)" [style.display]="'none'" />

src/app/shared/footer/footer.component.html

@@ -1,26 +1,34 @@
 <div fxLayout="column" id="footer" class="m-b-20" *ngIf="displayBackEndInfo">
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <div fxLayout="column" class="m-b-20 content">
-
     <table class="versions">
       <tr>
         <td class="footer-content">Mifos</td>
-        <td class="right footer-content">{{ versions.mifos }} - <b>{{ hash }}</b></td>
+        <td class="right footer-content">
+          {{ versions.mifos }} - <b>{{ hash }}</b>
+        </td>
       </tr>
       <tr>
-        <td class="footer-content">{{"labels.text.Fineract" | translate }}</td>
-        <td class="right footer-content">{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b></td>
+        <td class="footer-content">{{ 'labels.text.Fineract' | translate }}</td>
+        <td class="right footer-content">
+          {{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b>
+        </td>
       </tr>
       <tr *ngIf="displayBackEndInfo">
-        <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
+        <td colspan="2" class="center footer-content">
+          <b>{{ server }}</b>
+        </td>
       </tr>
       <tr *ngIf="isBusinessDateDefined">
-        <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
-        <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
+        <td class="footer-content">{{ 'labels.text.Current Business Date' | translate }}:</td>
+        <td class="center footer-content business-date">
+          <b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b>
+        </td>
       </tr>
     </table>
   </div>
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
-  <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate}} {{'labels.text.by' | translate}} Mifos
+  <p fxFlexAlign="center" class="footer-content">
+    {{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos
   </p>
 </div>

src/app/shared/form-dialog/form-dialog.component.html

@@ -1,14 +1,26 @@
 <h1 mat-dialog-title>{{ data.title }}</h1>
 
-<div mat-dialog-content [formGroup]="form" [fxLayout]="layout.columns > 1 ? 'row wrap' : 'column'" fxLayout.lt-md="column" [fxLayoutGap]="(layout.columns > 1 ? layout.gap : 0) + '%'" fxLayoutGap.lt-md="0%">
-
+<div
+  mat-dialog-content
+  [formGroup]="form"
+  [fxLayout]="layout.columns > 1 ? 'row wrap' : 'column'"
+  fxLayout.lt-md="column"
+  [fxLayoutGap]="(layout.columns > 1 ? layout.gap : 0) + '%'"
+  fxLayoutGap.lt-md="0%"
+>
   <div *ngFor="let formfield of formfields" [fxFlex]="layout.flex + '%'" fxFlex.lt-md="100%">
     <mifosx-formfield [formfield]="formfield" [form]="form" fxFlexFill></mifosx-formfield>
   </div>
-
 </div>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.' + layout.cancelButtonText | translate }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: form }" [disabled]="!form.valid || form.pristine">{{ 'labels.buttons.' + layout.addButtonText | translate }}</button>
+  <button
+    mat-raised-button
+    color="primary"
+    [mat-dialog-close]="{ data: form }"
+    [disabled]="!form.valid || form.pristine"
+  >
+    {{ 'labels.buttons.' + layout.addButtonText | translate }}
+  </button>
 </mat-dialog-actions>

src/app/shared/form-dialog/formfield/formfield.component.html

@@ -1,54 +1,76 @@
 <div [formGroup]="form" fxFlexFill>
-
-  <div *ngIf="formfield.controlType==='input' || formfield.controlType==='select'" fxFlexFill>
-
+  <div *ngIf="formfield.controlType === 'input' || formfield.controlType === 'select'" fxFlexFill>
     <mat-form-field fxFlexFill>
-
       <mat-label>{{ formfield.label }}</mat-label>
 
-      <input *ngIf="formfield.controlType==='input'" [type]="formfield.type" matInput
-        [formControlName]="formfield.controlName" [required]="formfield.required">
+      <input
+        *ngIf="formfield.controlType === 'input'"
+        [type]="formfield.type"
+        matInput
+        [formControlName]="formfield.controlName"
+        [required]="formfield.required"
+      />
 
-      <mat-select *ngIf="formfield.controlType==='select'" [formControlName]="formfield.controlName"
-        [required]="formfield.required">
+      <mat-select
+        *ngIf="formfield.controlType === 'select'"
+        [formControlName]="formfield.controlName"
+        [required]="formfield.required"
+      >
         <mat-option *ngFor="let option of formfield.options.data" [value]="option[formfield.options.value]">
           {{ option[formfield.options.label] }}
         </mat-option>
       </mat-select>
 
       <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-        {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+        {{ formfield.label }} {{ 'labels.commons.is' | translate }}
+        <strong>{{ 'labels.commons.required' | translate }}</strong>
       </mat-error>
-
     </mat-form-field>
-
   </div>
 
-  <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datepicker'" (click)="datePicker.open()">
+  <mat-form-field fxFlexFill *ngIf="formfield.controlType === 'datepicker'" (click)="datePicker.open()">
     <mat-label>{{ formfield.label }}</mat-label>
-    <input matInput [matDatepicker]="datePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
-      [formControlName]="formfield.controlName" [required]="formfield.required">
+    <input
+      matInput
+      [matDatepicker]="datePicker"
+      [min]="formfield.minDate"
+      [max]="formfield.maxDate"
+      [formControlName]="formfield.controlName"
+      [required]="formfield.required"
+    />
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
     <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-      {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+      {{ formfield.label }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <mat-form-field fxFlexFill *ngIf="formfield.controlType==='datetimepicker'" (click)="datePicker.open()">
+  <mat-form-field fxFlexFill *ngIf="formfield.controlType === 'datetimepicker'" (click)="datePicker.open()">
     <mat-label>{{ formfield.label }}</mat-label>
-    <input matInput [ngxMatDatetimePicker]="datetimePicker" [min]="formfield.minDate" [max]="formfield.maxDate"
-      [formControlName]="formfield.controlName" [required]="formfield.required">
+    <input
+      matInput
+      [ngxMatDatetimePicker]="datetimePicker"
+      [min]="formfield.minDate"
+      [max]="formfield.maxDate"
+      [formControlName]="formfield.controlName"
+      [required]="formfield.required"
+    />
     <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
     <ngx-mat-datetime-picker #datetimePicker [enableMeridian]="true"></ngx-mat-datetime-picker>
     <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-      {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
+      {{ formfield.label }} {{ 'labels.commons.is' | translate }}
+      <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <mat-checkbox *ngIf="formfield.controlType==='checkbox'" labelPosition="before" [checked]="formfield.value"
-    [formControlName]="formfield.controlName" [required]="formfield.required">
+  <mat-checkbox
+    *ngIf="formfield.controlType === 'checkbox'"
+    labelPosition="before"
+    [checked]="formfield.value"
+    [formControlName]="formfield.controlName"
+    [required]="formfield.required"
+  >
     {{ formfield.label }}
   </mat-checkbox>
-
 </div>

src/app/shared/input-amount/input-amount.component.html

@@ -1,21 +1,39 @@
 <mat-form-field appearance="fill" fxFlex="100%" *ngIf="isRequired">
-    <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
-    <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
-    <span fxFlex="auto"></span>
-    <input mifosxFormatAmount="{{currency.code}}:{{currency.displaySymbol}}" class="right-input"
-        [formControl]="inputFormControl"  (keypress)="numberOnly($event)"
-        required matInput (blur)="displayHint = false;" (focus)="displayHint = true;" />
-    <mat-error *ngIf="inputFormControl.hasError('required')">
-        {{'labels.inputs.' + inputLabel | translate}} {{ "labels.commons.is" | translate}} <strong>{{
-            "labels.commons.required" | translate}}</strong>
-    </mat-error>
-    <mat-hint class="right-hint" *ngIf="displayHint">{{inputFormControl.value | currency:currency.code:currency.displaySymbol:'1.2-2'}}</mat-hint>
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+  <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
+  <span fxFlex="auto"></span>
+  <input
+    mifosxFormatAmount="{{ currency.code }}:{{ currency.displaySymbol }}"
+    class="right-input"
+    [formControl]="inputFormControl"
+    (keypress)="numberOnly($event)"
+    required
+    matInput
+    (blur)="displayHint = false"
+    (focus)="displayHint = true"
+  />
+  <mat-error *ngIf="inputFormControl.hasError('required')">
+    {{ 'labels.inputs.' + inputLabel | translate }} {{ 'labels.commons.is' | translate }}
+    <strong>{{ 'labels.commons.required' | translate }}</strong>
+  </mat-error>
+  <mat-hint class="right-hint" *ngIf="displayHint">{{
+    inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
+  }}</mat-hint>
 </mat-form-field>
 <mat-form-field appearance="fill" fxFlex="100%" *ngIf="!isRequired">
-    <mat-label>{{'labels.inputs.' + inputLabel | translate}}</mat-label>
-    <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
-    <span fxFlex="auto"></span>
-    <input mifosxFormatAmount="{{currency.code}}:{{currency.displaySymbol}}" class="right-input"
-        [formControl]="inputFormControl"  (keypress)="numberOnly($event)" matInput (blur)="displayHint = false;" (focus)="displayHint = true;" />
-    <mat-hint class="right-hint" *ngIf="displayHint">{{inputFormControl.value | currency:currency.code:currency.displaySymbol:'1.2-2'}}</mat-hint>
-</mat-form-field>
+  <mat-label>{{ 'labels.inputs.' + inputLabel | translate }}</mat-label>
+  <span matTextSuffix class="m-l-10">{{ currency.code }}</span>
+  <span fxFlex="auto"></span>
+  <input
+    mifosxFormatAmount="{{ currency.code }}:{{ currency.displaySymbol }}"
+    class="right-input"
+    [formControl]="inputFormControl"
+    (keypress)="numberOnly($event)"
+    matInput
+    (blur)="displayHint = false"
+    (focus)="displayHint = true"
+  />
+  <mat-hint class="right-hint" *ngIf="displayHint">{{
+    inputFormControl.value | currency: currency.code : currency.displaySymbol : '1.2-2'
+  }}</mat-hint>
+</mat-form-field>

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html

@@ -6,10 +6,18 @@
       <mat-divider [inset]="true"></mat-divider>
       <div fxFlexFill fxFlex="50%">
         <span fxFlex="50%">
-          <span *ngIf="item.ctrlKey"> <span class="modifierKey">{{ 'labels.inputs.Ctrl' | translate }}</span> + </span>
-          <span *ngIf="item.shiftKey"> <span class="modifierKey">{{ 'labels.inputs.Shift' | translate }}</span> + </span>
-          <span *ngIf="item.altKey"> <span class="modifierKey">{{ 'labels.inputs.Alt' | translate }}</span> + </span>
-          <span *ngIf="item.key"> <span class="modifierKey">{{ item.key }}</span></span>
+          <span *ngIf="item.ctrlKey">
+            <span class="modifierKey">{{ 'labels.inputs.Ctrl' | translate }}</span> +
+          </span>
+          <span *ngIf="item.shiftKey">
+            <span class="modifierKey">{{ 'labels.inputs.Shift' | translate }}</span> +
+          </span>
+          <span *ngIf="item.altKey">
+            <span class="modifierKey">{{ 'labels.inputs.Alt' | translate }}</span> +
+          </span>
+          <span *ngIf="item.key">
+            <span class="modifierKey">{{ item.key }}</span></span
+          >
         </span>
         <span fxFlex="50%">{{ item.title }}</span>
       </div>

src/app/shared/language-selector/language-selector.component.html

@@ -1,8 +1,8 @@
 <mat-form-field id="language-selector" class="m-l-10">
-  <mat-label>{{'labels.inputs.Language' | translate}}</mat-label>
+  <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
   <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
     <mat-option *ngFor="let language of languages" [value]="language">
-      {{ 'languages.' + language | translate}}
+      {{ 'languages.' + language | translate }}
     </mat-option>
   </mat-select>
 </mat-form-field>

src/app/shared/long-text/long-text.component.html

@@ -1,5 +1,5 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" *ngIf="!emptyValue">
-    <span class="m-l-3" *ngIf="isLongValue()"><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon></span>
-    <span class="m-l-5" *ngIf="isLongValue()">{{ textValue | truncateText:chars }}...</span>
-    <span class="m-l-5" *ngIf="!isLongValue()">{{ textValue }}</span>
-</span>
+  <span class="m-l-3" *ngIf="isLongValue()"><fa-icon icon="eye" size="sm" [title]="textValue"></fa-icon></span>
+  <span class="m-l-5" *ngIf="isLongValue()">{{ textValue | truncateText: chars }}...</span>
+  <span class="m-l-5" *ngIf="!isLongValue()">{{ textValue }}</span>
+</span>

src/app/shared/notifications-tray/notifications-tray.component.html

@@ -1,28 +1,41 @@
 <button
-  mat-icon-button class="ml-1" matTooltip="{{ 'tooltips.Notifications' | translate}}"
-  [matMenuTriggerFor]="notificationsMenu" (menuClosed)="menuClosed()"
-  [matBadge]="unreadNotifications.length" [matBadgeHidden]="!unreadNotifications.length" matBadgeColor="warn"  matBadgeSize="medium"
+  mat-icon-button
+  class="ml-1"
+  matTooltip="{{ 'tooltips.Notifications' | translate }}"
+  [matMenuTriggerFor]="notificationsMenu"
+  (menuClosed)="menuClosed()"
+  [matBadge]="unreadNotifications.length"
+  [matBadgeHidden]="!unreadNotifications.length"
+  matBadgeColor="warn"
+  matBadgeSize="medium"
 >
   <fa-icon icon="bell" size="lg"></fa-icon>
 </button>
 
 <mat-menu class="mifosx-notifications-menu" #notificationsMenu="matMenu" [overlapTrigger]="false">
-
-  <div *ngIf="unreadNotifications.length === 0" fxLayout="column" fxLayoutAlign="center center" style="padding: 16px;">
-    <mat-icon style="font-size: 24px; opacity: 0.8;">
-      <span class="material-icons">{{'labels.menus.Notifications' | translate}}</span>
+  <div *ngIf="unreadNotifications.length === 0" fxLayout="column" fxLayoutAlign="center center" style="padding: 16px">
+    <mat-icon style="font-size: 24px; opacity: 0.8">
+      <span class="material-icons">{{ 'labels.menus.Notifications' | translate }}</span>
     </mat-icon>
     <p>{{ 'labels.text.No notifications' | translate }}</p>
   </div>
 
-  <button mat-menu-item class="unread" *ngFor="let notification of unreadNotifications" [routerLink]="[routeMap[notification.objectType], notification.objectId]">
-    {{ notification.content }}*<br>
+  <button
+    mat-menu-item
+    class="unread"
+    *ngFor="let notification of unreadNotifications"
+    [routerLink]="[routeMap[notification.objectType], notification.objectId]"
+  >
+    {{ notification.content }}*<br />
     <span class="time">[{{ notification.createdAt }}]</span>
   </button>
 
-  <button mat-menu-item *ngFor="let notification of displayedReadNotifications" [routerLink]="[routeMap[notification.objectType], notification.objectId]">
-    {{ notification.content }}<br>
+  <button
+    mat-menu-item
+    *ngFor="let notification of displayedReadNotifications"
+    [routerLink]="[routeMap[notification.objectType], notification.objectId]"
+  >
+    {{ notification.content }}<br />
     <span class="time">[{{ notification.createdAt }}]</span>
   </button>
-
 </mat-menu>

src/app/shared/search-tool/search-tool.component.html

@@ -1,19 +1,25 @@
-<div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" fxLayout="row" fxLayoutGap="2%" [@fadeInOut]>
-
+<div
+  *ngIf="searchVisible"
+  class="search-bar"
+  fxFlex="auto"
+  fxHide.lt-sm="true"
+  fxLayout="row"
+  fxLayoutGap="2%"
+  [@fadeInOut]
+>
   <mat-form-field class="search">
     <mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
-    <input matInput type="text" [formControl]="query" (keydown.enter)="search()">
+    <input matInput type="text" [formControl]="query" (keydown.enter)="search()" />
   </mat-form-field>
 
   <mat-form-field class="resource">
     <mat-label>{{ 'labels.inputs.Resource' | translate }}</mat-label>
     <mat-select [formControl]="resource">
       <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
-        {{'labels.text.' + option.name | translate }}
+        {{ 'labels.text.' + option.name | translate }}
       </mat-option>
     </mat-select>
   </mat-form-field>
-
 </div>
 
 <div class="search-icon">

src/app/shared/server-selector/server-selector.component.html

@@ -1,24 +1,28 @@
 <mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
-    <mat-label>{{'labels.inputs.Server' | translate }}</mat-label>
-    <mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
-        <div class="sticky">
-            <form [formGroup]="form" (ngSubmit)="addNewServer()">
-                <div class="actions">
-                    <mat-form-field class="ml" fxFlexAlign="start">
-                        <span matPrefix><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span>
-                        <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
-                        <input matInput type="text" autocomplete="off" formControlName="url">
-                        <mat-error *ngIf="form.controls.url.hasError('required')">
-                          {{'labels.inputs.Url' | translate}} <strong>{{'labels.commons.is required' | translate }}</strong>
-                        </mat-error>
-                    </mat-form-field>
+  <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
+  <mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
+    <div class="sticky">
+      <form [formGroup]="form" (ngSubmit)="addNewServer()">
+        <div class="actions">
+          <mat-form-field class="ml" fxFlexAlign="start">
+            <span matPrefix
+              ><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span
+            >
+            <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
+            <input matInput type="text" autocomplete="off" formControlName="url" />
+            <mat-error *ngIf="form.controls.url.hasError('required')">
+              {{ 'labels.inputs.Url' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
+            </mat-error>
+          </mat-form-field>
 
-                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">{{'labels.buttons.Add' | translate }}</button>
-                </div>
-            </form>
+          <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">
+            {{ 'labels.buttons.Add' | translate }}
+          </button>
         </div>
-        <mat-option *ngFor="let server of servers" [value]="server">
-            {{ server }}
-        </mat-option>
-    </mat-select>
+      </form>
+    </div>
+    <mat-option *ngFor="let server of servers" [value]="server">
+      {{ server }}
+    </mat-option>
+  </mat-select>
 </mat-form-field>

src/app/shared/steppers/stepper-buttons/stepper-buttons.component.html

@@ -1,4 +1,3 @@
-
 <div fxFlexFill fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious [disabled]="disablePrevious">
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -1,8 +1,7 @@
 <div class="tab-container mat-typography">
-
   <div fxLayout="row" fxLayoutAlign="start">
     <div class="m-b-10">
-      <h3>{{datatableName}}</h3>
+      <h3>{{ datatableName }}</h3>
     </div>
     <div class="action-button m-b-7" fxLayoutGap="10px">
       <span *mifosxHasPermission="'CREATE_' + datatableName">
@@ -25,29 +24,30 @@
 
   <div class="m-t-10">
     <table #dataTable mat-table [dataSource]="datatableData" class="mat-elevation-z1 m-b-25" [fxHide]="isLoading">
-
-      <ng-container *ngFor="let datatableColumn of datatableColumns;let i = index" [matColumnDef]="datatableColumn">
+      <ng-container *ngFor="let datatableColumn of datatableColumns; let i = index" [matColumnDef]="datatableColumn">
         <ng-container *ngIf="i === 0">
           <th mat-header-cell *matHeaderCellDef></th>
           <td mat-cell *matCellDef="let data">
-            <mat-checkbox class="center" (click)="$event.stopPropagation()"
-              (change)="$event ? itemToggle(data) : null" [checked]="selection.isSelected(data)">
+            <mat-checkbox
+              class="center"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? itemToggle(data) : null"
+              [checked]="selection.isSelected(data)"
+            >
             </mat-checkbox>
           </td>
         </ng-container>
 
         <ng-container *ngIf="i > 0">
-          <th mat-header-cell class="right" *matHeaderCellDef> {{ getInputName(datatableColumn) }} </th>
+          <th mat-header-cell class="right" *matHeaderCellDef>{{ getInputName(datatableColumn) }}</th>
           <td mat-cell class="right" *matCellDef="let data" [ngClass]="isToDelete(data)">
-              {{ formatValue(data, datatableColumn) }}
+            {{ formatValue(data, datatableColumn) }}
           </td>
         </ng-container>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="datatableColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: datatableColumns;"></tr>
-
+      <tr mat-row *matRowDef="let row; columns: datatableColumns"></tr>
     </table>
   </div>
-
 </div>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -1,5 +1,5 @@
 <div class="tab-container mat-typography">
-  <h3>{{datatableName}}</h3>
+  <h3>{{ datatableName }}</h3>
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
@@ -15,43 +15,59 @@
   <mat-divider></mat-divider>
 
   <div class="m-t-10" *ngIf="dataObject.data.length > 0">
-
-    <div fxFlexFill *ngFor="let columnHeader of dataObject.columnHeaders;let i = index" [ngClass]="setAttributeClass(columnHeader.columnName)" >
-
+    <div
+      fxFlexFill
+      *ngFor="let columnHeader of dataObject.columnHeaders; let i = index"
+      [ngClass]="setAttributeClass(columnHeader.columnName)"
+    >
       <div fxFlex="40%" class="mat-body-strong left">
         {{ getInputName(columnHeader.columnName) }}
       </div>
 
-      <div fxFlex="68%" [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)" class="right">
+      <div
+        fxFlex="68%"
+        [ngSwitch]="getColumnType(columnHeader.columnDisplayType, columnHeader.columnType)"
+        class="right"
+      >
         <span *ngSwitchCase="'DATE'">
-          {{dataObject.data[0].row[i] | dateFormat}}
+          {{ dataObject.data[0].row[i] | dateFormat }}
         </span>
         <span *ngSwitchCase="'DATETIME'">
-          {{dataObject.data[0].row[i] | datetimeFormat}}
+          {{ dataObject.data[0].row[i] | datetimeFormat }}
         </span>
         <span *ngSwitchCase="'INTEGER'">
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
         <span *ngSwitchCase="'DECIMAL'">
-          {{dataObject.data[0].row[i] | formatNumber}}
+          {{ dataObject.data[0].row[i] | formatNumber }}
         </span>
         <span *ngSwitchCase="'TEXT'" class="long-text">
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
-        <textarea *ngSwitchCase="'JSON'" cdkTextareaAutosize="true" cdkAutosizeMaxRows="20" cdkAutosizeMinRows="1" style="width: 100%; height: 100%" [innerHTML]="dataObject.data[0].row[i].value | prettyPrint">
+        <textarea
+          *ngSwitchCase="'JSON'"
+          cdkTextareaAutosize="true"
+          cdkAutosizeMaxRows="20"
+          cdkAutosizeMinRows="1"
+          style="width: 100%; height: 100%"
+          [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
+        >
         </textarea>
         <span *ngSwitchDefault>
           <span class="m-r-5" *ngIf="isValidUrl(dataObject.data[0].row[i])">
-            <button mat-icon-button matTooltip="{{ 'tooltips.View Link' | translate }}" (click)="openSite(dataObject.data[0].row[i])"
-              matTooltipPosition="right" class="small-icon">
+            <button
+              mat-icon-button
+              matTooltip="{{ 'tooltips.View Link' | translate }}"
+              (click)="openSite(dataObject.data[0].row[i])"
+              matTooltipPosition="right"
+              class="small-icon"
+            >
               <fa-icon icon="eye" size="lg"></fa-icon>
             </button>
           </span>
-          {{dataObject.data[0].row[i]}}
+          {{ dataObject.data[0].row[i] }}
         </span>
       </div>
     </div>
-
   </div>
-
 </div>

src/app/shared/tabs/entity-datatable-tab/entity-datatable-tab.component.html

@@ -1,10 +1,12 @@
 <div>
-  <mifosx-datatable-multi-row *ngIf="multiRowDatatableFlag"
+  <mifosx-datatable-multi-row
+    *ngIf="multiRowDatatableFlag"
     [entityType]="entityType"
     [entityId]="entityId"
     [dataObject]="entityDatatable"
   ></mifosx-datatable-multi-row>
-  <mifosx-datatable-single-row *ngIf="!multiRowDatatableFlag"
+  <mifosx-datatable-single-row
+    *ngIf="!multiRowDatatableFlag"
     [entityType]="entityType"
     [entityId]="entityId"
     [dataObject]="entityDatatable"

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html

@@ -1,6 +1,5 @@
 <div class="tab-container mat-typography">
   <div fxLayout="row" fxLayoutAlign="start center">
-
     <h3 fxFlex="90%">{{ 'labels.heading.Documents' | translate }}</h3>
 
     <div fxFlex="10%" *mifosxHasPermission="'CREATE_DOCUMENT'">
@@ -11,40 +10,50 @@
   </div>
 
   <table mat-table #documentsTable [dataSource]="dataSource" matSort>
-
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.name' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.name }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.name }}</td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.description }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Description' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.description }}</td>
     </ng-container>
 
     <ng-container matColumnDef="filename">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.File Name' | translate }} </th>
-      <td mat-cell *matCellDef="let document"> {{ document.fileName }} </td>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.File Name' | translate }}</th>
+      <td mat-cell *matCellDef="let document">{{ document.fileName }}</td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Actions' | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th>
       <td mat-cell *matCellDef="let document; let index">
-        <button class="document-action-button" mat-raised-button color="primary"
-          (click)="downloadDocument(document.id)">
+        <button
+          class="document-action-button"
+          mat-raised-button
+          color="primary"
+          (click)="downloadDocument(document.id)"
+        >
           <fa-icon icon="cloud-download-alt"></fa-icon>
         </button>
-        <button class="document-action-button" mat-raised-button color="warn"
-          (click)="deleteDocument(document.id, document.name)">
+        <button
+          class="document-action-button"
+          mat-raised-button
+          color="warn"
+          (click)="deleteDocument(document.id, document.name)"
+        >
           <fa-icon icon="times"></fa-icon>
         </button>
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
-  <mat-paginator *ngIf="entityDocuments && entityDocuments.length > 10" [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
-
+  <mat-paginator
+    *ngIf="entityDocuments && entityDocuments.length > 10"
+    [pageSizeOptions]="[10, 25, 50]"
+    showFirstLastButtons
+  ></mat-paginator>
 </div>

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html

@@ -1,12 +1,24 @@
 <div class="tab-container mat-typography">
-
   <h3>{{ 'labels.heading.Notes' | translate }}</h3>
 
   <div>
-    <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
-      (ngSubmit)="addNote()">
+    <form
+      #formRef="ngForm"
+      [formGroup]="noteForm"
+      fxLayout="row"
+      fxLayoutAlign="start baseline"
+      fxLayoutGap="20px"
+      (ngSubmit)="addNote()"
+    >
       <mat-form-field fxFlex="calc(85%-20px)">
-        <textarea required formControlName="note" matInput placeholder="{{'labels.text.Write a note' | translate}} ..." cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+        <textarea
+          required
+          formControlName="note"
+          matInput
+          placeholder="{{ 'labels.text.Write a note' | translate }} ..."
+          cdkTextareaAutosize
+          cdkAutosizeMinRows="2"
+        ></textarea>
       </mat-form-field>
       <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
@@ -15,12 +27,16 @@
   </div>
 
   <mat-list>
-    <mat-list-item *ngFor="let entityNote of entityNotes; let i=index;">
+    <mat-list-item *ngFor="let entityNote of entityNotes; let i = index">
       <fa-icon icon="sticky-note" matListIcon></fa-icon>
-      <h3 matLine>{{ entityNote.note }} </h3>
+      <h3 matLine>{{ entityNote.note }}</h3>
       <p matLine>
-        <span><b>{{ 'labels.inputs.Created By' | translate }}:</b> {{entityNote.createdByUsername}}</span><br />
-        <span><b>{{ 'labels.inputs.Date' | translate }}:</b> {{entityNote.createdOn | dateFormat}}</span>
+        <span
+          ><b>{{ 'labels.inputs.Created By' | translate }}:</b> {{ entityNote.createdByUsername }}</span
+        ><br />
+        <span
+          ><b>{{ 'labels.inputs.Date' | translate }}:</b> {{ entityNote.createdOn | dateFormat }}</span
+        >
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
         <button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">

src/app/shared/tenant-selector/tenant-selector.component.html

@@ -2,8 +2,13 @@
   <span matPrefix class="m-r-10">
     <fa-icon icon="building" size="lg"></fa-icon>
   </span>
-  <mat-label>{{'labels.inputs.Tenant' | translate}}</mat-label>
-  <mat-select [disabled]="!allowSelection()" [formControl]="tenantSelector" (selectionChange)="setTenantIdentifier()" class="tenantselector">
+  <mat-label>{{ 'labels.inputs.Tenant' | translate }}</mat-label>
+  <mat-select
+    [disabled]="!allowSelection()"
+    [formControl]="tenantSelector"
+    (selectionChange)="setTenantIdentifier()"
+    class="tenantselector"
+  >
     <mat-option *ngFor="let tenant of tenants" [value]="tenant">
       {{ tenant }}
     </mat-option>

src/app/shared/theme-picker/theme-picker.component.html

@@ -7,7 +7,12 @@
     <mat-grid-tile *ngFor="let theme of themes">
       <div mat-menu-item (click)="installTheme(theme)">
         <div class="mifosx-theme-picker-swatch">
-          <fa-icon class="mifosx-theme-chosen-icon" *ngIf="currentTheme.href === theme.href" icon="check-circle" size="lg"></fa-icon>
+          <fa-icon
+            class="mifosx-theme-chosen-icon"
+            *ngIf="currentTheme.href === theme.href"
+            icon="check-circle"
+            size="lg"
+          ></fa-icon>
           <div class="mifosx-theme-picker-primary" [style.background]="theme.primary"></div>
           <div class="mifosx-theme-picker-accent" [style.background]="theme.accent"></div>
         </div>

src/app/shared/theme-toggle/theme-toggle.component.html

@@ -1,3 +1,3 @@
 <button mat-icon-button (click)="toggleTheme()" class="m-l-15 m-r-5">
-    <mat-icon>{{ darkModeOn ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
+  <mat-icon>{{ darkModeOn ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
 </button>

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="row wrap" class="content">
   <div fxFlex="50%" class="mat-body-strong">
-    {{ 'labels.inputs.Payment Type' | translate}}
+    {{ 'labels.inputs.Payment Type' | translate }}
   </div>
 
   <div fxFlex="50%">
@@ -10,27 +10,27 @@
 <table *ngIf="hasSomeValue()">
   <tbody>
     <tr>
-      <td class="mat-body-strong center" colspan="2">{{ 'labels.inputs.Payment Details' | translate}}</td>
+      <td class="mat-body-strong center" colspan="2">{{ 'labels.inputs.Payment Details' | translate }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.accountNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Account No' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Account No' | translate }}</td>
       <td>{{ paymentDetailData.accountNumber }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.checkNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Cheque Number' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Cheque Number' | translate }}</td>
       <td>{{ paymentDetailData.checkNumber }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.routingCode)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Routing Code' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Routing Code' | translate }}</td>
       <td class="mat-body-strong">{{ paymentDetailData.routingCode }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.receiptNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Receipt No' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Receipt No' | translate }}</td>
       <td>{{ paymentDetailData.receiptNumber }}</td>
     </tr>
     <tr *ngIf="isNotNullOrEmpty(paymentDetailData.bankNumber)">
-      <td class="mat-body-strong">{{ 'labels.inputs.Bank No' | translate}}</td>
+      <td class="mat-body-strong">{{ 'labels.inputs.Bank No' | translate }}</td>
       <td>{{ paymentDetailData.bankNumber }}</td>
     </tr>
   </tbody>
-</table>
+</table>