Upgrade to Angular 16

Merge `angular-update-16` into `dev` branch
This commit is contained in:
Adam Saghy
2025-05-23 18:47:20 +02:00
parent c7c2f60182
commit 19a14e5b5b
882 changed files with 14895 additions and 14340 deletions
@@ -1,7 +1,7 @@
<div class="tab-container mat-typography">
<h3>{{ 'labels.heading.Address' | translate }}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-row align-flex-end">
<button mat-raised-button color="primary" (click)="addAddress()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
@@ -20,7 +20,7 @@
<mat-divider [inset]="true"></mat-divider>
<div class="address-actions" fxLayout="row" fxLayoutAlign="flex-end center">
<div class="address-actions layout-row align-end align-items-center">
<button mat-button color="primary" (click)="editAddress(address, i)">
<fa-icon icon="edit"></fa-icon>
</button>
@@ -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 { ClientsService } from '../../../clients.service';
* Client Charges data resolver.
*/
@Injectable()
export class ClientChargeOverviewResolver implements Resolve<Object> {
export class ClientChargeOverviewResolver {
/**
* @param {ClientsService} ClientsService Clients service.
*/
@@ -1,7 +1,7 @@
<div class="container mat-typography">
<mat-card>
<form [formGroup]="transactionForm" (ngSubmit)="submit()">
<div fxLayout="column">
<div class="layout-column">
<mat-form-field>
<mat-label> {{ 'labels.inputs.Amount' | translate }} </mat-label>
<input matInput required autofocus formControlName="amount" />
@@ -29,7 +29,7 @@
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
<div class="layout-row align-center gap-5px">
<button type="button" mat-raised-button [routerLink]="['../../..', 'general']">
{{ 'labels.buttons.Cancel' | translate }}
</button>
@@ -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]="['pay']" *mifosxHasPermission="'PAY_CLIENTCHARGE'">
<fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Pay' | translate }}
@@ -23,7 +23,7 @@
<mat-divider></mat-divider>
<mat-card-content>
<div class="share-account-tables p-t-20" fxLayout="row wrap" fxFlex="50%">
<div class="share-account-tables p-t-20 layout-row-wrap flex-50">
<table>
<tbody>
<tr>
@@ -69,7 +69,7 @@
</div>
</mat-card-content>
<div fxLayout="row wrap" class="content">
<div class="layout-row-wrap">
<h1>
<b> {{ 'labels.heading.Transactions' | translate }} </b>
</h1>
@@ -121,7 +121,7 @@
</table>
</div>
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
<button type="button" mat-raised-button [routerLink]="['../../', 'general']">
{{ 'labels.buttons.Back' | translate }}
</button>
@@ -1,7 +1,7 @@
<div class="container">
<mat-card>
<form [formGroup]="acceptClientTransferForm" (ngSubmit)="submit()">
<mat-card-content fxLayout="column">
<mat-card-content class="layout-column">
<mat-form-field (click)="transferDatePicker.open()">
<mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
<input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
@@ -9,13 +9,13 @@
<mat-datepicker #transferDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
<textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</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>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="activateClientForm" (ngSubmit)="submit()">
<mat-card-content>
<mat-form-field fxFlex (click)="activationDatePicker.open()">
<mat-form-field class="flex-fill" (click)="activationDatePicker.open()">
<mat-label>{{ 'labels.inputs.Activated On Date' | translate }}</mat-label>
<input
matInput
@@ -21,7 +21,7 @@
</mat-form-field>
</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>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="clientChargeForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<div class="layout-column">
<mat-form-field>
<mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
<mat-select required formControlName="chargeId">
@@ -16,7 +16,7 @@
</mat-error>
</mat-form-field>
<div *ngIf="chargeDetails" fxLayout="column">
<div *ngIf="chargeDetails" class="layout-column">
<mat-form-field>
<mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
<input type="number" required matInput formControlName="amount" />
@@ -90,7 +90,7 @@
</div>
</div>
<mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
<mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
<button type="button" mat-raised-button [routerLink]="['../../']">
{{ 'labels.buttons.Cancel' | translate }}
</button>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<div class="layout-column">
<mat-form-field>
<mat-label>{{ 'labels.inputs.Collateral' | translate }}</mat-label>
<mat-select required formControlName="collateralId">
@@ -16,7 +16,7 @@
</mat-error>
</mat-form-field>
<div *ngIf="collateralDetails" fxLayout="column">
<div *ngIf="collateralDetails" class="layout-column">
<mat-form-field>
<mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
<input matInput required formControlName="name" />
@@ -64,7 +64,7 @@
</div>
</mat-card-content>
<mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
<mat-card-actions class="layout-row layout-xs-column layout-align-center gap-5px">
<button type="button" mat-raised-button [routerLink]="['../../']">
{{ 'labels.buttons.Cancel' | translate }}
</button>
@@ -2,8 +2,8 @@
<mat-card>
<form [formGroup]="clientAssignStaffForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<mat-form-field fxFlex="48%">
<div class="layout-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
<mat-select formControlName="staffId">
<mat-option *ngFor="let staff of staffData" [value]="staff.id">
@@ -18,7 +18,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>
@@ -3,7 +3,7 @@
<form [formGroup]="clientScreenReportForm" (ngSubmit)="generate()">
<mat-card-content>
<div>
<mat-form-field fxFlex>
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Client Screen Reports' | translate }}</mat-label>
<mat-select formControlName="templateId">
<mat-option *ngFor="let template of templatesData" [value]="template.id">
@@ -18,7 +18,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>
@@ -31,15 +31,15 @@
</div>
<div #output class="container">
<mat-card fxLayout="column" fxLayoutGap="3%">
<div fxLayoutAlign="end">
<mat-card class="layout-column gap-3percent">
<div class="layout-align-end">
<button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
<fa-icon icon="file" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Print' | translate }}
</button>
</div>
<div #screenReport fxLayoutAlign="center">
<div #screenReport class="layout-align-center">
<p>{{ 'labels.text.Please select a screen report.' | translate }}</p>
</div>
</mat-card>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="closeClientForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<div class="layout-column">
<mat-form-field (click)="closureDatePicker.open()">
<mat-label>{{ 'labels.inputs.Closed On Date' | translate }}</mat-label>
<input
@@ -21,7 +21,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
<mat-select formControlName="closureReasonId">
<mat-option *ngFor="let reason of closureData" [value]="reason.id">
@@ -36,7 +36,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>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="reactivateClientForm" (ngSubmit)="submit()">
<mat-card-content>
<mat-form-field fxFlex (click)="reactivationDatePicker.open()">
<mat-form-field class="flex-fill" (click)="reactivationDatePicker.open()">
<mat-label>{{ 'labels.inputs.Re Activation On Date' | translate }}</mat-label>
<input
matInput
@@ -21,7 +21,7 @@
</mat-form-field>
</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>
@@ -1,7 +1,7 @@
<div class="container">
<mat-card>
<form [formGroup]="rejectClientTransferForm" (ngSubmit)="submit()">
<mat-card-content fxLayout="column">
<mat-card-content class="layout-column">
<mat-form-field (click)="transferDatePicker.open()">
<mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
<input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
@@ -9,13 +9,13 @@
<mat-datepicker #transferDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
<textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</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>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="rejectClientForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<div class="layout-column">
<mat-form-field (click)="rejectionDatePicker.open()">
<mat-label>{{ 'labels.inputs.Rejection Date' | translate }}</mat-label>
<input
@@ -21,7 +21,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Rejection Reason' | translate }}</mat-label>
<mat-select formControlName="rejectionReasonId">
<mat-option *ngFor="let reason of rejectionData" [value]="reason.id">
@@ -36,7 +36,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>
@@ -1,6 +1,6 @@
<div class="container mat-typography">
<div class="mat-elevation-z2-surveycont">
<div class="survey-select" fxLayout="row">
<div class="survey-select layout-row">
<mat-label class="name-label">{{ 'labels.inputs.Survey Name' | translate }}</mat-label>
<mat-select (selectionChange)="onSurveyChange($event)">
<mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
@@ -15,15 +15,14 @@
<ng-container *ngFor="let component of componentGroups">
<h2 *ngIf="component[0].componentKey">component[0].componentKey</h2>
<div fxLayout="column" class="display-questions">
<div class="layout-column display-questions">
<ng-container *ngFor="let question of component">
<div fxLayout="row" class="question">
<mat-label fxFlex="40" class="question-text">{{ question.text }}</mat-label>
<div class="layout-row question">
<mat-label class="flex-40 question-text">{{ question.text }}</mat-label>
<mat-radio-group fxFlex="60" [(ngModel)]="question.answer">
<mat-radio-group class="flex-60 radio-group-spacing" [(ngModel)]="question.answer">
<mat-radio-button
fxLayout="column"
class="radio-button"
class="layout-column radio-button"
*ngFor="let options of question.responseDatas"
[value]="options"
>
@@ -45,3 +45,15 @@
align-items: normal;
white-space: normal;
}
.radio-group-spacing {
display: flex;
gap: 2rem;
flex-direction: row;
}
@media (width <= 768px) {
.radio-group-spacing {
flex-direction: column;
}
}
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="transferClientForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<div class="layout-column">
<mat-form-field>
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
<mat-select required formControlName="destinationOfficeId">
@@ -41,7 +41,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>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="undoClientRejectionForm" (ngSubmit)="submit()">
<mat-card-content>
<mat-form-field fxFlex (click)="reopenedDatePicker.open()">
<mat-form-field class="flex-fill" (click)="reopenedDatePicker.open()">
<mat-label>{{ 'labels.inputs.Reopened On Date' | translate }}</mat-label>
<input
matInput
@@ -21,7 +21,7 @@
</mat-form-field>
</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>
@@ -1,7 +1,7 @@
<div class="container">
<mat-card>
<form [formGroup]="undoClientTransferForm" (ngSubmit)="submit()">
<mat-card-content fxLayout="column">
<mat-card-content class="layout-column">
<mat-form-field (click)="transferDatePicker.open()">
<mat-label>{{ 'labels.inputs.Transfer Date' | translate }}</mat-label>
<input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate" />
@@ -9,13 +9,13 @@
<mat-datepicker #transferDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex>
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Note' | translate }}</mat-label>
<textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</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>
@@ -2,8 +2,8 @@
<mat-card>
<form [formGroup]="clientSavingsAccountForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<mat-form-field fxFlex="48%">
<div class="layout-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
<mat-select formControlName="savingsAccountId">
<mat-option *ngFor="let account of savingsAccounts" [value]="account.id">
@@ -18,7 +18,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>
@@ -1,4 +1,4 @@
<div class="container m-b-20" fxLayoutAlign="end">
<div class="container m-b-20 layout-align-end">
<button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
<fa-icon icon="edit" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Take Survey' | translate }}
@@ -6,8 +6,8 @@
</div>
<div class="container">
<div fxLayout="row">
<mat-form-field fxFlex>
<div class="layout-row">
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)" />
</mat-form-field>
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="withdrawClientForm" (ngSubmit)="submit()">
<mat-card-content>
<div fxLayout="column">
<div class="layout-column">
<mat-form-field (click)="withdrawalDatePicker.open()">
<mat-label>{{ 'labels.inputs.Withdrawal Date' | translate }}</mat-label>
<input
@@ -21,7 +21,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Withdrawal Reason' | translate }}</mat-label>
<mat-select formControlName="withdrawalReasonId">
<mat-option *ngFor="let reason of withdrawalData" [value]="reason.id">
@@ -36,7 +36,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>
@@ -1,5 +1,5 @@
<mat-card class="account-card">
<mat-card-header fxLayout="column" class="header">
<mat-card-header class="header layout-column">
<mat-card-title-group class="header-title-group">
<div class="profile-image-container">
<div>
@@ -9,7 +9,7 @@
[src]="clientImage ? clientImage : 'assets/images/user_placeholder.png'"
/>
</div>
<div fxLayoutAlign="center center" class="m-b-5">
<div class="m-b-5 flex-center">
<button
class="client-image-button"
mat-raised-button
@@ -43,8 +43,8 @@
</div>
<div class="mat-typography account-card-title">
<mat-card-title fxLayout="row wrap" class="content">
<h3 fxFlex="95%">
<mat-card-title class="make-flex content">
<h3 class="flex-95">
<i
class="fa fa-stop"
[ngClass]="clientViewData.status.code | statusLookup"
@@ -53,7 +53,7 @@
<b>{{ 'labels.inputs.Client Name' | translate }} :</b
><mifosx-entity-name entityName="{{ clientViewData.displayName }}"></mifosx-entity-name>
</h3>
<div fxFlex="5%" fxLayoutAlign="end center">
<div class="flex-5 align-end-center">
<button mat-icon-button [matMenuTriggerFor]="clientMenu" aria-label="Client actions" yPosition="below">
<mat-icon matListIcon class="actions-menu">
<fa-icon icon="bars" size="sm"></fa-icon>
@@ -63,8 +63,8 @@
</mat-card-title>
<mat-card-subtitle>
<div fxLayout="row" fxLayout.lt-md="column">
<div fxFlex="50%">
<div class="layout-row responsive-column">
<div class="flex-50">
<table class="account-overview">
<tbody>
<tr>
@@ -106,7 +106,7 @@
</tbody>
</table>
</div>
<div fxFlex="50%">
<div class="flex-50">
<table class="account-overview">
<tbody>
<tr *ngIf="clientViewData.groups.length > 0">
@@ -322,7 +322,7 @@
</mat-card-header>
<mat-card-content>
<nav mat-tab-nav-bar class="navigation-tabs">
<nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
<a
mat-tab-link
[routerLink]="['./general']"
@@ -393,7 +393,8 @@
</a>
</ng-container>
</nav>
<router-outlet></router-outlet>
<mat-tab-nav-panel #tabPanel>
<router-outlet></router-outlet>
</mat-tab-nav-panel>
</mat-card-content>
</mat-card>
@@ -27,3 +27,11 @@
min-width: 85%;
margin-left: 10px;
}
.make-flex {
display: flex;
}
.mat-card-title-group {
width: 100%;
}
@@ -1,4 +1,4 @@
<div fxLayout="column" fxLayoutGap="2%">
<div class="layout-column gap-2px">
<h1 mat-dialog-title align="center">{{ 'labels.heading.Capture Client Image' | translate }}</h1>
<video #video width="540" height="480" autoplay></video>
@@ -9,7 +9,7 @@
<!-- Using a class will break renderer changes -->
<p #fallback [ngStyle]="{ display: 'none' }" align="center"></p>
<div fxFlex="20%" align="center">
<div class="flex-20" align="center">
<button #captureButton *ngIf="!isCaptured" mat-stroked-button color="primary" (click)="capture()">
{{ 'labels.buttons.Capture' | translate }}
</button>
@@ -1,9 +1,9 @@
<h1 mat-dialog-title>
{{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
</h1>
<div>
<form [formGroup]="uploadDocumentForm" fxLayout="column">
<mat-form-field fxFlex>
<div class="m-l-10 m-r-10">
<form [formGroup]="uploadDocumentForm" class="layout-column">
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.File Name' | translate }}</mat-label>
<input formControlName="fileName" required matInput />
<mat-error *ngIf="uploadDocumentForm.controls.fileName.hasError('required')">
@@ -12,7 +12,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex *ngIf="!documentIdentifier">
<mat-form-field class="flex-fill" *ngIf="!documentIdentifier">
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
<input formControlName="description" matInput />
</mat-form-field>
@@ -27,7 +27,7 @@
[disabled]="!uploadDocumentForm.valid"
[mat-dialog-close]="uploadDocumentForm.value"
>
{{ 'labels.buttons.Confirm' | translate }}
{{ 'labels.buttons.Upload' | translate }}
</button>
</mat-dialog-actions>
</form>
@@ -1,7 +1,7 @@
<div class="add-family-member-container">
<form [formGroup]="addFamilyMemberForm" (ngSubmit)="submit()">
<div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
<mat-form-field fxFlex="calc(50% - 25px)">
<div class="layout-row-wrap responsive-column align-start-center">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
<input formControlName="firstName" required matInput />
<mat-error *ngIf="addFamilyMemberForm.controls.firstName.hasError('required')">
@@ -10,12 +10,12 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
<input formControlName="middleName" matInput />
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
<input formControlName="lastName" required matInput />
<mat-error *ngIf="addFamilyMemberForm.controls.lastName.hasError('required')">
@@ -24,12 +24,12 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
<input formControlName="qualification" matInput />
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
<input type="number" formControlName="age" required matInput [min]="minAge" />
<mat-error *ngIf="addFamilyMemberForm.controls.age.hasError('required')">
@@ -38,11 +38,11 @@
</mat-error>
</mat-form-field>
<mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)"
<mat-checkbox formControlName="isDependent" labelPosition="before" class="flex-50-minus-25px">
>{{ 'labels.inputs.Is Dependent' | translate }}?
</mat-checkbox>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
<mat-select formControlName="relationshipId" required>
<mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
@@ -55,7 +55,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
<mat-select formControlName="genderId" required>
<mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
@@ -68,7 +68,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
<mat-select formControlName="professionId">
<mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
@@ -77,7 +77,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
<mat-select formControlName="maritalStatusId">
<mat-option
@@ -89,7 +89,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex (click)="dueDatePicker.open()">
<mat-form-field class="flex-fill" (click)="dueDatePicker.open()">
<mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
<input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
<mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
@@ -101,7 +101,7 @@
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
<div class="layout-row gap-32px layout-align-center">
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
<button type="submit" mat-raised-button color="primary" [disabled]="!addFamilyMemberForm.valid">
{{ 'labels.buttons.Submit' | translate }}
@@ -3,12 +3,14 @@
margin: 0 auto;
padding: 5%;
@media screen and (width >=960px) {
[fxFlex]:nth-child(odd) {
@media screen and (width >= 960px) {
.layout-row-wrap > .flex-fill:nth-child(odd),
.layout-row-wrap > .flex-50-minus-25px:nth-child(odd) {
margin-right: 25px;
}
[fxFlex]:last-child {
.layout-row-wrap > .flex-fill:last-child,
.layout-row-wrap > .flex-50-minus-25px:last-child {
margin-right: 0;
}
}
@@ -1,7 +1,7 @@
<div class="add-family-member-container">
<form [formGroup]="editFamilyMemberForm" (ngSubmit)="submit()">
<div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center">
<mat-form-field fxFlex="calc(50% - 25px)">
<div class="layout-row-wrap responsive-column align-start-center">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
<input formControlName="firstName" required matInput />
<mat-error *ngIf="editFamilyMemberForm.controls.firstName.hasError('required')">
@@ -10,12 +10,12 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
<input formControlName="middleName" matInput />
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
<input formControlName="lastName" required matInput />
<mat-error *ngIf="editFamilyMemberForm.controls.lastName.hasError('required')">
@@ -24,12 +24,12 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
<input formControlName="qualification" matInput />
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
<input type="number" formControlName="age" required matInput />
<mat-error *ngIf="editFamilyMemberForm.controls.age.hasError('required')">
@@ -38,11 +38,11 @@
</mat-error>
</mat-form-field>
<mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="calc(50% - 25px)"
>Is Dependent?
<mat-checkbox formControlName="isDependent" labelPosition="before" class="flex-50-minus-25px">
{{ 'labels.inputs.Is Dependent' | translate }}
</mat-checkbox>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
<mat-select formControlName="relationshipId" required>
<mat-option *ngFor="let relation of addFamilyMemberTemplate.relationshipIdOptions" [value]="relation.id">
@@ -55,7 +55,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
<mat-select formControlName="genderId" required>
<mat-option *ngFor="let gender of addFamilyMemberTemplate.genderIdOptions" [value]="gender.id">
@@ -68,7 +68,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
<mat-select formControlName="professionId">
<mat-option *ngFor="let profession of addFamilyMemberTemplate.professionIdOptions" [value]="profession.id">
@@ -77,7 +77,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="calc(50% - 25px)">
<mat-form-field class="flex-50-minus-25px">
<mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
<mat-select formControlName="maritalStatusId">
<mat-option
@@ -89,7 +89,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex (click)="dueDatePicker.open()">
<mat-form-field class="flex-fill" (click)="dueDatePicker.open()">
<mat-label>{{ 'labels.inputs.Date Of Birth' | translate }}</mat-label>
<input formControlName="dateOfBirth" matInput [max]="maxDate" [matDatepicker]="dueDatePicker" required />
<mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
@@ -101,7 +101,7 @@
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="center">
<div class="layout-row gap-32px layout-align-center">
<button type="button" mat-raised-button [routerLink]="['../../']">
{{ 'labels.buttons.Cancel' | translate }}
</button>
@@ -3,12 +3,12 @@
margin: 0 auto;
padding: 5%;
@media screen and (width >=960px) {
[fxFlex]:nth-child(odd) {
@media screen and (width >= 960px) {
.flex-50-minus-25px:nth-child(odd) {
margin-right: 25px;
}
[fxFlex]:last-child {
.flex-50-minus-25px:last-child {
margin-right: 0;
}
}
@@ -2,7 +2,7 @@
<router-outlet>
<h3>{{ 'labels.heading.Family Members' | translate }}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-row align-flex-end">
<button mat-raised-button color="primary" [routerLink]="['./add']">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
@@ -21,7 +21,7 @@
<mat-divider [inset]="true"></mat-divider>
<div class="family-member-actions" fxLayout="row" fxLayoutAlign="flex-end">
<div class="family-member-actions layout-row align-end">
<button mat-button color="primary">
<fa-icon icon="edit" [routerLink]="[member.id, 'edit']"></fa-icon>
</button>
@@ -1,6 +1,6 @@
<div class="tab-container mat-typography">
<h3>{{ 'labels.heading.Performance History' | translate }}</h3>
<div fxLayout="row" fxLayoutGap="32px" class="performance-history-container">
<div class="layout-row gap-32px performance-history-container">
<table>
<tbody>
<tr>
@@ -25,13 +25,13 @@
<!-- Upcoming Charges -->
<div class="heading-content">
<div fxLayout="column" fxFlex="50%">
<div class="layout-column flex-50">
<div className="heading-name">
<h3>{{ 'labels.heading.Upcoming Charges' | translate }}</h3>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-column flex-50">
<div class="layout-row align-flex-end">
<button
mat-raised-button
class="f-right"
@@ -109,13 +109,13 @@
<!-- loans accounts overview table -->
<div class="heading-content">
<div fxLayout="column" fxFlex="50%">
<div class="layout-column flex-50">
<div class="heading-name">
<h3>{{ 'labels.heading.Loan Accounts' | translate }}</h3>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-column flex-50">
<div class="layout-row align-flex-end">
<button mat-raised-button class="f-right" color="primary" (click)="toggleLoanAccountsOverview()">
{{ viewAccountsLabel(showClosedLoanAccounts) | translate }}
</button>
@@ -299,13 +299,13 @@
<!-- Saving overview Table -->
<div class="heading-content">
<div fxLayout="column" fxFlex="50%">
<div class="layout-column flex-50">
<div class="heading-name">
<h3>{{ 'labels.heading.Saving Accounts' | translate }}</h3>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-column flex-50">
<div class="layout-row align-flex-end">
<button mat-raised-button class="f-right" color="primary" (click)="toggleSavingAccountsOverview()">
{{ viewAccountsLabel(showClosedSavingAccounts) | translate }}
</button>
@@ -441,13 +441,13 @@
<!-- Fixed Deposit Table -->
<div class="heading-content">
<div fxLayout="column" fxFlex="50%">
<div class="layout-column flex-50">
<div class="heading-name">
<h3>{{ 'labels.heading.Fixed Deposit Accounts' | translate }}</h3>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-column flex-50">
<div class="layout-row align-flex-end">
<button mat-raised-button class="f-right" color="primary" (click)="toggleFixedAccountsOverview()">
{{ viewAccountsLabel(showClosedFixedAccounts) | translate }}
</button>
@@ -562,13 +562,13 @@
<!-- Recurring Deposit Table -->
<div class="heading-content">
<div fxLayout="column" fxFlex="50%">
<div class="layout-column flex-50">
<div class="heading-name">
<h3>{{ 'labels.heading.Recurring Deposit Accounts' | translate }}</h3>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-column flex-50">
<div class="layout-row align-flex-end">
<button mat-raised-button class="f-right" color="primary" (click)="toggleRecurringAccountsOverview()">
{{ viewAccountsLabel(showClosedRecurringAccounts) | translate }}
</button>
@@ -691,13 +691,13 @@
<!-- Shares overview Table -->
<div class="heading-content">
<div fxLayout="column" fxFlex="50%">
<div class="layout-column flex-50">
<div class="heading-name">
<h3>{{ 'labels.inputs.Shares Accounts' | translate }}</h3>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-column flex-50">
<div class="layout-row align-flex-end">
<button mat-raised-button class="f-right" color="primary" (click)="toggleShareAccountsOverview()">
{{ viewAccountsLabel(showClosedShareAccounts) | translate }}
</button>
@@ -815,13 +815,13 @@
<!-- Collateral Data Table -->
<div class="heading-content">
<div fxLayout="column" fxFlex="50%">
<div class="layout-column flex-50">
<div class="heading-name">
<h3>{{ 'labels.heading.Collateral Data' | translate }}</h3>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="flex-end">
<div class="layout-column flex-50">
<div class="layout-row align-flex-end">
<button mat-raised-button class="f-right" color="primary" disabled>
{{ 'labels.buttons.View Collaterals' | translate }}
</button>
@@ -1,5 +1,5 @@
<div class="tab-container mat-typography">
<div class="header-row" fxLayout="row" fxLayoutAlign="space-between">
<div class="header-row layout-row align-space-between">
<h3 class="mat-subheading-2">
{{ 'labels.heading.Identities' | translate }}
</h3>