transalte matTooltip

This commit is contained in:
Omar-Nabil
2024-07-12 00:39:43 -06:00
committed by Jose Alberto Hernandez
parent 9a9203e1a1
commit 6d653c3584
8 changed files with 42 additions and 46 deletions
@@ -10,18 +10,18 @@
<mat-form-field fxFlex="30%">
<mat-label>{{'labels.inputs.Floating Rate Name' | translate}}</mat-label>
<input matInput required matTooltip="Unique name for the floating rate scheme." formControlName="name">
<input matInput required matTooltip="{{ 'tooltips.Unique name for the floating rate scheme' | translate}}" formControlName="name">
<mat-error *ngIf="floatingRateForm.controls.name.hasError('required')">
{{'labels.inputs.Floating Rate Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<div class="checkbox-wrapper" fxFlex="30%">
<mat-checkbox formControlName="isBaseLendingRate" matTooltip="Check if this floating rate scheme is to be considered base lending rate for the organisation" class="checkbox" labelPosition="before">{{'labels.inputs.Is Base Lending Rate' | translate}}?</mat-checkbox>
<mat-checkbox formControlName="isBaseLendingRate" matTooltip="{{ 'tooltips.Base lending rate for the organisation' | translate}}" class="checkbox" labelPosition="before">{{'labels.inputs.Is Base Lending Rate' | translate}}?</mat-checkbox>
</div>
<div class="checkbox-wrapper" fxFlex="30%">
<mat-checkbox formControlName="isActive" matTooltip="Check if this floating rate scheme to be activated" class="checkbox" labelPosition="before">{{'labels.inputs.Active' | translate}}</mat-checkbox>
<mat-checkbox formControlName="isActive" matTooltip="{{ 'tooltips.Floating rate scheme to be activated' | translate}}" class="checkbox" labelPosition="before">{{'labels.inputs.Active' | translate}}</mat-checkbox>
</div>
</div>
@@ -34,7 +34,7 @@
<div fxLayout="row wrap" fxLayoutGap="70%" fxLayoutGap.lt-md="0px" class="m-b-10" fxLayout.lt-md="column">
<p fxFlex="25%" class="mat-title">{{'labels.inputs.Floating Rate Periods' | translate}} <i class="fas fa-question" matTooltip="Floating interest rate and start date for this floating rate scheme"></i></p>
<p fxFlex="25%" class="mat-title">{{'labels.inputs.Floating Rate Periods' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Floating interest rate and start date' | translate}}"></i></p>
<button mat-mini-fab type="button" color="primary" (click)="addFloatingRatePeriod()">
<fa-icon icon="plus"></fa-icon>
@@ -45,17 +45,17 @@
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="fromDate">
<th mat-header-cell *matHeaderCellDef matTooltip="Interest effective from date" mat-sort-header> {{'labels.inputs.From Date' | translate}} </th>
<th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest effective from date' | translate}}" mat-sort-header> {{'labels.inputs.From Date' | translate}} </th>
<td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate | dateFormat }} </td>
</ng-container>
<ng-container matColumnDef="interestRate">
<th mat-header-cell *matHeaderCellDef matTooltip="Annualised Interest rate" mat-sort-header> {{'labels.inputs.Interest Rate' | translate}} </th>
<th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Annualised Interest rate' | translate}}" mat-sort-header> {{'labels.inputs.Interest Rate' | translate}} </th>
<td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate | formatNumber }} </td>
</ng-container>
<ng-container matColumnDef="isDifferential">
<th mat-header-cell *matHeaderCellDef matTooltip="If checked, Interest rate mentioned is added to base lending rate as of the from date of this period, absolute otherwise" mat-sort-header> {{'labels.inputs.Is Differential' | translate}}? </th>
<th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest rate mentioned is added to base lending rate' | translate}}" mat-sort-header> {{'labels.inputs.Is Differential' | translate}}? </th>
<td mat-cell *matCellDef="let floatingRate">
<fa-icon *ngIf="floatingRate.isDifferentialToBaseLendingRate" icon="check-circle" size="lg"
class="is-differential" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
@@ -67,11 +67,11 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
<td mat-cell *matCellDef="let floatingRatePeriod" fxLayoutGap="15%">
<button type="button" fxFlex="8%" color="primary" mat-icon-button matTooltip="Edit Period" matTooltipPosition="left"
<button type="button" fxFlex="8%" color="primary" mat-icon-button matTooltip="{{ 'tooltips.Edit Period' | translate}}" matTooltipPosition="left"
(click)="editFloatingRatePeriod(floatingRatePeriod)">
<fa-icon icon="edit" size="lg"></fa-icon>
</button>
<button type="button" fxFlex="8%" color="warn" mat-icon-button matTooltip="Remove Period" matTooltipPosition="right"
<button type="button" fxFlex="8%" color="warn" mat-icon-button matTooltip="{{ 'tooltips.Remove Period' | translate}}" matTooltipPosition="right"
(click)="deleteFloatingRatePeriod(floatingRatePeriod)">
<fa-icon icon="trash" size="lg"></fa-icon>
</button>
@@ -10,20 +10,20 @@
<mat-form-field fxFlex="25%">
<mat-label>{{'labels.inputs.Floating Rate Name' | translate}}</mat-label>
<input matInput required matTooltip="Unique name for the floating rate scheme." formControlName="name">
<input matInput required matTooltip="{{ 'tooltips.Unique name for the floating rate scheme' | translate}}" formControlName="name">
<mat-error *ngIf="floatingRateForm.controls.name.hasError('required')">
{{'labels.inputs.Floating Rate Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
</mat-error>
</mat-form-field>
<div class="checkbox-wrapper" fxFlex="25%">
<mat-checkbox formControlName="isBaseLendingRate" matTooltip="Check if this floating rate scheme is to be considered base lending rate for the organisation" class="checkbox" labelPosition="before">
<mat-checkbox formControlName="isBaseLendingRate" matTooltip="{{ 'tooltips.Base lending rate for the organisation' | translate}}" class="checkbox" labelPosition="before">
{{'labels.inputs.Is Base Lending Rate' | translate}}?
</mat-checkbox>
</div>
<div class="checkbox-wrapper" fxFlex="15%">
<mat-checkbox formControlName="isActive" matTooltip="Check if this floating rate scheme to be activated" class="checkbox" labelPosition="before">
<mat-checkbox formControlName="isActive" matTooltip="{{ 'tooltips.Floating rate scheme to be activated' | translate}}" class="checkbox" labelPosition="before">
{{'labels.inputs.Active' | translate}}
</mat-checkbox>
</div>
@@ -38,7 +38,7 @@
<div fxLayout="row wrap" fxLayoutGap="70%" fxLayoutGap.lt-md="0px" class="m-b-10" fxLayout.lt-md="column">
<p fxFlex="25%" class="mat-title">{{'labels.inputs.Floating Rate Periods' | translate}} <i class="fas fa-question" matTooltip="Floating interest rate and start date for this floating rate scheme"></i></p>
<p fxFlex="25%" class="mat-title">{{'labels.inputs.Floating Rate Periods' | translate}} <i class="fas fa-question" matTooltip="{{ 'tooltips.Floating interest rate and start date for this floating rate scheme' | translate}}"></i></p>
<button mat-mini-fab type="button" color="primary" (click)="addFloatingRatePeriod()">
<fa-icon icon="plus"></fa-icon>
@@ -49,17 +49,17 @@
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="fromDate">
<th mat-header-cell *matHeaderCellDef matTooltip="Interest effective from date" mat-sort-header> {{'labels.inputs.From Date' | translate}} </th>
<th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest effective from date' | translate}}" mat-sort-header> {{'labels.inputs.From Date' | translate}} </th>
<td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate | dateFormat }} </td>
</ng-container>
<ng-container matColumnDef="interestRate">
<th mat-header-cell *matHeaderCellDef matTooltip="Annualised Interest rate" mat-sort-header> {{'labels.inputs.Interest Rate' | translate}} </th>
<th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Annualised Interest rate' | translate}}" mat-sort-header> {{'labels.inputs.Interest Rate' | translate}} </th>
<td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate }} </td>
</ng-container>
<ng-container matColumnDef="isDifferential">
<th mat-header-cell *matHeaderCellDef matTooltip="If checked, Interest rate mentioned is added to base lending rate as of the from date of this period, absolute otherwise" mat-sort-header> {{'labels.inputs.Is Differential' | translate}}? </th>
<th mat-header-cell *matHeaderCellDef matTooltip="{{ 'tooltips.Interest rate mentioned is added to base lending rate' | translate}}" mat-sort-header> {{'labels.inputs.Is Differential' | translate}}? </th>
<td mat-cell *matCellDef="let floatingRate">
<fa-icon *ngIf="floatingRate.isDifferentialToBaseLendingRate" icon="check-circle" size="lg"
class="is-differential" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
@@ -4,7 +4,7 @@
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
<mat-select formControlName="currencyCode" matTooltip="The currency in which the loan will be disbursed." required>
<mat-select formControlName="currencyCode" matTooltip="{{ 'tooltips.The currency in which the loan will be disbursed' | translate}}" required>
<mat-option *ngFor="let currency of currencyData" [value]="currency.code">
{{ currency.name }}
</mat-option>
@@ -16,7 +16,7 @@
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
<input type="number" matTooltip="The number of decimal places to be used to track and report on loans." matInput formControlName="digitsAfterDecimal" required>
<input type="number" matTooltip="{{ 'tooltips.Number of decimal places to be used to track and report' | translate}}" matInput formControlName="digitsAfterDecimal" required>
<mat-error>
{{'labels.inputs.Decimal Places' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
</mat-error>
@@ -24,7 +24,7 @@
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
<input type="number" matInput matTooltip="You can enter multiples of currency value. For example, if you put multiples of 100, the currency value will be rounded off to 200, 300, 400, etc." formControlName="inMultiplesOf">
<input type="number" matInput matTooltip="{{ 'tooltips.Enter multiples of currency value' | translate}}" formControlName="inMultiplesOf">
</mat-form-field>
<mat-form-field fxFlex="48%">
@@ -4,7 +4,7 @@
<mat-form-field fxFlex="72%">
<mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
<input matInput formControlName="name" matTooltip="The product name is a unique identifier for the lending product." required>
<input matInput formControlName="name" matTooltip="{{ 'tooltips.Product name is a unique identifier' | translate}}" required>
<mat-error>
{{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
</mat-error>
@@ -12,7 +12,7 @@
<mat-form-field fxFlex="24%">
<mat-label>{{'labels.inputs.Short Name' | translate}}</mat-label>
<input matInput formControlName="shortName" maxlength="4" matTooltip="The short name is a unique identifier for the lending product." required>
<input matInput formControlName="shortName" maxlength="4" matTooltip="{{ 'tooltips.Short name is a unique identifier' | translate}}" required>
<mat-error>
{{'labels.inputs.Short Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
</mat-error>
@@ -20,34 +20,34 @@
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Fund' | translate}}</mat-label>
<mat-select matTooltip="Loan products may be assigned to a fund set up by your financial institution. If available, the fund field can be used for tracking and reporting on groups of loans." formControlName="fundId">
<mat-select matTooltip="{{ 'tooltips.Loan products may be assigned' | translate}}" formControlName="fundId">
<mat-option *ngFor="let fund of fundData" [value]="fund.id">
{{ fund.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox labelPosition="before" matTooltip="A borrower loan counter (cycle) is used for tracking how many time the client has taken this particular product." formControlName="includeInBorrowerCycle" fxFlex="48%">
<mat-checkbox labelPosition="before" matTooltip="{{ 'tooltips.A borrower loan counter (cycle)' | translate}}" formControlName="includeInBorrowerCycle" fxFlex="48%">
{{'labels.inputs.Include in Customer Loan Counter' | translate}}
</mat-checkbox>
<mat-form-field fxFlex="48%" (click)="startDatePicker.open()">
<mat-label>{{'labels.inputs.Start Date' | translate}}</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" matTooltip="The date that the loan product will be active and available to clients. If blank, the loan product will be active as soon as it is created." formControlName="startDate">
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" matTooltip="{{ 'tooltips.loan product will be active and available to clients' | translate}}" formControlName="startDate">
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
<mat-datepicker #startDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="48%" (click)="closeDatePicker.open()">
<mat-label>{{'labels.inputs.Close Date' | translate}}</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closeDatePicker" matTooltip="The date that the loan product will become inactive and unavailable to clients. If blank, the load product will never become inactive." formControlName="closeDate">
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closeDatePicker" matTooltip="{{ 'tooltips.loan product will become inactive and unavailable to clients' | translate}}" formControlName="closeDate">
<mat-datepicker-toggle matSuffix [for]="closeDatePicker"></mat-datepicker-toggle>
<mat-datepicker #closeDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
<textarea matInput matTooltip="The description is used to provide additional information regarding the purpose and characteristics of the loan product." formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
<textarea matInput matTooltip="{{ 'tooltips.Provide additional information' | translate}}" formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</div>
@@ -4,7 +4,7 @@
<mat-form-field fxFlex="30%">
<mat-label>{{'labels.inputs.products.loan.Amortization' | translate}}</mat-label>
<mat-select formControlName="amortizationType" matTooltip="The Amortization value is input to calculating the repayment amounts for repayment of the loan." required>
<mat-select formControlName="amortizationType" matTooltip="{{ 'tooltips.The Amortization value' | translate}}" required>
<mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
{{'labels.inputs.products.loan.amortizationType.' + amortizationType.value | translate}}
</mat-option>
@@ -16,7 +16,7 @@
<mat-form-field fxFlex="30%">
<mat-label>{{'labels.inputs.Interest Method' | translate}}</mat-label>
<mat-select formControlName="interestType" matTooltip="The Interest method value is input to calculating the payments amount for repayment of the loan. " required>
<mat-select formControlName="interestType" matTooltip="{{ 'tooltips.The Interest method value' | translate}}" required>
<mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
{{ interestType.value | translateKey:'catalogs' }}
</mat-option>
@@ -28,8 +28,7 @@
<mat-form-field fxFlex="30%">
<mat-label>{{'labels.inputs.Interest calculation period' | translate}}</mat-label>
<mat-select formControlName="interestCalculationPeriodType" matTooltip="Daily - Will Calculate the interest on DAILY basis ex: Month of February has 28days
and it will calculate interest for 28days, SAME AS REPAYMENT PERIOD- it calculates for the month,that is, 30days." required>
<mat-select formControlName="interestCalculationPeriodType" matTooltip="{{ 'tooltips.Daily - Will Calculate the interest' | translate}}" required>
<mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData" [value]="interestCalculationPeriodType.id">
{{ interestCalculationPeriodType.value | translateKey:'catalogs' }}
</mat-option>
@@ -44,8 +43,7 @@
</mat-checkbox>
<mat-checkbox *ngIf="loanProductSettingsForm.value.interestCalculationPeriodType === 1" fxFlex="96%" labelPosition="before"
matTooltip=" To be used with SAME AS REPAYMENT PERIOD- for calculating exact interest with partial period ex: Interest charged from is 5th of April ,
Principal is 10000 and interest is 1% per month then the interest will be (10000 * 1%)* (25/30) , it calculates for the month first then calculates exact periods between start date and end date(can be a decimal)"
matTooltip="{{ 'tooltips.To be used with SAME AS REPAYMENT PERIOD' | translate}}"
formControlName="allowPartialPeriodInterestCalcualtion">
{{'labels.inputs.Calculate interest for exact days in partial period' | translate}}
</mat-checkbox>
@@ -65,7 +63,7 @@
<mat-form-field fxFlex="30%">
<mat-label>{{'labels.inputs.Repayment strategy' | translate}}</mat-label>
<mat-select formControlName="transactionProcessingStrategyCode" matTooltip="The repayment strategy determines the sequence in which each of the components is paid."
<mat-select formControlName="transactionProcessingStrategyCode" matTooltip="{{ 'tooltips.The repayment strategy' | translate}}"
required [disabled]="advancedTransactionProcessingStrategyDisabled">
<mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData" [value]="transactionProcessingStrategy.code">
{{ transactionProcessingStrategy.name | translateKey:'catalogs' }}
@@ -87,15 +85,14 @@
<h3 fxFlex="96%" class="mat-h3">{{'labels.inputs.Loan Tranche Details' | translate}}</h3>
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="multiDisburseLoan" matTooltip="Leave this checkbox unchecked if the loan is a single disburse loan. Check this
checkbox if the loan is a multi disburse loan. See additional fields for additional information required for this type of loan." class="margin-b">
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="multiDisburseLoan" matTooltip="{{ 'tooltips.Leave this checkbox unchecked' | translate}}" class="margin-b">
{{'labels.inputs.Enable Multiple Disbursals' | translate}}
</mat-checkbox>
<div *ngIf="loanProductSettingsForm.value.multiDisburseLoan" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Maximum Tranche count' | translate}}</mat-label>
<input type="number" matInput matTooltip="The maximum number of disbursements allowed for a loan account." formControlName="maxTrancheCount" required>
<input type="number" matInput matTooltip="{{ 'tooltips.Maximum number of disbursements' | translate}}" formControlName="maxTrancheCount" required>
<mat-error *ngIf="loanProductSettingsForm.controls.maxTrancheCount.hasError('required')">
{{'labels.inputs.Maximum Tranche count' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
</mat-error>
@@ -103,7 +100,7 @@
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Maximum allowed outstanding balance' | translate}}</mat-label>
<input type="number" matInput matTooltip="The maximum outstanding loan account balance allowed at a point in time." formControlName="outstandingLoanBalance">
<input type="number" matInput matTooltip="{{ 'tooltips.Maximum outstanding loan account balance' | translate}}" formControlName="outstandingLoanBalance">
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="disallowExpectedDisbursements" class="margin-v">
@@ -113,8 +110,7 @@
<h3 fxFlex="96%" class="mat-h3">{{'labels.heading.Down Payment' | translate}}</h3>
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="enableDownPayment" matTooltip="Leave this checkbox checked if the loan has Down Payment, A Down Payment is
a sum a buyer pays upfront when purchasing a good. It represents a percentage of the total purchase price, and the balance is usually financed" class="margin-b">
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="enableDownPayment" matTooltip="{{ 'tooltips.Leave this checkbox unchecked' | translate}}" class="margin-b">
{{'labels.inputs.Enable Down Payment' | translate}}
</mat-checkbox>
@@ -49,7 +49,7 @@
<th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
<td mat-cell *matCellDef="let row; let rowIndex = index">
<button type="button" mat-icon-button color="warn"
(click)="deleteDelinquencyRange(rowIndex)" matTooltip="Delete"
(click)="deleteDelinquencyRange(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate}}"
matTooltipPosition="left">
<fa-icon icon="trash"></fa-icon>
</button>
@@ -52,7 +52,7 @@
<th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
<td mat-cell *matCellDef="let row; let rowIndex = index">
<button type="button" mat-icon-button color="warn"
(click)="deleteDelinquencyRange(rowIndex)" matTooltip="Delete"
(click)="deleteDelinquencyRange(rowIndex)" matTooltip="{{ 'tooltips.Delete' | translate}}"
matTooltipPosition="left">
<fa-icon icon="trash"></fa-icon>
</button>
@@ -73,26 +73,26 @@
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate}} </th>
<td mat-cell *matCellDef="let charge">
<span *ngIf="savingsAccountData.status.value === 'Submitted and pending approval'">
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
<button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Edit Charge' | translate }}"
*mifosxHasPermission="'UPDATE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); editCharge(charge)">
<i class="fa fa-pencil"></i>
</button>
<button class="account-action-button" mat-raised-button color="warn" matTooltip="Delete Charge"
<button class="account-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Delete Charge' | translate }}"
*mifosxHasPermission="'DELETE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); deleteCharge(charge.id)">
<i class="fa fa-trash"></i>
</button>
</span>
<span *ngIf="savingsAccountData.status.value === 'Active' && charge.amountOutstanding !== 0">
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Pay Charge"
<button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Pay Charge' | translate }}"
*mifosxHasPermission="'PAY_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); payCharge(charge.id)">
<i class="fa fa-dollar"></i>
</button>
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Waive Charge"
<button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Waive Charge' | translate }}"
*mifosxHasPermission="'WAIVE_SAVINGSACCOUNTCHARGE'" (click)="routeEdit($event); waiveCharge(charge.id)">
<i class="fa fa-flag"></i>
</button>
<ng-container *ngIf="isRecurringCharge(charge)">
<button class="account-action-button" mat-raised-button color="primary" matTooltip="Inactivate Charge"
<button class="account-action-button" mat-raised-button color="primary" matTooltip="{{ 'tooltips.Inactivate Charge' | translate }}"
*mifosxHasPermission="'INACTIVATE_SAVINGSACCOUNTCHARGE'"
(click)="routeEdit($event); inactivateCharge(charge.id)">
<i class="fa fa-ban"></i>