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,5 +1,5 @@
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
<mat-select #charge>
<mat-option *ngFor="let charge of chargeData" [value]="charge">
@@ -8,7 +8,7 @@
</mat-select>
</mat-form-field>
<div fxFlex="48%" fxFlexAlign="center">
<div class="flex-48 align-center">
<button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }}
@@ -16,8 +16,7 @@
</div>
<table
fxFlex="98%"
class="mat-elevation-z1"
class="flex-98 mat-elevation-z1"
mat-table
[dataSource]="chargesDataSource"
[hidden]="chargesDataSource.length === 0"
@@ -120,7 +119,7 @@
</table>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<div class="layout-row responsive-column align-center gap-2px margin-t">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
@@ -1,6 +1,6 @@
<form [formGroup]="recurringDepositAccountDetailsForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
<mat-select formControlName="productId" required>
<mat-option *ngFor="let product of productData" [value]="product.id">
@@ -13,7 +13,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="isProductSelected">
<mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()" *ngIf="isProductSelected">
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
<input
matInput
@@ -31,7 +31,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="isProductSelected">
<mat-form-field class="flex-48" *ngIf="isProductSelected">
<mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
<mat-select formControlName="fieldOfficerId">
<mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
@@ -40,13 +40,13 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="isProductSelected">
<mat-form-field class="flex-48" *ngIf="isProductSelected">
<mat-label>{{ 'labels.inputs.External id' | translate }}</mat-label>
<input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate }}" />
</mat-form-field>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<div class="layout-row align-center gap-2percent margin-t responsive-column">
<button mat-raised-button matStepperPrevious disabled>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
@@ -1,27 +1,27 @@
<div fxLayout="column" fxLayoutGap="2%">
<div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
<span fxFlex="40%">{{ 'labels.inputs.name' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.accountChart.name }}</span>
<div class="layout-column gap-2px">
<div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
<span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate.accountChart.name }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
</div>
<div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
<span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
<div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
<span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
</div>
<div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
<span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
<div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
<span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
<span fxFlex="60%">{{
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
<span class="flex-60">{{
recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
}}</span>
</div>
@@ -80,19 +80,16 @@
[attr.colspan]="chartSlabsDisplayedColumns.length"
>
<div
fxLayout="row wrap"
fxFlexFill
class="incentives"
class="incentives flex-fill layout-row flex-wrap"
[@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
>
<mat-card fxLayout="row wrap" fxFlexFill>
<h4 class="m-b-10" fxFlex="13%">
<mat-card class="layout-row-wrap flex-fill">
<h4 class="m-b-10 flex-13">
{{ 'labels.heading.Incentives' | translate }}
</h4>
<table
fxFlexFill
class="mat-elevation-z1"
class="mat-elevation-z1 flex-fill"
mat-table
[dataSource]="chartSlab.incentives"
*ngIf="chartSlab.incentives.length"
@@ -153,7 +150,7 @@
</table>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<div class="layout-row responsive-column align-center gap-2px margin-t">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
@@ -1,93 +1,89 @@
<div fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
<div class="layout-row-wrap responsive-column">
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Details' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
<span fxFlex="60%">{{
<mat-divider class="flex-fill"></mat-divider>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Product' | translate }}</span>
<span class="flex-60">{{
recurringDepositAccountData.productId | find: recurringDepositsAccountTemplate.productOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
<span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate | dateFormat }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Submitted On' | translate }}</span>
<span class="flex-60">{{ recurringDepositAccountData.submittedOnDate | dateFormat }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Field Officer' | translate }}</span>
<span fxFlex="60%">{{
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Field Officer' | translate }}</span>
<span class="flex-60">{{
recurringDepositAccountData.fieldOfficerId
| find: recurringDepositsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
}}</span>
</div>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Currency' | translate }}</h3>
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Currency' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.code }}</span>
<mat-divider class="flex-fill"></mat-divider>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Currency' | translate }}</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.code }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.decimalPlaces }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Currency In Multiples Of' | translate }}</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate.currency.inMultiplesOf }}</span>
</div>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
<span fxFlex="60%">{{
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Terms' | translate }}</h3>
<mat-divider class="flex-fill"></mat-divider>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
<span class="flex-60">{{
recurringDepositAccountData.interestCompoundingPeriodType
| find: recurringDepositsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
| translateKey: 'catalogs'
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
<span fxFlex="60%">{{
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
<span class="flex-60">{{
recurringDepositAccountData.interestPostingPeriodType
| find: recurringDepositsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
| translateKey: 'catalogs'
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
<span fxFlex="60%">{{
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
<span class="flex-60">{{
recurringDepositAccountData.interestCalculationType
| find: recurringDepositsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
| translateKey: 'catalogs'
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
<span fxFlex="60%">{{
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
<span class="flex-60">{{
recurringDepositAccountData.interestCalculationDaysInYearType
| find: recurringDepositsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
| translateKey: 'catalogs'
}}</span>
</div>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Settings' | translate }}</h3>
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Settings' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div fxFlexFill *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
<span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
<span fxFlex="60%"
<mat-divider class="flex-fill"></mat-divider>
<div class="flex-fill" *ngIf="recurringDepositAccountData.lockinPeriodFrequency">
<span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
<span class="flex-60"
>{{ recurringDepositAccountData.lockinPeriodFrequency }}
{{
recurringDepositAccountData.lockinPeriodFrequencyType
@@ -97,14 +93,14 @@
>
</div>
<div fxFlexFill *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
<span fxFlex="40%">{{ 'labels.inputs.Recurring Deposit Amount' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount | formatNumber }}</span>
<div class="flex-fill" *ngIf="recurringDepositAccountData.mandatoryRecommendedDepositAmount">
<span class="flex-40">{{ 'labels.inputs.Recurring Deposit Amount' | translate }}:</span>
<span class="flex-60">{{ recurringDepositAccountData.mandatoryRecommendedDepositAmount | formatNumber }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Deposit Period' | translate }}:</span>
<span fxFlex="60%"
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Deposit Period' | translate }}:</span>
<span class="flex-60"
>{{ recurringDepositAccountData.depositPeriod }}
{{
recurringDepositAccountData.depositPeriodFrequencyId
@@ -114,20 +110,20 @@
>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate.isCalendarInherited | yesNo }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate.isCalendarInherited | yesNo }}</span>
</div>
<ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Deposit Start Date' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate | dateFormat }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Deposit Start Date' | translate }}:</span>
<span class="flex-60">{{ recurringDepositAccountData.expectedFirstDepositOnDate | dateFormat }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Deposit Frequency' | translate }}:</span>
<span *ngIf="recurringDepositAccountData.recurringFrequency" fxFlex="60%"
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Deposit Frequency' | translate }}:</span>
<span *ngIf="recurringDepositAccountData.recurringFrequency" class="flex-60"
>{{ recurringDepositAccountData.recurringFrequency }}
{{
recurringDepositAccountData.recurringFrequencyType
@@ -138,9 +134,9 @@
</div>
</ng-container>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
<span fxFlex="60%"
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
<span class="flex-60"
>{{
recurringDepositsAccountProductTemplate.minDepositTerm
? recurringDepositsAccountProductTemplate.minDepositTerm
@@ -155,9 +151,9 @@
>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.In Multiples Of' | translate }}:</span>
<span fxFlex="60%"
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.In Multiples Of' | translate }}:</span>
<span class="flex-60"
>{{
recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm
? recurringDepositsAccountProductTemplate.inMultiplesOfDepositTerm
@@ -172,9 +168,9 @@
>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
<span fxFlex="60%"
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
<span class="flex-60"
>{{
recurringDepositsAccountProductTemplate.maxDepositTerm
? recurringDepositsAccountProductTemplate.maxDepositTerm
@@ -189,34 +185,33 @@
>
</div>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Interest Rate Chart' | translate }}</h3>
<h3 class="mat-h3 flex-fill">{{ 'labels.inputs.Interest Rate Chart' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div class="margin-b" fxFlexFill fxLayout="column">
<div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
<span fxFlex="40%">{{ 'labels.inputs.name' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
<mat-divider class="flex-fill"></mat-divider>
<div class="margin-b layout-column flex-fill">
<div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.name">
<span class="flex-40">{{ 'labels.inputs.name' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.name }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | dateFormat }}</span>
</div>
<div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
<span fxFlex="40%">{{ 'labels.inputs.End Date' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
<div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
<span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | dateFormat }}</span>
</div>
<div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
<span fxFlex="40%">{{ 'labels.inputs.Description' | translate }}:</span>
<span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
<div class="flex-fill" *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
<span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
<span class="flex-60">{{ recurringDepositsAccountProductTemplate?.accountChart.description }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
<span fxFlex="60%">{{
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
<span class="flex-60">{{
recurringDepositsAccountProductTemplate?.accountChart.isPrimaryGroupingByAmount | yesNo
}}</span>
</div>
@@ -275,19 +270,16 @@
[attr.colspan]="chartSlabsDisplayedColumns.length"
>
<div
fxLayout="row wrap"
fxFlexFill
class="incentives"
class="layout-row-wrap flex-fill incentives"
[@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
>
<mat-card fxLayout="row wrap" fxFlexFill>
<h4 class="m-b-10" fxFlex="13%">
<mat-card class="layout-row-wrap flex-fill">
<h4 class="m-b-10 flex-13">
{{ 'labels.heading.Incentives' | translate }}
</h4>
<table
fxFlexFill
class="mat-elevation-z1"
class="flex-fill mat-elevation-z1"
mat-table
[dataSource]="chartSlab.incentives"
*ngIf="chartSlab.incentives.length"
@@ -348,12 +340,11 @@
</table>
</div>
<div fxFlexFill *ngIf="recurringDepositAccountData.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
<div *ngIf="recurringDepositAccountData.charges.length" class="layout-row-wrap responsive-column flex-fill">
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Charges' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="recurringDepositAccountData.charges">
<mat-divider class="flex-fill"></mat-divider>
<table class="flex-fill mat-elevation-z1" mat-table [dataSource]="recurringDepositAccountData.charges">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.name' | translate }}</th>
<td mat-cell *matCellDef="let charge">
@@ -421,7 +412,7 @@
</div>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<div class="layout-row responsive-column align-center gap-2px margin-t">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
@@ -1,30 +1,25 @@
<form [formGroup]="recurringDepositAccountSettingsForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-checkbox labelPosition="before" formControlName="isMandatoryDeposit" class="margin-v flex-48">
{{ 'labels.inputs.Is Mandatory Deposit' | translate }}?
</mat-checkbox>
<mat-checkbox
fxFlex="48%"
labelPosition="before"
formControlName="adjustAdvanceTowardsFuturePayments"
class="margin-v"
>
<mat-checkbox class="flex-48 margin-v" labelPosition="before" formControlName="adjustAdvanceTowardsFuturePayments">
{{ 'labels.inputs.Adjust advance payments toward future installments' | translate }}?
</mat-checkbox>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowWithdrawal" class="margin-v">
<mat-checkbox labelPosition="before" formControlName="allowWithdrawal" class="margin-v flex-48">
{{ 'labels.inputs.Allow Withdrawals' | translate }}?
</mat-checkbox>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
<input type="number" matInput formControlName="lockinPeriodFrequency" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<mat-select formControlName="lockinPeriodFrequencyType">
<mat-option
@@ -36,9 +31,9 @@
</mat-select>
</mat-form-field>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Recurring Deposit Details' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Recurring Deposit Details' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Recurring Deposit Amount' | translate }}</mat-label>
<input type="number" matInput formControlName="mandatoryRecommendedDepositAmount" required />
<mat-error>
@@ -47,14 +42,14 @@
</mat-error>
</mat-form-field>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Deposit Period' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Period' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Deposit Period' | translate }}</mat-label>
<input type="number" matInput formControlName="depositPeriod" required />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<mat-select formControlName="depositPeriodFrequencyId" required>
<mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
@@ -63,12 +58,12 @@
</mat-select>
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="isCalendarInherited" class="margin-v">
<mat-checkbox labelPosition="before" formControlName="isCalendarInherited" class="margin-v flex-48">
{{ 'labels.inputs.Deposit Frequency Same as Group/Center meeting' | translate }}
</mat-checkbox>
<ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
<mat-form-field fxFlex="48%" (click)="expectedFirstDepositOnDatePicker.open()">
<mat-form-field class="flex-48" (click)="expectedFirstDepositOnDatePicker.open()">
<mat-label>{{ 'labels.inputs.Deposit Start Date' | translate }}</mat-label>
<input
matInput
@@ -82,9 +77,9 @@
<mat-datepicker #expectedFirstDepositOnDatePicker></mat-datepicker>
</mat-form-field>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Deposit Frequency' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Deposit Frequency' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Deposit Frequency' | translate }}</mat-label>
<input type="number" matInput formControlName="recurringFrequency" required />
<mat-error>
@@ -93,7 +88,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<mat-select formControlName="recurringFrequencyType" required>
<mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
@@ -107,11 +102,11 @@
</mat-form-field>
</ng-container>
<mat-divider fxFlex="98%"></mat-divider>
<mat-divider class="flex-98"></mat-divider>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Deposit Term' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Minimum Deposit Term' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
<input type="number" matInput formControlName="minDepositTerm" required />
<mat-error>
@@ -120,7 +115,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Frequency Type' | translate }}</mat-label>
<mat-select formControlName="minDepositTermTypeId" required>
<mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
@@ -133,14 +128,14 @@
</mat-error>
</mat-form-field>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.And thereafter, in Multiples of' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.And thereafter, in Multiples of' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
<input type="number" matInput formControlName="inMultiplesOfDepositTerm" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<mat-select formControlName="inMultiplesOfDepositTermTypeId">
<mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
@@ -149,14 +144,14 @@
</mat-select>
</mat-form-field>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Maximum Deposit Term' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Maximum Deposit Term' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
<input type="number" matInput formControlName="maxDepositTerm" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<mat-select formControlName="maxDepositTermTypeId">
<mat-option *ngFor="let periodFrequencyType of periodFrequencyTypeData" [value]="periodFrequencyType.id">
@@ -165,20 +160,20 @@
</mat-select>
</mat-form-field>
<mat-divider fxFlex="98%"></mat-divider>
<mat-divider class="flex-98"></mat-divider>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.For Pre-mature closure' | translate }}</h4>
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="preClosurePenalApplicable" class="margin-v">
<mat-checkbox class="flex-73 margin-v" labelPosition="before" formControlName="preClosurePenalApplicable">
{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}
</mat-checkbox>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Penal Interest' | translate }} (%)</mat-label>
<input type="number" matInput formControlName="preClosurePenalInterest" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Period' | translate }}</mat-label>
<mat-select formControlName="preClosurePenalInterestOnTypeId">
<mat-option
@@ -190,28 +185,28 @@
</mat-select>
</mat-form-field>
<!-- <mat-divider fxFlex="98%"></mat-divider> -->
<!-- <mat-divider class="flex-98"></mat-divider> -->
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Minimum Balance For Interest Calculation' | translate }}</mat-label>
<input type="number" matInput formControlName="minBalanceForInterestCalculation" />
</mat-form-field>
<ng-container *ngIf="taxGroup">
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Tax Group' | translate }}</h4>
<h4 class="mat-h4 flex-98">{{ 'labels.heading.Tax Group' | translate }}</h4>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
<mat-checkbox labelPosition="before" formControlName="withHoldTax" class="margin-v flex-48">
{{ 'labels.inputs.Is Withhold Tax Applicable' | translate }}?
</mat-checkbox>
<mat-form-field fxFlex="48%" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
<mat-form-field class="flex-48" *ngIf="recurringDepositAccountSettingsForm.controls.taxGroupId">
<mat-label>{{ 'labels.inputs.Tax Group' | translate }}</mat-label>
<input type="text" matInput formControlName="taxGroupId" />
</mat-form-field>
</ng-container>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<div class="layout-row align-center gap-2percent margin-t responsive-column">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
@@ -1,6 +1,6 @@
<form [formGroup]="recurringDepositAccountTermsForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
<mat-select formControlName="interestCompoundingPeriodType" required>
<mat-option
@@ -16,7 +16,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
<mat-select formControlName="interestPostingPeriodType" required>
<mat-option
@@ -32,7 +32,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
<mat-select formControlName="interestCalculationType" required>
<mat-option
@@ -48,7 +48,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
<mat-select formControlName="interestCalculationDaysInYearType" required>
<mat-option
@@ -65,7 +65,7 @@
</mat-form-field>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<div class="layout-row align-center gap-2percent margin-t responsive-column">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}