Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/clients/clients-view/identities-tab/identities-tab.component.html

@@ -37,45 +37,51 @@
     <ng-container matColumnDef="documents">
       <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Identity Documents' | translate }}</th>
       <td mat-cell *matCellDef="let identity">
-        <div class="document-grid" *ngIf="identity.documents?.length; else noDocs">
-          <div class="document-card" *ngFor="let document of identity.documents; trackBy: trackByDocumentId">
-            <div
-              class="thumb"
-              [class.clickable]="isPreviewable(document)"
-              role="button"
-              tabindex="0"
-              [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
-              (keydown.enter)="isPreviewable(document) && openDocumentPreview(identity, document)"
-              (keydown.space)="isPreviewable(document) && openDocumentPreview(identity, document)"
-              (click)="isPreviewable(document) && openDocumentPreview(identity, document)"
-            >
-              <ng-container *ngIf="previewThumbnails[document.id]; else placeholder">
-                <img
-                  [src]="previewThumbnails[document.id]"
-                  [alt]="document.name"
-                  [title]="document.name"
-                  loading="lazy"
-                />
-              </ng-container>
-              <ng-template #placeholder>
-                <div class="placeholder">
-                  <fa-icon icon="file"></fa-icon>
-                  <span>{{ document.fileName || document.name }}</span>
+        @if (identity.documents?.length) {
+          <div class="document-grid">
+            @for (document of identity.documents; track trackByDocumentId($index, document)) {
+              <div class="document-card">
+                <div
+                  class="thumb"
+                  [class.clickable]="isPreviewable(document)"
+                  role="button"
+                  tabindex="0"
+                  [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
+                  (keydown.enter)="isPreviewable(document) && openDocumentPreview(identity, document)"
+                  (keydown.space)="isPreviewable(document) && openDocumentPreview(identity, document)"
+                  (click)="isPreviewable(document) && openDocumentPreview(identity, document)"
+                >
+                  @if (previewThumbnails[document.id]) {
+                    <img
+                      [src]="previewThumbnails[document.id]"
+                      [alt]="document.name"
+                      [title]="document.name"
+                      loading="lazy"
+                    />
+                  } @else {
+                    <div class="placeholder">
+                      <fa-icon icon="file"></fa-icon>
+                      <span>{{ document.fileName || document.name }}</span>
+                    </div>
+                  }
+                  @if (isPreviewable(document)) {
+                    <div class="preview-overlay">
+                      <fa-icon icon="eye"></fa-icon>
+                    </div>
+                  }
+                </div>
+                <div class="card-body">
+                  <div class="title">{{ document.name }}</div>
+                  @if (document.fileName) {
+                    <div class="meta">{{ document.fileName }}</div>
+                  }
                 </div>
-              </ng-template>
-              <div class="preview-overlay" *ngIf="isPreviewable(document)">
-                <fa-icon icon="eye"></fa-icon>
               </div>
-            </div>
-            <div class="card-body">
-              <div class="title">{{ document.name }}</div>
-              <div class="meta" *ngIf="document.fileName">{{ document.fileName }}</div>
-            </div>
+            }
           </div>
-        </div>
-        <ng-template #noDocs>
+        } @else {
           <span class="muted">{{ 'labels.text.NoDocuments' | translate }}</span>
-        </ng-template>
+        }
       </td>
     </ng-container>