cat-documents-ng 0.2.66 → 0.2.68

package/fesm2022/cat-documents-ng.mjs

@@ -2266,17 +2266,10 @@ class DocumentUploadService {
      */
     uploadCompleted = new EventEmitter();
     /**
-     * Map to track upload progress for multiple files
-     */
-    uploadProgress = new Map();
-    /**
-     * Queue for handling multiple file uploads sequentially
-     */
-    uploadQueue = [];
-    /**
-     * Flag to indicate if an upload is currently in progress
+     * The file to upload.
+     * @type {*}
      */
-    isUploading = false;
+    uploadedFile;
     /**
      * Represent contextId
      * @type {string}
@@ -2310,47 +2303,16 @@ class DocumentUploadService {
      * @returns {void}
      */
     handleTemplatedUpload(file, contextId) {
-        console.log(`=== DOCUMENT UPLOAD SERVICE: ADDING TO QUEUE ===`);
-        console.log(`File: ${file.name}, Size: ${file.size}, ContextId: ${contextId}`);
-        // Add file to upload queue
-        this.uploadQueue.push({ file, contextId });
-        // If not currently uploading, start processing the queue
-        if (!this.isUploading) {
-            this.processUploadQueue();
-        }
-    }
-    /**
-     * Processes the upload queue sequentially
-     */
-    processUploadQueue() {
-        if (this.uploadQueue.length === 0) {
-            this.isUploading = false;
-            console.log('=== UPLOAD QUEUE EMPTY ===');
-            return;
-        }
-        this.isUploading = true;
-        const { file, contextId } = this.uploadQueue.shift();
-        console.log(`=== DOCUMENT UPLOAD SERVICE: PROCESSING QUEUE ITEM ===`);
-        console.log(`File: ${file.name}, Size: ${file.size}, ContextId: ${contextId}`);
-        console.log(`Remaining in queue: ${this.uploadQueue.length}`);
-        // Track this file's upload progress
-        this.uploadProgress.set(file, 10);
-        console.log(`Upload progress tracking started for: ${file.name}`);
         let formsData = this.handleCreateFormData(file, contextId);
         if (!formsData) {
-            console.error(`Failed to create FormData for file: ${file.name}`);
             this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_ERROR_SUMMERY, detail: SHARED.UPLOAD_ERROR_DETAILS });
-            this.uploadProgress.delete(file);
-            // Continue with next file in queue
-            this.processUploadQueue();
             return;
         }
-        console.log(`FormData created successfully for file: ${file.name}`);
+        // Update progress to show upload starting
         this.documentUploadStore.setMessage([{
                 severity: 'info',
-                detail: `Uploading document: ${file.name}...`
+                detail: 'Uploading document...'
             }]);
-        console.log(`Calling document service create method for file: ${file.name}`);
         this.documentService.create(formsData)
             .subscribe({
             /**
@@ -2359,19 +2321,16 @@ class DocumentUploadService {
              * @returns {void}
              */
             next: (event) => {
-                console.log(`=== UPLOAD SUCCESS FOR FILE: ${file.name} ===`);
-                console.log(`Response received:`, event);
                 this.documentUploadStore.setUploadedDocumentFiles(event);
                 this.documentUploadStore.setMessage([{
                         severity: SHARED.SUCCESS_SEVERITY,
-                        detail: `Successfully uploaded: ${file.name}`
+                        detail: SHARED.UPLOAD_SUCCESS
                     }]);
-                console.log(`Emitting uploadCompleted event for file: ${file.name}`);
+                // Emit upload completion event with file and response
                 this.uploadCompleted.emit({ file: file, response: event });
-                this.uploadProgress.delete(file);
-                console.log(`Upload completed and cleaned up for file: ${file.name}`);
-                // Process next file in queue
-                this.processUploadQueue();
+                if (this.uploadedFile) {
+                    // You can emit an event here to update the UI progress if needed
+                }
             },
             /**
              * Handles the error event during file upload.
@@ -2379,15 +2338,9 @@ class DocumentUploadService {
              * @param {any} error - The error object returned by the upload service.
              */
             error: (error) => {
-                console.error(`=== UPLOAD ERROR FOR FILE: ${file.name} ===`);
-                console.error('Error details:', error);
                 this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_SUMMERY, detail: error?.message });
-                this.uploadProgress.delete(file);
-                // Continue with next file in queue even on error
-                this.processUploadQueue();
             },
         });
-        console.log(`=== DOCUMENT UPLOAD SERVICE: UPLOAD INITIATED FOR: ${file.name} ===`);
     }
     /**
      * Get the file and contextId
@@ -2396,6 +2349,7 @@ class DocumentUploadService {
      */
     getUploadFileData(file, contextId) {
         if (file && contextId) {
+            this.uploadedFile = file;
             this.contextId = contextId;
         }
     }
@@ -2417,56 +2371,13 @@ class DocumentUploadService {
         if (uploadedFile) {
             let formData = new FormData();
             formData.append(SHARED.FILE, uploadedFile, uploadedFile.name);
-            formData.append(SHARED.CONTEXT_ID, contextId || this.contextId);
+            formData.append(SHARED.CONTEXT_ID, this.contextId);
             return formData;
         }
         else {
             return null;
         }
     }
-    /**
-     * Get upload progress for a specific file
-     * @param file - The file to get progress for
-     * @returns The upload progress percentage or undefined if not tracked
-     */
-    getUploadProgress(file) {
-        return this.uploadProgress.get(file);
-    }
-    /**
-     * Check if a file is currently being uploaded
-     * @param file - The file to check
-     * @returns True if the file is being uploaded
-     */
-    isFileUploading(file) {
-        return this.uploadProgress.has(file);
-    }
-    /**
-     * Get the current upload queue status
-     * @returns Object containing queue information
-     */
-    getQueueStatus() {
-        return {
-            isUploading: this.isUploading,
-            queueLength: this.uploadQueue.length,
-            totalFiles: this.uploadProgress.size
-        };
-    }
-    /**
-     * Clear the upload queue (useful for cleanup)
-     */
-    clearUploadQueue() {
-        this.uploadQueue = [];
-        this.isUploading = false;
-        this.uploadProgress.clear();
-        console.log('=== UPLOAD QUEUE CLEARED ===');
-    }
-    /**
-     * Get the number of files currently in the upload queue
-     * @returns Number of files waiting to be uploaded
-     */
-    getQueueLength() {
-        return this.uploadQueue.length;
-    }
     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' });
 }
@@ -2923,6 +2834,7 @@ class DocumentUploadComponent {
     businessService;
     formService;
     dataService;
+    documentService;
     /** The context ID for the document upload operation */
     contextId = SHARED.EMPTY;
     /** Reference to the file upload component */
@@ -2977,7 +2889,7 @@ class DocumentUploadComponent {
      * @param formService - Service for form validation and handling
      * @param dataService - Service for data loading operations
      */
-    constructor(documentUpload, uploadService, config, fileFormatService, messageService, cdr, businessService, formService, dataService) {
+    constructor(documentUpload, uploadService, config, fileFormatService, messageService, cdr, businessService, formService, dataService, documentService) {
         this.documentUpload = documentUpload;
         this.uploadService = uploadService;
         this.config = config;
@@ -2987,24 +2899,7 @@ class DocumentUploadComponent {
         this.businessService = businessService;
         this.formService = formService;
         this.dataService = dataService;
-        // Set up global upload completion listener for debugging
-        this.setupGlobalUploadListener();
-    }
-    /**
-     * Sets up a global listener for all upload completion events.
-     * This helps debug issues with multiple file uploads.
-     */
-    setupGlobalUploadListener() {
-        this.documentUpload.uploadCompleted
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(({ file, response }) => {
-            console.log(`=== GLOBAL UPLOAD COMPLETION EVENT ===`);
-            console.log(`File: ${file?.name}`);
-            console.log(`Response:`, response);
-            console.log(`Current time: ${new Date().toISOString()}`);
-            // Log current upload status
-            this.logUploadStatus();
-        });
+        this.documentService = documentService;
     }
     /**
      * Handles changes in assignment type selection.
@@ -3044,21 +2939,10 @@ class DocumentUploadComponent {
      * @param event - Event containing the selected files
      */
     onSelectedFiles(event) {
-        console.log('=== FILE SELECTION EVENT ===');
-        console.log('Number of files selected:', event.currentFiles.length);
-        console.log('Files:', event.currentFiles.map(f => ({ name: f.name, size: f.size })));
-        // Process each file immediately without delays
         event.currentFiles.forEach((file, index) => {
-            console.log(`Processing file ${index + 1}/${event.currentFiles.length}: ${file.name}`);
             this.handleTemplatedUpload(file);
         });
-        console.log('All files processed, clearing file uploader');
         this.fileUploader.clear();
-        // Log upload status after processing all files
-        setTimeout(() => {
-            console.log('=== STATUS AFTER PROCESSING ALL FILES ===');
-            this.logUploadStatus();
-        }, 1000);
     }
     /**
      * Loads the list of applicants for the current context.
@@ -3114,32 +2998,33 @@ class DocumentUploadComponent {
      * @param file - The file to be uploaded
      */
     handleTemplatedUpload(file) {
-        console.log(`=== STARTING UPLOAD FOR FILE: ${file.name} ===`);
-        if (!this.formService.validateContextId(this.contextId, 'Context ID is required for upload.')) {
-            console.error(`Context ID validation failed for file: ${file.name}`);
+        if (!this.formService.validateContextId(this.contextId, 'Context ID is required for upload.'))
+            return;
+        const formsData = this.documentService.handleCreateFormData(file, this.contextId);
+        if (!formsData) {
+            this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_ERROR_SUMMERY, detail: SHARED.UPLOAD_ERROR_DETAILS });
             return;
         }
-        console.log(`File validation passed for: ${file.name}`);
-        console.log(`Context ID: ${this.contextId}`);
-        // Set initial progress
         this.fileProgress.set(file, SHARED.UPLOAD_PROGRESS_10);
-        console.log(`Progress set to 10% for file: ${file.name}`);
-        // Set up upload listener before starting upload
-        console.log(`Setting up upload listener for file: ${file.name}`);
-        this.setupFileUploadListener(file);
-        // Start the upload (now goes to queue)
-        console.log(`Adding file to upload queue: ${file.name}`);
-        this.documentUpload.handleTemplatedUpload(file, this.contextId);
-        // Create uploaded file object
         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);
-        console.log(`Uploaded file object created for: ${file.name}`);
-        console.log(`Total uploaded files count: ${this.uploadedFiles.length}`);
-        this.validateForm();
-        this.cdr.detectChanges();
-        console.log(`=== FILE ADDED TO UPLOAD QUEUE: ${file.name} ===`);
+        this.uploadService.create(formsData).subscribe({
+            next: (event) => {
+                uploadedFile.uploadResponse = event;
+                uploadedFile.progress = SHARED.UPLOAD_PROGRESS_100;
+                uploadedFile.url = event?.url;
+                uploadedFile.contentType = event?.contentType;
+                this.fileProgress.set(file, SHARED.UPLOAD_PROGRESS_100);
+                // this.uploadCompleted.emit({ file, response: event });
+                this.cdr.detectChanges();
+                this.onFormValidationChange.emit();
+            },
+            error: (error) => {
+                this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_SUMMERY, detail: error?.message });
+            }
+        });
     }
     /**
      * Removes a document from the uploaded files list.
@@ -3171,99 +3056,6 @@ class DocumentUploadComponent {
         const isDisabled = this.businessService.isSaveButtonDisabled(this.selectedAssignmentType, this.selectedCategory, this.selectedDocumentType, this.selectedApplicant, this.uploadedFiles, this.isSaving);
         return isDisabled;
     }
-    /**
-     * Gets the current upload queue status
-     * @returns Object containing queue information
-     */
-    getUploadQueueStatus() {
-        if (this.documentUpload.getQueueStatus) {
-            return this.documentUpload.getQueueStatus();
-        }
-        return { isUploading: false, queueLength: 0, totalFiles: 0 };
-    }
-    /**
-     * Gets the number of files currently in the upload queue
-     * @returns Number of files waiting to be uploaded
-     */
-    getUploadQueueLength() {
-        if (this.documentUpload.getQueueLength) {
-            return this.documentUpload.getQueueLength();
-        }
-        return 0;
-    }
-    /**
-     * Checks if there are files waiting in the upload queue
-     * @returns True if there are files waiting to be uploaded
-     */
-    hasFilesInQueue() {
-        return this.getUploadQueueLength() > 0;
-    }
-    /**
-     * Checks the upload service status for debugging purposes.
-     */
-    checkUploadServiceStatus() {
-        console.log('=== UPLOAD SERVICE STATUS ===');
-        console.log('Document upload service:', this.documentUpload);
-        console.log('Upload completed event emitter:', this.documentUpload.uploadCompleted);
-        // Check if the service has any active uploads
-        if (this.documentUpload.getUploadProgress) {
-            this.uploadedFiles.forEach(uploadedFile => {
-                const serviceProgress = this.documentUpload.getUploadProgress(uploadedFile.file);
-                const isUploading = this.documentUpload.isFileUploading(uploadedFile.file);
-                console.log(`File: ${uploadedFile.file.name}`);
-                console.log(`  - Service progress: ${serviceProgress}`);
-                console.log(`  - Service isUploading: ${isUploading}`);
-            });
-        }
-        console.log('=== END SERVICE STATUS ===');
-    }
-    /**
-     * Logs the current upload status for debugging purposes.
-     */
-    logUploadStatus() {
-        console.log('=== CURRENT UPLOAD STATUS ===');
-        console.log('Total uploaded files:', this.uploadedFiles.length);
-        console.log('File progress map size:', this.fileProgress.size);
-        this.uploadedFiles.forEach((uploadedFile, index) => {
-            const progress = this.fileProgress.get(uploadedFile.file);
-            console.log(`File ${index + 1}: ${uploadedFile.file.name}`);
-            console.log(`  - Progress: ${progress}%`);
-            console.log(`  - Uploaded file progress: ${uploadedFile.progress}%`);
-            console.log(`  - Has response: ${!!uploadedFile.uploadResponse}`);
-        });
-        // Check for orphaned progress entries
-        const orphanedFiles = Array.from(this.fileProgress.keys()).filter(file => !this.uploadedFiles.some(uf => uf.file === file));
-        if (orphanedFiles.length > 0) {
-            console.warn('=== ORPHANED PROGRESS ENTRIES ===');
-            orphanedFiles.forEach(file => {
-                console.warn(`Orphaned file: ${file.name} with progress: ${this.fileProgress.get(file)}%`);
-            });
-        }
-        console.log('=== END UPLOAD STATUS ===');
-    }
-    /**
-     * Checks if all files have completed uploading.
-     * @returns True if all files have completed uploading, false otherwise
-     */
-    areAllFilesUploaded() {
-        if (this.uploadedFiles.length === 0)
-            return false;
-        return this.uploadedFiles.every(file => this.fileProgress.get(file.file) === SHARED.UPLOAD_PROGRESS_100);
-    }
-    /**
-     * Gets the currently uploading file (if any)
-     * @returns The file currently being uploaded or null
-     */
-    getCurrentlyUploadingFile() {
-        if (this.documentUpload.getQueueStatus) {
-            const status = this.documentUpload.getQueueStatus();
-            if (status.isUploading && this.uploadedFiles.length > 0) {
-                // Find the file that's currently being uploaded (has 10% progress)
-                return this.uploadedFiles.find(uf => this.fileProgress.get(uf.file) === SHARED.UPLOAD_PROGRESS_10)?.file || null;
-            }
-        }
-        return null;
-    }
     /**
      * Gets the upload progress for a specific file.
      * @param file - The file to get progress for
@@ -3302,22 +3094,8 @@ class DocumentUploadComponent {
         this.filteredApplicantList = [];
         this.categoryOptions = [];
         this.documentTypeOptions = [];
-        // Clear the upload queue
-        if (this.documentUpload.clearUploadQueue) {
-            this.documentUpload.clearUploadQueue();
-        }
         this.cdr.detectChanges();
     }
-    /**
-     * Clears the upload queue manually
-     */
-    clearUploadQueue() {
-        if (this.documentUpload.clearUploadQueue) {
-            this.documentUpload.clearUploadQueue();
-            console.log('Upload queue cleared manually');
-            this.cdr.detectChanges();
-        }
-    }
     /**
      * Resets form selections (applicant, category, document type).
      * Clears document type options.
@@ -3387,11 +3165,11 @@ class DocumentUploadComponent {
         this.onUploadSuccess.emit();
     }
     /**
-     * Handles save operation error.
+     * Handles upload error.
      * Resets saving state.
-     * @param error - The error that occurred during save operation
+     * @param error - The error that occurred during upload
      */
-    handleSaveError(error) {
+    handleUploadError(error) {
         this.isSaving = false;
     }
     /**
@@ -3424,7 +3202,7 @@ class DocumentUploadComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe({
             next: (response) => this.handleUploadSuccess(response),
-            error: (error) => this.handleSaveError(error)
+            error: (error) => this.handleUploadError(error)
         });
     }
     /**
@@ -3433,75 +3211,20 @@ class DocumentUploadComponent {
      * @param file - The file to monitor for upload completion
      */
     setupFileUploadListener(file) {
-        console.log(`=== SETTING UP UPLOAD LISTENER FOR: ${file.name} ===`);
-        // Create a unique identifier for this file to avoid conflicts
-        const fileId = `${file.name}-${file.size}-${file.lastModified}`;
-        console.log(`File ID created: ${fileId}`);
-        // Store the file ID in the file object for tracking
-        file.fileId = fileId;
-        // Set up a one-time listener for this specific file
-        const subscription = this.documentUpload.uploadCompleted
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(({ file: uploadedFile, response }) => {
-            console.log(`=== UPLOAD COMPLETION EVENT RECEIVED ===`);
-            console.log(`Event file: ${uploadedFile?.name}`);
-            console.log(`Tracking file: ${file.name}`);
-            console.log(`File ID match: ${uploadedFile?.fileId === fileId}`);
-            console.log(`Direct file match: ${uploadedFile === file}`);
-            // Check if this is the file we're tracking
-            if (uploadedFile === file || uploadedFile.fileId === fileId) {
-                console.log(`=== MATCH FOUND - UPDATING PROGRESS FOR: ${file.name} ===`);
-                // Update progress to 100%
+        this.documentUpload.uploadCompleted.pipe(takeUntil(this.destroy$)).subscribe(({ file: uploadedFile, response }) => {
+            if (uploadedFile === file) {
                 this.fileProgress.set(file, SHARED.UPLOAD_PROGRESS_100);
-                console.log(`Progress updated to 100% for file: ${file.name}`);
-                // Find and update the uploaded file object
                 const uploadedFileObj = this.uploadedFiles.find(uf => uf.file === file);
                 if (uploadedFileObj) {
                     uploadedFileObj.uploadResponse = response;
                     uploadedFileObj.progress = SHARED.UPLOAD_PROGRESS_100;
                     uploadedFileObj.url = response?.url;
                     uploadedFileObj.contentType = response?.contentType;
-                    console.log(`Uploaded file object updated for: ${file.name}`);
-                }
-                else {
-                    console.warn(`Could not find uploaded file object for: ${file.name}`);
                 }
-                // Trigger change detection and emit validation change
                 this.cdr.detectChanges();
                 this.onFormValidationChange.emit();
-                // Unsubscribe from this specific file's upload completion
-                subscription.unsubscribe();
-                console.log(`Subscription unsubscribed for file: ${file.name}`);
-                console.log(`=== FILE UPLOAD COMPLETED SUCCESSFULLY: ${file.name} ===`);
-            }
-            else {
-                console.log(`Event not for this file: ${file.name}`);
             }
         });
-        console.log(`Upload listener setup completed for file: ${file.name}`);
-    }
-    /**
-     * Handles upload error for a specific file.
-     * @param file - The file that encountered an error
-     * @param errorMessage - The error message
-     */
-    handleUploadError(file, errorMessage) {
-        console.error(`Upload error for file: ${file.name}: ${errorMessage}`);
-        // Mark file as having an error
-        this.fileProgress.set(file, -1);
-        // Update the uploaded file object
-        const uploadedFileObj = this.uploadedFiles.find(uf => uf.file === file);
-        if (uploadedFileObj) {
-            uploadedFileObj.progress = -1;
-        }
-        // Trigger change detection
-        this.cdr.detectChanges();
-        // Show error message
-        this.messageService.add({
-            severity: 'error',
-            summary: 'Upload Failed',
-            detail: `Failed to upload ${file.name}: ${errorMessage}`
-        });
     }
     /**
      * Handles errors during data loading operations.
@@ -3543,13 +3266,13 @@ class DocumentUploadComponent {
         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" }, outputs: { onFormValidationChange: "onFormValidationChange", onUploadSuccess: "onUploadSuccess" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"document-upload-container\">\n  <!-- Assignment Section -->\n  <div class=\"assignment-section\">\n    <h4>Assign to Applicant(s) or Application</h4>\n    <div class=\"radio-group\">\n      <div class=\"radio-item\">\n        <p-radioButton \n          name=\"assignmentType\" \n          value=\"Applicant\" \n          [(ngModel)]=\"selectedAssignmentType\"\n          (onClick)=\"onAssignmentTypeChange()\"\n          [inputId]=\"'applicant'\"\n        ></p-radioButton>\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s)</label>\n      </div>\n      <div class=\"radio-item\">\n        <p-radioButton \n          name=\"assignmentType\" \n          value=\"Application\" \n          [(ngModel)]=\"selectedAssignmentType\"\n          (onClick)=\"onAssignmentTypeChange()\"\n          [inputId]=\"'application'\"\n        ></p-radioButton>\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\n    <h4>Select Applicant(s)</h4>\n    <div class=\"grid\">\n      <div \n        *ngFor=\"let applicant of filteredApplicantList\" \n        class=\"applicant-item col-12 md:col-6\"\n      >\n        <p-radioButton \n          name=\"selectedApplicant\"\n          [value]=\"applicant._id\"\n          [(ngModel)]=\"selectedApplicant\"\n          [inputId]=\"'applicant-' + applicant._id\"\n          (onClick)=\"onApplicantSelectionChange()\"\n        ></p-radioButton>\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\n          {{ applicant.name }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Category Selection -->\n  <div class=\"category-section\">\n    <h4>Category</h4>\n    <p-dropdown\n      [options]=\"categoryOptions\"\n      [(ngModel)]=\"selectedCategory\"\n      placeholder=\"Select Category type\"\n      optionLabel=\"label\"\n      optionValue=\"_id\"\n      (onChange)=\"onCategoryChange()\"\n      [disabled]=\"!categoryOptions.length\"\n      class=\"w-full\"\n    ></p-dropdown>\n  </div>\n\n  <!-- Document Type Selection -->\n  <div class=\"document-type-section\">\n    <h4>Document Type</h4>\n    <p-dropdown\n      [options]=\"documentTypeOptions\"\n      [(ngModel)]=\"selectedDocumentType\"\n      placeholder=\"Select Document type\"\n      optionLabel=\"label\"\n      optionValue=\"_id\"\n      (onChange)=\"onDocumentTypeChange()\"\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\n      class=\"w-full\"\n    ></p-dropdown>\n  </div>\n\n  <!-- File Upload Section -->\n  <div class=\"file-upload-section\">\n    <h4>Upload Documents</h4>\n    \n    <!-- Debug Section -->\n    <div class=\"debug-section mb-3\" style=\"background: #f0f0f0; padding: 10px; border-radius: 4px;\">\n      <button type=\"button\" class=\"p-button p-button-sm p-button-outlined\" (click)=\"logUploadStatus()\">\n        Debug: Log Upload Status\n      </button>\n      <button type=\"button\" class=\"p-button p-button-sm p-button-outlined ml-2\" (click)=\"checkUploadServiceStatus()\">\n        Check Service Status\n      </button>\n      <button type=\"button\" class=\"p-button p-button-sm p-button-danger ml-2\" (click)=\"clearUploadQueue()\">\n        Clear Upload Queue\n      </button>\n      <span class=\"ml-3 text-sm\">Files: {{ uploadedFiles.length }} | Progress Map: {{ fileProgress.size }}</span>\n      <div class=\"mt-2 text-xs\">\n        <div>All Files Uploaded: {{ areAllFilesUploaded() }}</div>\n        <div>Save Button Disabled: {{ getSaveButtonDisabled() }}</div>\n        <div>Upload Queue Length: {{ getUploadQueueLength() }}</div>\n        <div>Currently Uploading: {{ getUploadQueueStatus().isUploading }}</div>\n        <div *ngIf=\"getCurrentlyUploadingFile()\" style=\"color: blue; font-weight: bold;\">\n          Current File: {{ getCurrentlyUploadingFile()?.name }}\n        </div>\n        <div *ngIf=\"hasFilesInQueue()\" style=\"color: orange; font-weight: bold;\">\n          \u23F3 Files waiting in queue: {{ getUploadQueueLength() }}\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"grid\">\n      <div class=\"col-12 md:col-12\">\n        <p-fileUpload \n          #fileUploader \n          [multiple]=\"true\" \n          [auto]=\"false\" \n          accept=\"image/png,application/pdf\" \n          maxFileSize=\"26214400\"\n          (onSelect)=\"onSelectedFiles($event)\"\n        >\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\n              <div class=\"flex gap-2\">\n                <p-button \n                  (onClick)=\"choose($event, chooseCallback)\" \n                  icon=\"pi pi-images\" \n                  [rounded]=\"true\"\n                  [outlined]=\"true\" \n                />\n              </div>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\n            <div class=\"col-12 md:col-12 p-0\">\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\n                    <div class=\"documentImage\">\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\n                        class=\"object-contain\" />\n                    </div>\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\n                      <div class=\"flex justify-content-between\">\n                        <div style=\"font-weight: bold;font-size: 14px\">\n                          {{ uploadedFile.file.name }}\n                        </div>\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\n                      </div>\n                      <div class=\"flex justify-content-between mt-1\">\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \n                          {{ uploadedFile.formattedSize }}\n                        </div>\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \n                          {{ uploadedFile.progress }} % \n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"col-12 md:col-12 p-0\">\n                    <p-progressBar \n                      [value]=\"uploadedFile.progress\" \n                      [showValue]=\"false\" \n                      styleClass=\"h-1/2rem md:ml-auto relative\"\n                      [ngClass]=\"{ 'exceeded-progress-bar': uploadedFile.progress > 100 }\"\n                    >\n                    </p-progressBar>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\n              (click)=\"triggerFileUpload()\">\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"file\"> </ng-template>\n        </p-fileUpload>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: i11.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i12.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵ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 }, { token: DocumentUploadService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentUploadComponent, isStandalone: false, selector: "lib-document-upload", inputs: { contextId: "contextId" }, outputs: { onFormValidationChange: "onFormValidationChange", onUploadSuccess: "onUploadSuccess" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<div class=\"document-upload-container\">\r\n  <!-- Assignment Section -->\r\n  <div class=\"assignment-section\">\r\n    <h4>Assign to Applicant(s) or Application</h4>\r\n    <div class=\"radio-group\">\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Applicant\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'applicant'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s)</label>\r\n      </div>\r\n      <div class=\"radio-item\">\r\n        <p-radioButton \r\n          name=\"assignmentType\" \r\n          value=\"Application\" \r\n          [(ngModel)]=\"selectedAssignmentType\"\r\n          (onClick)=\"onAssignmentTypeChange()\"\r\n          [inputId]=\"'application'\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\r\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\r\n    <h4>Select Applicant(s)</h4>\r\n    <div class=\"grid\">\r\n      <div \r\n        *ngFor=\"let applicant of filteredApplicantList\" \r\n        class=\"applicant-item col-12 md:col-6\"\r\n      >\r\n        <p-radioButton \r\n          name=\"selectedApplicant\"\r\n          [value]=\"applicant._id\"\r\n          [(ngModel)]=\"selectedApplicant\"\r\n          [inputId]=\"'applicant-' + applicant._id\"\r\n          (onClick)=\"onApplicantSelectionChange()\"\r\n        ></p-radioButton>\r\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\r\n          {{ applicant.name }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Category Selection -->\r\n  <div class=\"category-section\">\r\n    <h4>Category</h4>\r\n    <p-dropdown\r\n      [options]=\"categoryOptions\"\r\n      [(ngModel)]=\"selectedCategory\"\r\n      placeholder=\"Select Category type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onCategoryChange()\"\r\n      [disabled]=\"!categoryOptions.length\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- Document Type Selection -->\r\n  <div class=\"document-type-section\">\r\n    <h4>Document Type</h4>\r\n    <p-dropdown\r\n      [options]=\"documentTypeOptions\"\r\n      [(ngModel)]=\"selectedDocumentType\"\r\n      placeholder=\"Select Document type\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"_id\"\r\n      (onChange)=\"onDocumentTypeChange()\"\r\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\r\n      class=\"w-full\"\r\n    ></p-dropdown>\r\n  </div>\r\n\r\n  <!-- File Upload Section -->\r\n  <div class=\"file-upload-section\">\r\n    <h4>Upload Documents</h4>\r\n    <div class=\"grid\">\r\n      <div class=\"col-12 md:col-12\">\r\n        <p-fileUpload \r\n          #fileUploader \r\n          [multiple]=\"true\" \r\n          [auto]=\"false\" \r\n          accept=\"image/png,application/pdf\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\r\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n              <div class=\"flex gap-2\">\r\n                <p-button \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n            <div class=\"col-12 md:col-12 p-0\">\r\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                    <div class=\"documentImage\">\r\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                        class=\"object-contain\" />\r\n                    </div>\r\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                      <div class=\"flex justify-content-between\">\r\n                        <div style=\"font-weight: bold;font-size: 14px\">\r\n                          {{ uploadedFile.file.name }}\r\n                        </div>\r\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                      </div>\r\n                      <div class=\"flex justify-content-between mt-1\">\r\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 md:col-12 p-0\">\r\n                    <p-progressBar \r\n                      [value]=\"uploadedFile.progress\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': uploadedFile.progress > 100 }\"\r\n                    >\r\n                    </p-progressBar>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n              (click)=\"triggerFileUpload()\">\r\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"file\"> </ng-template>\r\n        </p-fileUpload>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.upload-status{margin-bottom:1rem;padding:.75rem;background-color:#f8f9fa;border-radius:.5rem;border-left:4px solid #0F8BFD}.upload-status .status-message{display:flex;align-items:center;font-size:.9rem;color:#495057}.upload-status .status-message .pi{font-size:1rem}.upload-status .status-message .pi.pi-spinner{color:#0f8bfd}.upload-status .status-message .pi.pi-check-circle{color:#28a745}.upload-status .status-message .pi.pi-clock{color:#ffc107}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-progressbar.error-progress-bar .p-progressbar-value{background-color:#dc3545!important}:host ::ng-deep .p-progressbar.success-progress-bar .p-progressbar-value{background-color:#28a745!important}:host ::ng-deep .p-progressbar.exceeded-progress-bar .p-progressbar-value{background-color:#ffc107!important}.applicant-list{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "component", type: i11.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }, { kind: "component", type: i12.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-upload', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-upload-container\">\n  <!-- Assignment Section -->\n  <div class=\"assignment-section\">\n    <h4>Assign to Applicant(s) or Application</h4>\n    <div class=\"radio-group\">\n      <div class=\"radio-item\">\n        <p-radioButton \n          name=\"assignmentType\" \n          value=\"Applicant\" \n          [(ngModel)]=\"selectedAssignmentType\"\n          (onClick)=\"onAssignmentTypeChange()\"\n          [inputId]=\"'applicant'\"\n        ></p-radioButton>\n        <label [for]=\"'applicant'\" class=\"radio-label\">Applicant(s)</label>\n      </div>\n      <div class=\"radio-item\">\n        <p-radioButton \n          name=\"assignmentType\" \n          value=\"Application\" \n          [(ngModel)]=\"selectedAssignmentType\"\n          (onClick)=\"onAssignmentTypeChange()\"\n          [inputId]=\"'application'\"\n        ></p-radioButton>\n        <label [for]=\"'application'\" class=\"radio-label\">Application</label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Applicant Selection (only shown when Applicant is selected) -->\n  <div class=\"applicant-section\" *ngIf=\"selectedAssignmentType === 'Applicant'\">\n    <h4>Select Applicant(s)</h4>\n    <div class=\"grid\">\n      <div \n        *ngFor=\"let applicant of filteredApplicantList\" \n        class=\"applicant-item col-12 md:col-6\"\n      >\n        <p-radioButton \n          name=\"selectedApplicant\"\n          [value]=\"applicant._id\"\n          [(ngModel)]=\"selectedApplicant\"\n          [inputId]=\"'applicant-' + applicant._id\"\n          (onClick)=\"onApplicantSelectionChange()\"\n        ></p-radioButton>\n        <label [for]=\"'applicant-' + applicant._id\" class=\"applicant-label\">\n          {{ applicant.name }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Category Selection -->\n  <div class=\"category-section\">\n    <h4>Category</h4>\n    <p-dropdown\n      [options]=\"categoryOptions\"\n      [(ngModel)]=\"selectedCategory\"\n      placeholder=\"Select Category type\"\n      optionLabel=\"label\"\n      optionValue=\"_id\"\n      (onChange)=\"onCategoryChange()\"\n      [disabled]=\"!categoryOptions.length\"\n      class=\"w-full\"\n    ></p-dropdown>\n  </div>\n\n  <!-- Document Type Selection -->\n  <div class=\"document-type-section\">\n    <h4>Document Type</h4>\n    <p-dropdown\n      [options]=\"documentTypeOptions\"\n      [(ngModel)]=\"selectedDocumentType\"\n      placeholder=\"Select Document type\"\n      optionLabel=\"label\"\n      optionValue=\"_id\"\n      (onChange)=\"onDocumentTypeChange()\"\n      [disabled]=\"!documentTypeOptions.length || !selectedCategory\"\n      class=\"w-full\"\n    ></p-dropdown>\n  </div>\n\n  <!-- File Upload Section -->\n  <div class=\"file-upload-section\">\n    <h4>Upload Documents</h4>\n    \n    <!-- Debug Section -->\n    <div class=\"debug-section mb-3\" style=\"background: #f0f0f0; padding: 10px; border-radius: 4px;\">\n      <button type=\"button\" class=\"p-button p-button-sm p-button-outlined\" (click)=\"logUploadStatus()\">\n        Debug: Log Upload Status\n      </button>\n      <button type=\"button\" class=\"p-button p-button-sm p-button-outlined ml-2\" (click)=\"checkUploadServiceStatus()\">\n        Check Service Status\n      </button>\n      <button type=\"button\" class=\"p-button p-button-sm p-button-danger ml-2\" (click)=\"clearUploadQueue()\">\n        Clear Upload Queue\n      </button>\n      <span class=\"ml-3 text-sm\">Files: {{ uploadedFiles.length }} | Progress Map: {{ fileProgress.size }}</span>\n      <div class=\"mt-2 text-xs\">\n        <div>All Files Uploaded: {{ areAllFilesUploaded() }}</div>\n        <div>Save Button Disabled: {{ getSaveButtonDisabled() }}</div>\n        <div>Upload Queue Length: {{ getUploadQueueLength() }}</div>\n        <div>Currently Uploading: {{ getUploadQueueStatus().isUploading }}</div>\n        <div *ngIf=\"getCurrentlyUploadingFile()\" style=\"color: blue; font-weight: bold;\">\n          Current File: {{ getCurrentlyUploadingFile()?.name }}\n        </div>\n        <div *ngIf=\"hasFilesInQueue()\" style=\"color: orange; font-weight: bold;\">\n          \u23F3 Files waiting in queue: {{ getUploadQueueLength() }}\n        </div>\n      </div>\n    </div>\n    \n    <div class=\"grid\">\n      <div class=\"col-12 md:col-12\">\n        <p-fileUpload \n          #fileUploader \n          [multiple]=\"true\" \n          [auto]=\"false\" \n          accept=\"image/png,application/pdf\" \n          maxFileSize=\"26214400\"\n          (onSelect)=\"onSelectedFiles($event)\"\n        >\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\n              <div class=\"flex gap-2\">\n                <p-button \n                  (onClick)=\"choose($event, chooseCallback)\" \n                  icon=\"pi pi-images\" \n                  [rounded]=\"true\"\n                  [outlined]=\"true\" \n                />\n              </div>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\n            <div class=\"col-12 md:col-12 p-0\">\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\n                    <div class=\"documentImage\">\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\n                        class=\"object-contain\" />\n                    </div>\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\n                      <div class=\"flex justify-content-between\">\n                        <div style=\"font-weight: bold;font-size: 14px\">\n                          {{ uploadedFile.file.name }}\n                        </div>\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\n                      </div>\n                      <div class=\"flex justify-content-between mt-1\">\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \n                          {{ uploadedFile.formattedSize }}\n                        </div>\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \n                          {{ uploadedFile.progress }} % \n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"col-12 md:col-12 p-0\">\n                    <p-progressBar \n                      [value]=\"uploadedFile.progress\" \n                      [showValue]=\"false\" \n                      styleClass=\"h-1/2rem md:ml-auto relative\"\n                      [ngClass]=\"{ 'exceeded-progress-bar': uploadedFile.progress > 100 }\"\n                    >\n                    </p-progressBar>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\n              (click)=\"triggerFileUpload()\">\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"file\"> </ng-template>\n        </p-fileUpload>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}.applicant-list{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3.PrimeNGConfig }, { type: FileFormatService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }, { type: DocumentUploadBusinessService }, { type: DocumentUploadFormService }, { type: DocumentUploadDataService }], propDecorators: { contextId: [{
+            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]=\"false\" \r\n          accept=\"image/png,application/pdf\" \r\n          maxFileSize=\"26214400\"\r\n          (onSelect)=\"onSelectedFiles($event)\"\r\n        >\r\n          <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n            <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n              <div class=\"flex gap-2\">\r\n                <p-button \r\n                  (onClick)=\"choose($event, chooseCallback)\" \r\n                  icon=\"pi pi-images\" \r\n                  [rounded]=\"true\"\r\n                  [outlined]=\"true\" \r\n                />\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n            let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n            <div class=\"col-12 md:col-12 p-0\">\r\n              <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n                <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n                  class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n                  <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                    <div class=\"documentImage\">\r\n                      <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                        class=\"object-contain\" />\r\n                    </div>\r\n                    <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                      <div class=\"flex justify-content-between\">\r\n                        <div style=\"font-weight: bold;font-size: 14px\">\r\n                          {{ uploadedFile.file.name }}\r\n                        </div>\r\n                        <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                      </div>\r\n                      <div class=\"flex justify-content-between mt-1\">\r\n                        <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified\"> \r\n                          {{ uploadedFile.formattedSize }}\r\n                        </div>\r\n                        <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> \r\n                          {{ uploadedFile.progress }} % \r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 md:col-12 p-0\">\r\n                    <p-progressBar \r\n                      [value]=\"uploadedFile.progress\" \r\n                      [showValue]=\"false\" \r\n                      styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                      [ngClass]=\"{ 'exceeded-progress-bar': uploadedFile.progress > 100 }\"\r\n                    >\r\n                    </p-progressBar>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n            <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n              (click)=\"triggerFileUpload()\">\r\n              <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n              <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template pTemplate=\"file\"> </ng-template>\r\n        </p-fileUpload>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}.document-upload-container{padding:1rem;max-height:90vh}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1.5rem}.assignment-section h4,.applicant-section h4,.category-section h4,.document-type-section h4,.file-upload-section h4{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:#212529}.upload-status{margin-bottom:1rem;padding:.75rem;background-color:#f8f9fa;border-radius:.5rem;border-left:4px solid #0F8BFD}.upload-status .status-message{display:flex;align-items:center;font-size:.9rem;color:#495057}.upload-status .status-message .pi{font-size:1rem}.upload-status .status-message .pi.pi-spinner{color:#0f8bfd}.upload-status .status-message .pi.pi-check-circle{color:#28a745}.upload-status .status-message .pi.pi-clock{color:#ffc107}.radio-group{display:flex;gap:.75rem}.radio-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.radio-item:has(.p-radiobutton-box.p-highlight) .radio-label{color:#0f8bfd;font-weight:600}.radio-label{font-size:.9rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}::ng-deep .p-dropdown{width:100%}::ng-deep .p-dropdown .p-dropdown-label{font-size:.9rem;color:#495057}::ng-deep .p-dropdown .p-dropdown-trigger{color:#6c757d}::ng-deep .p-dropdown:not(.p-disabled):hover{border-color:#0f8bfd}::ng-deep .p-dropdown:not(.p-disabled).p-focus{border-color:#0f8bfd;box-shadow:0 0 0 2px #0f8bfd33}::ng-deep .p-radiobutton .p-radiobutton-box{border-color:#ced4da;border-radius:4px;width:18px;height:18px}::ng-deep .p-radiobutton .p-radiobutton-box:hover{border-color:#0f8bfd}::ng-deep .p-radiobutton .p-radiobutton-box.p-highlight{border-color:#0f8bfd;background-color:transparent}::ng-deep .p-radiobutton .p-radiobutton-icon{background-color:#0f8bfd;width:8px;height:8px;border-radius:2px}.applicant-section .grid{margin:0;padding:0}.applicant-section .applicant-item{display:flex;align-items:center;gap:.75rem;border-radius:.5rem;background-color:#fff;transition:all .2s ease;cursor:pointer;margin-bottom:.75rem}.applicant-section .applicant-item:has(.p-radiobutton-box.p-highlight) .applicant-label{color:#0f8bfd;font-weight:600}.applicant-section .applicant-label{font-size:.95rem;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1;font-weight:500;margin:0;transition:color .2s ease}@media (max-width: 768px){.applicant-section .applicant-item{margin-bottom:.5rem;padding:.75rem;min-height:50px}.applicant-section .applicant-label{font-size:.9rem}.document-upload-container{padding:.75rem}.assignment-section,.applicant-section,.category-section,.document-type-section,.file-upload-section{margin-bottom:1rem}}.category-section .p-dropdown,.document-type-section .p-dropdown{width:100%!important;min-width:100%!important}.category-section .p-dropdown-panel,.document-type-section .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-dropdown{width:100%!important}:host ::ng-deep .p-dropdown-panel{width:100%!important}:host ::ng-deep .p-progressbar.error-progress-bar .p-progressbar-value{background-color:#dc3545!important}:host ::ng-deep .p-progressbar.success-progress-bar .p-progressbar-value{background-color:#28a745!important}:host ::ng-deep .p-progressbar.exceeded-progress-bar .p-progressbar-value{background-color:#ffc107!important}.applicant-list{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3.PrimeNGConfig }, { type: FileFormatService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }, { type: DocumentUploadBusinessService }, { type: DocumentUploadFormService }, { type: DocumentUploadDataService }, { type: DocumentUploadService }], propDecorators: { contextId: [{
                 type: Input
             }], fileUploader: [{
                 type: ViewChild,