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="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>