cat-documents-ng 0.2.55 → 0.2.57

package/fesm2022/cat-documents-ng.mjs

@@ -1,50 +1,52 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, Directive, ViewChild, ViewEncapsulation, NgModule, APP_INITIALIZER } from '@angular/core';
+import { Injectable, EventEmitter, ViewChild, Input, ViewEncapsulation, Component, Output, 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, Subscription, Subject, takeUntil, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
+import { firstValueFrom, tap, EMPTY, catchError, throwError, of, combineLatest, Subject, Observable, takeUntil, Subscription, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { __decorate } from 'tslib';
 import { EntityStore, StoreConfig, QueryEntity } from '@datorama/akita';
 import * as i2 from '@angular/common/http';
-import { HttpParams, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i3$1 from 'primeng/api';
+import * as i3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
-import * as i1 from '@angular/router';
 import * as i4 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i5$3 from 'primeng/sidebar';
+import * as i10 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
+import * as i11 from 'primeng/progressbar';
+import { ProgressBarModule } from 'primeng/progressbar';
+import * as i12 from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import * as i3$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i14 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i4$1 from 'primeng/sidebar';
 import { SidebarModule } from 'primeng/sidebar';
-import * as i5$2 from 'primeng/messages';
-import * as i7$1 from 'primeng/dialog';
+import * as i1 from '@angular/router';
+import * as i7 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i9 from 'primeng/dropdown';
-import { DropdownModule } from 'primeng/dropdown';
-import * as i10 from 'primeng/inputtext';
+import * as i7$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i2$2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i5 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
-import * as i7 from 'primeng/fileupload';
-import { FileUploadModule } from 'primeng/fileupload';
-import * as i8 from 'primeng/progressbar';
-import { ProgressBarModule } from 'primeng/progressbar';
+import * as i5$2 from 'primeng/messages';
 import * as i6 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import * as i3$2 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
 import * as i5$1 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i8$1 from 'primeng/tooltip';
+import * as i8 from 'primeng/tooltip';
 import * as i7$2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
-import * as i8$2 from 'primeng/menu';
+import * as i8$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i9$1 from 'primeng/card';
+import * as i9 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import { ListboxModule } from 'primeng/listbox';
 import { TimelineModule } from 'primeng/timeline';
@@ -268,6 +270,15 @@ class SHARED {
      * @type {string}
      */
     static UPDATE_DOCUMENT_NAME = 'Document name updated for ID:';
+    static WIDTH = '500px';
+    static BASEZINDEX = 1000;
+    static CLOSE_ICON = 'pi pi-times';
+    static SAVE = 'Save';
+    static UPLOAD_PROGRESS_100 = 100;
+    static UPLOAD_PROGRESS_10 = 10;
+    static APPLICANT = 'Applicant';
+    static CATAGORIES = 'catagories';
+    static DOCUMENTS = 'Documents';
     static Menu = [
         {
             label: 'Applicant',
@@ -1044,6 +1055,13 @@ class URLS {
      * @type {string}
      */
     static CONFIGFILEURL = "assets/config/api.config.json";
+    /**
+     * The URL endpoint for document uploads.
+     * Used to send documents to the server for storage or processing.
+     * @static
+     * @type {string}
+     */
+    static DOCUMENT_UPLOAD_FILE = "documents/uploadFile";
     /**
      * The URL endpoint for document uploads.
      * Used to send documents to the server for storage or processing.
@@ -1078,6 +1096,27 @@ class URLS {
      * @type {string}
      */
     static DOCUMENT_TYPES = "documentTypes";
+    /**
+     * The URL endpoint for getting categories by source (Applicant/Application).
+     * Used to fetch document categories based on the selected source.
+     * @static
+     * @type {string}
+     */
+    static GET_CATEGORIES_BY_SOURCE = "documentTypes/getAllCategoriesBySource/";
+    /**
+     * The URL endpoint for getting document types by category ID.
+     * Used to fetch document types based on the selected category.
+     * @static
+     * @type {string}
+     */
+    static GET_DOCUMENT_TYPES_BY_CATEGORY = "documentTypes/getAllDocumentTypesByCategoryId/";
+    /**
+     * The URL endpoint for saving document upload data.
+     * Used to save the complete document upload information.
+     * @static
+     * @type {string}
+     */
+    static SAVE_DOCUMENT_UPLOAD = "documents/saveDocumentUpload";
     /**
      * The query parameter to pass a context ID in API requests.
      * @static
@@ -1231,7 +1270,8 @@ class DocumentService {
      * @returns {Observable<any>} Observable that emits the newly created document.
      */
     create(entity) {
-        return this.http.post(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}`, entity).pipe(tap((newEntity) => this.documentStore.add(newEntity)));
+        const headers = { 'Authorization': 'Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9' };
+        return this.http.post(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD_FILE}`, entity, { headers }).pipe(tap((newEntity) => this.documentStore.add(newEntity)));
     }
     /**
      * Fetches all documents from the backend.
@@ -1263,7 +1303,7 @@ class DocumentService {
      * @returns {Observable<void>} Observable that completes when the document is deleted.
      */
     delete(id) {
-        return this.http.delete(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${id}`).pipe(tap(() => this.documentStore.remove(id)));
+        return this.http.delete(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD_FILE}/${id}`).pipe(tap(() => this.documentStore.remove(id)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentService, deps: [{ token: DocumentStore }, { token: i2.HttpClient }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentService, providedIn: 'root' });
@@ -1635,7 +1675,8 @@ class DocumentHttpService {
      * @returns {Observable<any>} Observable that emits the transformed data for dropdown options.
      */
     getDocumentCatagories(contextId) {
-        return this.http.get(`${this.apiUrl}${URLS.DOCUMENTS_CATAGORIES}/${contextId}`).pipe(tap((response) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        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) {
                 this.documentStore.setDocumentCategories(response.categories);
@@ -1693,7 +1734,8 @@ class DocumentHttpService {
      * @returns {Observable<DocumentModel>} An observable that emits the updated DocumentModel.
      */
     updateDocumentName(documentId, payload) {
-        return this.http.put(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${documentId}`, payload).pipe(catchError((error) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.put(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${documentId}`, payload, { headers }).pipe(catchError((error) => {
             return throwError(() => new Error(error));
         }));
     }
@@ -1705,7 +1747,8 @@ class DocumentHttpService {
     getUserListByContextId(contextId) {
         if (!contextId)
             return EMPTY;
-        return this.http.get(`${this.apiUrl}${URLS.USERLIST}${contextId}`).pipe(tap((userList) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.get(`${this.apiUrl}${URLS.USERLIST}${contextId}`, { headers }).pipe(tap((userList) => {
             this.documentStore.setUserList(userList);
         }), catchError((error) => {
             return throwError(() => new Error(error));
@@ -1730,7 +1773,8 @@ class DocumentHttpService {
         if (categoryId) {
             params = params.set(SHARED.CATEGORY, categoryId);
         }
-        return this.http.get(url, { params }).pipe(tap((statusData) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.get(url, { params, headers }).pipe(tap((statusData) => {
             this.documentStore.setStatusData(statusData);
         }), catchError((error) => {
             return throwError(() => new Error(error));
@@ -1760,7 +1804,8 @@ class DocumentHttpService {
         if (searchKey) {
             params = params.set(SHARED.SEARCH_KEY, searchKey);
         }
-        return this.http.get(`${this.apiUrl}${URLS.GETALL}/${contextId}`, { params }).pipe(tap((response) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.get(`${this.apiUrl}${URLS.GETALL}/${contextId}`, { params, headers }).pipe(tap((response) => {
             if (response.documents) {
                 this.documentStore.setDocumentList(response.documents);
             }
@@ -1772,7 +1817,56 @@ class DocumentHttpService {
         if (!documentId) {
             return of([]);
         }
-        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_HISTORY}${documentId}`);
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_HISTORY}${documentId}`, { headers });
+    }
+    /**
+     * Fetches document categories by source (Applicant/Application).
+     * @param {string} source - The source type (Applicant or Application).
+     * @returns {Observable<DocumentCategory[]>} Observable that emits the categories.
+     */
+    getCategoriesBySource(source) {
+        if (!source)
+            return EMPTY;
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.get(`${this.apiUrl}${URLS.GET_CATEGORIES_BY_SOURCE}${source}`, { headers }).pipe(catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Fetches document types by category ID.
+     * @param {string} categoryId - The category ID to fetch document types for.
+     * @returns {Observable<DocumentTypeModel[]>} Observable that emits the document types.
+     */
+    getDocumentTypesByCategory(categoryId) {
+        if (!categoryId)
+            return EMPTY;
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.get(`${this.apiUrl}${URLS.GET_DOCUMENT_TYPES_BY_CATEGORY}${categoryId}`, { headers }).pipe(catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Uploads a single file using the uploadFile API.
+     * @param {FormData} formData - The form data containing the file and metadata.
+     * @returns {Observable<any>} Observable that emits the upload response.
+     */
+    uploadFile(formData) {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.post(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD_FILE}`, formData, { headers }).pipe(catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Saves the complete document upload data.
+     * @param {any} payload - The document upload payload containing all necessary data.
+     * @returns {Observable<any>} Observable that emits the save response.
+     */
+    saveDocumentUpload(payload) {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.post(`${this.apiUrl}${URLS.SAVE_DOCUMENT_UPLOAD}`, payload, { headers }).pipe(catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
     }
     /**
      * Updates the status of a document by document ID
@@ -1785,7 +1879,8 @@ class DocumentHttpService {
         const payload = {
             statusUpdateDescription: statusUpdateDescription
         };
-        return this.http.put(`${this.apiUrl}${URLS.UPDATE_DOCUMENT_STATUS}${documentId}/${status}`, payload).pipe(tap((response) => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        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);
                 response.normalizedStatus = normalizedStatus;
@@ -1818,7 +1913,8 @@ class DocumentHttpService {
      * @returns {Observable<any>} Observable that emits the delete response
      */
     deleteDocument(documentId, contextId) {
-        return this.http.delete(`${this.apiUrl}${URLS.DELETE_DOCUMENT}${documentId}`).pipe(tap(() => {
+        let headers = new HttpHeaders({ Authorization: `Bearer 863660c6-dc2a-4ca5-bae1-0dd177d5c9a9` });
+        return this.http.delete(`${this.apiUrl}${URLS.DELETE_DOCUMENT}${documentId}`, { headers }).pipe(tap(() => {
             this.getDocumentCatagories(contextId).subscribe();
             this.getUserListByContextId(contextId).subscribe();
             this.getStatusDocumentCount(contextId).subscribe();
@@ -2121,90 +2217,801 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }, { type: DocumentHttpService }] });
 
-class UserListService {
-    documentStore;
-    documentQuery;
-    constructor(documentStore, documentQuery) {
-        this.documentStore = documentStore;
-        this.documentQuery = documentQuery;
-    }
-    getInitials(name) {
-        return name.substring(0, 2).toUpperCase();
-    }
-    getColorByIndex(index) {
-        const colors = SHARED.COLORS;
-        return colors[index % colors.length];
+/**
+ * Service for handling document uploads.
+ * @class DocumentUploadService
+ * @typedef {DocumentUploadService}
+ */
+class DocumentUploadService {
+    documentService;
+    documentUploadStore;
+    messageService;
+    /**
+     * Event emitter for upload completion
+     */
+    uploadCompleted = new EventEmitter();
+    /**
+     * The file to upload.
+     * @type {*}
+     */
+    uploadedFile;
+    /**
+     * Represent contextId
+     * @type {string}
+     */
+    contextId = SHARED.EMPTY;
+    /**
+     * Represent document name
+     * @type {string}
+     */
+    docName = SHARED.EMPTY;
+    /**
+     * Represent document id
+     * @type {string}
+     */
+    docTypeId = SHARED.EMPTY;
+    /**
+     * Creates an instance of DocumentUploadService.
+     * @param {DocumentService} documentService - Service for handling document uploads.
+     * @param {DocumentStore} documentUploadStore - Store for managing uploaded documents.
+     * @param {MessageService} messageService - Service for displaying messages.
+     * @returns {void}
+     */
+    constructor(documentService, documentUploadStore, messageService) {
+        this.documentService = documentService;
+        this.documentUploadStore = documentUploadStore;
+        this.messageService = messageService;
     }
-    getColorValue(colorName) {
-        const colorMap = SHARED.COLOR_MAP;
-        return colorMap[colorName] || SHARED.DEFAULT_COLOR;
+    /**
+     * Prepares the files for upload by creating a FormData object.
+     * This method appends each file to the FormData for submission.
+     * @returns {void}
+     */
+    handleTemplatedUpload(file, contextId) {
+        let formsData = this.handleCreateFormData(file, contextId);
+        if (!formsData) {
+            this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_ERROR_SUMMERY, detail: SHARED.UPLOAD_ERROR_DETAILS });
+            return;
+        }
+        // Update progress to show upload starting
+        this.documentUploadStore.setMessage([{
+                severity: 'info',
+                detail: 'Uploading document...'
+            }]);
+        this.documentService.create(formsData)
+            .subscribe({
+            /**
+             * Handles the successful upload event.
+             * Updates the list of uploaded files and emits the file ID.
+             * @returns {void}
+             */
+            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.uploadCompleted.emit({ file: file, response: event });
+                if (this.uploadedFile) {
+                    // You can emit an event here to update the UI progress if needed
+                }
+            },
+            /**
+             * Handles the error event during file upload.
+             * Updates the progress of the file to indicate failure.
+             * @param {any} error - The error object returned by the upload service.
+             */
+            error: (error) => {
+                this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_SUMMERY, detail: error?.message });
+            },
+        });
     }
-    processUserData(userList) {
-        return userList.map((user, index) => ({
-            ...user,
-            initials: this.getInitials(user.name),
-            color: this.getColorByIndex(index)
-        }));
+    /**
+     * Get the file and contextId
+     * @param file - The file to upload.
+     * @param contextId - The contextId to upload.
+     */
+    getUploadFileData(file, contextId) {
+        if (file && contextId) {
+            this.uploadedFile = file;
+            this.contextId = contextId;
+        }
     }
     /**
-     * Finds the selected menu item from categories
-     * @param selectedMenuItemId - The ID of the selected menu item
-     * @param categories - The document categories
-     * @returns The selected menu item or null
+     * Get the document name and document type id
+     * @param documentName - The document name to upload.
+     * @param documentTypeId - The document type id to upload.
      */
-    findSelectedMenuItem(selectedMenuItemId, categories) {
-        for (const category of categories) {
-            if (category.items) {
-                const item = category.items.find(item => item._id === selectedMenuItemId);
-                if (item) {
-                    return item;
-                }
-            }
+    getDocumentNameAndType(documentTypeId) {
+        if (documentTypeId && documentTypeId !== SHARED.EMPTY) {
+            this.docTypeId = documentTypeId;
         }
-        return null;
     }
     /**
-     * Filters user list based on selected menu item category
-     * @param userList - The complete user list
-     * @param categories - The document categories
-     * @returns Filtered user list
+     * Handle the creation of formdata.
+     * @returns {*} - The formdata object.
      */
-    filterUsersByCategory(userList, categories) {
-        const selectedMenuItemId = this.documentQuery.getSelectionState().menuItem;
-        if (!selectedMenuItemId) {
-            return userList;
+    handleCreateFormData(uploadedFile, contextId) {
+        if (uploadedFile) {
+            let formData = new FormData();
+            formData.append(SHARED.FILE, uploadedFile, uploadedFile.name);
+            formData.append(SHARED.CONTEXT_ID, this.contextId);
+            return formData;
         }
-        const selectedMenuItem = this.findSelectedMenuItem(selectedMenuItemId, categories);
-        if (!selectedMenuItem) {
-            return userList;
+        else {
+            return null;
         }
-        const selectedCategory = categories.find(category => category.items?.some(item => item._id === selectedMenuItemId));
-        if (!selectedCategory) {
-            return userList;
+    }
+    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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentStore }, { type: i3.MessageService }] });
+
+/**
+ * Description placeholder
+ * @class FileFormatService
+ * @typedef {FileFormatService}
+ */
+class FileFormatService {
+    /**
+     * Creates an instance of FileFormatService.
+     * @constructor
+     */
+    constructor() { }
+    /**
+     * Description placeholder
+     * @param {number} bytes
+     * @param {PrimeNGConfig} config
+     * @returns {string}
+     */
+    formatFileSize(bytes, config) {
+        const kilobyte = 1024;
+        const decimalPlaces = SHARED.ONE;
+        const sizes = config.translation.fileSizeTypes || SHARED.FILE_SIZE_UNITS;
+        if (bytes < kilobyte) {
+            return `${bytes} ${sizes[SHARED.INITIAL_COUNT]}`;
         }
-        if (selectedCategory.label === SHARED.APPLICATION) {
-            return userList.filter(user => user.name === SHARED.APPLICATION_DOCS);
+        else if (bytes < kilobyte * kilobyte) {
+            const kbSize = bytes / kilobyte;
+            return `${parseFloat(kbSize.toFixed(decimalPlaces))} ${sizes[SHARED.ONE]}`;
         }
-        return userList;
-    }
-    selectUser(userId, userData) {
-        const user = userData.find(u => u._id === userId);
-        if (user) {
-            this.documentStore.setSelectedUserId(userId);
-            return { selectedUser: user.name, name: user.name };
+        else {
+            const mbSize = bytes / (kilobyte * kilobyte);
+            return `${parseFloat(mbSize.toFixed(decimalPlaces))} ${sizes[SHARED.TWO]}`;
         }
-        return { selectedUser: undefined, name: undefined };
-    }
-    unselectUser() {
-        this.documentStore.setSelectedUserId(null);
-    }
-    isUserSelected(userId, userData, selectedUser) {
-        return selectedUser === userData.find(u => u._id === userId)?.name;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, deps: [{ token: DocumentStore }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class DocumentUploadBusinessService {
+    documentHttpService;
+    fileFormatService;
+    destroy$ = new Subject();
+    constructor(documentHttpService, fileFormatService) {
+        this.documentHttpService = documentHttpService;
+        this.fileFormatService = fileFormatService;
+    }
+    /**
+     * Loads applicants for a given context ID
+     */
+    loadApplicants(contextId) {
+        return this.documentHttpService.getUserListByContextId(contextId);
+    }
+    /**
+     * Loads categories based on assignment type
+     */
+    loadCategories(assignmentType) {
+        return this.documentHttpService.getCategoriesBySource(assignmentType);
+    }
+    /**
+     * Loads document types based on category
+     */
+    loadDocumentTypes(categoryId) {
+        return this.documentHttpService.getDocumentTypesByCategory(categoryId);
+    }
+    /**
+     * Filters applicants based on assignment type
+     */
+    filterApplicants(applicantList, assignmentType) {
+        if (assignmentType === SHARED.APPLICANT) {
+            return applicantList.filter(applicant => applicant.name !== SHARED.APPLICATION_DOCS);
+        }
+        else {
+            return applicantList.filter(applicant => applicant.name === SHARED.APPLICATION_DOCS);
+        }
+    }
+    /**
+     * Validates form data
+     */
+    validateForm(assignmentType, selectedCategory, selectedDocumentType, selectedApplicant, uploadedFiles, categoryOptions, documentTypeOptions) {
+        if (!categoryOptions.length || !documentTypeOptions.length) {
+            return false;
+        }
+        const hasRequiredSelections = Boolean(selectedCategory) && Boolean(selectedDocumentType);
+        const hasFiles = uploadedFiles.length > 0;
+        if (assignmentType === SHARED.APPLICANT) {
+            return hasRequiredSelections && hasFiles && Boolean(selectedApplicant);
+        }
+        else {
+            return hasRequiredSelections && hasFiles;
+        }
+    }
+    /**
+     * Checks if save button should be disabled
+     */
+    isSaveButtonDisabled(assignmentType, selectedCategory, selectedDocumentType, selectedApplicant, uploadedFiles, isSaving) {
+        const hasBasicData = selectedCategory && selectedDocumentType && uploadedFiles.length > 0;
+        if (assignmentType === SHARED.APPLICANT) {
+            return !hasBasicData || !selectedApplicant || isSaving;
+        }
+        else {
+            return !hasBasicData || isSaving;
+        }
+    }
+    /**
+     * Prepares upload payload
+     */
+    prepareUploadPayload(assignmentType, selectedCategory, selectedDocumentType, selectedApplicant, uploadedFiles, contextId) {
+        const payload = {
+            source: assignmentType,
+            categoryId: selectedCategory,
+            documentTypeId: selectedDocumentType,
+            contextId,
+            documents: uploadedFiles.map(file => ({
+                fileName: file.file.name,
+                fileSize: file.file.size,
+                fileType: file.file.type,
+                file: file.file,
+                uploadedFileId: file.uploadResponse?.fileId || file.uploadResponse?.id || file.uploadResponse?.fileName
+            }))
+        };
+        return payload;
+    }
+    /**
+     * Saves document upload
+     */
+    saveDocumentUpload(payload) {
+        return this.documentHttpService.saveDocumentUpload(payload);
+    }
+    /**
+     * Formats file size
+     */
+    formatFileSize(fileSize, config) {
+        return this.fileFormatService.formatFileSize(fileSize, config);
+    }
+    /**
+     * Creates uploaded file object
+     */
+    createUploadedFile(file, formattedSize) {
+        return {
+            file,
+            formattedSize,
+            progress: SHARED.UPLOAD_PROGRESS_10
+        };
+    }
+    /**
+     * Resets form data to initial state
+     */
+    getInitialFormState() {
+        return {
+            selectedAssignmentType: 'Applicant',
+            selectedApplicant: SHARED.EMPTY,
+            selectedCategory: SHARED.EMPTY,
+            selectedDocumentType: SHARED.EMPTY,
+            uploadedFiles: [],
+            isFormValid: false
+        };
+    }
+    /**
+     * Destroys the service
+     */
+    destroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadBusinessService, deps: [{ token: DocumentHttpService }, { token: FileFormatService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadBusinessService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadBusinessService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DocumentHttpService }, { type: FileFormatService }] });
+
+class DocumentUploadFormService {
+    messageService;
+    constructor(messageService) {
+        this.messageService = messageService;
+    }
+    /**
+     * Shows error message
+     */
+    showErrorMessage(summary, detail) {
+        this.messageService.add({
+            severity: 'error',
+            summary,
+            detail
+        });
+    }
+    /**
+     * Shows warning message
+     */
+    showWarningMessage(summary, detail) {
+        this.messageService.add({
+            severity: 'warn',
+            summary,
+            detail
+        });
+    }
+    /**
+     * Shows success message
+     */
+    showSuccessMessage(summary, detail) {
+        this.messageService.add({
+            severity: 'success',
+            summary,
+            detail
+        });
+    }
+    /**
+     * Validates required fields for upload
+     */
+    validateRequiredFields(assignmentType, selectedApplicant, selectedCategory, selectedDocumentType, uploadedFiles) {
+        if (assignmentType === 'Applicant' && !selectedApplicant) {
+            this.showWarningMessage('No Applicant Selected', 'Please select an applicant.');
+            return false;
+        }
+        if (!selectedCategory) {
+            this.showWarningMessage('No Category Selected', 'Please select a category.');
+            return false;
+        }
+        if (!selectedDocumentType) {
+            this.showWarningMessage('No Document Type Selected', 'Please select a document type.');
+            return false;
+        }
+        if (uploadedFiles.length === 0) {
+            this.showWarningMessage('No Documents Uploaded', 'Please upload at least one document.');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Validates form completeness
+     */
+    validateFormCompleteness() {
+        this.showWarningMessage('Form Incomplete', 'Please complete all required fields and upload at least one document.');
+        return false;
+    }
+    /**
+     * Validates context ID presence
+     */
+    validateContextId(contextId, message) {
+        if (!contextId) {
+            this.showErrorMessage('Missing Required Data', message);
+            return false;
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadFormService, deps: [{ token: i3.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadFormService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i3.MessageService }] });
+
+class DocumentUploadDataService {
+    businessService;
+    formService;
+    destroy$ = new Subject();
+    constructor(businessService, formService) {
+        this.businessService = businessService;
+        this.formService = formService;
+    }
+    /**
+     * Loads applicants and handles the response
+     */
+    loadApplicants(contextId, onSuccess, onError) {
+        if (!this.formService.validateContextId(contextId, 'Context ID is required to load applicants.')) {
+            return new Observable();
+        }
+        return this.businessService.loadApplicants(contextId);
+    }
+    /**
+     * Loads categories and handles the response
+     */
+    loadCategories(assignmentType, onSuccess, onError) {
+        if (!assignmentType) {
+            return new Observable();
+        }
+        return this.businessService.loadCategories(assignmentType);
+    }
+    /**
+     * Loads document types and handles the response
+     */
+    loadDocumentTypes(categoryId, onSuccess, onError) {
+        return this.businessService.loadDocumentTypes(categoryId);
+    }
+    /**
+     * Handles applicants loaded successfully
+     */
+    handleApplicantsLoaded(applicants, assignmentType) {
+        return this.businessService.filterApplicants(applicants, assignmentType);
+    }
+    /**
+     * Destroys the service
+     */
+    destroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadDataService, deps: [{ token: DocumentUploadBusinessService }, { token: DocumentUploadFormService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadDataService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadDataService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DocumentUploadBusinessService }, { type: DocumentUploadFormService }] });
+
+class DocumentUploadComponent {
+    documentUpload;
+    uploadService;
+    config;
+    fileFormatService;
+    messageService;
+    cdr;
+    businessService;
+    formService;
+    dataService;
+    contextId = SHARED.EMPTY;
+    fileUploader;
+    // Form data
+    selectedAssignmentType = null;
+    selectedApplicant = SHARED.EMPTY;
+    selectedCategory = SHARED.EMPTY;
+    selectedDocumentType = SHARED.EMPTY;
+    // Data lists
+    applicantList = SHARED.EMPTY_ARRAY;
+    filteredApplicantList = SHARED.EMPTY_ARRAY;
+    categoryOptions = SHARED.EMPTY_ARRAY;
+    documentTypeOptions = SHARED.EMPTY_ARRAY;
+    // File upload
+    uploadedFiles = SHARED.EMPTY_ARRAY;
+    fileProgress = new Map();
+    // Loading states
+    isLoadingApplicants = false;
+    isLoadingCategories = false;
+    isLoadingDocumentTypes = false;
+    isSaving = false;
+    // Validation
+    isFormValid = false;
+    destroy$ = new Subject();
+    constructor(documentUpload, uploadService, config, fileFormatService, messageService, cdr, businessService, formService, dataService) {
+        this.documentUpload = documentUpload;
+        this.uploadService = uploadService;
+        this.config = config;
+        this.fileFormatService = fileFormatService;
+        this.messageService = messageService;
+        this.cdr = cdr;
+        this.businessService = businessService;
+        this.formService = formService;
+        this.dataService = dataService;
+    }
+    // Event handlers
+    onAssignmentTypeChange() {
+        this.resetSelections();
+        this.loadCategories();
+        this.handleApplicantLoading();
+    }
+    onCategoryChange() {
+        this.resetDocumentType();
+        this.loadDocumentTypesIfCategorySelected();
+        this.validateForm();
+    }
+    onDocumentTypeChange() {
+        this.validateForm();
+    }
+    onApplicantSelectionChange() {
+        this.validateForm();
+    }
+    onSelectedFiles(event) {
+        event.currentFiles.forEach((file) => {
+            this.handleTemplatedUpload(file);
+        });
+        this.fileUploader.clear();
+    }
+    // Data loading methods
+    loadApplicants() {
+        this.isLoadingApplicants = true;
+        this.dataService.loadApplicants(this.contextId, (applicants) => this.handleApplicantsLoaded(applicants), (error) => this.handleApplicantsError(error)).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (applicants) => this.handleApplicantsLoaded(applicants),
+            error: (error) => this.handleApplicantsError(error)
+        });
+    }
+    loadCategories() {
+        this.isLoadingCategories = true;
+        this.dataService.loadCategories(this.selectedAssignmentType, (categories) => this.handleCategoriesLoaded(categories), (error) => this.handleCategoriesError(error)).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (categories) => this.handleCategoriesLoaded(categories),
+            error: (error) => this.handleCategoriesError(error)
+        });
+    }
+    loadDocumentTypes() {
+        this.isLoadingDocumentTypes = true;
+        this.dataService.loadDocumentTypes(this.selectedCategory, (documentTypes) => this.handleDocumentTypesLoaded(documentTypes), (error) => this.handleDocumentTypesError(error)).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (documentTypes) => this.handleDocumentTypesLoaded(documentTypes),
+            error: (error) => this.handleDocumentTypesError(error)
+        });
+    }
+    // Business logic methods
+    saveDocumentUpload() {
+        if (!this.isFormValid) {
+            this.formService.validateFormCompleteness();
+            return;
+        }
+        if (!this.formService.validateRequiredFields(this.selectedAssignmentType, this.selectedApplicant, this.selectedCategory, this.selectedDocumentType, this.uploadedFiles))
+            return;
+        this.isSaving = true;
+        this.saveDocumentMetadata();
+    }
+    handleTemplatedUpload(file) {
+        if (!this.formService.validateContextId(this.contextId, 'Context ID is required for upload.')) {
+            return;
+        }
+        this.fileProgress.set(file, SHARED.UPLOAD_PROGRESS_10);
+        this.documentUpload.uploadCompleted.pipe(takeUntil(this.destroy$)).subscribe(({ file: uploadedFile, response }) => {
+            if (uploadedFile === file) {
+                this.fileProgress.set(file, SHARED.UPLOAD_PROGRESS_100);
+                const uploadedFileObj = this.uploadedFiles.find(uf => uf.file === file);
+                if (uploadedFileObj) {
+                    uploadedFileObj.uploadResponse = response;
+                    uploadedFileObj.progress = SHARED.UPLOAD_PROGRESS_100;
+                }
+                this.cdr.detectChanges();
+            }
+        });
+        this.documentUpload.handleTemplatedUpload(file, this.contextId);
+        const formattedSize = this.businessService.formatFileSize(file.size, this.config);
+        const uploadedFile = this.businessService.createUploadedFile(file, formattedSize);
+        uploadedFile.progress = SHARED.UPLOAD_PROGRESS_10;
+        this.uploadedFiles.push(uploadedFile);
+        this.validateForm();
+    }
+    handleDocumentRemove(file, index) {
+        this.uploadedFiles.splice(index, 1);
+        this.fileProgress.delete(file);
+        this.validateForm();
+        this.cdr.detectChanges();
+    }
+    // Utility methods
+    choose(event, callback) {
+        callback();
+    }
+    triggerFileUpload() {
+        this.fileUploader.choose();
+    }
+    getSaveButtonDisabled() {
+        return this.businessService.isSaveButtonDisabled(this.selectedAssignmentType, this.selectedCategory, this.selectedDocumentType, this.selectedApplicant, this.uploadedFiles, this.isSaving);
+    }
+    getProgress(file) {
+        return this.fileProgress.get(file) || 0;
+    }
+    isFileUploading(file) {
+        const progress = this.fileProgress.get(file);
+        return progress !== undefined && progress > 0 && progress < SHARED.UPLOAD_PROGRESS_100;
+    }
+    isFileUploaded(file) {
+        const progress = this.fileProgress.get(file);
+        return progress === SHARED.UPLOAD_PROGRESS_100;
+    }
+    isFileError(file) {
+        const progress = this.fileProgress.get(file);
+        return progress === -1;
+    }
+    resetForm() {
+        const initialState = this.businessService.getInitialFormState();
+        Object.assign(this, initialState);
+        this.fileProgress.clear();
+        this.filteredApplicantList = SHARED.EMPTY_ARRAY;
+        this.cdr.detectChanges();
+    }
+    // Private helper methods
+    resetSelections() {
+        this.selectedApplicant = SHARED.EMPTY;
+        this.selectedCategory = SHARED.EMPTY;
+        this.selectedDocumentType = SHARED.EMPTY;
+        this.documentTypeOptions = SHARED.EMPTY_ARRAY;
+    }
+    resetDocumentType() {
+        this.selectedDocumentType = SHARED.EMPTY;
+        this.documentTypeOptions = SHARED.EMPTY_ARRAY;
+    }
+    handleApplicantLoading() {
+        if (this.selectedAssignmentType === SHARED.APPLICANT) {
+            this.loadApplicants();
+        }
+        else {
+            this.filterApplicants();
+        }
+    }
+    loadDocumentTypesIfCategorySelected() {
+        if (this.selectedCategory) {
+            this.loadDocumentTypes();
+        }
+    }
+    handleApplicantsLoaded(applicants) {
+        this.applicantList = applicants;
+        this.filterApplicants();
+        this.isLoadingApplicants = false;
+        this.validateForm();
+    }
+    handleApplicantsError(error) {
+        this.isLoadingApplicants = false;
+        this.formService.showErrorMessage('Failed to Load Applicants', error?.message || 'Failed to load applicants');
+    }
+    handleCategoriesLoaded(categories) {
+        this.categoryOptions = categories;
+        this.isLoadingCategories = false;
+        this.validateForm();
+    }
+    handleCategoriesError(error) {
+        this.isLoadingCategories = false;
+        this.formService.showErrorMessage('Failed to Load Categories', error?.message || 'Failed to load categories');
+    }
+    handleDocumentTypesLoaded(documentTypes) {
+        this.documentTypeOptions = documentTypes;
+        this.isLoadingDocumentTypes = false;
+        this.validateForm();
+    }
+    handleDocumentTypesError(error) {
+        this.isLoadingDocumentTypes = false;
+        this.formService.showErrorMessage('Failed to Load Document Types', error?.message || 'Failed to load document types');
+    }
+    handleUploadSuccess(response) {
+        this.isSaving = false;
+        this.formService.showSuccessMessage('Upload Successful', 'Documents uploaded and saved successfully!');
+        this.resetForm();
+    }
+    handleUploadError(error) {
+        this.isSaving = false;
+        this.formService.showErrorMessage('Upload Failed', error?.message || 'Failed to save document upload');
+    }
+    filterApplicants() {
+        this.filteredApplicantList = this.dataService.handleApplicantsLoaded(this.applicantList, this.selectedAssignmentType);
+    }
+    validateForm() {
+        this.isFormValid = this.businessService.validateForm(this.selectedAssignmentType, this.selectedCategory, this.selectedDocumentType, this.selectedApplicant, this.uploadedFiles, this.categoryOptions, this.documentTypeOptions);
+    }
+    saveDocumentMetadata() {
+        const contextId = this.selectedApplicant || this.contextId;
+        const payload = this.businessService.prepareUploadPayload(this.selectedAssignmentType, this.selectedCategory, this.selectedDocumentType, this.selectedApplicant, this.uploadedFiles, contextId);
+        this.businessService.saveDocumentUpload(payload)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => this.handleUploadSuccess(response),
+            error: (error) => this.handleUploadError(error)
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.businessService.destroy();
+        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" }, 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:70vh;overflow-y:auto}.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}}.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:70vh;overflow-y:auto}.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}}.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: [{
+                type: ViewChild,
+                args: ['fileUploader']
+            }] } });
+
+class UserListService {
+    documentStore;
+    documentQuery;
+    constructor(documentStore, documentQuery) {
+        this.documentStore = documentStore;
+        this.documentQuery = documentQuery;
+    }
+    getInitials(name) {
+        return name.substring(0, 2).toUpperCase();
+    }
+    getColorByIndex(index) {
+        const colors = SHARED.COLORS;
+        return colors[index % colors.length];
+    }
+    getColorValue(colorName) {
+        const colorMap = SHARED.COLOR_MAP;
+        return colorMap[colorName] || SHARED.DEFAULT_COLOR;
+    }
+    processUserData(userList) {
+        return userList.map((user, index) => ({
+            ...user,
+            initials: this.getInitials(user.name),
+            color: this.getColorByIndex(index)
+        }));
+    }
+    /**
+     * Finds the selected menu item from categories
+     * @param selectedMenuItemId - The ID of the selected menu item
+     * @param categories - The document categories
+     * @returns The selected menu item or null
+     */
+    findSelectedMenuItem(selectedMenuItemId, categories) {
+        for (const category of categories) {
+            if (category.items) {
+                const item = category.items.find(item => item._id === selectedMenuItemId);
+                if (item) {
+                    return item;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Filters user list based on selected menu item category
+     * @param userList - The complete user list
+     * @param categories - The document categories
+     * @returns Filtered user list
+     */
+    filterUsersByCategory(userList, categories) {
+        const selectedMenuItemId = this.documentQuery.getSelectionState().menuItem;
+        if (!selectedMenuItemId) {
+            return userList;
+        }
+        const selectedMenuItem = this.findSelectedMenuItem(selectedMenuItemId, categories);
+        if (!selectedMenuItem) {
+            return userList;
+        }
+        const selectedCategory = categories.find(category => category.items?.some(item => item._id === selectedMenuItemId));
+        if (!selectedCategory) {
+            return userList;
+        }
+        if (selectedCategory.label === SHARED.APPLICATION) {
+            return userList.filter(user => user.name === SHARED.APPLICATION_DOCS);
+        }
+        return userList;
+    }
+    selectUser(userId, userData) {
+        const user = userData.find(u => u._id === userId);
+        if (user) {
+            this.documentStore.setSelectedUserId(userId);
+            return { selectedUser: user.name, name: user.name };
+        }
+        return { selectedUser: undefined, name: undefined };
+    }
+    unselectUser() {
+        this.documentStore.setSelectedUserId(null);
+    }
+    isUserSelected(userId, userData, selectedUser) {
+        return selectedUser === userData.find(u => u._id === userId)?.name;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, deps: [{ token: DocumentStore }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserListService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2462,7 +3269,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class DocumentSearchComponent {
     documentHelperService;
     SHARED = SHARED;
-    contextId;
+    contextId = SHARED.EMPTY;
+    onActionClick = new EventEmitter();
     searchTerm = SHARED.EMPTY;
     destroy$ = new Subject();
     constructor(documentHelperService) {
@@ -2479,14 +3287,10 @@ class DocumentSearchComponent {
      * Sets up the search input subscription with debouncing
      */
     setupSearchSubscription() {
-        // Create a subject to handle search term changes
         const searchSubject = new Subject();
-        searchSubject.pipe(takeUntil(this.destroy$), debounceTime$1(500), // Wait 500ms after user stops typing
-        distinctUntilChanged$1() // Only emit if value has changed
-        ).subscribe(searchTerm => {
+        searchSubject.pipe(takeUntil(this.destroy$), debounceTime$1(500), distinctUntilChanged$1()).subscribe(searchTerm => {
             this.onSearchChange(searchTerm);
         });
-        // Store the subject for use in template
         this.searchSubject = searchSubject;
     }
     /**
@@ -2501,9 +3305,7 @@ class DocumentSearchComponent {
      * @param searchTerm - The search term entered by the user
      */
     onSearchChange(searchTerm) {
-        // Normalize the search term (trim whitespace and convert to null if empty)
         const normalizedSearchTerm = searchTerm?.trim() || null;
-        // Update the search key in the store
         this.documentHelperService.setSearchKey(normalizedSearchTerm);
     }
     /**
@@ -2513,16 +3315,132 @@ class DocumentSearchComponent {
         this.searchTerm = SHARED.EMPTY;
         this.documentHelperService.setSearchKey(null);
     }
-    // Subject for handling search input changes
     searchSubject = new Subject();
     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" }, 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</div> ", styles: [".search-container{padding:1rem}.search-input-wrapper{position:relative;width:40%;display:flex;align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:.75rem 1rem;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.search-input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-icon{color:#6b7280;margin-right:.75rem;font-size:1rem}.search-input{flex:1;border:none;outline:none;background:transparent;color:#374151}.search-input::placeholder{color:#9ca3af}.search-input:focus{outline:none}.clear-button{background:none;border:none;color:#6b7280;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.clear-button:hover{background-color:#f3f4f6;color:#374151}.clear-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f633}.clear-button i{font-size:.875rem}@media (max-width: 768px){.search-container{padding:.75rem}.search-input-wrapper{padding:.5rem .75rem}.search-input{font-size:.8rem}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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=\"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}.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"] }] });
 }
 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</div> ", styles: [".search-container{padding:1rem}.search-input-wrapper{position:relative;width:40%;display:flex;align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:.75rem 1rem;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.search-input-wrapper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.search-icon{color:#6b7280;margin-right:.75rem;font-size:1rem}.search-input{flex:1;border:none;outline:none;background:transparent;color:#374151}.search-input::placeholder{color:#9ca3af}.search-input:focus{outline:none}.clear-button{background:none;border:none;color:#6b7280;cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.clear-button:hover{background-color:#f3f4f6;color:#374151}.clear-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f633}.clear-button i{font-size:.875rem}@media (max-width: 768px){.search-container{padding:.75rem}.search-input-wrapper{padding:.5rem .75rem}.search-input{font-size:.8rem}}\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=\"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}.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"] }]
         }], ctorParameters: () => [{ type: DocumentHelperService }], propDecorators: { contextId: [{
                 type: Input
+            }], onActionClick: [{
+                type: Output
+            }] } });
+
+class CommonSidebarComponent {
+    visible = false;
+    position = 'right';
+    width = SHARED.WIDTH;
+    title = SHARED.EMPTY;
+    showCloseButton = true;
+    modal = true;
+    dismissible = true;
+    closeOnEscape = true;
+    baseZIndex = SHARED.BASEZINDEX;
+    autoZIndex = true;
+    styleClass = SHARED.EMPTY;
+    appendTo = 'body';
+    blockScroll = true;
+    closeIcon = SHARED.CLOSE_ICON;
+    showSaveButton = false;
+    saveButtonText = SHARED.SAVE;
+    saveButtonDisabled = false;
+    visibleChange = new EventEmitter();
+    onShow = new EventEmitter();
+    onHide = new EventEmitter();
+    onSave = new EventEmitter();
+    /**
+     * Opens the sidebar
+     */
+    open() {
+        this.visible = true;
+        this.visibleChange.emit(this.visible);
+        this.onShow.emit();
+    }
+    /**
+     * Closes the sidebar
+     */
+    close() {
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
+        this.onHide.emit();
+    }
+    /**
+     * Toggles the sidebar visibility
+     */
+    toggle() {
+        this.visible = !this.visible;
+        this.visibleChange.emit(this.visible);
+        if (this.visible) {
+            this.onShow.emit();
+        }
+        else {
+            this.onHide.emit();
+        }
+    }
+    /**
+     * Handles the close button click
+     */
+    onCloseClick() {
+        this.close();
+    }
+    /**
+     * Handles the mask click (when dismissible is true)
+     */
+    onMaskClick() {
+        if (this.dismissible) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CommonSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CommonSidebarComponent, isStandalone: false, selector: "lib-common-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" }, 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        <div class=\"header-actions\">\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      <!-- Content projection slot -->\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:1rem}.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}.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CommonSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-common-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        <div class=\"header-actions\">\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      <!-- Content projection slot -->\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:1rem}.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}.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: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], modal: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], baseZIndex: [{
+                type: Input
+            }], autoZIndex: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], blockScroll: [{
+                type: Input
+            }], closeIcon: [{
+                type: Input
+            }], showSaveButton: [{
+                type: Input
+            }], saveButtonText: [{
+                type: Input
+            }], saveButtonDisabled: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], onShow: [{
+                type: Output
+            }], onHide: [{
+                type: Output
+            }], onSave: [{
+                type: Output
             }] } });
 
 /**
@@ -2552,17 +3470,17 @@ class FolderContainerComponent {
      * The list of users passed as input to the component.
      * @type {UserListModel[]}
      */
-    userList = [];
+    userList = SHARED.EMPTY_ARRAY;
     /**
      * The status data passed as input to the component.
      * @type {StatusDataModel[]}
      */
-    statusData = [];
+    statusData = SHARED.EMPTY_ARRAY;
     /**
      * The document categories passed as input to the component.
      * @type {DocumentCategory[]}
      */
-    categories = [];
+    categories = SHARED.EMPTY_ARRAY;
     /**
      * Flag to control user list visibility
      */
@@ -2571,6 +3489,18 @@ class FolderContainerComponent {
      * Animation state for user list visibility
      */
     userListAnimationState = SHARED.VISIBLE;
+    /**
+     * Controls the visibility of the document upload sidebar
+     */
+    isDocumentUploadSidebarOpen = false;
+    /**
+     * Reference to the document upload component
+     */
+    documentUploadComponent;
+    /**
+     * Tracks whether the save button should be disabled
+     */
+    isSaveButtonDisabled = false;
     constructor(documentQuery) {
         this.documentQuery = documentQuery;
     }
@@ -2580,198 +3510,113 @@ class FolderContainerComponent {
             this.userListAnimationState = show ? SHARED.VISIBLE : SHARED.HIDDEN;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, deps: [{ token: DocumentQuery }], 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" }, ngImport: i0, template: "\r\n<document-search [contextId]=\"contextId\"></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>", 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: 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"] }], animations: [
-            trigger('slideInOut', [
-                state('visible', style({
-                    height: '*',
-                    opacity: 1,
-                    transform: 'translateY(0)',
-                    overflow: 'hidden',
-                    marginBottom: '1rem',
-                    visibility: 'visible'
-                })),
-                state('hidden', style({
-                    height: '0px',
-                    opacity: 0,
-                    transform: 'translateY(-20px)',
-                    overflow: 'hidden',
-                    marginBottom: '0px',
-                    visibility: 'hidden'
-                })),
-                transition('visible => hidden', [
-                    animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)')
-                ]),
-                transition('hidden => visible', [
-                    animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
-                ])
-            ])
-        ] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-folder-container', standalone: false, animations: [
-                        trigger('slideInOut', [
-                            state('visible', style({
-                                height: '*',
-                                opacity: 1,
-                                transform: 'translateY(0)',
-                                overflow: 'hidden',
-                                marginBottom: '1rem',
-                                visibility: 'visible'
-                            })),
-                            state('hidden', style({
-                                height: '0px',
-                                opacity: 0,
-                                transform: 'translateY(-20px)',
-                                overflow: 'hidden',
-                                marginBottom: '0px',
-                                visibility: 'hidden'
-                            })),
-                            transition('visible => hidden', [
-                                animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)')
-                            ]),
-                            transition('hidden => visible', [
-                                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
-                            ])
-                        ])
-                    ], template: "\r\n<document-search [contextId]=\"contextId\"></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>", 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 }], propDecorators: { documentList: [{
-                type: Input
-            }], folderList: [{
-                type: Input
-            }], contextId: [{
-                type: Input
-            }], userList: [{
-                type: Input
-            }], statusData: [{
-                type: Input
-            }], categories: [{
-                type: Input
-            }] } });
-
-/**
- * Service for handling document uploads.
- * @class DocumentUploadService
- * @typedef {DocumentUploadService}
- */
-class DocumentUploadService {
-    documentService;
-    documentUploadStore;
-    messageService;
-    /**
-     * The file to upload.
-     * @type {*}
-     */
-    uploadedFile;
-    /**
-     * Represent contextId
-     * @type {string}
-     */
-    contextId = SHARED.EMPTY;
-    /**
-     * Represent document name
-     * @type {string}
-     */
-    docName = SHARED.EMPTY;
-    /**
-     * Represent document id
-     * @type {string}
-     */
-    docTypeId = SHARED.EMPTY;
     /**
-     * Creates an instance of DocumentUploadService.
-     * @param {DocumentService} documentService - Service for handling document uploads.
-     * @param {DocumentStore} documentUploadStore - Store for managing uploaded documents.
-     * @param {MessageService} messageService - Service for displaying messages.
-     * @returns {void}
+     * Called when the view is initialized to set up the save button state
      */
-    constructor(documentService, documentUploadStore, messageService) {
-        this.documentService = documentService;
-        this.documentUploadStore = documentUploadStore;
-        this.messageService = messageService;
+    ngAfterViewInit() {
+        this.updateSaveButtonState();
     }
     /**
-     * Prepares the files for upload by creating a FormData object.
-     * This method appends each file to the FormData for submission.
-     * @returns {void}
+     * Updates the save button disabled state based on the document upload component
      */
-    handleTemplatedUpload() {
-        let formsData = this.handleCreateFormData();
-        if (!formsData) {
-            this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_ERROR_SUMMERY, detail: SHARED.UPLOAD_ERROR_DETAILS });
-            return;
+    updateSaveButtonState() {
+        if (this.documentUploadComponent) {
+            this.isSaveButtonDisabled = this.documentUploadComponent.getSaveButtonDisabled();
         }
-        this.documentService.create(formsData)
-            .subscribe({
-            /**
-             * Handles the successful upload event.
-             * Updates the list of uploaded files and emits the file ID.
-             * @param {any} event - The event emitted by the upload service on success.
-             */
-            next: (event) => {
-                this.documentUploadStore.setUploadedDocumentFiles(event);
-                this.documentUploadStore.setMessage([{
-                        severity: SHARED.SUCCESS_SEVERITY,
-                        detail: SHARED.UPLOAD_SUCCESS
-                    }]);
-            },
-            /**
-             * Handles the error event during file upload.
-             * Updates the progress of the file to indicate failure.
-             * @param {any} error - The error object returned by the upload service.
-             */
-            error: (error) => {
-                this.documentUploadStore.setMessage([{ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_SUMMERY, detail: error?.message }]);
-            },
-        });
     }
     /**
-     * Get the file and contextId
-     * @param file - The file to upload.
-     * @param contextId - The contextId to upload.
+     * Opens the document upload sidebar
      */
-    getUploadFileData(file, contextId) {
-        if (file && contextId) {
-            this.uploadedFile = file;
-            this.contextId = contextId;
-        }
+    openDocumentUploadSidebar() {
+        this.isDocumentUploadSidebarOpen = true;
     }
     /**
-     * Get the document name and document type id
-     * @param documentName - The document name to upload.
-     * @param documentTypeId - The document type id to upload.
+     * Handles the document upload sidebar hide event
      */
-    getDocumentNameAndType(documentTypeId) {
-        if (documentTypeId) {
-            this.docTypeId = documentTypeId;
-        }
+    onDocumentUploadSidebarHide() {
+        this.isDocumentUploadSidebarOpen = false;
     }
     /**
-     * Handle the creation of formdata.
-     * @returns {*} - The formdata object.
+     * Handles the document upload save event
      */
-    handleCreateFormData() {
-        if (this.uploadedFile && this.contextId && this.docTypeId) {
-            let formData = new FormData();
-            formData.append(SHARED.FILE, this.uploadedFile, this.uploadedFile.name);
-            formData.append(SHARED.CONTEXT_ID, this.contextId);
-            formData.append(SHARED.DOCUMENT_TYPE_ID, this.docTypeId);
-            return formData;
-        }
-        else {
-            return null;
+    onDocumentUploadSave() {
+        if (this.documentUploadComponent) {
+            this.documentUploadComponent.saveDocumentUpload();
+            this.updateSaveButtonState();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, deps: [{ token: DocumentService }, { token: DocumentStore }, { token: i3$1.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, deps: [{ token: DocumentQuery }], 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 }], 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-common-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  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  [blockScroll]=\"true\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n>\r\n  <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n</lib-common-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"] }, { 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: CommonSidebarComponent, selector: "lib-common-sidebar", inputs: ["visible", "position", "width", "title", "showCloseButton", "modal", "dismissible", "closeOnEscape", "baseZIndex", "autoZIndex", "styleClass", "appendTo", "blockScroll", "closeIcon", "showSaveButton", "saveButtonText", "saveButtonDisabled"], outputs: ["visibleChange", "onShow", "onHide", "onSave"] }], animations: [
+            trigger('slideInOut', [
+                state('visible', style({
+                    height: '*',
+                    opacity: 1,
+                    transform: 'translateY(0)',
+                    overflow: 'hidden',
+                    marginBottom: '1rem',
+                    visibility: 'visible'
+                })),
+                state('hidden', style({
+                    height: '0px',
+                    opacity: 0,
+                    transform: 'translateY(-20px)',
+                    overflow: 'hidden',
+                    marginBottom: '0px',
+                    visibility: 'hidden'
+                })),
+                transition('visible => hidden', [
+                    animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+                ]),
+                transition('hidden => visible', [
+                    animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)')
+                ])
+            ])
+        ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentStore }, { type: i3$1.MessageService }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FolderContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-folder-container', standalone: false, animations: [
+                        trigger('slideInOut', [
+                            state('visible', style({
+                                height: '*',
+                                opacity: 1,
+                                transform: 'translateY(0)',
+                                overflow: 'hidden',
+                                marginBottom: '1rem',
+                                visibility: 'visible'
+                            })),
+                            state('hidden', style({
+                                height: '0px',
+                                opacity: 0,
+                                transform: 'translateY(-20px)',
+                                overflow: 'hidden',
+                                marginBottom: '0px',
+                                visibility: 'hidden'
+                            })),
+                            transition('visible => hidden', [
+                                animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)')
+                            ]),
+                            transition('hidden => visible', [
+                                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-common-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  [modal]=\"true\"\r\n  [dismissible]=\"true\"\r\n  [closeOnEscape]=\"true\"\r\n  [blockScroll]=\"true\"\r\n  (onHide)=\"onDocumentUploadSidebarHide()\"\r\n  (onSave)=\"onDocumentUploadSave()\"\r\n>\r\n  <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n</lib-common-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 }], propDecorators: { documentList: [{
+                type: Input
+            }], folderList: [{
+                type: Input
+            }], contextId: [{
+                type: Input
+            }], userList: [{
+                type: Input
+            }], statusData: [{
+                type: Input
+            }], categories: [{
+                type: Input
+            }], documentUploadComponent: [{
+                type: ViewChild,
+                args: [DocumentUploadComponent]
+            }] } });
 
 /**
  * Storing all permission properties.
@@ -2974,17 +3819,6 @@ class DocumentListService {
         const payload = { fileName };
         return this.documentHttpService.updateDocumentName(selectedDocument._id, payload);
     }
-    /**
-     * Handle document upload
-     */
-    handleUploadDocument(selectedOption) {
-        if (!selectedOption) {
-            return throwError(() => new Error(ERRORS.INVALID_RECIPIENT));
-        }
-        this.documentUploadService.getDocumentNameAndType(selectedOption);
-        this.documentUploadService.handleTemplatedUpload();
-        return this.documentQuery.selectMessages();
-    }
     /**
      * Get completion count for a category
      */
@@ -3247,7 +4081,7 @@ class TablePrimaryComponent {
         this.rowClick.emit(rowData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePrimaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TablePrimaryComponent, isStandalone: false, selector: "lib-table-primary", inputs: { tableData: "tableData", showHeader: "showHeader", tableStyle: "tableStyle" }, outputs: { rowClick: "rowClick", deleteAction: "deleteAction" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\r\n    <p-table [value]=\"processedData\" [tableStyle]=\"tableStyle\">\r\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\r\n            <tr>\r\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    {{ col.header }}\r\n                </th>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData>\r\n            <tr (click)=\"onRowClick(rowData)\" class=\"clickable-row\">\r\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    <!-- Document Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_DOCUMENT\" class=\"document-cell\">\r\n                        <div class=\"document-info\">\r\n                            <div class=\"document-icon\">\r\n                                <i [class]=\"SHARED.ICON_FILE_PDF\" *ngIf=\"rowData._isPdfFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_IMAGE\" *ngIf=\"rowData._isImageFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE_EXCEL\" *ngIf=\"rowData._isExcelFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE\" *ngIf=\"rowData._isOtherFile\"></i>\r\n                            </div>\r\n                            <div class=\"document-details\">\r\n                                <div class=\"document-name\">{{ rowData.docName }}</div>\r\n                                <div class=\"file-info\">{{ rowData.fileName }} - {{ rowData.fileSize }}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Status Cell -->\r\n                    \r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_STATUS\" class=\"status-cell\">\r\n                        <span class=\"status-pill\" [ngClass]=\"rowData._statusClass\">\r\n                            <i [class]=\"rowData._statusIcon\"></i>\r\n                            {{ rowData[col.field] }}\r\n                        </span>\r\n                    </div>\r\n\r\n                    <!-- Actions Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_ACTIONS\" class=\"actions-cell\">\r\n                        @if(rowData.isUploaded){\r\n                            <button pButton pRipple type=\"button\" [icon]=\"SHARED.ICON_DELETE\" \r\n                            class=\"p-button-text p-button-rounded\" \r\n                            [permission]=\"'documents-deleteDocumentByDocumentId'\"\r\n                            (click)=\"onActionClick($event, rowData)\">\r\n                        </button>\r\n                    } \r\n                    </div>\r\n\r\n                    <!-- Default Text Cell -->\r\n                    <div *ngIf=\"!col.type || col.type === SHARED.CELL_TYPE_TEXT\" class=\"text-cell\">\r\n                        {{ rowData[col.field] }}\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n        \r\n        <!-- No Records Template -->\r\n        <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n                <td [attr.colspan]=\"tableData.columns.length\" class=\"no-records-cell\">\r\n                    <div class=\"no-records-content\">\r\n                        <i class=\"pi pi-inbox\" style=\"font-size: 2rem; color: #6c757d;\"></i>\r\n                        <p class=\"no-records-text\">No records found</p>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</div>", styles: [".document-cell .document-info{display:flex;align-items:center;gap:.75rem;text-align:left}.document-cell .document-info .document-icon{width:40px;height:40px;background-color:#e3f2fd;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1976d2;font-size:1.25rem;flex-shrink:0}.document-cell .document-info .document-details{flex:1;min-width:0}.document-cell .document-info .document-details .document-name{font-weight:400;color:#334155;line-height:20px;font-size:14px;margin-bottom:.25rem;text-align:left;word-break:break-word}.document-cell .document-info .document-details .file-info{font-size:.75rem;color:#6c757d;text-align:left}.status-cell .status-pill{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap;min-width:80px}.status-cell .status-pill i{font-size:.875rem}.status-cell .status-pill.status-pending{background-color:#f3f4f6;color:#6b7280}.status-cell .status-pill.status-approved{background-color:#d1fae5;color:#065f46}.status-cell .status-pill.status-alert{background-color:#fee2e2;color:#dc2626}.status-cell .status-pill.status-uploaded{background-color:#dbeafe;color:#1d4ed8}.status-cell .status-pill.status-reviewing{background-color:#fef3c7;color:#d97706}.status-cell .status-pill.status-rejected{background-color:#fee2e2;color:#dc2626}.actions-cell{text-align:left}.actions-cell .p-button{width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none;color:#6c757d}.actions-cell .p-button:hover{background-color:#f8f9fa;color:#495057}.text-cell{font-weight:500;color:#475569;font-size:14px;line-height:20px;text-align:left}.clickable-row{cursor:pointer;transition:background-color .2s ease}.clickable-row:hover{background-color:#f8f9fa!important}.clickable-row:active{background-color:#e9ecef!important}::ng-deep .p-datatable .p-datatable-wrapper{border:1px solid #E2E8F0;border-radius:10px}::ng-deep .p-datatable .p-datatable-thead>tr>th{background-color:#f8f9fa;border:none;border-bottom:1px solid #dee2e6;padding:1rem 1.5rem;font-weight:600;color:#64748b;font-size:.875rem;text-transform:capitalize;letter-spacing:.5px;text-align:left;border-radius:8px 8px 0 0}::ng-deep .p-datatable .p-datatable-thead>tr>th:first-child{border-top-left-radius:8px}::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-top-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr{border-bottom:1px solid #f1f3f4}::ng-deep .p-datatable .p-datatable-tbody>tr:hover{background-color:#f8f9fa}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:first-child{border-bottom-left-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:last-child{border-bottom-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:none;padding:1rem 1.5rem;vertical-align:middle;text-align:left}.no-records-cell{text-align:center;padding:3rem 1.5rem!important;border:none}.no-records-cell .no-records-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.no-records-cell .no-records-content .no-records-text{margin:0;color:#6c757d;font-size:1rem;font-weight:500}\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: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.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.Ripple, selector: "[pRipple]" }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TablePrimaryComponent, isStandalone: false, selector: "lib-table-primary", inputs: { tableData: "tableData", showHeader: "showHeader", tableStyle: "tableStyle" }, outputs: { rowClick: "rowClick", deleteAction: "deleteAction" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\">\r\n    <p-table [value]=\"processedData\" [tableStyle]=\"tableStyle\">\r\n        <ng-template pTemplate=\"header\" *ngIf=\"showHeader\">\r\n            <tr>\r\n                <th *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    {{ col.header }}\r\n                </th>\r\n            </tr>\r\n        </ng-template>\r\n        <ng-template pTemplate=\"body\" let-rowData>\r\n            <tr (click)=\"onRowClick(rowData)\" class=\"clickable-row\">\r\n                <td *ngFor=\"let col of tableData.columns\" [style.width]=\"col.width\">\r\n                    <!-- Document Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_DOCUMENT\" class=\"document-cell\">\r\n                        <div class=\"document-info\">\r\n                            <div class=\"document-icon\">\r\n                                <i [class]=\"SHARED.ICON_FILE_PDF\" *ngIf=\"rowData._isPdfFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_IMAGE\" *ngIf=\"rowData._isImageFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE_EXCEL\" *ngIf=\"rowData._isExcelFile\"></i>\r\n                                <i [class]=\"SHARED.ICON_FILE\" *ngIf=\"rowData._isOtherFile\"></i>\r\n                            </div>\r\n                            <div class=\"document-details\">\r\n                                <div class=\"document-name\">{{ rowData.docName }}</div>\r\n                                <div class=\"file-info\">{{ rowData.fileName }} - {{ rowData.fileSize }}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Status Cell -->\r\n                    \r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_STATUS\" class=\"status-cell\">\r\n                        <span class=\"status-pill\" [ngClass]=\"rowData._statusClass\">\r\n                            <i [class]=\"rowData._statusIcon\"></i>\r\n                            {{ rowData[col.field] }}\r\n                        </span>\r\n                    </div>\r\n\r\n                    <!-- Actions Cell -->\r\n                    <div *ngIf=\"col.type === SHARED.CELL_TYPE_ACTIONS\" class=\"actions-cell\">\r\n                        @if(rowData.isUploaded){\r\n                            <button pButton pRipple type=\"button\" [icon]=\"SHARED.ICON_DELETE\" \r\n                            class=\"p-button-text p-button-rounded\" \r\n                            [permission]=\"'documents-deleteDocumentByDocumentId'\"\r\n                            (click)=\"onActionClick($event, rowData)\">\r\n                        </button>\r\n                    } \r\n                    </div>\r\n\r\n                    <!-- Default Text Cell -->\r\n                    <div *ngIf=\"!col.type || col.type === SHARED.CELL_TYPE_TEXT\" class=\"text-cell\">\r\n                        {{ rowData[col.field] }}\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n        \r\n        <!-- No Records Template -->\r\n        <ng-template pTemplate=\"emptymessage\">\r\n            <tr>\r\n                <td [attr.colspan]=\"tableData.columns.length\" class=\"no-records-cell\">\r\n                    <div class=\"no-records-content\">\r\n                        <i class=\"pi pi-inbox\" style=\"font-size: 2rem; color: #6c757d;\"></i>\r\n                        <p class=\"no-records-text\">No records found</p>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        </ng-template>\r\n    </p-table>\r\n</div>", styles: [".document-cell .document-info{display:flex;align-items:center;gap:.75rem;text-align:left}.document-cell .document-info .document-icon{width:40px;height:40px;background-color:#e3f2fd;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#1976d2;font-size:1.25rem;flex-shrink:0}.document-cell .document-info .document-details{flex:1;min-width:0}.document-cell .document-info .document-details .document-name{font-weight:400;color:#334155;line-height:20px;font-size:14px;margin-bottom:.25rem;text-align:left;word-break:break-word}.document-cell .document-info .document-details .file-info{font-size:.75rem;color:#6c757d;text-align:left}.status-cell .status-pill{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .75rem;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap;min-width:80px}.status-cell .status-pill i{font-size:.875rem}.status-cell .status-pill.status-pending{background-color:#f3f4f6;color:#6b7280}.status-cell .status-pill.status-approved{background-color:#d1fae5;color:#065f46}.status-cell .status-pill.status-alert{background-color:#fee2e2;color:#dc2626}.status-cell .status-pill.status-uploaded{background-color:#dbeafe;color:#1d4ed8}.status-cell .status-pill.status-reviewing{background-color:#fef3c7;color:#d97706}.status-cell .status-pill.status-rejected{background-color:#fee2e2;color:#dc2626}.actions-cell{text-align:left}.actions-cell .p-button{width:2rem;height:2rem;border-radius:50%;background-color:transparent;border:none;color:#6c757d}.actions-cell .p-button:hover{background-color:#f8f9fa;color:#495057}.text-cell{font-weight:500;color:#475569;font-size:14px;line-height:20px;text-align:left}.clickable-row{cursor:pointer;transition:background-color .2s ease}.clickable-row:hover{background-color:#f8f9fa!important}.clickable-row:active{background-color:#e9ecef!important}::ng-deep .p-datatable .p-datatable-wrapper{border:1px solid #E2E8F0;border-radius:10px}::ng-deep .p-datatable .p-datatable-thead>tr>th{background-color:#f8f9fa;border:none;border-bottom:1px solid #dee2e6;padding:1rem 1.5rem;font-weight:600;color:#64748b;font-size:.875rem;text-transform:capitalize;letter-spacing:.5px;text-align:left;border-radius:8px 8px 0 0}::ng-deep .p-datatable .p-datatable-thead>tr>th:first-child{border-top-left-radius:8px}::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-top-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr{border-bottom:1px solid #f1f3f4}::ng-deep .p-datatable .p-datatable-tbody>tr:hover{background-color:#f8f9fa}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:first-child{border-bottom-left-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr:last-child>td:last-child{border-bottom-right-radius:8px}::ng-deep .p-datatable .p-datatable-tbody>tr>td{border:none;padding:1rem 1.5rem;vertical-align:middle;text-align:left}.no-records-cell{text-align:center;padding:3rem 1.5rem!important;border:none}.no-records-cell .no-records-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.no-records-cell .no-records-content .no-records-text{margin:0;color:#6c757d;font-size:1rem;font-weight:500}\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: "component", type: i2$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { 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.Ripple, selector: "[pRipple]" }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePrimaryComponent, decorators: [{
             type: Component,
@@ -3264,201 +4098,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
-/**
- * Description placeholder
- * @class FileFormatService
- * @typedef {FileFormatService}
- */
-class FileFormatService {
-    /**
-     * Creates an instance of FileFormatService.
-     * @constructor
-     */
-    constructor() { }
-    /**
-     * Description placeholder
-     * @param {number} bytes
-     * @param {PrimeNGConfig} config
-     * @returns {string}
-     */
-    formatFileSize(bytes, config) {
-        const kilobyte = 1024;
-        const decimalPlaces = SHARED.ONE;
-        const sizes = config.translation.fileSizeTypes || SHARED.FILE_SIZE_UNITS;
-        if (bytes < kilobyte) {
-            return `${bytes} ${sizes[SHARED.INITIAL_COUNT]}`;
-        }
-        else if (bytes < kilobyte * kilobyte) {
-            const kbSize = bytes / kilobyte;
-            return `${parseFloat(kbSize.toFixed(decimalPlaces))} ${sizes[SHARED.ONE]}`;
-        }
-        else {
-            const mbSize = bytes / (kilobyte * kilobyte);
-            return `${parseFloat(mbSize.toFixed(decimalPlaces))} ${sizes[SHARED.TWO]}`;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FileFormatService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * A component for handling document uploads, including file selection, removal, and progress tracking.
- * @class DocumentUploadComponent
- */
-class DocumentUploadComponent {
-    documentUpload;
-    uploadService;
-    config;
-    fileFormatService;
-    messageService;
-    cdr;
-    /**
-     * Represents the file size.
-     * @type {number}
-     */
-    fileSize = SHARED.EMPTY;
-    /**
-     * Represent contextId
-     * @type {string}
-     */
-    contextId = SHARED.EMPTY;
-    /**
-     * To make file explorer visible.
-     * @type {!FileUpload}
-     */
-    fileUploader;
-    fileProgress = new Map();
-    /**
-     * List of files selected for upload.
-     * @type {File[]}
-     */
-    uploadedFiles = [];
-    /**
-     * Percentage of the total size calculated for displaying upload progress.
-     * @type {number}
-     */
-    totalSizePercent = SHARED.INITIAL_COUNT;
-    /**
-     * The current upload progress percentage (SHARED.INITIAL_VALUE-100).
-     * @type {number}
-     */
-    uploadProgress = SHARED.INITIAL_COUNT;
-    /**
-     * Creates an instance of DocumentUploadComponent.
-     * @class
-     * @param {DocumentUploadService} documentUpload - Service for handling document upload.
-     * @param {DocumentService} uploadService - Service for handling document upload.
-     * @param {PrimeNGConfig} config - PrimeNG configuration.
-     * @param {FileFormatService} fileFormatService - Service for formatting file sizes.
-     * @param {MessageService} messageService - Service for displaying messages.
-     * @param {ChangeDetectorRef} cdr - Service for detecting changes.
-     */
-    constructor(documentUpload, uploadService, config, fileFormatService, messageService, cdr) {
-        this.documentUpload = documentUpload;
-        this.uploadService = uploadService;
-        this.config = config;
-        this.fileFormatService = fileFormatService;
-        this.messageService = messageService;
-        this.cdr = cdr;
-    }
-    /**
-     * Open the file explorer.
-     * @param {*} event - The triggering event.
-     * @param {() => void} callback - A callback function to execute.
-     * @returns {void} - No return value.
-     */
-    choose(event, callback) {
-        callback();
-    }
-    /**
-     * Prepares the files for upload by creating a FormData object.
-     * This method appends each file to the FormData for submission.
-     * @param {File} file - The file to upload.
-     * @returns {void}
-     */
-    handleTemplatedUpload(file) {
-        this.documentUpload.getUploadFileData(file, this.contextId);
-        const formattedSize = this.fileFormatService.formatFileSize(file.size, this.config);
-        const progress = 100;
-        this.uploadedFiles.push({ file, formattedSize, progress });
-        this.fileProgress.set(file, progress);
-        this.totalSizePercent = 100;
-    }
-    /**
-     * Handle the creation of formdata.
-     * @param {File} file  - The file to append in formdata.
-     * @returns {*} - The formdata object.
-     */
-    handleCreateFormData(file) {
-        const formData = new FormData();
-        formData.append(SHARED.FILE, file, file.name);
-        formData.append(SHARED.CONTEXT_ID, this.contextId);
-        return formData;
-    }
-    /**
-     * Handles the event when new files are selected.
-     * @param { { currentFiles: File[] } } event - The event containing the newly selected files.
-     * @returns {void} - No return value.
-     */
-    onSelectedFiles(event) {
-        event.currentFiles.forEach((file) => {
-            this.handleTemplatedUpload(file);
-        });
-        this.fileUploader.clear();
-    }
-    /**
-     * Formats the given file size in bytes into a readable format (e.g., KB, MB).
-     * @param {number} bytes - The size of the file in bytes.
-     * @returns {string} The formatted file size (e.g., '1.2 KB', '2.3 MB').
-     */
-    formatSize(bytes) {
-        this.fileSize = this.fileFormatService.formatFileSize(bytes, this.config);
-    }
-    /**
-     * Handles the removal of a file from the uploaded files list.
-     * @param {File} file - The file to be removed.
-     * @param {number} index - The index of the file in the uploaded files list.
-     */
-    handleDocumentRemove(file, index) {
-        this.uploadedFiles.splice(index, 1);
-        this.fileProgress.delete(file);
-        this.cdr.detectChanges();
-    }
-    /**
-     * Major progress for the progress bar.
-     * @param {File} file - File to check progress for.
-     * @returns {number} - The progress percentage for the file.
-     */
-    getProgress(file) {
-        return this.fileProgress.get(file) || SHARED.INITIAL_COUNT;
-    }
-    /**
-     * Triggers the file upload dialog.
-     * Opens the file explorer for selecting files.
-     * @returns {void}
-     */
-    triggerFileUpload() {
-        this.fileUploader.choose();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentUploadService }, { token: DocumentService }, { token: i3$1.PrimeNGConfig }, { token: FileFormatService }, { token: i3$1.MessageService }, { token: i0.ChangeDetectorRef }], 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" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12 md:col-12\">\r\n    <p-fileUpload #fileUploader [multiple]=\"true\" auto=\"true\" accept=\"image/png,application/pdf\" maxFileSize=\"26214400\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\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 (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-images\" [rounded]=\"true\"\r\n              [outlined]=\"true\" />\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 \"> {{ uploadedFile.formattedSize }}</div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> {{ uploadedFile.progress }} %</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 [value]=\"totalSizePercent\" [showValue]=\"false\" styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                  [ngClass]=\"{ 'exceeded-progress-bar': totalSizePercent > 100 }\">\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>", 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}\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$1.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: i7.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: i8.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], 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=\"grid\">\r\n  <div class=\"col-12 md:col-12\">\r\n    <p-fileUpload #fileUploader [multiple]=\"true\" auto=\"true\" accept=\"image/png,application/pdf\" maxFileSize=\"26214400\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\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 (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-images\" [rounded]=\"true\"\r\n              [outlined]=\"true\" />\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 \"> {{ uploadedFile.formattedSize }}</div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> {{ uploadedFile.progress }} %</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 [value]=\"totalSizePercent\" [showValue]=\"false\" styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                  [ngClass]=\"{ 'exceeded-progress-bar': totalSizePercent > 100 }\">\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>", 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}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3$1.PrimeNGConfig }, { type: FileFormatService }, { type: i3$1.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { contextId: [{
-                type: Input
-            }], fileUploader: [{
-                type: ViewChild,
-                args: ['fileUploader']
-            }] } });
-
 class DocumentViewerService {
     documentHttpService;
     documentService;
@@ -3677,7 +4316,7 @@ class DocumentViewerService {
             document.status?.toLowerCase() === SHARED.STATUS_PENDING;
         return !!(document.documentUrl && !isPending);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerService, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }, { token: i3$1.MessageService }, { token: DocumentStore }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerService, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }, { token: i3.MessageService }, { token: DocumentStore }, { token: DocumentQuery }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerService, decorators: [{
@@ -3685,7 +4324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }, { type: i3$1.MessageService }, { type: DocumentStore }, { type: DocumentQuery }] });
+        }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }, { type: i3.MessageService }, { type: DocumentStore }, { type: DocumentQuery }] });
 
 /**
  * Constants for Document History labels and styling
@@ -3866,9 +4505,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class DocumentHistoryService {
     documentHistoryStyleService;
     http;
-    constructor(documentHistoryStyleService, http) {
+    sessionService;
+    appConfigService;
+    constructor(documentHistoryStyleService, http, sessionService, appConfigService) {
         this.documentHistoryStyleService = documentHistoryStyleService;
         this.http = http;
+        this.sessionService = sessionService;
+        this.appConfigService = appConfigService;
     }
     /**
      * Get the CSS class for accordion styling based on the section's label
@@ -3937,8 +4580,17 @@ class DocumentHistoryService {
             console.warn(ERRORS.NO_DOCUMENT_URL);
             return;
         }
-        this.http.get(documentUrl, { responseType: 'blob' }).subscribe({
+        // Ensure the URL is properly formatted
+        const fullUrl = this.getFullUrl(documentUrl);
+        console.log('Downloading document:', { originalUrl: documentUrl, fullUrl, docName });
+        // Let the HTTP interceptor handle authentication - no need to add headers manually
+        const httpOptions = {
+            responseType: 'blob'
+        };
+        console.log('HTTP options being sent (interceptor will add auth):', httpOptions);
+        this.http.get(fullUrl, httpOptions).subscribe({
             next: (blob) => {
+                console.log('Download successful, blob size:', blob.size);
                 const blobUrl = window.URL.createObjectURL(blob);
                 const a = document.createElement('a');
                 a.href = blobUrl;
@@ -3950,11 +4602,75 @@ class DocumentHistoryService {
                 window.URL.revokeObjectURL(blobUrl);
             },
             error: (err) => {
+                console.error('Download failed:', err);
                 console.error(ERRORS.DOWNLOAD_FAIL, err);
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryService, deps: [{ token: DocumentHistoryStyleService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    /**
+     * Get the full URL for the document, handling relative URLs
+     * @private
+     * @param documentUrl - The document URL (can be relative or absolute)
+     * @returns {string} The full URL
+     */
+    getFullUrl(documentUrl) {
+        // If it's already an absolute URL, return as is
+        if (documentUrl.startsWith('http://') || documentUrl.startsWith('https://')) {
+            return documentUrl;
+        }
+        // If it's a relative URL, try to get the API base URL
+        try {
+            const apiBaseUrl = this.appConfigService.apiBaseUrl;
+            if (apiBaseUrl) {
+                // Remove leading slash from documentUrl if present
+                const cleanUrl = documentUrl.startsWith('/') ? documentUrl.substring(1) : documentUrl;
+                return `${apiBaseUrl}/${cleanUrl}`;
+            }
+        }
+        catch (error) {
+            console.warn('Could not get API base URL, using original URL:', error);
+        }
+        // Fallback to original URL
+        return documentUrl;
+    }
+    /**
+     * Debug method to help identify issues when the library is used in the main project
+     * @public
+     */
+    debugEnvironment() {
+        console.log('=== Document History Service Environment Debug ===');
+        // Check session data
+        const sessionData = this.sessionService.getUserSession();
+        console.log('Session data:', sessionData);
+        // Check localStorage for common token patterns
+        const localStorageKeys = ['token', 'accessToken', 'authToken', 'jwt', 'userData'];
+        const localStorageData = {};
+        localStorageKeys.forEach(key => {
+            const value = localStorage.getItem(key);
+            if (value) {
+                try {
+                    localStorageData[key] = JSON.parse(value);
+                }
+                catch {
+                    localStorageData[key] = value;
+                }
+            }
+        });
+        console.log('LocalStorage data:', localStorageData);
+        // Check API configuration
+        try {
+            const apiBaseUrl = this.appConfigService.apiBaseUrl;
+            console.log('API Base URL:', apiBaseUrl);
+        }
+        catch (error) {
+            console.log('API Base URL error:', error);
+        }
+        // Check if we're in a browser environment
+        console.log('User Agent:', navigator.userAgent);
+        console.log('Window location:', window.location.href);
+        console.log('=== End Debug ===');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryService, deps: [{ token: DocumentHistoryStyleService }, { token: i2.HttpClient }, { token: SessionService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryService, decorators: [{
@@ -3962,7 +4678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: DocumentHistoryStyleService }, { type: i2.HttpClient }] });
+        }], ctorParameters: () => [{ type: DocumentHistoryStyleService }, { type: i2.HttpClient }, { type: SessionService }, { type: AppConfigService }] });
 
 /**
  * Component for displaying document history in a timeline format.
@@ -4028,11 +4744,11 @@ class DocumentHistoryComponent {
         this.documentHistoryService.downloadDocument(documentUrl, docName);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryComponent, deps: [{ token: DocumentHistoryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentHistoryComponent, isStandalone: false, selector: "document-history", inputs: { historyData: "historyData", showHistory: "showHistory" }, ngImport: i0, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request' && section.hasValidContent\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \r\n                     (onOpen)=\"onAccordionOpen()\" \r\n                     (onClose)=\"onAccordionClose()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:70vh;overflow-y:auto}.document-history-container .history-header{margin-bottom:1.5rem}.document-history-container .history-header .history-title{font-size:1.5rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:2rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border:1px solid;border-radius:8px;padding:1rem 1.5rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:1rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:1rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem;word-break:break-word}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\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: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$2.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentHistoryComponent, isStandalone: false, selector: "document-history", inputs: { historyData: "historyData", showHistory: "showHistory" }, ngImport: i0, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request' && section.hasValidContent\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \r\n                     (onOpen)=\"onAccordionOpen()\" \r\n                     (onClose)=\"onAccordionClose()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:.75rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:none;overflow-y:auto}.document-history-container .history-header{margin-bottom:1rem}.document-history-container .history-header .history-title{font-size:1.25rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border-top:1px solid;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;padding:.75rem 1rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.75rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:.75rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem;word-break:break-word}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\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: "component", type: i3$2.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$2.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-history', standalone: false, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request' && section.hasValidContent\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \r\n                     (onOpen)=\"onAccordionOpen()\" \r\n                     (onClose)=\"onAccordionClose()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:70vh;overflow-y:auto}.document-history-container .history-header{margin-bottom:1.5rem}.document-history-container .history-header .history-title{font-size:1.5rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:2rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border:1px solid;border-radius:8px;padding:1rem 1.5rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1.5rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:1rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:1rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem;word-break:break-word}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"] }]
+            args: [{ selector: 'document-history', standalone: false, template: "<div class=\"document-history-container\" *ngIf=\"showHistory && historyData.length > 0\">\r\n  <div class=\"history-sections\">\r\n    <div class=\"history-section\" *ngFor=\"let section of processedHistoryData\">\r\n      <div *ngIf=\"section.header === 'Initial Request' && section.hasValidContent\" \r\n           class=\"initial-request-section\"\r\n           [ngClass]=\"section.accordionClass\">\r\n        <p-accordion [activeIndex]=\"activeAccordionIndex\" \r\n                     (onOpen)=\"onAccordionOpen()\" \r\n                     (onClose)=\"onAccordionClose()\">\r\n          <p-accordionTab [header]=\"section.header\">\r\n            <div class=\"history-timeline\" *ngIf=\"section.hasValidContent\">\r\n              <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n                <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n                  <div class=\"card-header\">\r\n                    <div class=\"action-info\">\r\n                      <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                        <i [class]=\"item.actionIcon\"></i>\r\n                      </div>\r\n                      <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                        {{ item.label }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"timestamp\">\r\n                      {{ item.dateTime }}\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- Description -->\r\n                  <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                    <p class=\"description-text\">{{ item.requestDescription ?? 'No Request' }}</p>\r\n                  </div>\r\n                  \r\n                  <!-- Document details if URL exists -->\r\n                  <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                    <div class=\"document-card\">\r\n                      <div class=\"document-info\">\r\n                        <div class=\"document-icon\">\r\n                          <i class=\"pi pi-file\"></i>\r\n                        </div>\r\n                        <div class=\"document-text\">\r\n                          <div class=\"document-title\">Document</div>\r\n                          <div class=\"document-filename clickable\" \r\n                               (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                               title=\"Click to download\">\r\n                            {{ item.docName || 'Document' }}\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"document-actions\">\r\n                        <button class=\"action-btn download-btn\" \r\n                                title=\"Download\"\r\n                                (click)=\"downloadDocument(item.documentUrl!, item.docName)\">\r\n                          <i class=\"pi pi-download\"></i>\r\n                        </button>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  \r\n                  <!-- User information -->\r\n                  <div class=\"user-info\">\r\n                    <span class=\"user-name\">{{ item.userName }}</span>\r\n                    <span class=\"user-role\">({{ item.userRole }})</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <!-- Show message if no valid content -->\r\n            <div class=\"no-content-message\" *ngIf=\"!section.hasValidContent\">\r\n              <p>No initial request details available.</p>\r\n            </div>\r\n          </p-accordionTab>\r\n        </p-accordion>\r\n      </div>\r\n      \r\n      <!-- Document History as regular timeline -->\r\n      <div *ngIf=\"section.header !== 'Initial Request'\" class=\"document-history-section\">\r\n        <div class=\"section-header\" *ngIf=\"section.header\">\r\n          <h4 class=\"section-title\">{{ section.header }}</h4>\r\n        </div>\r\n        \r\n        <div class=\"history-timeline\">\r\n          <div class=\"timeline-item\" *ngFor=\"let item of section.list; let i = index\">\r\n            <div class=\"timeline-card\" [ngClass]=\"item.actionBgColor\">\r\n              <!-- Header with icon and timestamp -->\r\n              <div class=\"card-header\">\r\n                <div class=\"action-info\">\r\n                  <div class=\"action-icon\" [ngClass]=\"item.actionIconBgColor\">\r\n                    <i [class]=\"item.actionIcon\"></i>\r\n                  </div>\r\n                  <span class=\"action-label\" [ngClass]=\"item.actionColor\">\r\n                    {{ item.label }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"timestamp\">\r\n                  {{ item.dateTime }}\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- Description -->\r\n              <div class=\"card-description\" *ngIf=\"item.requestDescription\">\r\n                <p class=\"description-text\">{{ item.requestDescription }}</p>\r\n              </div>\r\n              \r\n              <!-- Document details if URL exists -->\r\n              <div class=\"document-details\" *ngIf=\"item.documentUrl\">\r\n                <div class=\"document-card\">\r\n                  <div class=\"document-info\">\r\n                    <div class=\"document-icon\">\r\n                      <i class=\"pi pi-file\"></i>\r\n                    </div>\r\n                    <div class=\"document-text\">\r\n                      <div class=\"document-title\">Document</div>\r\n                      <div class=\"document-filename clickable\" \r\n                           (click)=\"downloadDocument(item.documentUrl!, item.docName)\"\r\n                           title=\"Click to download\">\r\n                        {{ item.docName || 'Document' }}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              \r\n              <!-- User information -->\r\n              <div class=\"user-info\">\r\n                <span class=\"user-name\">{{ item.userName }}</span>\r\n                <span class=\"user-role\">({{ item.userRole }})</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>", styles: [".document-history-container{padding:.75rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-height:none;overflow-y:auto}.document-history-container .history-header{margin-bottom:1rem}.document-history-container .history-header .history-title{font-size:1.25rem;font-weight:600;color:#374151;margin:0}.document-history-container .history-sections .history-section{margin-bottom:1.5rem}.document-history-container .history-sections .history-section .initial-request-section{margin-bottom:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{background:#fff;border-top:1px solid;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;padding:.75rem 1rem;font-weight:600;color:#1f2937;font-size:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link:focus{box-shadow:none}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-header-icon{color:#6b7280;font-size:.875rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link{background:#fff}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content{background:#fff;border:1px solid;border-top:none;border-radius:0 0 8px 8px;padding:1rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item{margin-bottom:0}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.75rem;border-right:3px solid}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{background:#7d879b;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{color:#1f2937;font-weight:600}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-header .timestamp{color:#6b7280;font-size:.75rem}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .card-description .description-text{color:#374151;line-height:1.5}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-name{color:#1f2937;font-weight:500}.document-history-container .history-sections .history-section .initial-request-section ::ng-deep .p-accordion .p-accordion-content .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-requested ::ng-deep .p-accordion .p-accordion-content{border-color:#d1d5db}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-uploaded ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-rejected ::ng-deep .p-accordion .p-accordion-content{border-color:#fca5a5}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-header .p-accordion-header-link{border-color:#86efac}.document-history-container .history-sections .history-section .initial-request-section.document-accepted ::ng-deep .p-accordion .p-accordion-content{border-color:#86efac}.document-history-container .history-sections .history-section .document-history-section .section-header{margin-bottom:.75rem}.document-history-container .history-sections .history-section .document-history-section .section-header .section-title{font-size:1.25rem;font-weight:500;color:#374151;margin:0}.document-history-container .history-sections .history-section .history-timeline .timeline-item{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card{border-radius:8px;border:1px solid;padding:1rem;position:relative;border-right:3px solid}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-green-50{background-color:#f0fdf4;border-color:#bbf7d0;border-right-color:#10b981}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-red-50{background-color:#fef2f2;border-color:#fecaca;border-right-color:#ef4444}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-blue-50{background-color:#eff6ff;border-color:#bfdbfe;border-right-color:#3b82f6}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card.bg-gray-50{background-color:#f8fafc;border-color:#e2e8f0;border-right-color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-icon i{font-size:14px}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .action-info .action-label{font-weight:600;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-header .timestamp{font-size:.75rem;color:#6b7280}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .card-description .description-text{margin:0;color:#374151;font-size:.875rem;line-height:1.4}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details{margin-bottom:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card{background:#fff;border-radius:6px;padding:.75rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #e5e7eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info{display:flex;align-items:center;gap:.5rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-icon{color:#3b82f6;font-size:1.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-title{font-weight:500;color:#374151;font-size:.875rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename{color:#3b82f6;font-size:.75rem;word-break:break-word}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable{cursor:pointer;text-decoration:underline}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-info .document-text .document-filename.clickable:hover{color:#2563eb;text-decoration:none}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions{display:flex;gap:.25rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn{width:24px;height:24px;border:none;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn{background:#3b82f6;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.edit-btn:hover{background:#2563eb}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn{background:#ef4444;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.delete-btn:hover{background:#dc2626}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn{background:#10b981;color:#fff}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .document-details .document-card .document-actions .action-btn.download-btn:hover{background:#059669}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info{text-align:right;font-size:.75rem;color:#374151}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-name{font-weight:500}.document-history-container .history-sections .history-section .history-timeline .timeline-item .timeline-card .user-info .user-role{color:#6b7280}.text-green-600{color:#059669}.text-red-600{color:#dc2626}.text-blue-600{color:#2563eb}.text-gray-600{color:#4b5563}.bg-green-50{background-color:#f0fdf4}.bg-red-50{background-color:#fef2f2}.bg-blue-50{background-color:#eff6ff}.bg-gray-50{background-color:#f8fafc}.border-green-200{border-color:#bbf7d0}.border-red-200{border-color:#fecaca}.border-blue-200{border-color:#bfdbfe}.border-gray-200{border-color:#e2e8f0}.icon-bg-green{background-color:#10b981}.icon-bg-red{background-color:#ef4444}.icon-bg-blue{background-color:#3b82f6}.icon-bg-gray{background-color:#6b7280}.no-content-message{text-align:center;padding:2rem;color:#6b7280;font-style:italic}.no-content-message p{margin:0;font-size:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: DocumentHistoryService }], propDecorators: { historyData: [{
                 type: Input
             }], showHistory: [{
@@ -4230,11 +4946,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" }, 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<!-- Accept Confirmation Dialog -->\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<!-- Reject Confirmation Dialog -->\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:1rem 0}.actions-card{border-radius:8px;padding:1rem;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$1.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$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.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$1.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"] }] });
+    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" }, 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<!-- Accept Confirmation Dialog -->\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<!-- Reject Confirmation Dialog -->\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$1.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"] }] });
 }
 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<!-- Accept Confirmation Dialog -->\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<!-- Reject Confirmation Dialog -->\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:1rem 0}.actions-card{border-radius:8px;padding:1rem;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\" >\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<!-- Accept Confirmation Dialog -->\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<!-- Reject Confirmation Dialog -->\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"] }]
         }], ctorParameters: () => [{ type: DocumentActionsService }], propDecorators: { document: [{
                 type: Input
             }], documentId: [{
@@ -4392,13 +5108,13 @@ class DocumentViewerComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }, { token: i3$1.MessageService }, { token: DocumentViewerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument", documentList: "documentList", contextId: "contextId" }, outputs: { documentStatusUpdated: "documentStatusUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n        @if(selectedDocument){\r\n        <div id=\"outerContainer col-12 md:col-9\">\r\n          @if(isSelectedDocumentImage){\r\n          <div class=\"img-container\">\r\n            <img\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              class=\"uploadedImages\"\r\n              \r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          }@else if(isSelectedDocumentPdf){\r\n          <div class=\"pdf-container\">\r\n            <pdf-viewer\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              [rotation]=\"0\"\r\n              [original-size]=\"false\"\r\n              [show-all]=\"true\"\r\n              [fit-to-page]=\"false\"\r\n              [zoom]=\"1\"\r\n              [zoom-scale]=\"'page-width'\"\r\n              [stick-to-page]=\"false\"\r\n              [render-text]=\"true\"\r\n              [external-link-target]=\"'blank'\"\r\n              [autoresize]=\"true\"\r\n              [show-borders]=\"false\"\r\n              style=\"width: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else if(isSelectedDocumentUnsupported){\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <document-actions\r\n            [document]=\"selectedDocument\"\r\n            [documentId]=\"selectedDocument?._id\"\r\n            [currentStatus]=\"currentState.documentStatus\"\r\n            [isLoading]=\"currentState.isActionLoading\"\r\n            [isUploaded]=\"currentState.documentIsUploaded\"\r\n            [statusId]=\"selectedDocument?.statusId\"\r\n            (actionPerformed)=\"handleDocumentAction($event)\">\r\n          </document-actions>\r\n          <!-- <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n           -->\r\n          <document-history \r\n            [historyData]=\"currentState.documentHistory\" \r\n            [showHistory]=\"currentState.showDocumentHistory\">\r\n          </document-history>\r\n          \r\n        <ng-content></ng-content>\r\n        <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"], dependencies: [{ kind: "component", type: i5$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: i6.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: DocumentHistoryComponent, selector: "document-history", inputs: ["historyData", "showHistory"] }, { kind: "component", type: DocumentActionsComponent, selector: "document-actions", inputs: ["document", "documentId", "currentStatus", "isLoading", "isUploaded", "statusId"], outputs: ["actionPerformed"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }, { token: i3.MessageService }, { token: DocumentViewerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument", documentList: "documentList", contextId: "contextId" }, outputs: { documentStatusUpdated: "documentStatusUpdated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-viewer-container\">\r\n  <div class=\"main-content\">\r\n    <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n    \r\n    <div class=\"content-grid\">\r\n      @if(selectedDocument){\r\n      <div class=\"document-preview\">\r\n        @if(isSelectedDocumentImage){\r\n        <div class=\"img-container\">\r\n          <img\r\n            [src]=\"selectedDocument?.documentUrl || ''\"\r\n            class=\"uploadedImages\"\r\n            alt=\"Document Image\"\r\n          />\r\n        </div>\r\n        }@else if(isSelectedDocumentPdf){\r\n        <div class=\"pdf-container\">\r\n          <pdf-viewer\r\n            [src]=\"selectedDocument?.documentUrl || ''\"\r\n            [rotation]=\"0\"\r\n            [original-size]=\"false\"\r\n            [show-all]=\"true\"\r\n            [fit-to-page]=\"false\"\r\n            [zoom]=\"1\"\r\n            [zoom-scale]=\"'page-width'\"\r\n            [stick-to-page]=\"false\"\r\n            [render-text]=\"true\"\r\n            [external-link-target]=\"'blank'\"\r\n            [autoresize]=\"true\"\r\n            [show-borders]=\"false\"\r\n            style=\"width: 100%; height: 100%\"\r\n          ></pdf-viewer>\r\n        </div>\r\n        }@else if(isSelectedDocumentUnsupported){\r\n          <div class=\"incorrect-docType\">\r\n            ContentType is incorrect.\r\n          </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <div class=\"sidebar\">\r\n        <document-actions\r\n          [document]=\"selectedDocument\"\r\n          [documentId]=\"selectedDocument?._id\"\r\n          [currentStatus]=\"currentState.documentStatus\"\r\n          [isLoading]=\"currentState.isActionLoading\"\r\n          [isUploaded]=\"currentState.documentIsUploaded\"\r\n          [statusId]=\"selectedDocument?.statusId\"\r\n          (actionPerformed)=\"handleDocumentAction($event)\">\r\n        </document-actions>\r\n        \r\n        <document-history \r\n          [historyData]=\"currentState.documentHistory\" \r\n          [showHistory]=\"currentState.showDocumentHistory\">\r\n        </document-history>\r\n        \r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".document-viewer-container{height:100%;width:100%}.document-viewer-container .main-content{height:100%;display:flex;flex-direction:column}.document-viewer-container .main-content .p-messages{margin-bottom:.5rem}.document-viewer-container .main-content .content-grid{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100% - 60px);min-height:0}.document-viewer-container .main-content .content-grid .document-preview{background:#f8f9fa;border-radius:8px;padding:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden}.document-viewer-container .main-content .content-grid .document-preview .img-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.document-viewer-container .main-content .content-grid .document-preview .img-container .uploadedImages{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}.document-viewer-container .main-content .content-grid .document-preview .pdf-container{width:100%;height:100%;border-radius:4px;overflow:hidden}.document-viewer-container .main-content .content-grid .document-preview .incorrect-docType{color:#dc3545;font-weight:500;text-align:center;padding:2rem}.document-viewer-container .main-content .content-grid .sidebar{display:flex;flex-direction:column;gap:.75rem;max-height:100%;overflow-y:auto}.document-viewer-container .main-content .content-grid .sidebar ::ng-deep .document-actions-container{margin:0}.document-viewer-container .main-content .content-grid .sidebar ::ng-deep .document-history-container{padding:.75rem;max-height:none}@media (max-width: 1200px){.document-viewer-container .main-content .content-grid{grid-template-columns:1fr 300px;gap:.75rem}}@media (max-width: 768px){.document-viewer-container .main-content .content-grid{grid-template-columns:1fr;gap:.5rem}.document-viewer-container .main-content .content-grid .sidebar{order:-1}}.alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}\n"], dependencies: [{ kind: "component", type: i5$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: i6.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: DocumentHistoryComponent, selector: "document-history", inputs: ["historyData", "showHistory"] }, { kind: "component", type: DocumentActionsComponent, selector: "document-actions", inputs: ["document", "documentId", "currentStatus", "isLoading", "isUploaded", "statusId"], outputs: ["actionPerformed"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'document-viewer', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-evenly\">\r\n        @if(selectedDocument){\r\n        <div id=\"outerContainer col-12 md:col-9\">\r\n          @if(isSelectedDocumentImage){\r\n          <div class=\"img-container\">\r\n            <img\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              class=\"uploadedImages\"\r\n              \r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          }@else if(isSelectedDocumentPdf){\r\n          <div class=\"pdf-container\">\r\n            <pdf-viewer\r\n              [src]=\"selectedDocument?.documentUrl || ''\"\r\n              [rotation]=\"0\"\r\n              [original-size]=\"false\"\r\n              [show-all]=\"true\"\r\n              [fit-to-page]=\"false\"\r\n              [zoom]=\"1\"\r\n              [zoom-scale]=\"'page-width'\"\r\n              [stick-to-page]=\"false\"\r\n              [render-text]=\"true\"\r\n              [external-link-target]=\"'blank'\"\r\n              [autoresize]=\"true\"\r\n              [show-borders]=\"false\"\r\n              style=\"width: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else if(isSelectedDocumentUnsupported){\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <document-actions\r\n            [document]=\"selectedDocument\"\r\n            [documentId]=\"selectedDocument?._id\"\r\n            [currentStatus]=\"currentState.documentStatus\"\r\n            [isLoading]=\"currentState.isActionLoading\"\r\n            [isUploaded]=\"currentState.documentIsUploaded\"\r\n            [statusId]=\"selectedDocument?.statusId\"\r\n            (actionPerformed)=\"handleDocumentAction($event)\">\r\n          </document-actions>\r\n          <!-- <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n           -->\r\n          <document-history \r\n            [historyData]=\"currentState.documentHistory\" \r\n            [showHistory]=\"currentState.showDocumentHistory\">\r\n          </document-history>\r\n          \r\n        <ng-content></ng-content>\r\n        <!-- <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }, { type: i3$1.MessageService }, { type: DocumentViewerService }], propDecorators: { selectedDocument: [{
+            args: [{ selector: 'document-viewer', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer-container\">\r\n  <div class=\"main-content\">\r\n    <p-messages [(value)]=\"messages\" [enableService]=\"false\"></p-messages>\r\n    \r\n    <div class=\"content-grid\">\r\n      @if(selectedDocument){\r\n      <div class=\"document-preview\">\r\n        @if(isSelectedDocumentImage){\r\n        <div class=\"img-container\">\r\n          <img\r\n            [src]=\"selectedDocument?.documentUrl || ''\"\r\n            class=\"uploadedImages\"\r\n            alt=\"Document Image\"\r\n          />\r\n        </div>\r\n        }@else if(isSelectedDocumentPdf){\r\n        <div class=\"pdf-container\">\r\n          <pdf-viewer\r\n            [src]=\"selectedDocument?.documentUrl || ''\"\r\n            [rotation]=\"0\"\r\n            [original-size]=\"false\"\r\n            [show-all]=\"true\"\r\n            [fit-to-page]=\"false\"\r\n            [zoom]=\"1\"\r\n            [zoom-scale]=\"'page-width'\"\r\n            [stick-to-page]=\"false\"\r\n            [render-text]=\"true\"\r\n            [external-link-target]=\"'blank'\"\r\n            [autoresize]=\"true\"\r\n            [show-borders]=\"false\"\r\n            style=\"width: 100%; height: 100%\"\r\n          ></pdf-viewer>\r\n        </div>\r\n        }@else if(isSelectedDocumentUnsupported){\r\n          <div class=\"incorrect-docType\">\r\n            ContentType is incorrect.\r\n          </div>\r\n        }\r\n      </div>\r\n      }\r\n\r\n      <div class=\"sidebar\">\r\n        <document-actions\r\n          [document]=\"selectedDocument\"\r\n          [documentId]=\"selectedDocument?._id\"\r\n          [currentStatus]=\"currentState.documentStatus\"\r\n          [isLoading]=\"currentState.isActionLoading\"\r\n          [isUploaded]=\"currentState.documentIsUploaded\"\r\n          [statusId]=\"selectedDocument?.statusId\"\r\n          (actionPerformed)=\"handleDocumentAction($event)\">\r\n        </document-actions>\r\n        \r\n        <document-history \r\n          [historyData]=\"currentState.documentHistory\" \r\n          [showHistory]=\"currentState.showDocumentHistory\">\r\n        </document-history>\r\n        \r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".document-viewer-container{height:100%;width:100%}.document-viewer-container .main-content{height:100%;display:flex;flex-direction:column}.document-viewer-container .main-content .p-messages{margin-bottom:.5rem}.document-viewer-container .main-content .content-grid{display:grid;grid-template-columns:1fr 350px;gap:1rem;height:calc(100% - 60px);min-height:0}.document-viewer-container .main-content .content-grid .document-preview{background:#f8f9fa;border-radius:8px;padding:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden}.document-viewer-container .main-content .content-grid .document-preview .img-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.document-viewer-container .main-content .content-grid .document-preview .img-container .uploadedImages{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}.document-viewer-container .main-content .content-grid .document-preview .pdf-container{width:100%;height:100%;border-radius:4px;overflow:hidden}.document-viewer-container .main-content .content-grid .document-preview .incorrect-docType{color:#dc3545;font-weight:500;text-align:center;padding:2rem}.document-viewer-container .main-content .content-grid .sidebar{display:flex;flex-direction:column;gap:.75rem;max-height:100%;overflow-y:auto}.document-viewer-container .main-content .content-grid .sidebar ::ng-deep .document-actions-container{margin:0}.document-viewer-container .main-content .content-grid .sidebar ::ng-deep .document-history-container{padding:.75rem;max-height:none}@media (max-width: 1200px){.document-viewer-container .main-content .content-grid{grid-template-columns:1fr 300px;gap:.75rem}}@media (max-width: 768px){.document-viewer-container .main-content .content-grid{grid-template-columns:1fr;gap:.5rem}.document-viewer-container .main-content .content-grid .sidebar{order:-1}}.alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }, { type: i3.MessageService }, { type: DocumentViewerService }], propDecorators: { selectedDocument: [{
                 type: Input
             }], documentList: [{
                 type: Input
@@ -4484,15 +5200,23 @@ class DocumentListComponent {
     /**
      * Table data for each category
      */
-    categoryTables = [];
+    categoryTables = SHARED.EMPTY_ARRAY;
     /**
      * Document categories from the response
      */
-    documentCategories = [];
+    documentCategories = SHARED.EMPTY_ARRAY;
     /**
      * Completion counts for each category
      */
-    categoryCompletionCounts = [];
+    categoryCompletionCounts = SHARED.EMPTY_ARRAY;
+    /**
+     * Getter to format category labels with proper suffix
+     */
+    get formattedCategoryLabels() {
+        return this.documentCategories.map(category => {
+            return category.label.endsWith(SHARED.DOCUMENTS) ? category.label : `${category.label} ${SHARED.DOCUMENTS}`;
+        });
+    }
     /**
      * Creates an instance of DocumentListComponent.
      * @class
@@ -4530,29 +5254,6 @@ class DocumentListComponent {
             });
         }
     }
-    /**
-     * Handles the upload action for a document.
-     * Validates if a document type is selected and logs the result.
-     * @memberof DocumentListComponent
-     */
-    handleUploadDocument() {
-        this.documentListService.handleUploadDocument(this.selectedOption)
-            .subscribe({
-            next: (message) => {
-                if (message.length > 0) {
-                    this.messages = message;
-                    this.selectedOption = null;
-                    setTimeout(() => {
-                        this.messages = SHARED.EMPTY_ARRAY;
-                        this.handleOpenSideBar(false);
-                    }, 1000);
-                }
-            },
-            error: (error) => {
-                console.error(error.message);
-            }
-        });
-    }
     /**
      * Handles the visibility of the sidebar.
      * @param {boolean} isVisible - Indicates whether the sidebar should be visible or not.
@@ -4619,11 +5320,11 @@ class DocumentListComponent {
         this.documentListSubscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentListService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentListResponse: "documentListResponse", documentList: "documentList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer \r\n      [selectedDocument]=\"selectedDocument\" \r\n      [documentList]=\"documentList\" \r\n      [contextId]=\"contextId\" \r\n      (documentStatusUpdated)=\"refreshDocumentList()\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ category.label }} {{ !category.label.endsWith('Documents') ? ' Documents' : '' }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\"\r\n        (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"grid m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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.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: i5$3.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$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i3.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.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: "component", type: i9.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"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick", "deleteAction"] }, { kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList", "contextId"], outputs: ["documentStatusUpdated"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentListResponse: "documentListResponse", documentList: "documentList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [header]=\"selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer \r\n      [selectedDocument]=\"selectedDocument\" \r\n      [documentList]=\"documentList\" \r\n      [contextId]=\"contextId\" \r\n      (documentStatusUpdated)=\"refreshDocumentList()\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\"\r\n        (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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: i7$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick", "deleteAction"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList", "contextId"], outputs: ["documentStatusUpdated"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer \r\n      [selectedDocument]=\"selectedDocument\" \r\n      [documentList]=\"documentList\" \r\n      [contextId]=\"contextId\" \r\n      (documentStatusUpdated)=\"refreshDocumentList()\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ category.label }} {{ !category.label.endsWith('Documents') ? ' Documents' : '' }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\"\r\n        (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"grid m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"] }]
+            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\r\n  <p-dialog [header]=\"selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\" \r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer \r\n      [selectedDocument]=\"selectedDocument\" \r\n      [documentList]=\"documentList\" \r\n      [contextId]=\"contextId\" \r\n      (documentStatusUpdated)=\"refreshDocumentList()\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n          <button pButton pRipple class=\"mx-3 w-6rem save-btn-wrapper\" label=\"Save\" (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <ng-content></ng-content>\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\">\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <span class=\"status-badge\">{{ categoryCompletionCounts[i] }} Complete</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary \r\n        [tableData]=\"categoryTables[i]\" \r\n        [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\"\r\n        (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .table-container{padding:0}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:flex-start}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:flex-end}}\n"] }]
         }], ctorParameters: () => [{ type: DocumentListService }], propDecorators: { contextId: [{
                 type: Input
             }], documentListResponse: [{
@@ -4806,10 +5507,10 @@ class DocumentsMenuComponent {
         });
     }
     ngOnChanges(changes) {
-        if (changes['catagories'] && this.catagories) {
+        if (changes[SHARED.CATAGORIES] && this.catagories) {
             this.updateMenuItemsData();
         }
-        if (changes['contextId'] && !changes['contextId'].firstChange) {
+        if (changes[SHARED.CONTEXT_ID] && !changes[SHARED.CONTEXT_ID].firstChange) {
             this.handleContextIdChange();
         }
     }
@@ -4865,10 +5566,15 @@ class DocumentsMenuComponent {
      */
     onMenuItemClick(event, item) {
         if (this.selectedMenuItemId === item._id) {
+            // Immediately clear the selection state
             this.selectedMenuItem = null;
             this.selectedMenuItemId = null;
+            // Update the store
             this.documentStore.setSelectedMenuItem(null);
+            // Refresh documents
             this.documentHelperService.refreshDocumentsWithoutFilters(this.contextId);
+            // Force change detection by updating the component state
+            this.handleDeselection();
         }
         else {
             this.selectedMenuItem = item.label;
@@ -4877,6 +5583,18 @@ class DocumentsMenuComponent {
             this.documentMenuService.handleUserListVisibility(item._id, this.categories);
         }
     }
+    /**
+     * Handle deselection to ensure immediate visual feedback
+     */
+    handleDeselection() {
+        // Force immediate update of the component state
+        this.selectedMenuItemId = null;
+        this.selectedMenuItem = null;
+        // Trigger change detection
+        setTimeout(() => {
+            // This ensures the UI updates immediately
+        }, 0);
+    }
     onSelectMenuItem(menuItemId) {
         const label = this.findMenuItemLabelById(menuItemId);
         if (label) {
@@ -4910,11 +5628,11 @@ class DocumentsMenuComponent {
         return this.selectedMenuItemId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, deps: [{ token: DocumentStore }, { token: DocumentQuery }, { token: DocumentMenuService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label === 'Application' ? 'Application Documents' : item.label }}</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;background:#0066ff1a!important;background-color:#0066ff1a!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:var(--surface-0)!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#44486d1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentsMenuComponent, isStandalone: false, selector: "lib-documents-menu", inputs: { catagories: "catagories", applicationNumber: "applicationNumber", contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label === 'Application' ? 'Application Documents' : item.label }}</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:#fff!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\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: "component", type: i7$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "component", type: i8$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "component", type: i9.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentsMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label === 'Application' ? 'Application Documents' : item.label }}</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important;background:#0066ff1a!important;background-color:#0066ff1a!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:var(--surface-0)!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#44486d1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"] }]
+            args: [{ selector: 'lib-documents-menu', standalone: false, template: "<div class=\"document-sidebar-container h-full\">\r\n  <p-card class=\"widget-menu-wrapper h-full\">\r\n    @if(applicationNumber){\r\n      <div class=\"flex align-items-center justify-content-between widget-menu-header-wrapper\">\r\n        <p class=\"mb-0 application-title-wrapper\">ID - {{applicationNumber}}</p>\r\n        <div class=\"expand-icon-wrapper\">\r\n          <i class=\"ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full\"></i>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <div class=\"widget-menu-container\" >\r\n      <div class=\"widget-menu-wrapper h-ful l custom-scroll\">\r\n       <p-menu [model]=\"categories\" styleClass=\"w-full md:w-15rem\">\r\n            <ng-template pTemplate=\"submenuheader\" let-item>\r\n                <span [style]=\"{\r\n                    color : '#9EA0B3'\r\n                }\">{{  item.label === 'Application' ? 'Application Documents' : item.label }}</span>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"item\" let-item>\r\n                <a pRipple \r\n                   class=\"flex align-items-center p-menuitem-link\"\r\n                   [class.selected-menu-item]=\"selectedMenuItemId === item._id\"\r\n                   (click)=\"onMenuItemClick($event, item)\">\r\n                    <span [class]=\"item.icon\" class=\"text-xl\"></span>\r\n                    <span class=\"ml-2\">{{ item.label }}</span>\r\n                    <p-badge *ngIf=\"item.menuData?.shouldShowBadge\" \r\n                           class=\"ml-auto\" \r\n                           [severity]=\"item.menuData?.badgeSeverity\" \r\n                           [value]=\"item.menuData?.badgeValue\" />\r\n                </a>\r\n            </ng-template>\r\n        </p-menu>\r\n      </div>\r\n    </div>\r\n  </p-card>\r\n</div>\r\n\r\n  ", styles: [".expand-icon-wrapper{border:1px solid var(--primary-color);height:24px;width:24px;border-radius:50%;background:var(--blue-bg-light)}::ng-deep .p-badge.p-badge-success{background-color:#dcfce7;color:#16a34a;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;font-size:12px;font-weight:400;font-style:inherit}::ng-deep .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link{color:#1f2937}@media screen and (min-width: 768px){::ng-deep .md\\:w-15rem{width:100%!important}}::ng-deep .p-menu .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{color:#06f!important}::ng-deep .p-menu{border:none}::ng-deep .custom-scroll{scrollbar-gutter:inherit}::ng-deep .selected-menu-item{background-color:#0066ff1a!important;color:var(--primary-color)!important;border:1px solid rgba(68,72,109,.1)!important;border-radius:10px!important}::ng-deep .selected-menu-item .text-xl{color:var(--primary-color)!important}::ng-deep .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important}::ng-deep .p-menuitem-link:not(.selected-menu-item) .text-xl{color:var(--text-color)!important}::ng-deep .p-panelmenu .p-panelmenu-content{border:none!important}.application-title-wrapper{color:#9ea0b3;font-weight:500}.widget-menu-wrapper{margin-top:8px}.widget-menu-header-wrapper{padding:4px 4px 4px 16px}.widget-menu-container{height:calc(100% - 38px)}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}::ng-deep .document-sidebar-container .p-card{height:100%;box-shadow:none}::ng-deep .document-sidebar-container .p-card .p-card-content{height:100%;padding:0!important}::ng-deep .document-sidebar-container .p-card .p-card-body{height:100%;width:100%;padding:12px 8px;border-radius:10px;border:1px solid #e5e7eb}::ng-deep .document-sidebar-container .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content{border:none;color:var(--text-color);font-weight:400!important;background-color:var(--surface-0)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action{color:var(--text-color);font-weight:400!important;position:relative;padding:12px}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{position:absolute;right:0;top:16px;margin-right:7px;transform:rotate(90deg)!important;transition:none!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .company-action-wrapper:not(.p-disabled).p-highlight .p-panelmenu-header-content{margin:12px 0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content{background-color:transparent!important;border-radius:10px;padding:12px;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content .p-panelmenu-header-action .p-icon-wrapper{transform:rotate(180deg)!important;transition:none!important;top:0!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link{background-color:#fff!important;color:var(--text-color);padding:12px 6px!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text{max-width:75%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active{border:1px solid rgba(68,72,109,.1);border-radius:10px;padding:12px;color:var(--primary-color);box-shadow:none!important;background-color:#0066ff1a!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-icon{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link-active .p-menuitem-text{color:var(--primary-color)}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem.p-focus>.p-menuitem-content{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-focus)>.p-menuitem-content .p-menuitem-link{background-color:#fff!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item){background-color:#fff!important;border:none!important;border-radius:0!important;color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-icon{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link:not(.selected-menu-item) .p-menuitem-text{color:var(--text-color)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .p-panelmenu-expanded .p-panelmenu-content{border:1px solid rgba(68,72,109,.1)!important;border-top:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator{border-top:1px solid rgba(68,72,109,.1)!important}::ng-deep .widget-menu-wrapper .p-panelmenu-panel .widget-separator .p-panelmenu-header-content .p-panelmenu-header-action{padding:0!important}.no-documents-message{padding:12px 16px;text-align:center}.no-documents-message .text-muted{color:#9ea0b3;font-size:14px;font-style:italic}\n"] }]
         }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentQuery }, { type: DocumentMenuService }, { type: DocumentHelperService }], propDecorators: { catagories: [{
                 type: Input
             }], applicationNumber: [{
@@ -5162,11 +5880,11 @@ class DocumentContainerComponent {
         this.clearAllState();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentStore }, { token: DocumentService }, { token: DocumentQuery }, { token: DocumentHttpService }, { token: DocumentHelperService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid m-0 h-full flex\">\r\n  <div class=\"col-12 md:col-2 lg:col-2\">\r\n    <lib-documents-menu [catagories]=\"catagories\" [applicationNumber]=\"applicationNumber\" [contextId]=\"contextId\"></lib-documents-menu>\r\n  </div>\r\n  <div class=\"col-12 md:col-10 lg:col-10 p-0 h-full\" [ngClass]=\"{'custom-scroll': true}\">\r\n      <div>\r\n        <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n      </div>\r\n    <div >\r\n      <lib-document-list  [contextId]=\"contextId\" [documentListResponse]=\"documentListResponse\">\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId", "userList", "statusData", "categories"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentListResponse", "documentList"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["catagories", "applicationNumber", "contextId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid m-0 h-full flex\">\r\n  <div class=\"col-12 md:col-2 lg:col-2\">\r\n    <lib-documents-menu [catagories]=\"catagories\" [applicationNumber]=\"applicationNumber\" [contextId]=\"contextId\"></lib-documents-menu>\r\n  </div>\r\n  <div class=\"col-12 md:col-10 lg:col-10 p-0 h-full\" [ngClass]=\"{'custom-scroll': true}\">\r\n      <div class=\"card\">\r\n        <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n      </div>\r\n    <div >\r\n      <lib-document-list  [contextId]=\"contextId\" [documentListResponse]=\"documentListResponse\">\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId", "userList", "statusData", "categories"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentListResponse", "documentList"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["catagories", "applicationNumber", "contextId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-container', standalone: false, template: "<div class=\"grid m-0 h-full flex\">\r\n  <div class=\"col-12 md:col-2 lg:col-2\">\r\n    <lib-documents-menu [catagories]=\"catagories\" [applicationNumber]=\"applicationNumber\" [contextId]=\"contextId\"></lib-documents-menu>\r\n  </div>\r\n  <div class=\"col-12 md:col-10 lg:col-10 p-0 h-full\" [ngClass]=\"{'custom-scroll': true}\">\r\n      <div>\r\n        <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n      </div>\r\n    <div >\r\n      <lib-document-list  [contextId]=\"contextId\" [documentListResponse]=\"documentListResponse\">\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"] }]
+            args: [{ selector: 'lib-document-container', standalone: false, template: "<div class=\"grid m-0 h-full flex\">\r\n  <div class=\"col-12 md:col-2 lg:col-2\">\r\n    <lib-documents-menu [catagories]=\"catagories\" [applicationNumber]=\"applicationNumber\" [contextId]=\"contextId\"></lib-documents-menu>\r\n  </div>\r\n  <div class=\"col-12 md:col-10 lg:col-10 p-0 h-full\" [ngClass]=\"{'custom-scroll': true}\">\r\n      <div class=\"card\">\r\n        <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n      </div>\r\n    <div >\r\n      <lib-document-list  [contextId]=\"contextId\" [documentListResponse]=\"documentListResponse\">\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"] }]
         }], ctorParameters: () => [{ type: DocumentStore }, { type: DocumentService }, { type: DocumentQuery }, { type: DocumentHttpService }, { type: DocumentHelperService }], propDecorators: { contextId: [{
                 type: Input
             }] } });
@@ -5461,7 +6179,11 @@ class DocumentModule {
             UserListComponent,
             DocumentStatusComponent,
             DocumentActionsComponent,
-            DocumentSearchComponent], imports: [
+            DocumentSearchComponent,
+            /**
+             * A common sidebar component for content projection.
+             */
+            CommonSidebarComponent], imports: [
             /**
              * Angular's CommonModule is imported to access common directives like `ngIf` and `ngFor`.
              */
@@ -5479,7 +6201,7 @@ class DocumentModule {
              */
             ButtonModule,
             /**
-             * PrimeNG SidebarModule is used for creating sidebar in the UI.
+             * PrimeNG SidebarModule is used for creating sidebars.
              */
             SidebarModule,
             /**
@@ -5502,6 +6224,10 @@ class DocumentModule {
              * PrimeNG CheckboxModule is used for showing checkbox value.
              */
             CheckboxModule,
+            /**
+             * PrimeNG RadioButtonModule is used for showing radio button values.
+             */
+            RadioButtonModule,
             /**
              * PrimeNG TimelineModule is used for showing timeline value.
              */
@@ -5560,7 +6286,11 @@ class DocumentModule {
             /**
              * A component for searching documents.
              */
-            DocumentSearchComponent] });
+            DocumentSearchComponent,
+            /**
+             * A common sidebar component for content projection.
+             */
+            CommonSidebarComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentModule, providers: [
             /**
              * Provide the messageservice to be used in other components.
@@ -5614,7 +6344,7 @@ class DocumentModule {
              */
             ButtonModule,
             /**
-             * PrimeNG SidebarModule is used for creating sidebar in the UI.
+             * PrimeNG SidebarModule is used for creating sidebars.
              */
             SidebarModule,
             /**
@@ -5637,6 +6367,10 @@ class DocumentModule {
              * PrimeNG CheckboxModule is used for showing checkbox value.
              */
             CheckboxModule,
+            /**
+             * PrimeNG RadioButtonModule is used for showing radio button values.
+             */
+            RadioButtonModule,
             /**
              * PrimeNG TimelineModule is used for showing timeline value.
              */
@@ -5726,6 +6460,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DocumentStatusComponent,
                         DocumentActionsComponent,
                         DocumentSearchComponent,
+                        /**
+                         * A common sidebar component for content projection.
+                         */
+                        CommonSidebarComponent,
                     ],
                     imports: [
                         /**
@@ -5745,7 +6483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                          */
                         ButtonModule,
                         /**
-                         * PrimeNG SidebarModule is used for creating sidebar in the UI.
+                         * PrimeNG SidebarModule is used for creating sidebars.
                          */
                         SidebarModule,
                         /**
@@ -5768,6 +6506,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                          * PrimeNG CheckboxModule is used for showing checkbox value.
                          */
                         CheckboxModule,
+                        /**
+                         * PrimeNG RadioButtonModule is used for showing radio button values.
+                         */
+                        RadioButtonModule,
                         /**
                          * PrimeNG TimelineModule is used for showing timeline value.
                          */
@@ -5829,6 +6571,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                          * A component for searching documents.
                          */
                         DocumentSearchComponent,
+                        /**
+                         * A common sidebar component for content projection.
+                         */
+                        CommonSidebarComponent,
                     ],
                     providers: [
                         /**
@@ -5877,5 +6623,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DocumentActionsComponent, DocumentContainerComponent, DocumentDirective, DocumentHistoryComponent, DocumentListComponent, DocumentModule, DocumentSearchComponent, DocumentTableBuilderService, DocumentViewerComponent, HasPermissionDirective };
+export { CommonSidebarComponent, DocumentActionsComponent, DocumentContainerComponent, DocumentDirective, DocumentHistoryComponent, DocumentListComponent, DocumentModule, DocumentSearchComponent, DocumentTableBuilderService, DocumentViewerComponent, HasPermissionDirective };
 //# sourceMappingURL=cat-documents-ng.mjs.map