WEB-442-feat: implement LightGallery document preview across all document tabs (#2847)

* feat: implement LightGallery document preview across all document tabs

feat(documents): add LightGallery preview with accessibility and error handling

* fix: add accessibility and performance improvements for document preview

fix(styles): replace undefined  variable with -river

Delete button title translated

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html

@@ -1,8 +1,56 @@
 <h1 mat-dialog-title>
-  {{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
+  <ng-container *ngIf="documentIdentifier; else defaultTitle">
+    {{ 'labels.heading.Add Client Identifier' | translate }}
+  </ng-container>
+  <ng-template #defaultTitle>
+    {{ 'labels.heading.Upload' | translate }} {{ entityType }} {{ 'labels.heading.Documents' | translate }}
+  </ng-template>
 </h1>
 <div class="m-l-10 m-r-10">
   <form [formGroup]="uploadDocumentForm" class="layout-column">
+    <!-- Identity-specific fields -->
+    <ng-container *ngIf="documentIdentifier">
+      <mat-form-field class="flex-fill">
+        <mat-label>{{ 'labels.inputs.Document Type' | translate }}</mat-label>
+        <mat-select formControlName="documentTypeId" required>
+          <mat-option *ngFor="let docType of allowedDocumentTypes" [value]="docType.id">
+            {{ docType.name }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="uploadDocumentForm.controls.documentTypeId?.hasError('required')">
+          {{ 'labels.inputs.Document Type' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field class="flex-fill">
+        <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
+        <mat-select formControlName="status" required>
+          <mat-option *ngFor="let status of statusOptions" [value]="status.value">
+            {{ status.label }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="uploadDocumentForm.controls.status?.hasError('required')">
+          {{ 'labels.inputs.Status' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field class="flex-fill">
+        <mat-label>{{ 'labels.inputs.Document Key' | translate }}</mat-label>
+        <input formControlName="documentKey" required matInput />
+        <mat-error *ngIf="uploadDocumentForm.controls.documentKey?.hasError('required')">
+          {{ 'labels.inputs.Document Key' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field class="flex-fill">
+        <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
+        <input formControlName="description" matInput />
+      </mat-form-field>
+    </ng-container>
+
     <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.File Name' | translate }}</mat-label>
       <input formControlName="fileName" required matInput />
@@ -27,7 +75,12 @@
         [disabled]="!uploadDocumentForm.valid"
         [mat-dialog-close]="uploadDocumentForm.value"
       >
-        {{ 'labels.buttons.Upload' | translate }}
+        <ng-container *ngIf="documentIdentifier; else uploadLabel">
+          {{ 'labels.buttons.Add' | translate }}
+        </ng-container>
+        <ng-template #uploadLabel>
+          {{ 'labels.buttons.Upload' | translate }}
+        </ng-template>
       </button>
     </mat-dialog-actions>
   </form>

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts

@@ -27,10 +27,14 @@ export class UploadDocumentDialogComponent implements OnInit {
   uploadDocumentForm: UntypedFormGroup;
   /** Upload Document Data */
   uploadDocumentData: any = [];
-  /** Triggers description field */
+  /** Triggers identity fields (documentType, status, documentKey) */
   documentIdentifier = false;
   /** Entity Type */
   entityType: string;
+  /** Allowed Document Types for identifiers */
+  allowedDocumentTypes: any[] = [];
+  /** Status options for identifiers */
+  statusOptions: any[] = [];
 
   /**
    * @param {MatDialogRef} dialogRef Dialog reference element
@@ -44,6 +48,8 @@ export class UploadDocumentDialogComponent implements OnInit {
   ) {
     this.documentIdentifier = data.documentIdentifier;
     this.entityType = data.entityType;
+    this.allowedDocumentTypes = data.allowedDocumentTypes || [];
+    this.statusOptions = data.statusOptions || [];
   }
 
   ngOnInit() {
@@ -54,14 +60,39 @@ export class UploadDocumentDialogComponent implements OnInit {
    * Creates the upload Document form.
    */
   createUploadDocumentForm() {
-    this.uploadDocumentForm = this.formBuilder.group({
-      fileName: [
-        '',
-        Validators.required
-      ],
-      description: [''],
-      file: ['']
-    });
+    if (this.documentIdentifier) {
+      // Unified form for identity: identifier fields + document upload
+      this.uploadDocumentForm = this.formBuilder.group({
+        documentTypeId: [
+          '',
+          Validators.required
+        ],
+        status: [
+          'Active',
+          Validators.required
+        ],
+        documentKey: [
+          '',
+          Validators.required
+        ],
+        description: [''],
+        fileName: [
+          '',
+          Validators.required
+        ],
+        file: ['']
+      });
+    } else {
+      // Standard document upload form
+      this.uploadDocumentForm = this.formBuilder.group({
+        fileName: [
+          '',
+          Validators.required
+        ],
+        description: [''],
+        file: ['']
+      });
+    }
   }
 
   /**