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="mat-typography">
<h3>{{ 'labels.heading.Address' | translate }}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
<div class="layout-row align-end m-b-20">
<button mat-raised-button color="primary" (click)="addAddress()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
@@ -21,7 +21,7 @@
<mat-divider></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>
@@ -66,7 +66,7 @@
</mat-expansion-panel>
</mat-accordion>
<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,7 +1,7 @@
<form [formGroup]="datatableForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<div *ngFor="let datatableInput of datatableInputs" fxFlex="48%">
<mat-form-field fxFlex="100%" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
<div class="layout-row-wrap gap-2px responsive-column">
<div *ngFor="let datatableInput of datatableInputs" class="flex-48">
<mat-form-field class="flex-100" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
<mat-label>{{ getInputName(datatableInput) }}</mat-label>
<mat-select
@@ -55,7 +55,7 @@
</div>
</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,8 +1,8 @@
<h1 mat-dialog-title>{{ data.context }} {{ 'labels.heading.Family Member' | translate }}</h1>
<form [formGroup]="familyMemberForm">
<div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="2%">
<mat-form-field fxFlex="48%">
<div class="layout-row-wrap responsive-column align-start-center gap-2px">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
<input formControlName="firstName" required matInput />
<mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
@@ -11,12 +11,12 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
<input formControlName="middleName" matInput />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
<input formControlName="lastName" required matInput />
<mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
@@ -25,12 +25,12 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Qualification' | translate }}</mat-label>
<input formControlName="qualification" matInput />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Age' | translate }}</mat-label>
<input type="number" formControlName="age" matInput [min]="0" />
<mat-error *ngIf="familyMemberForm.controls.age.hasError('required')">
@@ -39,11 +39,11 @@
</mat-error>
</mat-form-field>
<mat-checkbox formControlName="isDependent" labelPosition="before" fxFlex="48%"
<mat-checkbox formControlName="isDependent" labelPosition="before" class="flex-48"
>{{ 'labels.inputs.Is Dependent' | translate }}?</mat-checkbox
>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
<mat-select formControlName="relationshipId" required>
<mat-option *ngFor="let relation of data.options.relationshipIdOptions" [value]="relation.id">
@@ -56,7 +56,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
<mat-select formControlName="genderId" required>
<mat-option *ngFor="let gender of data.options.genderIdOptions" [value]="gender.id">
@@ -69,7 +69,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Profession' | translate }}</mat-label>
<mat-select formControlName="professionId">
<mat-option *ngFor="let profession of data.options.professionIdOptions" [value]="profession.id">
@@ -78,7 +78,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
<mat-select formControlName="maritalStatusId">
<mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions" [value]="maritalStatus.id">
@@ -87,7 +87,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="98%" (click)="dueDatePicker.open()">
<mat-form-field class="flex-98" (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>
@@ -1,7 +1,7 @@
<div class="mat-typography">
<h3>{{ 'labels.heading.Family Members' | translate }}</h3>
<div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
<div class="layout-row align-end m-b-20">
<button mat-raised-button color="primary" (click)="addFamilyMember()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
@@ -21,7 +21,7 @@
<mat-divider></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" (click)="editFamilyMember(member, i)"></fa-icon>
</button>
@@ -52,7 +52,7 @@
</mat-expansion-panel>
</mat-accordion>
<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]="createClientForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<div class="layout-row-wrap gap-2px responsive-column">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
<mat-select required formControlName="officeId">
<mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -13,7 +13,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="23%">
<mat-form-field class="flex-fill flex-23">
<mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
<mat-select required formControlName="legalFormId">
<mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
@@ -22,12 +22,12 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="23%">
<mat-form-field class="flex-fill flex-23">
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
<input matInput formControlName="externalId" />
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('fullname')" fxFlex="48%">
<mat-form-field *ngIf="createClientForm.contains('fullname')" class="flex-48">
<mat-label>
{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}
</mat-label>
@@ -42,7 +42,7 @@
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('firstname')" fxFlex="48%">
<mat-form-field *ngIf="createClientForm.contains('firstname')" class="flex-48">
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
<input matInput required formControlName="firstname" />
<mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
@@ -55,7 +55,7 @@
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('middlename')" fxFlex="48%">
<mat-form-field *ngIf="createClientForm.contains('middlename')" class="flex-48">
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
<input matInput formControlName="middlename" />
<mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
@@ -64,7 +64,7 @@
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="createClientForm.contains('lastname')" fxFlex="48%">
<mat-form-field *ngIf="createClientForm.contains('lastname')" class="flex-48">
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
<input matInput required formControlName="lastname" />
<mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
@@ -79,7 +79,7 @@
<mat-divider></mat-divider>
<mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
<mat-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
<mat-label>
{{
'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date'])
@@ -92,14 +92,11 @@
</mat-form-field>
<div
fxFlex="100%"
fxLayout="row wrap"
fxLayoutGap="2%"
fxLayout.lt-md="column"
class="flex-100 layout-row-wrap responsive-column gap-4percent"
formGroupName="clientNonPersonDetails"
*ngIf="createClientForm.contains('clientNonPersonDetails')"
*ngIf="createClientForm.get('clientNonPersonDetails')"
>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
<mat-select formControlName="constitutionId" required>
<mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
@@ -108,7 +105,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
<mat-select formControlName="mainBusinessLineId">
<mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
@@ -117,7 +114,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
<mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
<input
matInput
@@ -130,18 +127,18 @@
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Incorporation Number' | translate }}</mat-label>
<input matInput formControlName="incorpNumber" />
</mat-form-field>
<mat-form-field fxFlex="98%">
<mat-form-field class="flex-98">
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
<textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</div>
<mat-form-field *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%">
<mat-form-field *ngIf="createClientForm.value.legalFormId === 1" class="flex-48">
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
<mat-select formControlName="genderId">
<mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
@@ -150,7 +147,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
<mat-select formControlName="staffId">
<mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
@@ -161,22 +158,21 @@
<mat-checkbox
*ngIf="createClientForm.value.legalFormId === 1"
fxFlex="48%"
class="flex-48 margin-v"
labelPosition="before"
formControlName="isStaff"
class="margin-v"
>
{{ 'labels.inputs.Is staff' | translate }}?
</mat-checkbox>
<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.Mobile No' | translate }}</mat-label>
<input matInput type="number" formControlName="mobileNo" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
<input matInput formControlName="emailAddress" />
<mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
@@ -184,7 +180,7 @@
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
<mat-select formControlName="clientTypeId">
<mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
@@ -193,7 +189,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
<mat-select formControlName="clientClassificationId">
<mat-option
@@ -205,7 +201,7 @@
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
<mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
<input
matInput
@@ -221,13 +217,13 @@
<br />
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="active" class="margin-v">
<mat-checkbox labelPosition="before" formControlName="active" class="margin-v flex-48">
{{ 'labels.inputs.Active' | translate }}?
</mat-checkbox>
<mat-form-field
*ngIf="createClientForm.contains('activationDate')"
fxFlex="48%"
class="flex-48"
(click)="activatedOnDatePicker.open()"
>
<mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
@@ -247,11 +243,11 @@
</mat-error>
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="addSavings" class="margin-v">
<mat-checkbox labelPosition="before" formControlName="addSavings" class="margin-v flex-48">
{{ 'labels.inputs.Open Savings Account' | translate }}?
</mat-checkbox>
<mat-form-field *ngIf="createClientForm.contains('savingsProductId')" fxFlex="48%">
<mat-form-field *ngIf="createClientForm.contains('savingsProductId')" class="flex-48">
<mat-label>{{ 'labels.inputs.Savings Product' | translate }}</mat-label>
<mat-select required formControlName="savingsProductId">
<mat-option *ngFor="let product of savingProductOptions" [value]="product.id">
@@ -265,7 +261,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 disabled>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
@@ -1,137 +1,138 @@
<div fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.General' | translate }}</h3>
<div class="container p-b-20">
<h3>{{ 'labels.heading.General' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.name' | translate }}</span>
<span fxFlex="60%" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
<span fxFlex="60%" *ngIf="client.legalFormId === 1"
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.name' | translate }}</span>
<span class="flex-60" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
<span class="flex-60" *ngIf="client.legalFormId === 1"
>{{ client.firstname }}
{{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
<span fxFlex="60%">{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Office' | translate }}</span>
<span class="flex-60">{{ client.officeId | find: clientTemplate.officeOptions : 'id' : 'name' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Legal Form' | translate }}</span>
<span fxFlex="60%">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Legal Form' | translate }}</span>
<span class="flex-60">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
</div>
<div fxFlexFill *ngIf="client.staffId">
<span fxFlex="40%">{{ 'labels.inputs.Staff' | translate }}</span>
<span fxFlex="60%">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
<div class="flex-fill" *ngIf="client.staffId">
<span class="flex-40">{{ 'labels.inputs.Staff' | translate }}</span>
<span class="flex-60">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
</div>
<div fxFlexFill *ngIf="client.dateOfBirth">
<span fxFlex="40%">{{ client.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</span>
<span fxFlex="60%">{{ client.dateOfBirth | dateFormat }}</span>
<div class="flex-fill" *ngIf="client.dateOfBirth">
<span class="flex-40">{{ client.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</span>
<span class="flex-60">{{ client.dateOfBirth | dateFormat }}</span>
</div>
<div fxFlexFill *ngIf="client.externalId">
<span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
<span fxFlex="60%">
<div class="flex-fill" *ngIf="client.externalId">
<span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
<span class="flex-60">
<mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
</span>
</div>
<div fxFlexFill *ngIf="client.mobileNo">
<span fxFlex="40%">{{ 'labels.inputs.Mobile No' | translate }}</span>
<span fxFlex="60%">{{ client.mobileNo }}</span>
<div class="flex-fill" *ngIf="client.mobileNo">
<span class="flex-40">{{ 'labels.inputs.Mobile No' | translate }}</span>
<span class="flex-60">{{ client.mobileNo }}</span>
</div>
<div fxFlexFill *ngIf="client.emailAddress">
<span fxFlex="40%">{{ 'labels.inputs.Email Address' | translate }}</span>
<span fxFlex="60%">{{ client.emailAddress }}</span>
<div class="flex-fill" *ngIf="client.emailAddress">
<span class="flex-40">{{ 'labels.inputs.Email Address' | translate }}</span>
<span class="flex-60">{{ client.emailAddress }}</span>
</div>
<div fxFlexFill *ngIf="client.clientTypeId">
<span fxFlex="40%">{{ 'labels.inputs.Client Type' | translate }}</span>
<span fxFlex="60%">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
<div class="flex-fill" *ngIf="client.clientTypeId">
<span class="flex-40">{{ 'labels.inputs.Client Type' | translate }}</span>
<span class="flex-60">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
</div>
<div fxFlexFill *ngIf="client.clientClassificationId">
<span fxFlex="40%">{{ 'labels.inputs.Client Classification' | translate }}</span>
<span fxFlex="60%">{{
<div class="flex-fill" *ngIf="client.clientClassificationId">
<span class="flex-40">{{ 'labels.inputs.Client Classification' | translate }}</span>
<span class="flex-60">{{
client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill *ngIf="client.savingsProductId">
<span fxFlex="40%">{{ 'labels.inputs.Savings Product' | translate }}</span>
<span fxFlex="60%">{{ client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name' }}</span>
<div class="flex-fill" *ngIf="client.savingsProductId">
<span class="flex-40">{{ 'labels.inputs.Savings Product' | translate }}</span>
<span class="flex-60">{{
client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill *ngIf="client.submittedOnDate">
<span fxFlex="40%">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
<span fxFlex="60%">{{ client.submittedOnDate | dateFormat }}</span>
<div class="flex-fill" *ngIf="client.submittedOnDate">
<span class="flex-40">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
<span class="flex-60">{{ client.submittedOnDate | dateFormat }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Active' | translate }}?</span>
<span fxFlex="60%">{{ client.active | yesNo }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Active' | translate }}?</span>
<span class="flex-60">{{ client.active | yesNo }}</span>
</div>
<div fxFlexFill *ngIf="client.activationDate">
<span fxFlex="40%">{{ 'labels.inputs.Activation Date' | translate }}</span>
<span fxFlex="60%">{{ client.activationDate | dateFormat }}</span>
<div class="flex-fill" *ngIf="client.activationDate">
<span class="flex-40">{{ 'labels.inputs.Activation Date' | translate }}</span>
<span class="flex-60">{{ client.activationDate | dateFormat }}</span>
</div>
<ng-container *ngIf="client.legalFormId === 1">
<div fxFlexFill *ngIf="client.genderId">
<span fxFlex="40%">{{ 'labels.inputs.Gender' | translate }}</span>
<span fxFlex="60%">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
<div class="flex-fill" *ngIf="client.genderId">
<span class="flex-40">{{ 'labels.inputs.Gender' | translate }}</span>
<span class="flex-60">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Is staff' | translate }}?</span>
<span fxFlex="60%">{{ client.isStaff | yesNo }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Is staff' | translate }}?</span>
<span class="flex-60">{{ client.isStaff | yesNo }}</span>
</div>
</ng-container>
<ng-container *ngIf="client.legalFormId === 2">
<div fxFlexFill *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
<span fxFlex="40%">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
<div class="flex-fill" *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
<span class="flex-40">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
<span class="flex-60">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
<span class="flex-60">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
</div>
<div fxFlexFill *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
<span fxFlex="40%">{{ 'labels.inputs.Main Business Line' | translate }}</span>
<span fxFlex="60%">{{
<div class="flex-fill" *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
<span class="flex-40">{{ 'labels.inputs.Main Business Line' | translate }}</span>
<span class="flex-60">{{
client.clientNonPersonDetails.mainBusinessLineId
| find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill *ngIf="client.clientNonPersonDetails.constitutionId">
<span fxFlex="40%">{{ 'labels.inputs.Constitution' | translate }}</span>
<span fxFlex="60%">{{
<div class="flex-fill" *ngIf="client.clientNonPersonDetails.constitutionId">
<span class="flex-40">{{ 'labels.inputs.Constitution' | translate }}</span>
<span class="flex-60">{{
client.clientNonPersonDetails.constitutionId
| find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{ 'labels.inputs.Remarks' | translate }}</span>
<span fxFlex="60%">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Remarks' | translate }}</span>
<span class="flex-60">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
</div>
</ng-container>
<div fxFlexFill *ngIf="client.familyMembers.length" fxLayout="row wrap" fxLayout.lt-md="column" class="m-b-20">
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Family Members' | translate }}</h3>
<div *ngIf="client.familyMembers.length" class="layout-row-wrap responsive-column flex-fill m-b-20">
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Family Members' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<mat-accordion fxFlexFill class="m-t-5">
<mat-divider class="flex-fill"></mat-divider>
<mat-accordion class="flex-fill m-t-5">
<mat-expansion-panel *ngFor="let member of client.familyMembers" class="family-member">
<mat-expansion-panel-header>
<mat-panel-title>
@@ -169,16 +170,13 @@
</div>
<div
fxFlexFill
class="flex-fill layout-row-wrap responsive-column"
*ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length"
fxLayout="row wrap"
fxLayout.lt-md="column"
>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Address' | translate }}</h3>
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Address' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<mat-accordion fxFlexFill class="m-t-5">
<mat-divider class="flex-fill"></mat-divider>
<mat-accordion class="flex-fill m-t-5">
<mat-expansion-panel *ngFor="let address of client.address" class="address">
<mat-expansion-panel-header>
<mat-panel-title>
@@ -229,7 +227,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 }}