cat-documents-ng 0.2.86 → 0.2.88

package/fesm2022/cat-documents-ng.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, ViewChild, Input, ViewEncapsulation, Component, ChangeDetectionStrategy, Directive, NgModule, APP_INITIALIZER } from '@angular/core';
+import { Injectable, EventEmitter, Output, ViewChild, Input, ViewEncapsulation, Component, HostListener, ChangeDetectionStrategy, Directive, NgModule, APP_INITIALIZER } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { firstValueFrom, tap, EMPTY, catchError, throwError, of, combineLatest, Subject, Observable, takeUntil, Subscription, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
@@ -44,6 +44,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import * as i5$2 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import * as i8 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
 import * as i7$2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import * as i8$1 from 'primeng/menu';
@@ -116,6 +117,10 @@ class SHARED {
      * Represents an empty string.
      */
     static EMPTY = "";
+    /**
+     * Represents an empty string.
+     */
+    static STRING = "string";
     /**
      * Represents an true.
      * @static
@@ -286,7 +291,16 @@ class SHARED {
     static UPLOAD_FAILED = 'Upload failed';
     static USER_LIST = 'userList';
     static CATEGORIES = 'categories';
+    static UNSAVED_CHANGES_MESSAGE = 'You will loose all the data that was filled in the respective fields.';
+    static UNSAVED_CHANGES_HEADER = 'Unsaved Changes';
     static DOCUMENT_DELETED_SUCCESSFULLY = 'Document deleted successfully';
+    static UNSAVED_CHANGES_ICON = 'pi pi-exclamation-triangle';
+    static REMOVE = 'Remove';
+    static CANCEL = 'Cancel';
+    static ACCEPT_ICON = 'pi pi-times';
+    static REJECT_ICON = 'pi pi-check';
+    static ACCEPT_BUTTON_STYLE_CLASS = 'p-button-danger';
+    static REJECT_BUTTON_STYLE_CLASS = 'p-button-secondary';
     static Menu = [
         {
             label: 'Applicant',
@@ -1299,7 +1313,7 @@ class DocumentService {
      * @returns {Observable<any>} Observable that emits the newly created document.
      */
     create(entity) {
-        const headers = { 'Authorization': 'Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d' };
+        const headers = { 'Authorization': 'Bearer f193f6cf-cab3-4459-a875-dc832d8d777d' };
         return this.http.post(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD_FILE}`, entity, { headers }).pipe(tap((newEntity) => this.documentStore.add(newEntity)));
     }
     /**
@@ -1704,7 +1718,7 @@ class DocumentHttpService {
      * @returns {Observable<any>} Observable that emits the transformed data for dropdown options.
      */
     getDocumentCatagories(contextId) {
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.get(`${this.apiUrl}${URLS.DOCUMENTS_CATAGORIES}/${contextId}`, { headers }).pipe(tap((response) => {
             // Store only the categories array, not the entire response
             if (response && response.categories) {
@@ -1763,7 +1777,7 @@ class DocumentHttpService {
      * @returns {Observable<DocumentModel>} An observable that emits the updated DocumentModel.
      */
     updateDocumentName(documentId, payload) {
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.put(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${documentId}`, payload, { headers }).pipe(catchError((error) => {
             return throwError(() => new Error(error));
         }));
@@ -1776,7 +1790,7 @@ class DocumentHttpService {
     getUserListByContextId(contextId) {
         if (!contextId)
             return EMPTY;
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.get(`${this.apiUrl}${URLS.USERLIST}${contextId}`, { headers }).pipe(tap((userList) => {
             this.documentStore.setUserList(userList);
         }), catchError((error) => {
@@ -1802,7 +1816,7 @@ class DocumentHttpService {
         if (categoryId) {
             params = params.set(SHARED.CATEGORY, categoryId);
         }
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.get(url, { params, headers }).pipe(tap((statusData) => {
             this.documentStore.setStatusData(statusData);
         }), catchError((error) => {
@@ -1833,7 +1847,7 @@ class DocumentHttpService {
         if (searchKey) {
             params = params.set(SHARED.SEARCH_KEY, searchKey);
         }
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.get(`${this.apiUrl}${URLS.GETALL}/${contextId}`, { params, headers }).pipe(tap((response) => {
             if (response.documents) {
                 this.documentStore.setDocumentList(response.documents);
@@ -1846,7 +1860,7 @@ class DocumentHttpService {
         if (!documentId) {
             return of([]);
         }
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_HISTORY}${documentId}`, { headers });
     }
     /**
@@ -1857,7 +1871,7 @@ class DocumentHttpService {
     getCategoriesBySource(source) {
         if (!source)
             return EMPTY;
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.get(`${this.apiUrl}${URLS.GET_CATEGORIES_BY_SOURCE}${source}`, { headers }).pipe(catchError((error) => {
             return throwError(() => new Error(error));
         }));
@@ -1870,7 +1884,7 @@ class DocumentHttpService {
     getDocumentTypesByCategory(categoryId) {
         if (!categoryId)
             return EMPTY;
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.get(`${this.apiUrl}${URLS.GET_DOCUMENT_TYPES_BY_CATEGORY}${categoryId}`, { headers }).pipe(catchError((error) => {
             return throwError(() => new Error(error));
         }));
@@ -1881,7 +1895,7 @@ class DocumentHttpService {
      * @returns {Observable<any>} Observable that emits the upload response.
      */
     uploadFile(formData) {
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.post(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD_FILE}`, formData, { headers }).pipe(catchError((error) => {
             return throwError(() => new Error(error));
         }));
@@ -1892,7 +1906,7 @@ class DocumentHttpService {
      * @returns {Observable<any>} Observable that emits the save response.
      */
     saveDocumentUpload(payload) {
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.post(`${this.apiUrl}${URLS.SAVE_DOCUMENT_UPLOAD}`, payload, { headers }).pipe(catchError((error) => {
             return throwError(() => new Error(error));
         }));
@@ -1908,7 +1922,7 @@ class DocumentHttpService {
         const payload = {
             statusUpdateDescription: statusUpdateDescription
         };
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.put(`${this.apiUrl}${URLS.UPDATE_DOCUMENT_STATUS}${documentId}/${status}`, payload, { headers }).pipe(tap((response) => {
             if (response && response.status) {
                 const normalizedStatus = this.normalizeStatus(response.status);
@@ -1942,7 +1956,7 @@ class DocumentHttpService {
      * @returns {Observable<any>} Observable that emits the delete response
      */
     deleteDocument(documentId, contextId) {
-        let headers = new HttpHeaders({ Authorization: `Bearer 514330f0-41d4-4c03-8d2e-f248a1340e8d` });
+        let headers = new HttpHeaders({ Authorization: `Bearer f193f6cf-cab3-4459-a875-dc832d8d777d` });
         return this.http.delete(`${this.apiUrl}${URLS.DELETE_DOCUMENT}${documentId}`, { headers }).pipe(tap(() => {
             this.getDocumentCatagories(contextId).subscribe();
             this.getUserListByContextId(contextId).subscribe();
@@ -2304,11 +2318,6 @@ class DocumentUploadService {
                 reject(error);
                 return;
             }
-            // Update progress to show upload starting
-            this.documentUploadStore.setMessage([{
-                    severity: 'info',
-                    detail: 'Uploading document...'
-                }]);
             this.documentService.create(formsData)
                 .subscribe({
                 /**
@@ -2318,11 +2327,7 @@ class DocumentUploadService {
                  */
                 next: (event) => {
                     this.documentUploadStore.setUploadedDocumentFiles(event);
-                    this.documentUploadStore.setMessage([{
-                            severity: SHARED.SUCCESS_SEVERITY,
-                            detail: SHARED.UPLOAD_SUCCESS
-                        }]);
-                    // Emit upload completion event with file and response
+                    this.documentUploadStore.setMessage([{ severity: SHARED.SUCCESS_SEVERITY, detail: SHARED.UPLOAD_SUCCESS }]);
                     this.uploadCompleted.emit({ file: file, response: event });
                     resolve(event);
                 },
@@ -2353,7 +2358,6 @@ class DocumentUploadService {
             }
             catch (error) {
                 console.error(`Failed to upload file ${file.name}:`, error);
-                // Continue with next file even if one fails
                 results.push({ error: true, fileName: file.name, errorMessage: error });
             }
         }
@@ -2370,7 +2374,6 @@ class DocumentUploadService {
         const results = [];
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
-            // Call progress callback if provided
             if (onProgress) {
                 onProgress(file, i, files.length);
             }
@@ -2380,7 +2383,6 @@ class DocumentUploadService {
             }
             catch (error) {
                 console.error(`Failed to upload file ${file.name}:`, error);
-                // Continue with next file even if one fails
                 results.push({ error: true, fileName: file.name, errorMessage: error });
             }
         }
@@ -2422,6 +2424,28 @@ class DocumentUploadService {
             return null;
         }
     }
+    /**
+     * Generic method to sort any list of objects by a specified property.
+     * Supports fallback properties if the primary property is undefined.
+     * @param list - Array of objects to sort
+     * @param primaryProperty - Primary property to sort by
+     * @param fallbackProperty - Optional fallback property if primary is undefined
+     * @returns Sorted array
+     */
+    sortListByProperty(list, primaryProperty, fallbackProperty) {
+        return list.sort((a, b) => {
+            const valueA = a[primaryProperty] || (fallbackProperty ? a[fallbackProperty] : SHARED.EMPTY);
+            const valueB = b[primaryProperty] || (fallbackProperty ? b[fallbackProperty] : SHARED.EMPTY);
+            if (typeof valueA === 'string' && typeof valueB === 'string') {
+                return valueA.localeCompare(valueB);
+            }
+            if (valueA < valueB)
+                return -1;
+            if (valueA > valueB)
+                return 1;
+            return 0;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, deps: [{ token: DocumentService }, { token: DocumentStore }, { token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, providedIn: 'root' });
 }
@@ -2630,7 +2654,8 @@ class DocumentUploadBusinessService {
                 fileSize: file.file.size,
                 url: file.url,
                 contentType: file.contentType,
-                uploadedFileId: file.uploadResponse?.fileId || file.uploadResponse?.id || file.uploadResponse?.fileName
+                size: file.size,
+                uploadedFileId: file.uploadResponse?.id || file.uploadResponse?.fileName
             }))
         };
         // For Applicant type, include the applicant ID
@@ -2981,7 +3006,6 @@ class DocumentUploadComponent {
      * @param event - Event containing the selected files
      */
     async onSelectedFiles(event) {
-        // Process files sequentially instead of in parallel
         await this.processFilesSequentially(event.currentFiles);
         this.fileUploader.clear();
     }
@@ -2990,23 +3014,17 @@ class DocumentUploadComponent {
      * @param files - Array of files to process
      */
     async processFilesSequentially(files) {
-        // Validate context ID before processing any files
         if (!this.formService.validateContextId(this.contextId, 'Context ID is required for upload.')) {
             return;
         }
-        // Use the service method with progress tracking
         await this.documentUpload.uploadFilesSequentiallyWithProgress(files, this.contextId, (currentFile, currentIndex, totalFiles) => {
-            // Set up progress tracking and upload listener for the current file
             this.fileProgress.set(currentFile, SHARED.UPLOAD_PROGRESS_10);
             this.setupFileUploadListener(currentFile);
-            // Create uploaded file object
             const formattedSize = this.businessService.formatFileSize(currentFile.size, this.config);
             const uploadedFile = this.businessService.createUploadedFile(currentFile, formattedSize);
             uploadedFile.progress = SHARED.UPLOAD_PROGRESS_10;
             this.uploadedFiles.push(uploadedFile);
-            // Validate form after adding file
             this.validateForm();
-            // Update UI to show which file is currently being processed
             this.cdr.detectChanges();
         });
     }
@@ -3161,7 +3179,7 @@ class DocumentUploadComponent {
      * @param applicants - Array of loaded applicants
      */
     handleApplicantsLoaded(applicants) {
-        this.applicantList = applicants;
+        this.applicantList = this.documentUpload.sortListByProperty(applicants, 'name');
         this.filterApplicants();
         this.isLoadingApplicants = false;
         this.validateForm();
@@ -3172,7 +3190,7 @@ class DocumentUploadComponent {
      * @param categories - Array of loaded categories
      */
     handleCategoriesLoaded(categories) {
-        this.categoryOptions = categories;
+        this.categoryOptions = this.documentUpload.sortListByProperty(categories, 'label');
         this.isLoadingCategories = false;
         this.validateForm();
     }
@@ -3182,7 +3200,7 @@ class DocumentUploadComponent {
      * @param documentTypes - Array of loaded document types
      */
     handleDocumentTypesLoaded(documentTypes) {
-        this.documentTypeOptions = documentTypes;
+        this.documentTypeOptions = this.documentUpload.sortListByProperty(documentTypes, 'label', 'name');
         this.isLoadingDocumentTypes = false;
         this.validateForm();
     }
@@ -3299,11 +3317,11 @@ class DocumentUploadComponent {
         this.dataService.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentUploadService }, { token: DocumentService }, { token: i3.PrimeNGConfig }, { token: FileFormatService }, { token: i3.MessageService }, { token: i0.ChangeDetectorRef }, { token: DocumentUploadBusinessService }, { token: DocumentUploadFormService }, { token: DocumentUploadDataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentUploadComponent, isStandalone: false, selector: "lib-document-upload", inputs: { contextId: "contextId" }, outputs: { onFormValidationChange: "onFormValidationChange", onUploadSuccess: "onUploadSuccess" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"document-upload-container\">\r\n  <!-- Assignment Section -->\r\n  <div class=\"assignment-section\">\r\n    <h4>Assign to Applicant(s) or Application</h4>\r\n    <div class=\"radio-group\">\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Applicant\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'applicant'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s)</label>\r\n      </div>\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Application\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'application'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\r\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\r\n    <h4>Select Applicant(s)</h4>\r\n    <div class=\"grid\">\r\n      <div \r\n        *ngFor=\"let applicant of filteredApplicantList\" \r\n        class=\"applicant-item col-12 md:col-6\"\r\n      >\r\n        <p-radioButton \r\n          name=\"selectedApplicant\"\r\n          [value]=\"applicant._id\"\r\n          [(ngModel)]=\"selectedApplicant\"\r\n          [inputId]=\"'applicant-' + applicant._id\"\r\n          (onClick)=\"onApplicantSelectionChange()\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\r\n          {{ applicant.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Category Selection -->\r\n  <div class=\"category-section\">\r\n    <h4>Category</h4>\r\n    <p-dropdown\r\n      [options]=\"categoryOptions\"\r\n      [(ngModel)]=\"selectedCategory\"\r\n      placeholder=\"Select Category type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onCategoryChange()\"\r\n      [disabled]=\"!categoryOptions.length\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- Document Type Selection -->\r\n  <div class=\"document-type-section\">\r\n    <h4>Document Type</h4>\r\n    <p-dropdown\r\n      [options]=\"documentTypeOptions\"\r\n      [(ngModel)]=\"selectedDocumentType\"\r\n      placeholder=\"Select Document type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onDocumentTypeChange()\"\r\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- File Upload Section -->\r\n  <div class=\"file-upload-section\">\r\n    <h4>Upload Documents</h4>\r\n    <div class=\"grid\">\r\n      <div class=\"col-12 md:col-12\">\r\n        <p-fileUpload \r\n          #fileUploader \r\n          [multiple]=\"true\" \r\n          auto=\"true\" \r\n          accept=\"image/png,application/pdf\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\r\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n              <div class=\"flex gap-2\">\r\n                <p-button \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n            <div class=\"col-12 md:col-12 p-0\">\r\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                    <div class=\"documentImage\">\r\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                        class=\"object-contain\" />\r\n                    </div>\r\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                      <div class=\"flex justify-content-between\">\r\n                        <div style=\"font-weight: bold;font-size: 14px\">\r\n                          {{ uploadedFile.file.name }}\r\n                        </div>\r\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                      </div>\r\n                      <div class=\"flex justify-content-between mt-1\">\r\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 md:col-12 p-0\">\r\n                    <p-progressBar \r\n                      [value]=\"uploadedFile.progress\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': uploadedFile.progress > 100 }\"\r\n                    >\r\n                    </p-progressBar>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n              (click)=\"triggerFileUpload()\">\r\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"file\"> </ng-template>\r\n        </p-fileUpload>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: i11.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i12.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentUploadComponent, isStandalone: false, selector: "lib-document-upload", inputs: { contextId: "contextId" }, outputs: { onFormValidationChange: "onFormValidationChange", onUploadSuccess: "onUploadSuccess" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"document-upload-container\">\r\n  <!-- Assignment Section -->\r\n  <div class=\"assignment-section\">\r\n    <h4>Assign to Applicant(s) or Application <span class=\"text-red-500\">*</span> </h4>\r\n    <div class=\"radio-group\">\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Applicant\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'applicant'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s) </label>\r\n      </div>\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Application\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'application'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\r\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\r\n    <h4>Select Applicant(s) <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div \r\n        *ngFor=\"let applicant of filteredApplicantList\" \r\n        class=\"applicant-item col-12 md:col-6\"\r\n      >\r\n        <p-radioButton \r\n          name=\"selectedApplicant\"\r\n          [value]=\"applicant._id\"\r\n          [(ngModel)]=\"selectedApplicant\"\r\n          [inputId]=\"'applicant-' + applicant._id\"\r\n          (onClick)=\"onApplicantSelectionChange()\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\r\n          {{ applicant.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Category Selection -->\r\n  <div class=\"category-section\">\r\n    <h4>Category <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"categoryOptions\"\r\n      [(ngModel)]=\"selectedCategory\"\r\n      placeholder=\"Select Category type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onCategoryChange()\"\r\n      [disabled]=\"!categoryOptions.length\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- Document Type Selection -->\r\n  <div class=\"document-type-section\">\r\n    <h4>Document Type <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"documentTypeOptions\"\r\n      [(ngModel)]=\"selectedDocumentType\"\r\n      placeholder=\"Select Document type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onDocumentTypeChange()\"\r\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- File Upload Section -->\r\n  <div class=\"file-upload-section\">\r\n    <h4>Upload Documents <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div class=\"col-12 md:col-12\">\r\n        <p-fileUpload \r\n          #fileUploader \r\n          [multiple]=\"true\" \r\n          auto=\"true\" \r\n          accept=\"image/png,application/pdf\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\r\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n              <div class=\"flex gap-2\">\r\n                <p-button \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n            <div class=\"col-12 md:col-12 p-0\">\r\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                    <div class=\"documentImage\">\r\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                        class=\"object-contain\" />\r\n                    </div>\r\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                      <div class=\"flex justify-content-between\">\r\n                        <div style=\"font-weight: bold;font-size: 14px\">\r\n                          {{ uploadedFile.file.name }}\r\n                        </div>\r\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                      </div>\r\n                      <div class=\"flex justify-content-between mt-1\">\r\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 md:col-12 p-0\">\r\n                    <p-progressBar \r\n                      [value]=\"uploadedFile.progress ?? 0\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': (uploadedFile.progress ?? 0) > 100 }\"\r\n                    >\r\n                    </p-progressBar>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n              (click)=\"triggerFileUpload()\">\r\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"file\"> </ng-template>\r\n        </p-fileUpload>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: i11.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i12.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-upload', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-upload-container\">\r\n  <!-- Assignment Section -->\r\n  <div class=\"assignment-section\">\r\n    <h4>Assign to Applicant(s) or Application</h4>\r\n    <div class=\"radio-group\">\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Applicant\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'applicant'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s)</label>\r\n      </div>\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Application\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'application'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\r\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\r\n    <h4>Select Applicant(s)</h4>\r\n    <div class=\"grid\">\r\n      <div \r\n        *ngFor=\"let applicant of filteredApplicantList\" \r\n        class=\"applicant-item col-12 md:col-6\"\r\n      >\r\n        <p-radioButton \r\n          name=\"selectedApplicant\"\r\n          [value]=\"applicant._id\"\r\n          [(ngModel)]=\"selectedApplicant\"\r\n          [inputId]=\"'applicant-' + applicant._id\"\r\n          (onClick)=\"onApplicantSelectionChange()\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\r\n          {{ applicant.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Category Selection -->\r\n  <div class=\"category-section\">\r\n    <h4>Category</h4>\r\n    <p-dropdown\r\n      [options]=\"categoryOptions\"\r\n      [(ngModel)]=\"selectedCategory\"\r\n      placeholder=\"Select Category type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onCategoryChange()\"\r\n      [disabled]=\"!categoryOptions.length\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- Document Type Selection -->\r\n  <div class=\"document-type-section\">\r\n    <h4>Document Type</h4>\r\n    <p-dropdown\r\n      [options]=\"documentTypeOptions\"\r\n      [(ngModel)]=\"selectedDocumentType\"\r\n      placeholder=\"Select Document type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onDocumentTypeChange()\"\r\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- File Upload Section -->\r\n  <div class=\"file-upload-section\">\r\n    <h4>Upload Documents</h4>\r\n    <div class=\"grid\">\r\n      <div class=\"col-12 md:col-12\">\r\n        <p-fileUpload \r\n          #fileUploader \r\n          [multiple]=\"true\" \r\n          auto=\"true\" \r\n          accept=\"image/png,application/pdf\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\r\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n              <div class=\"flex gap-2\">\r\n                <p-button \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n            <div class=\"col-12 md:col-12 p-0\">\r\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                    <div class=\"documentImage\">\r\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                        class=\"object-contain\" />\r\n                    </div>\r\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                      <div class=\"flex justify-content-between\">\r\n                        <div style=\"font-weight: bold;font-size: 14px\">\r\n                          {{ uploadedFile.file.name }}\r\n                        </div>\r\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                      </div>\r\n                      <div class=\"flex justify-content-between mt-1\">\r\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 md:col-12 p-0\">\r\n                    <p-progressBar \r\n                      [value]=\"uploadedFile.progress\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': uploadedFile.progress > 100 }\"\r\n                    >\r\n                    </p-progressBar>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n              (click)=\"triggerFileUpload()\">\r\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"file\"> </ng-template>\r\n        </p-fileUpload>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"] }]
+            args: [{ selector: 'lib-document-upload', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-upload-container\">\r\n  <!-- Assignment Section -->\r\n  <div class=\"assignment-section\">\r\n    <h4>Assign to Applicant(s) or Application <span class=\"text-red-500\">*</span> </h4>\r\n    <div class=\"radio-group\">\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Applicant\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'applicant'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s) </label>\r\n      </div>\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Application\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'application'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\r\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\r\n    <h4>Select Applicant(s) <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div \r\n        *ngFor=\"let applicant of filteredApplicantList\" \r\n        class=\"applicant-item col-12 md:col-6\"\r\n      >\r\n        <p-radioButton \r\n          name=\"selectedApplicant\"\r\n          [value]=\"applicant._id\"\r\n          [(ngModel)]=\"selectedApplicant\"\r\n          [inputId]=\"'applicant-' + applicant._id\"\r\n          (onClick)=\"onApplicantSelectionChange()\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\r\n          {{ applicant.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Category Selection -->\r\n  <div class=\"category-section\">\r\n    <h4>Category <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"categoryOptions\"\r\n      [(ngModel)]=\"selectedCategory\"\r\n      placeholder=\"Select Category type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onCategoryChange()\"\r\n      [disabled]=\"!categoryOptions.length\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- Document Type Selection -->\r\n  <div class=\"document-type-section\">\r\n    <h4>Document Type <span class=\"text-red-500\">*</span></h4>\r\n    <p-dropdown\r\n      [options]=\"documentTypeOptions\"\r\n      [(ngModel)]=\"selectedDocumentType\"\r\n      placeholder=\"Select Document type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onDocumentTypeChange()\"\r\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- File Upload Section -->\r\n  <div class=\"file-upload-section\">\r\n    <h4>Upload Documents <span class=\"text-red-500\">*</span></h4>\r\n    <div class=\"grid\">\r\n      <div class=\"col-12 md:col-12\">\r\n        <p-fileUpload \r\n          #fileUploader \r\n          [multiple]=\"true\" \r\n          auto=\"true\" \r\n          accept=\"image/png,application/pdf\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\r\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n              <div class=\"flex gap-2\">\r\n                <p-button \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n            <div class=\"col-12 md:col-12 p-0\">\r\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                    <div class=\"documentImage\">\r\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                        class=\"object-contain\" />\r\n                    </div>\r\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                      <div class=\"flex justify-content-between\">\r\n                        <div style=\"font-weight: bold;font-size: 14px\">\r\n                          {{ uploadedFile.file.name }}\r\n                        </div>\r\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                      </div>\r\n                      <div class=\"flex justify-content-between mt-1\">\r\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 md:col-12 p-0\">\r\n                    <p-progressBar \r\n                      [value]=\"uploadedFile.progress ?? 0\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': (uploadedFile.progress ?? 0) > 100 }\"\r\n                    >\r\n                    </p-progressBar>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n              (click)=\"triggerFileUpload()\">\r\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"file\"> </ng-template>\r\n        </p-fileUpload>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"] }]
         }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3.PrimeNGConfig }, { type: FileFormatService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }, { type: DocumentUploadBusinessService }, { type: DocumentUploadFormService }, { type: DocumentUploadDataService }], propDecorators: { contextId: [{
                 type: Input
             }], fileUploader: [{
@@ -3316,7 +3334,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class SidebarComponent {
-    visible = false;
+    injector;
+    // Add setter to log visible changes
+    set visible(value) {
+        this._visible = value;
+    }
+    get visible() {
+        return this._visible;
+    }
+    _visible = false;
+    // Flag to prevent double event emission
+    isProgrammaticallyClosing = false;
     position = 'right';
     width = SHARED.WIDTH;
     title = SHARED.EMPTY;
@@ -3335,36 +3363,77 @@ class SidebarComponent {
     saveButtonDisabled = false;
     successMessage = SHARED.SUCCESS_MESSAGE;
     errorMessage = SHARED.EMPTY;
+    hasUnsavedChanges = false;
     visibleChange = new EventEmitter();
     onShow = new EventEmitter();
     onHide = new EventEmitter();
     onSave = new EventEmitter();
+    onDiscardChanges = new EventEmitter();
     showSuccessMessage = false;
     showErrorMessage = false;
+    destroy$ = new Subject();
+    confirmationService;
+    constructor(injector) {
+        this.injector = injector;
+        // Inject ConfirmationService using injector to avoid circular dependency issues
+        this.confirmationService = this.injector.get(ConfirmationService);
+    }
+    /**
+     * Handles the onHide event from PrimeNG sidebar
+     */
+    onSidebarHide() {
+        // Only emit onHide if we're not programmatically closing
+        if (!this.isProgrammaticallyClosing) {
+            this.onHide.emit();
+        }
+    }
+    /**
+     * Handles the visibleChange event from PrimeNG sidebar
+     */
+    onVisibleChange(value) {
+        // Only emit visibleChange if we're not programmatically closing
+        if (!this.isProgrammaticallyClosing) {
+            this.visibleChange.emit(value);
+        }
+    }
     /**
      * Opens the sidebar
      */
     open() {
-        this.visible = true;
+        this._visible = true;
         this.clearMessages();
-        this.visibleChange.emit(this.visible);
+        this.visibleChange.emit(this._visible);
         this.onShow.emit();
     }
     /**
      * Closes the sidebar
      */
     close() {
-        this.visible = false;
+        this.isProgrammaticallyClosing = true;
+        this._visible = false;
         this.clearMessages();
-        this.visibleChange.emit(this.visible);
+        this.visibleChange.emit(this._visible);
         this.onHide.emit();
+        this.isProgrammaticallyClosing = false;
+    }
+    /**
+     * Closes the sidebar and discards all changes
+     */
+    closeAndDiscardChanges() {
+        this.isProgrammaticallyClosing = true;
+        this._visible = false;
+        this.clearMessages();
+        this.visibleChange.emit(this._visible);
+        this.onDiscardChanges.emit();
+        this.onHide.emit();
+        this.isProgrammaticallyClosing = false;
     }
     /**
      * Toggles the sidebar visibility
      */
     toggle() {
-        this.visible = !this.visible;
-        if (this.visible) {
+        this._visible = !this._visible;
+        if (this._visible) {
             this.clearMessages();
             this.onShow.emit();
         }
@@ -3372,22 +3441,88 @@ class SidebarComponent {
             this.clearMessages();
             this.onHide.emit();
         }
-        this.visibleChange.emit(this.visible);
+        this.visibleChange.emit(this._visible);
     }
     /**
-     * Handles the close button click
+     * Handles the close button click with unsaved changes check
      */
     onCloseClick() {
-        this.close();
+        if (this.hasUnsavedChanges) {
+            this.showUnsavedChangesConfirmation();
+        }
+        else {
+            this.close();
+        }
     }
     /**
-     * Handles the mask click (when dismissible is true)
+     * Handles the mask click (when dismissible is true) with unsaved changes check
      */
     onMaskClick() {
         if (this.dismissible) {
+            if (this.hasUnsavedChanges) {
+                this.showUnsavedChangesConfirmation();
+            }
+            else {
+                this.close();
+            }
+        }
+    }
+    /**
+     * Handles the escape key press with unsaved changes check
+     */
+    onEscapeKey(event) {
+        if (this._visible && this.closeOnEscape) {
+            if (this.hasUnsavedChanges) {
+                event.preventDefault();
+                this.showUnsavedChangesConfirmation();
+            }
+            else {
+                this.close();
+            }
+        }
+    }
+    /**
+     * Handles backdrop click with unsaved changes check
+     */
+    onBackdropClick(event) {
+        if (this.hasUnsavedChanges) {
+            this.showUnsavedChangesConfirmation();
+        }
+        else {
             this.close();
         }
     }
+    /**
+     * Handles close button click with unsaved changes check
+     */
+    onCloseButtonClick() {
+        if (this.hasUnsavedChanges) {
+            this.showUnsavedChangesConfirmation();
+        }
+        else {
+            this.close();
+        }
+    }
+    /**
+     * Shows confirmation dialog for unsaved changes
+     */
+    showUnsavedChangesConfirmation() {
+        this.confirmationService.confirm({
+            message: SHARED.UNSAVED_CHANGES_MESSAGE,
+            header: SHARED.UNSAVED_CHANGES_HEADER,
+            icon: SHARED.UNSAVED_CHANGES_ICON,
+            acceptLabel: SHARED.REMOVE,
+            rejectLabel: SHARED.CANCEL,
+            acceptIcon: SHARED.ACCEPT_ICON,
+            rejectIcon: SHARED.REJECT_ICON,
+            acceptButtonStyleClass: SHARED.ACCEPT_BUTTON_STYLE_CLASS,
+            rejectButtonStyleClass: SHARED.REJECT_BUTTON_STYLE_CLASS,
+            accept: () => {
+                this.closeAndDiscardChanges();
+            },
+            reject: () => { }
+        });
+    }
     /**
      * Shows success message and closes sidebar after delay
      */
@@ -3413,13 +3548,28 @@ class SidebarComponent {
         this.showSuccessMessage = false;
         this.showErrorMessage = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidebarComponent, isStandalone: false, selector: "lib-sidebar", inputs: { visible: "visible", position: "position", width: "width", title: "title", showCloseButton: "showCloseButton", modal: "modal", dismissible: "dismissible", closeOnEscape: "closeOnEscape", baseZIndex: "baseZIndex", autoZIndex: "autoZIndex", styleClass: "styleClass", appendTo: "appendTo", blockScroll: "blockScroll", closeIcon: "closeIcon", showSaveButton: "showSaveButton", saveButtonText: "saveButtonText", saveButtonDisabled: "saveButtonDisabled", successMessage: "successMessage", errorMessage: "errorMessage" }, outputs: { visibleChange: "visibleChange", onShow: "onShow", onHide: "onHide", onSave: "onSave" }, ngImport: i0, template: "<p-sidebar \r\n  [(visible)]=\"visible\"\r\n  [position]=\"position\"\r\n  [style]=\"{width: width}\"\r\n  [modal]=\"modal\"\r\n  [dismissible]=\"dismissible\"\r\n  [closeOnEscape]=\"closeOnEscape\"\r\n  [baseZIndex]=\"baseZIndex\"\r\n  [autoZIndex]=\"autoZIndex\"\r\n  [styleClass]=\"styleClass\"\r\n  [appendTo]=\"appendTo\"\r\n  [blockScroll]=\"blockScroll\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  (onShow)=\"onShow.emit()\"\r\n  (onHide)=\"onHide.emit()\"\r\n  \r\n>\r\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\r\n    <div class=\"sidebar-header\">\r\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\r\n      <div class=\"header-content\">\r\n        <ng-content select=\"[header]\"></ng-content>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showSuccessMessage\"\r\n          severity=\"success\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ successMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n        <p-messages \r\n          *ngIf=\"showErrorMessage\"\r\n          severity=\"error\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ errorMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n\r\n        <div class=\"header-actions mr-3\">\r\n          \r\n          <button \r\n            *ngIf=\"showSaveButton\"\r\n            pButton \r\n            type=\"button\" \r\n            [label]=\"saveButtonText\"\r\n            [disabled]=\"saveButtonDisabled\"\r\n            class=\"p-button-primary\"\r\n            (click)=\"onSave.emit()\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"sidebar-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n</p-sidebar>\r\n", styles: [":host{display:block}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:0;width:100%}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:1}.header-content{display:flex;align-items:center;gap:.5rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }] });
+    /**
+     * Checks if there are unsaved changes
+     * @returns True if there are unsaved changes, false otherwise
+     */
+    checkForUnsavedChanges() {
+        return this.hasUnsavedChanges;
+    }
+    /**
+     * Lifecycle hook that is called when component is destroyed.
+     * Cleans up subscriptions.
+     */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidebarComponent, isStandalone: false, selector: "lib-sidebar", inputs: { visible: "visible", position: "position", width: "width", title: "title", showCloseButton: "showCloseButton", modal: "modal", dismissible: "dismissible", closeOnEscape: "closeOnEscape", baseZIndex: "baseZIndex", autoZIndex: "autoZIndex", styleClass: "styleClass", appendTo: "appendTo", blockScroll: "blockScroll", closeIcon: "closeIcon", showSaveButton: "showSaveButton", saveButtonText: "saveButtonText", saveButtonDisabled: "saveButtonDisabled", successMessage: "successMessage", errorMessage: "errorMessage", hasUnsavedChanges: "hasUnsavedChanges" }, outputs: { visibleChange: "visibleChange", onShow: "onShow", onHide: "onHide", onSave: "onSave", onDiscardChanges: "onDiscardChanges" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, ngImport: i0, template: "<!-- Custom backdrop for better control over outside clicks -->\n<div \n  *ngIf=\"visible\" \n  class=\"custom-sidebar-backdrop\" \n  (click)=\"onBackdropClick($event)\"\n></div>\n\n<p-sidebar \n  [(visible)]=\"visible\"\n  [position]=\"position\"\n  [style]=\"{width: width}\"\n  [modal]=\"false\"\n  [dismissible]=\"false\"\n  [closeOnEscape]=\"false\"\n  [showCloseIcon]=\"false\"\n  [baseZIndex]=\"baseZIndex\"\n  [autoZIndex]=\"autoZIndex\"\n  [styleClass]=\"styleClass\"\n  [appendTo]=\"appendTo\"\n  [blockScroll]=\"blockScroll\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  (onShow)=\"onShow.emit()\"\n  (onHide)=\"onSidebarHide()\"\n>\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\n    <div class=\"sidebar-header\">\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\n      <div class=\"header-content\">\n        <ng-content select=\"[header]\"></ng-content>\n        \n        <p-messages \n          *ngIf=\"showSuccessMessage\"\n          severity=\"success\"\n          [closable]=\"false\"\n          [style]=\"{'margin-bottom': '0.5rem'}\"\n          class=\"ml-3\"\n        >\n          <ng-template pTemplate=\"message\">\n            <span>{{ successMessage }}</span>\n          </ng-template>\n        </p-messages>\n        <p-messages \n          *ngIf=\"showErrorMessage\"\n          severity=\"error\"\n          [closable]=\"false\"\n          [style]=\"{'margin-bottom': '0.5rem'}\"\n          class=\"ml-3\"\n        >\n          <ng-template pTemplate=\"message\">\n            <span>{{ errorMessage }}</span>\n          </ng-template>\n        </p-messages>\n\n        <div class=\"header-actions mr-3\">\n          <button \n            *ngIf=\"showSaveButton\"\n            pButton \n            type=\"button\" \n            [label]=\"saveButtonText\"\n            [disabled]=\"saveButtonDisabled\"\n            class=\"p-button-primary\"\n            (click)=\"onSave.emit()\"\n          ></button>\n\n           <button \n            *ngIf=\"showCloseButton\"\n            pButton \n            type=\"button\" \n            icon=\"pi pi-times\"\n            class=\"p-button-text p-button-rounded\"\n            (click)=\"onCloseButtonClick()\"\n          ></button>\n          \n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"content\">\n    <div class=\"sidebar-content\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</p-sidebar>\n", styles: [":host{display:block}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:0;width:100%}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:1}.header-content{display:flex;align-items:center;gap:.5rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}.custom-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;z-index:999;cursor:pointer}::ng-deep .p-sidebar{z-index:1000!important}.header-actions .p-button-text.p-button-rounded{width:2rem;height:2rem;border-radius:50%}.header-actions .p-button-text.p-button-rounded:hover{background-color:#0000001a}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar', standalone: false, template: "<p-sidebar \r\n  [(visible)]=\"visible\"\r\n  [position]=\"position\"\r\n  [style]=\"{width: width}\"\r\n  [modal]=\"modal\"\r\n  [dismissible]=\"dismissible\"\r\n  [closeOnEscape]=\"closeOnEscape\"\r\n  [baseZIndex]=\"baseZIndex\"\r\n  [autoZIndex]=\"autoZIndex\"\r\n  [styleClass]=\"styleClass\"\r\n  [appendTo]=\"appendTo\"\r\n  [blockScroll]=\"blockScroll\"\r\n  (visibleChange)=\"visibleChange.emit($event)\"\r\n  (onShow)=\"onShow.emit()\"\r\n  (onHide)=\"onHide.emit()\"\r\n  \r\n>\r\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\r\n    <div class=\"sidebar-header\">\r\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\r\n      <div class=\"header-content\">\r\n        <ng-content select=\"[header]\"></ng-content>\r\n        \r\n        <p-messages \r\n          *ngIf=\"showSuccessMessage\"\r\n          severity=\"success\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ successMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n        <p-messages \r\n          *ngIf=\"showErrorMessage\"\r\n          severity=\"error\"\r\n          [closable]=\"false\"\r\n          [style]=\"{'margin-bottom': '0.5rem'}\"\r\n          class=\"ml-3\"\r\n        >\r\n          <ng-template pTemplate=\"message\">\r\n            <span>{{ errorMessage }}</span>\r\n          </ng-template>\r\n        </p-messages>\r\n\r\n        <div class=\"header-actions mr-3\">\r\n          \r\n          <button \r\n            *ngIf=\"showSaveButton\"\r\n            pButton \r\n            type=\"button\" \r\n            [label]=\"saveButtonText\"\r\n            [disabled]=\"saveButtonDisabled\"\r\n            class=\"p-button-primary\"\r\n            (click)=\"onSave.emit()\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template pTemplate=\"content\">\r\n    <div class=\"sidebar-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n</p-sidebar>\r\n", styles: [":host{display:block}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:0;width:100%}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:1}.header-content{display:flex;align-items:center;gap:.5rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"] }]
-        }], propDecorators: { visible: [{
+            args: [{ selector: 'lib-sidebar', standalone: false, template: "<!-- Custom backdrop for better control over outside clicks -->\n<div \n  *ngIf=\"visible\" \n  class=\"custom-sidebar-backdrop\" \n  (click)=\"onBackdropClick($event)\"\n></div>\n\n<p-sidebar \n  [(visible)]=\"visible\"\n  [position]=\"position\"\n  [style]=\"{width: width}\"\n  [modal]=\"false\"\n  [dismissible]=\"false\"\n  [closeOnEscape]=\"false\"\n  [showCloseIcon]=\"false\"\n  [baseZIndex]=\"baseZIndex\"\n  [autoZIndex]=\"autoZIndex\"\n  [styleClass]=\"styleClass\"\n  [appendTo]=\"appendTo\"\n  [blockScroll]=\"blockScroll\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  (onShow)=\"onShow.emit()\"\n  (onHide)=\"onSidebarHide()\"\n>\n  <ng-template pTemplate=\"header\" *ngIf=\"title || showCloseButton || showSaveButton\">\n    <div class=\"sidebar-header\">\n      <h3 *ngIf=\"title\" class=\"sidebar-title\">{{ title }}</h3>\n      <div class=\"header-content\">\n        <ng-content select=\"[header]\"></ng-content>\n        \n        <p-messages \n          *ngIf=\"showSuccessMessage\"\n          severity=\"success\"\n          [closable]=\"false\"\n          [style]=\"{'margin-bottom': '0.5rem'}\"\n          class=\"ml-3\"\n        >\n          <ng-template pTemplate=\"message\">\n            <span>{{ successMessage }}</span>\n          </ng-template>\n        </p-messages>\n        <p-messages \n          *ngIf=\"showErrorMessage\"\n          severity=\"error\"\n          [closable]=\"false\"\n          [style]=\"{'margin-bottom': '0.5rem'}\"\n          class=\"ml-3\"\n        >\n          <ng-template pTemplate=\"message\">\n            <span>{{ errorMessage }}</span>\n          </ng-template>\n        </p-messages>\n\n        <div class=\"header-actions mr-3\">\n          <button \n            *ngIf=\"showSaveButton\"\n            pButton \n            type=\"button\" \n            [label]=\"saveButtonText\"\n            [disabled]=\"saveButtonDisabled\"\n            class=\"p-button-primary\"\n            (click)=\"onSave.emit()\"\n          ></button>\n\n           <button \n            *ngIf=\"showCloseButton\"\n            pButton \n            type=\"button\" \n            icon=\"pi pi-times\"\n            class=\"p-button-text p-button-rounded\"\n            (click)=\"onCloseButtonClick()\"\n          ></button>\n          \n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"content\">\n    <div class=\"sidebar-content\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</p-sidebar>\n", styles: [":host{display:block}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:0;width:100%}.sidebar-title{margin:0;font-size:1.25rem;font-weight:600;color:#212529;flex:1}.header-content{display:flex;align-items:center;gap:.5rem;justify-content:space-between;width:100%}.header-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-right:0}.close-button{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:.375rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;margin-right:.5rem}.close-button:hover{background-color:#e9ecef;color:#495057}.close-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}.close-button i{font-size:1rem}.sidebar-content{height:100%;overflow-y:auto;padding:0}.custom-sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;z-index:999;cursor:pointer}::ng-deep .p-sidebar{z-index:1000!important}.header-actions .p-button-text.p-button-rounded{width:2rem;height:2rem;border-radius:50%}.header-actions .p-button-text.p-button-rounded:hover{background-color:#0000001a}::ng-deep .p-sidebar .p-sidebar-header{border-bottom:1px solid #e9ecef;margin-bottom:1rem;background-color:#f8f9fa}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1.5rem 1.5rem;height:calc(100% - 80px);overflow-y:auto}::ng-deep .p-sidebar.p-sidebar-right .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}::ng-deep .p-sidebar.p-sidebar-left .p-sidebar-content{padding-left:1.5rem;padding-right:1.5rem}@media (max-width: 768px){::ng-deep .p-sidebar{width:100%!important;max-width:100%!important}::ng-deep .p-sidebar .p-sidebar-header{padding:1rem 1rem 0}::ng-deep .p-sidebar .p-sidebar-content{padding:0 1rem 1rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { visible: [{
                 type: Input
             }], position: [{
                 type: Input
@@ -3457,6 +3607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], errorMessage: [{
                 type: Input
+            }], hasUnsavedChanges: [{
+                type: Input
             }], visibleChange: [{
                 type: Output
             }], onShow: [{
@@ -3465,6 +3617,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], onSave: [{
                 type: Output
+            }], onDiscardChanges: [{
+                type: Output
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
             }] } });
 
 class UserListService {
@@ -3475,7 +3632,19 @@ class UserListService {
         this.documentQuery = documentQuery;
     }
     getInitials(name) {
-        return name.substring(0, 2).toUpperCase();
+        if (!name || name.trim() === SHARED.EMPTY) {
+            return SHARED.EMPTY;
+        }
+        const words = name.trim().split(SHARED.EMPTY_SPACE).filter(word => word.length > SHARED.INITIAL_COUNT);
+        if (words.length === 1) {
+            return words[0].substring(0, 2).toUpperCase();
+        }
+        else if (words.length >= 2) {
+            const firstWord = words[0];
+            const lastWord = words[words.length - 1];
+            return (firstWord.charAt(0) + lastWord.charAt(0)).toUpperCase();
+        }
+        return SHARED.EMPTY;
     }
     getColorByIndex(index) {
         const colors = SHARED.COLORS;
@@ -3681,7 +3850,7 @@ class UserListComponent {
         this.categoriesSubscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListComponent, deps: [{ token: DocumentHelperService }, { token: DocumentStore }, { token: DocumentQuery }, { token: UserListService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UserListComponent, isStandalone: false, selector: "lib-user-list", inputs: { userList: "userList", categories: "categories" }, outputs: { userSelected: "userSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n          {{ user.approved }} approved / {{ user.pending }} pending\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:284px;max-width:284px;height:80px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UserListComponent, isStandalone: false, selector: "lib-user-list", inputs: { userList: "userList", categories: "categories" }, outputs: { userSelected: "userSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n        <span style=\"color : #16A34A;\"> {{ user.approved }} approved </span><span>/ {{ user.pending }} pending</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:284px;max-width:284px;height:80px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
             trigger('slideInFromTop', [
                 state('void', style({
                     opacity: 0,
@@ -3739,7 +3908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                                 animate('200ms ease-in-out')
                             ])
                         ])
-                    ], template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n          {{ user.approved }} approved / {{ user.pending }} pending\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:284px;max-width:284px;height:80px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"] }]
+                    ], template: "<div class=\"user-list-container\" [@slideInFromTop]>\r\n  <div class=\"user-cards\">\r\n    <div \r\n      *ngFor=\"let user of filteredUserData\" \r\n      class=\"user-card\"\r\n      [class.selected]=\"selectedUser === user.name\"\r\n      [style.border-color]=\"selectedUser === user.name ? '#f97316' : 'transparent'\"\r\n      (click)=\"onUserSelect(user.name, user._id)\"\r\n    >\r\n      @if(user.name === \"Application Docs\"){\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\"><i class=\"pi pi-user\"></i></span>\r\n        </div>\r\n      }@else {\r\n        <div class=\"user-avatar\" [ngClass]=\"'avatar-' + user.color\">\r\n          <span class=\"initials\">{{ user.initials }}</span>\r\n        </div>\r\n      }\r\n      <div class=\"user-info\">\r\n        <div class=\"username\">{{ user.name }}</div>\r\n        <div class=\"document-counts\">\r\n        <span style=\"color : #16A34A;\"> {{ user.approved }} approved </span><span>/ {{ user.pending }} pending</span>\r\n        </div>\r\n      </div>\r\n      <div class=\"selection-indicator\" *ngIf=\"selectedUser === user.name\" [@fadeIn]>\r\n        <i class=\"ri-check-line\"></i>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Show message when filtered list is empty -->\r\n    <div *ngIf=\"filteredUserData.length === 0 && shouldShowContainer\" class=\"no-users-message\" [@slideInFromTop]>\r\n      <p>No users available for this category.</p>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".user-list-container{padding:1rem}.user-cards{display:flex;flex-wrap:wrap;gap:1rem;transition:all .3s ease-in-out}.user-card{display:flex;align-items:center;gap:.75rem;padding:1rem;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;box-shadow:0 2px 4px #0000001a;min-width:284px;max-width:284px;height:80px;position:relative;flex-shrink:0}.user-card:hover{box-shadow:0 4px 8px #00000026}.user-card.selected{background-color:#f8fafc;box-shadow:0 4px 8px #00000026;border-width:2px}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0}.avatar-orange{background-color:#f97316}.avatar-blue{background-color:#3b82f6}.avatar-green{background-color:#10b981}.avatar-grey{background-color:#6b7280}.avatar-purple{background-color:#8b5cf6}.user-info{flex:1;min-width:0;overflow:hidden}.username{font-weight:600;color:#1f2937;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.document-counts{font-size:.875rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.selection-indicator{position:absolute;top:8px;right:8px;width:20px;height:20px;background-color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}.no-users-message{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f8fafc;border-radius:8px;border:2px dashed #d1d5db;margin:1rem 0}.no-users-message p{color:#6b7280;font-size:.875rem;font-weight:500;margin:0;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: DocumentHelperService }, { type: DocumentStore }, { type: DocumentQuery }, { type: UserListService }, { type: i0.ChangeDetectorRef }], propDecorators: { userList: [{
                 type: Input
             }], categories: [{
@@ -3890,12 +4059,19 @@ class DocumentSearchComponent {
         this.searchTerm = SHARED.EMPTY;
         this.documentHelperService.setSearchKey(null);
     }
+    /**
+     * Clears all filters including search, menu item, user, and status selections
+     */
+    onClearAllFilters() {
+        this.searchTerm = SHARED.EMPTY;
+        this.documentHelperService.clearSelectionState();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, deps: [{ token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentSearchComponent, isStandalone: false, selector: "document-search", inputs: { contextId: "contextId" }, outputs: { onActionClick: "onActionClick" }, ngImport: i0, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n  \r\n  <button \r\n    type=\"button\"\r\n    class=\"action-button\"\r\n    (click)=\"onActionClick.emit()\"\r\n    [attr.aria-label]=\"'Open actions menu'\"\r\n  >\r\n    Actions\r\n  </button>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:space-between;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:40%}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.action-button{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentSearchComponent, isStandalone: false, selector: "document-search", inputs: { contextId: "contextId" }, outputs: { onActionClick: "onActionClick" }, ngImport: i0, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-search', standalone: false, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n  \r\n  <button \r\n    type=\"button\"\r\n    class=\"action-button\"\r\n    (click)=\"onActionClick.emit()\"\r\n    [attr.aria-label]=\"'Open actions menu'\"\r\n  >\r\n    Actions\r\n  </button>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:space-between;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:40%}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.action-button{width:100%;justify-content:center}}\n"] }]
+            args: [{ selector: 'document-search', standalone: false, template: "<div class=\"search-container\">\r\n  <div class=\"search-input-wrapper\">\r\n    <i class=\"pi pi-search search-icon\"></i>\r\n    <input \r\n      type=\"text\" \r\n      [(ngModel)]=\"searchTerm\"\r\n      (ngModelChange)=\"onSearchInputChange($event)\"\r\n      class=\"search-input\"\r\n      placeholder=\"Search by document name, category, type, status or applicant name...\"\r\n      [attr.aria-label]=\"'Search documents'\"\r\n    />\r\n    <button \r\n      *ngIf=\"searchTerm\"\r\n      type=\"button\"\r\n      class=\"clear-button\"\r\n      (click)=\"onClearSearch()\"\r\n      [attr.aria-label]=\"'Clear search'\"\r\n    >\r\n      <i class=\"pi pi-times\"></i>\r\n    </button>\r\n  </div>\r\n\r\n  <button \r\n    type=\"button\"\r\n    class=\"clear-all-filters-link\"\r\n    (click)=\"onClearAllFilters()\"\r\n    [attr.aria-label]=\"'Clear all'\"\r\n  >\r\n  Clear All\r\n  <i class=\"pi pi-times\"></i>\r\n  </button>\r\n\r\n  <div class=\"filters-section\">\r\n    <button \r\n      type=\"button\"\r\n      class=\"action-button\"\r\n      (click)=\"onActionClick.emit()\"\r\n      [attr.aria-label]=\"'Open actions menu'\"\r\n    >\r\n      Upload Document\r\n    </button>\r\n  </div>\r\n</div> ", styles: [".search-container{display:flex;align-items:center;gap:1rem;width:100%;justify-content:flex-start;padding:10px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center;max-width:50%;min-width:300px}.clear-all-filters-link{background:none;border:none;color:#0f8bfd;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:16px;font-weight:500;text-decoration:none!important;transition:background-color .2s ease,color .2s ease;white-space:nowrap;flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:4px}.filters-section{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:auto}.search-icon{position:absolute;left:12px;color:#6c757d;z-index:1}.search-input{width:100%;padding:12px 40px;border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input:focus{border-color:#0f8bfd;box-shadow:0 0 0 3px #0f8bfd1a}.search-input::placeholder{color:#6c757d}.clear-button{position:absolute;right:12px;background:none;border:none;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.clear-button:hover{background-color:#f8f9fa;color:#495057}.action-button{background-color:#0f8bfd;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;white-space:nowrap}.action-button:hover{background-color:#0d7ae6;transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:focus{outline:none;box-shadow:0 0 0 3px #0f8bfd4d}@media (max-width: 768px){.search-container{flex-direction:column;gap:.75rem}.search-input-wrapper{max-width:100%}.filters-section{width:100%;justify-content:center;gap:.5rem}.action-button{width:auto;justify-content:center}}\n"] }]
         }], ctorParameters: () => [{ type: DocumentHelperService }], propDecorators: { contextId: [{
                 type: Input
             }], onActionClick: [{
@@ -3965,6 +4141,10 @@ class FolderContainerComponent {
      * Tracks whether the save button should be disabled
      */
     isSaveButtonDisabled = false;
+    /**
+     * Tracks whether there are unsaved changes in the document upload form
+     */
+    hasUnsavedChanges = false;
     constructor(documentQuery, documentHelperService) {
         this.documentQuery = documentQuery;
         this.documentHelperService = documentHelperService;
@@ -3994,18 +4174,36 @@ class FolderContainerComponent {
      */
     onFormValidationChange() {
         this.updateSaveButtonState();
+        // Check if there are actual unsaved changes
+        this.checkForUnsavedChanges();
+    }
+    /**
+     * Checks if there are unsaved changes in the document upload form
+     */
+    checkForUnsavedChanges() {
+        if (this.documentUploadComponent) {
+            // Check if files are uploaded or form has changes
+            const hasFiles = Boolean(this.documentUploadComponent.uploadedFiles && this.documentUploadComponent.uploadedFiles.length > 0);
+            const hasFormChanges = Boolean((this.documentUploadComponent.selectedAssignmentType && this.documentUploadComponent.selectedAssignmentType !== SHARED.EMPTY) ||
+                (this.documentUploadComponent.selectedApplicant && this.documentUploadComponent.selectedApplicant !== SHARED.EMPTY) ||
+                (this.documentUploadComponent.selectedCategory && this.documentUploadComponent.selectedCategory !== SHARED.EMPTY) ||
+                (this.documentUploadComponent.selectedDocumentType && this.documentUploadComponent.selectedDocumentType !== SHARED.EMPTY));
+            this.hasUnsavedChanges = hasFiles || hasFormChanges;
+        }
     }
     /**
      * Opens the document upload sidebar
      */
     openDocumentUploadSidebar() {
         this.isDocumentUploadSidebarOpen = true;
+        this.hasUnsavedChanges = false; // Reset when opening
     }
     /**
      * Handles the document upload sidebar hide event
      */
     onDocumentUploadSidebarHide() {
         this.isDocumentUploadSidebarOpen = false;
+        this.hasUnsavedChanges = false;
         if (this.documentUploadComponent) {
             this.documentUploadComponent.resetForm();
         }
@@ -4015,6 +4213,17 @@ class FolderContainerComponent {
      */
     onDocumentUploadSidebarClose() {
         this.isDocumentUploadSidebarOpen = false;
+        this.hasUnsavedChanges = false;
+        if (this.documentUploadComponent) {
+            this.documentUploadComponent.resetForm();
+        }
+    }
+    /**
+     * Handles the document upload sidebar close with unsaved changes event
+     */
+    onDocumentUploadSidebarCloseWithUnsavedChanges() {
+        this.isDocumentUploadSidebarOpen = false;
+        this.hasUnsavedChanges = false;
         if (this.documentUploadComponent) {
             this.documentUploadComponent.resetForm();
         }
@@ -4033,6 +4242,7 @@ class FolderContainerComponent {
      */
     onDocumentUploadSuccess() {
         this.documentHelperService.refreshAllDataWithCurrentFilters(this.contextId);
+        this.hasUnsavedChanges = false; // Reset after successful upload
         if (this.sidebarComponent) {
             this.sidebarComponent.showSuccess();
         }
@@ -4047,7 +4257,7 @@ class FolderContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, deps: [{ token: DocumentQuery }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId", userList: "userList", statusData: "statusData", categories: "categories" }, viewQueries: [{ propertyName: "documentUploadComponent", first: true, predicate: DocumentUploadComponent, descendants: true }, { propertyName: "sidebarComponent", first: true, predicate: SidebarComponent, descendants: true }], ngImport: i0, template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  [blockScroll]=\"true\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onClose)=\"onDocumentUploadSidebarClose()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"], outputs: ["onFormValidationChange", "onUploadSuccess"] }, { kind: "component", type: UserListComponent, selector: "lib-user-list", inputs: ["userList", "categories"], outputs: ["userSelected"] }, { kind: "component", type: DocumentStatusComponent, selector: "lib-document-status", inputs: ["contextId", "statusData"] }, { kind: "component", type: DocumentSearchComponent, selector: "document-search", inputs: ["contextId"], outputs: ["onActionClick"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar", inputs: ["visible", "position", "width", "title", "showCloseButton", "modal", "dismissible", "closeOnEscape", "baseZIndex", "autoZIndex", "styleClass", "appendTo", "blockScroll", "closeIcon", "showSaveButton", "saveButtonText", "saveButtonDisabled", "successMessage", "errorMessage"], outputs: ["visibleChange", "onShow", "onHide", "onSave"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId", userList: "userList", statusData: "statusData", categories: "categories" }, viewQueries: [{ propertyName: "documentUploadComponent", first: true, predicate: DocumentUploadComponent, descendants: true }, { propertyName: "sidebarComponent", first: true, predicate: SidebarComponent, descendants: true }], ngImport: i0, template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [hasUnsavedChanges]=\"hasUnsavedChanges\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onDiscardChanges)=\"onDocumentUploadSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"], outputs: ["onFormValidationChange", "onUploadSuccess"] }, { kind: "component", type: UserListComponent, selector: "lib-user-list", inputs: ["userList", "categories"], outputs: ["userSelected"] }, { kind: "component", type: DocumentStatusComponent, selector: "lib-document-status", inputs: ["contextId", "statusData"] }, { kind: "component", type: DocumentSearchComponent, selector: "document-search", inputs: ["contextId"], outputs: ["onActionClick"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar", inputs: ["visible", "position", "width", "title", "showCloseButton", "modal", "dismissible", "closeOnEscape", "baseZIndex", "autoZIndex", "styleClass", "appendTo", "blockScroll", "closeIcon", "showSaveButton", "saveButtonText", "saveButtonDisabled", "successMessage", "errorMessage", "hasUnsavedChanges"], outputs: ["visibleChange", "onShow", "onHide", "onSave", "onDiscardChanges"] }], animations: [
             trigger('slideInOut', [
                 state('visible', style({
                     height: '*',
@@ -4101,7 +4311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                                 animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
                             ])
                         ])
-                    ], template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  [blockScroll]=\"true\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onClose)=\"onDocumentUploadSidebarClose()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"] }]
+                    ], template: "\r\n<document-search [contextId]=\"contextId\" (onActionClick)=\"openDocumentUploadSidebar()\"></document-search>\r\n<div class=\"user-list-wrapper\" [@slideInOut]=\"userListAnimationState\">\r\n  <lib-user-list [userList]=\"userList\" [categories]=\"categories\"></lib-user-list>\r\n</div>\r\n<lib-document-status [contextId]=\"contextId\" [statusData]=\"statusData\"></lib-document-status>\r\n\r\n<!-- Document Upload Sidebar -->\r\n<lib-sidebar\r\n  [(visible)]=\"isDocumentUploadSidebarOpen\"\r\n  position=\"right\"\r\n  width=\"600px\"\r\n  title=\"Upload Documents\"\r\n  [showCloseButton]=\"true\"\r\n  [showSaveButton]=\"true\"\r\n  [saveButtonText]=\"'Save'\"\r\n  [saveButtonDisabled]=\"isSaveButtonDisabled\"\r\n  [successMessage]=\"'Document Saved Successfully'\"\r\n  [hasUnsavedChanges]=\"hasUnsavedChanges\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n  (onDiscardChanges)=\"onDocumentUploadSidebarCloseWithUnsavedChanges()\"\r\n>\r\n  <lib-document-upload \r\n    [contextId]=\"contextId\" \r\n    (onFormValidationChange)=\"onFormValidationChange()\" \r\n    (onUploadSuccess)=\"onDocumentUploadSuccess()\"\r\n    (onUploadError)=\"onDocumentUploadError($event)\"\r\n  ></lib-document-upload>\r\n</lib-sidebar>", styles: [".user-list-wrapper{overflow:hidden;margin-bottom:1rem}.user-list-wrapper ::ng-deep *{transition:opacity .2s ease-in-out}.user-list-wrapper.ng-animating{pointer-events:none}::ng-deep lib-user-list{display:block;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: DocumentQuery }, { type: DocumentHelperService }], propDecorators: { documentList: [{
                 type: Input
             }], folderList: [{
@@ -5448,11 +5658,11 @@ class DocumentActionsComponent {
         this.rejectNote = SHARED.EMPTY;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsComponent, deps: [{ token: DocumentActionsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentActionsComponent, isStandalone: false, selector: "document-actions", inputs: { document: "document", documentId: "documentId", currentStatus: "currentStatus", isLoading: "isLoading", isUploaded: "isUploaded", statusId: "statusId" }, outputs: { actionPerformed: "actionPerformed" }, viewQueries: [{ propertyName: "confirmationDialog", first: true, predicate: ConfirmationDialogComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"document-actions-container\" >\r\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\r\n    <div class=\"actions-buttons\">\r\n      <!-- Reject Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn reject-btn\" [ngClass]=\"rejectButtonClass\" (click)=\"onRejectClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isRejecting\">\r\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isRejecting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED :\r\n          SHARED.BUTTON_LABEL_REJECT }}</span>\r\n      </button>\r\n\r\n      <!-- Accept Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn accept-btn\" [ngClass]=\"acceptButtonClass\" (click)=\"onAcceptClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isAccepting\">\r\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isAccepting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT\r\n          }}</span>\r\n      </button>\r\n\r\n      <!-- Delete Button -->\r\n      @if(document?.isUploaded){\r\n      <button class=\"action-btn delete-btn\" (click)=\"onDeleteClick()\" [disabled]=\"isLoading\"\r\n        [permission]=\"'documents-deleteDocumentByDocumentId'\" pTooltip=\"Delete Document\" tooltipPosition=\"top\">\r\n        <i class=\"pi pi-trash\"></i>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-confirmation-dialog></app-confirmation-dialog>\r\n\r\n<p-dialog [(visible)]=\"showAcceptDialog\" [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\r\n    <textarea id=\"acceptNote\" pInputTextarea [(ngModel)]=\"acceptNote\" [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" class=\"p-button-success\" (click)=\"onAcceptConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n<p-dialog [(visible)]=\"showRejectDialog\" [header]=\"SHARED.REJECT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\r\n    <textarea id=\"rejectNote\" pInputTextarea [(ngModel)]=\"rejectNote\" [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.REJECT_BUTTON_LABEL\" class=\"p-button-danger\" [disabled]=\"isRejectNoteEmpty\"\r\n        (click)=\"onRejectConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>", styles: [".document-actions-container{margin:0}.actions-card{border-radius:8px;padding:.75rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card.accepted-card{background-color:#d4edda;border:1px solid #28a745}.actions-card.rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-approved-card{background-color:#d4edda;border:1px solid #28a745}.actions-card[class*=status-].status-rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn.primary-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn.primary-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-approved-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn[class*=status-].status-rejected-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-pending-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn.primary-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-approved-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-rejected-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn[class*=status-].status-pending-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#fff;border-color:#e2e8f0;color:#e53e3e;padding:.5rem;min-width:auto;width:40px;height:40px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i5$2.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["confirmationOptions"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentActionsComponent, isStandalone: false, selector: "document-actions", inputs: { document: "document", documentId: "documentId", currentStatus: "currentStatus", isLoading: "isLoading", isUploaded: "isUploaded", statusId: "statusId" }, outputs: { actionPerformed: "actionPerformed" }, viewQueries: [{ propertyName: "confirmationDialog", first: true, predicate: ConfirmationDialogComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"document-actions-container\" *ngIf=\"!document?.isUploaded\">\r\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\r\n    <div class=\"actions-buttons\">\r\n      <!-- Reject Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn reject-btn\" [ngClass]=\"rejectButtonClass\" (click)=\"onRejectClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isRejecting\">\r\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isRejecting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED :\r\n          SHARED.BUTTON_LABEL_REJECT }}</span>\r\n      </button>\r\n\r\n      <!-- Accept Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn accept-btn\" [ngClass]=\"acceptButtonClass\" (click)=\"onAcceptClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isAccepting\">\r\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isAccepting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT\r\n          }}</span>\r\n      </button>\r\n\r\n      <!-- Delete Button -->\r\n      @if(document?.isUploaded){\r\n      <button class=\"action-btn delete-btn\" (click)=\"onDeleteClick()\" [disabled]=\"isLoading\"\r\n        [permission]=\"'documents-deleteDocumentByDocumentId'\" pTooltip=\"Delete Document\" tooltipPosition=\"top\">\r\n        <i class=\"pi pi-trash\"></i>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-confirmation-dialog></app-confirmation-dialog>\r\n\r\n<p-dialog [(visible)]=\"showAcceptDialog\" [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\r\n    <textarea id=\"acceptNote\" pInputTextarea [(ngModel)]=\"acceptNote\" [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" class=\"p-button-success\" (click)=\"onAcceptConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n<p-dialog [(visible)]=\"showRejectDialog\" [header]=\"SHARED.REJECT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\r\n    <textarea id=\"rejectNote\" pInputTextarea [(ngModel)]=\"rejectNote\" [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.REJECT_BUTTON_LABEL\" class=\"p-button-danger\" [disabled]=\"isRejectNoteEmpty\"\r\n        (click)=\"onRejectConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>", styles: [".document-actions-container{margin:0}.actions-card{border-radius:8px;padding:.75rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef;width:92%;margin-left:3%}.actions-card.accepted-card{background-color:#d4edda;border:1px solid #28a745}.actions-card.rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-approved-card{background-color:#d4edda;border:1px solid #28a745}.actions-card[class*=status-].status-rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn.primary-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn.primary-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-approved-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn[class*=status-].status-rejected-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-pending-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn.primary-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-approved-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-rejected-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn[class*=status-].status-pending-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#fff;border-color:#e2e8f0;color:#e53e3e;padding:.5rem;min-width:auto;width:40px;height:40px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i5$2.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }, { kind: "component", type: ConfirmationDialogComponent, selector: "app-confirmation-dialog", inputs: ["confirmationOptions"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-actions', standalone: false, template: "<div class=\"document-actions-container\" >\r\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\r\n    <div class=\"actions-buttons\">\r\n      <!-- Reject Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn reject-btn\" [ngClass]=\"rejectButtonClass\" (click)=\"onRejectClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isRejecting\">\r\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isRejecting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED :\r\n          SHARED.BUTTON_LABEL_REJECT }}</span>\r\n      </button>\r\n\r\n      <!-- Accept Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn accept-btn\" [ngClass]=\"acceptButtonClass\" (click)=\"onAcceptClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isAccepting\">\r\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isAccepting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT\r\n          }}</span>\r\n      </button>\r\n\r\n      <!-- Delete Button -->\r\n      @if(document?.isUploaded){\r\n      <button class=\"action-btn delete-btn\" (click)=\"onDeleteClick()\" [disabled]=\"isLoading\"\r\n        [permission]=\"'documents-deleteDocumentByDocumentId'\" pTooltip=\"Delete Document\" tooltipPosition=\"top\">\r\n        <i class=\"pi pi-trash\"></i>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-confirmation-dialog></app-confirmation-dialog>\r\n\r\n<p-dialog [(visible)]=\"showAcceptDialog\" [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\r\n    <textarea id=\"acceptNote\" pInputTextarea [(ngModel)]=\"acceptNote\" [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" class=\"p-button-success\" (click)=\"onAcceptConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n<p-dialog [(visible)]=\"showRejectDialog\" [header]=\"SHARED.REJECT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\r\n    <textarea id=\"rejectNote\" pInputTextarea [(ngModel)]=\"rejectNote\" [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.REJECT_BUTTON_LABEL\" class=\"p-button-danger\" [disabled]=\"isRejectNoteEmpty\"\r\n        (click)=\"onRejectConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>", styles: [".document-actions-container{margin:0}.actions-card{border-radius:8px;padding:.75rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-card.accepted-card{background-color:#d4edda;border:1px solid #28a745}.actions-card.rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-approved-card{background-color:#d4edda;border:1px solid #28a745}.actions-card[class*=status-].status-rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn.primary-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn.primary-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-approved-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn[class*=status-].status-rejected-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-pending-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn.primary-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-approved-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-rejected-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn[class*=status-].status-pending-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#fff;border-color:#e2e8f0;color:#e53e3e;padding:.5rem;min-width:auto;width:40px;height:40px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}\n"] }]
+            args: [{ selector: 'document-actions', standalone: false, template: "<div class=\"document-actions-container\" *ngIf=\"!document?.isUploaded\">\r\n  <div class=\"actions-card\" [ngClass]=\"cardClass\">\r\n    <div class=\"actions-buttons\">\r\n      <!-- Reject Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn reject-btn\" [ngClass]=\"rejectButtonClass\" (click)=\"onRejectClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE || isRejecting\">\r\n        <i class=\"pi pi-times\" *ngIf=\"currentStatus === SHARED.STATUS_REJECTED_LOWERCASE\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isRejecting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_REJECTED_LOWERCASE ? SHARED.BUTTON_LABEL_REJECTED :\r\n          SHARED.BUTTON_LABEL_REJECT }}</span>\r\n      </button>\r\n\r\n      <!-- Accept Button -->\r\n      <button *ngIf=\"!document?.isUploaded\" class=\"action-btn accept-btn\" [ngClass]=\"acceptButtonClass\" (click)=\"onAcceptClick()\"\r\n        [disabled]=\"currentStatus === SHARED.STATUS_ACCEPTED || isAccepting\">\r\n        <i class=\"pi pi-check\" *ngIf=\"currentStatus === SHARED.STATUS_ACCEPTED\"></i>\r\n        <i class=\"pi pi-spin pi-spinner\" *ngIf=\"isAccepting\"></i>\r\n        <span>{{ currentStatus === SHARED.STATUS_ACCEPTED ? SHARED.BUTTON_LABEL_ACCEPTED : SHARED.BUTTON_LABEL_ACCEPT\r\n          }}</span>\r\n      </button>\r\n\r\n      <!-- Delete Button -->\r\n      @if(document?.isUploaded){\r\n      <button class=\"action-btn delete-btn\" (click)=\"onDeleteClick()\" [disabled]=\"isLoading\"\r\n        [permission]=\"'documents-deleteDocumentByDocumentId'\" pTooltip=\"Delete Document\" tooltipPosition=\"top\">\r\n        <i class=\"pi pi-trash\"></i>\r\n      </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<app-confirmation-dialog></app-confirmation-dialog>\r\n\r\n<p-dialog [(visible)]=\"showAcceptDialog\" [header]=\"SHARED.ACCEPT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"acceptNote\" class=\"note-label\">{{ SHARED.ACCEPT_NOTE_LABEL }}</label>\r\n    <textarea id=\"acceptNote\" pInputTextarea [(ngModel)]=\"acceptNote\" [placeholder]=\"SHARED.ACCEPT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.ACCEPT_BUTTON_LABEL\" class=\"p-button-success\" (click)=\"onAcceptConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>\r\n\r\n<p-dialog [(visible)]=\"showRejectDialog\" [header]=\"SHARED.REJECT_CONFIRM_HEADER\" [modal]=\"true\" [draggable]=\"false\"\r\n  [closable]=\"true\" [style]=\"{ width: '25rem', height: '25rem' }\" styleClass=\"confirmation-dialog\">\r\n  <div class=\"dialog-content\">\r\n    <label for=\"rejectNote\" class=\"note-label\">{{ SHARED.REJECT_NOTE_LABEL }}</label>\r\n    <textarea id=\"rejectNote\" pInputTextarea [(ngModel)]=\"rejectNote\" [placeholder]=\"SHARED.REJECT_NOTE_PLACEHOLDER\"\r\n      rows=\"6\" class=\"note-textarea\">\r\n    </textarea>\r\n  </div>\r\n  <ng-template pTemplate=\"footer\">\r\n    <div class=\"dialog-footer\">\r\n      <button pButton [label]=\"SHARED.CANCEL_BUTTON_LABEL\" class=\"p-button-secondary\" (click)=\"onCancel()\">\r\n      </button>\r\n      <button pButton [label]=\"SHARED.REJECT_BUTTON_LABEL\" class=\"p-button-danger\" [disabled]=\"isRejectNoteEmpty\"\r\n        (click)=\"onRejectConfirm()\">\r\n      </button>\r\n    </div>\r\n  </ng-template>\r\n</p-dialog>", styles: [".document-actions-container{margin:0}.actions-card{border-radius:8px;padding:.75rem;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.actions-card.pending-card{background-color:#f8f9fa;border:1px solid #e9ecef;width:92%;margin-left:3%}.actions-card.accepted-card{background-color:#d4edda;border:1px solid #28a745}.actions-card.rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-approved-card{background-color:#d4edda;border:1px solid #28a745}.actions-card[class*=status-].status-rejected-card{background-color:#f8d7da;border:1px solid #dc3545}.actions-card[class*=status-].status-pending-card{background-color:#f8f9fa;border:1px solid #e9ecef}.actions-buttons{display:flex;gap:.5rem;align-items:center}.action-btn{padding:.5rem 1rem;border-radius:6px;border:1px solid;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:80px;justify-content:center}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn i{font-size:.875rem}.reject-btn.default-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn.default-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.reject-btn.secondary-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn.secondary-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn.primary-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn.primary-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-approved-reject{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.reject-btn[class*=status-].status-approved-reject:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.reject-btn[class*=status-].status-rejected-reject{background-color:#dc3545;border-color:#dc3545;color:#fff}.reject-btn[class*=status-].status-rejected-reject:hover:not(:disabled){background-color:#c82333;border-color:#bd2130}.reject-btn[class*=status-].status-pending-reject{background-color:#fff5f5;border-color:#feb2b2;color:#4a5568}.reject-btn[class*=status-].status-pending-reject:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181}.accept-btn.default-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn.default-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.accept-btn.secondary-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn.secondary-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn.primary-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn.primary-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-approved-accept{background-color:#28a745;border-color:#28a745;color:#fff}.accept-btn[class*=status-].status-approved-accept:hover:not(:disabled){background-color:#218838;border-color:#1e7e34}.accept-btn[class*=status-].status-rejected-accept{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.accept-btn[class*=status-].status-rejected-accept:hover:not(:disabled){background-color:#edf2f7;border-color:#cbd5e0}.accept-btn[class*=status-].status-pending-accept{background-color:#f0fff4;border-color:#9ae6b4;color:#4a5568}.accept-btn[class*=status-].status-pending-accept:hover:not(:disabled){background-color:#c6f6d5;border-color:#68d391}.delete-btn{background-color:#fff;border-color:#e2e8f0;color:#e53e3e;padding:.5rem;min-width:auto;width:40px;height:40px}.delete-btn:hover:not(:disabled){background-color:#fed7d7;border-color:#fc8181;color:#c53030}.delete-btn i{font-size:1rem}:host ::ng-deep .confirmation-dialog .p-dialog{border-radius:8px;box-shadow:0 4px 12px #00000026;border:none;overflow:hidden}:host ::ng-deep .confirmation-dialog .p-dialog-header{padding:1.25rem 1.5rem;background-color:#fff;border-bottom:none;border-top-right-radius:10px;border-top-left-radius:10px}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-header-icon{display:none}:host ::ng-deep .confirmation-dialog .p-dialog-header .p-dialog-title{font-size:1.125rem;font-weight:600;color:#2d3748;margin:0}:host ::ng-deep .confirmation-dialog .p-dialog-content{padding:1.5rem;background-color:#fff}:host ::ng-deep .confirmation-dialog .p-dialog-footer{padding:1rem 1.5rem;background-color:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end;border-bottom-right-radius:10px;border-bottom-left-radius:10px}.dialog-content .note-label{display:block;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:#2d3748}.dialog-content .note-textarea{width:100%;min-height:100px;padding:.75rem;border:1px solid #e2e8f0;border-radius:6px;font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical;background-color:#fff;color:#2d3748}.dialog-content .note-textarea::placeholder{color:#a0aec0}.dialog-content .note-textarea:focus{outline:none;border-color:#3182ce;box-shadow:0 0 0 3px #3182ce1a}.dialog-footer{display:flex;gap:.75rem;justify-content:flex-end}.dialog-footer button{min-width:80px;padding:.5rem 1rem;border-radius:6px;font-weight:500;font-size:.875rem;border:1px solid;cursor:pointer;transition:all .2s ease}.dialog-footer button.p-button-secondary{background-color:#f7fafc;border-color:#e2e8f0;color:#4a5568}.dialog-footer button.p-button-secondary:hover{background-color:#edf2f7;border-color:#cbd5e0}.dialog-footer button.p-button-success{background-color:#38a169;border-color:#38a169;color:#fff}.dialog-footer button.p-button-success:hover{background-color:#2f855a;border-color:#2f855a}.dialog-footer button.p-button-danger{background-color:#e53e3e;border-color:#e53e3e;color:#fff}.dialog-footer button.p-button-danger:hover{background-color:#c53030;border-color:#c53030}\n"] }]
         }], ctorParameters: () => [{ type: DocumentActionsService }], propDecorators: { document: [{
                 type: Input
             }], documentId: [{
@@ -6800,7 +7010,8 @@ class DocumentModule {
             SharedModule,
             InputTextareaModule,
             ToastModule,
-            ConfirmDialogModule], exports: [
+            ConfirmDialogModule,
+            TooltipModule], exports: [
             /**
              * Exports the `DocumentContainerComponent` to be used in other modules.
              */
@@ -6949,7 +7160,8 @@ class DocumentModule {
             SharedModule,
             InputTextareaModule,
             ToastModule,
-            ConfirmDialogModule] });
+            ConfirmDialogModule,
+            TooltipModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentModule, decorators: [{
             type: NgModule,
@@ -7090,7 +7302,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         SharedModule,
                         InputTextareaModule,
                         ToastModule,
-                        ConfirmDialogModule
+                        ConfirmDialogModule,
+                        TooltipModule
                     ],
                     exports: [
                         /**