cat-documents-ng 0.0.21 → 0.0.23

package/fesm2022/cat-documents-ng.mjs

@@ -1,39 +1,42 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, EventEmitter, Output, ViewEncapsulation, ViewChild, APP_INITIALIZER, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { firstValueFrom, tap, Subscription } from 'rxjs';
+import { firstValueFrom, tap, catchError, throwError, Subscription } from 'rxjs';
 import { __decorate } from 'tslib';
-import { EntityStore, StoreConfig } from '@datorama/akita';
-import * as i1 from '@angular/common/http';
+import { EntityStore, StoreConfig, QueryEntity } from '@datorama/akita';
+import * as i2 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import * as i1$2 from 'primeng/accordion';
-import { AccordionModule } from 'primeng/accordion';
-import * as i2 from 'primeng/api';
+import * as i3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
-import * as i3 from 'primeng/button';
+import * as i3$1 from 'primeng/accordion';
+import { AccordionModule } from 'primeng/accordion';
+import * as i5 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i4$1 from 'primeng/sidebar';
+import * as i6$1 from 'primeng/sidebar';
 import { SidebarModule } from 'primeng/sidebar';
-import * as i5$1 from 'primeng/dialog';
+import * as i7$2 from 'primeng/messages';
+import * as i7$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i9 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i6 from 'primeng/fileupload';
+import * as i10 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i11 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i7 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i7 from 'primeng/progressbar';
+import * as i8 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
-import * as i4 from 'primeng/listbox';
-import { ListboxModule } from 'primeng/listbox';
-import * as i5 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
-import * as i6$1 from 'primeng/timeline';
+import * as i5$1 from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
-import * as i7$1 from 'primeng/inputtextarea';
+import * as i6 from 'primeng/inputtextarea';
 import { InputTextareaModule } from 'primeng/inputtextarea';
-import * as i8 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i9 from 'ng2-pdf-viewer';
+import * as i8$1 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { BadgeModule } from 'primeng/badge';
+import { ListboxModule } from 'primeng/listbox';
+import { CheckboxModule } from 'primeng/checkbox';
 
 /**
  * The `SHARED` class contains shared constants used across the application.
@@ -108,12 +111,24 @@ class SHARED {
      * @type {'error'}
      */
     static SEVERITY = 'error';
+    /**
+     * Show SEVERITY value.
+     * @static
+     * @type {'error'}
+     */
+    static SUCCESS_SEVERITY = 'success';
     /**
      * Show upload summery if it's failed.
      * @static
      * @type {'Upload Failed'}
      */
     static UPLOAD_SUMMERY = 'Upload Failed';
+    /**
+     * Show upload summery if it's success.
+     * @static
+     * @type {'Document uploaded successfully.'}
+     */
+    static UPLOAD_SUCCESS = 'Document uploaded successfully.';
     /**
      * Represent empty array.
      * @static
@@ -132,6 +147,30 @@ class SHARED {
      * @type {string}
      */
     static FILE_SIZE = 'fileSize';
+    /**
+     * Represent documentName.
+     * @static
+     * @type {string}
+     */
+    static DOCUMENT_NAME = 'documentName';
+    /**
+     * Represent documentTypeId.
+     * @static
+     * @type {string}
+     */
+    static DOCUMENT_TYPE_ID = 'documentTypeId';
+    /**
+     * Represent upload summery.
+     * @static
+     * @type {string}
+     */
+    static UPLOAD_ERROR_SUMMERY = 'Form Data Missing';
+    /**
+     * Represent upload error details.
+     * @static
+     * @type {string}
+     */
+    static UPLOAD_ERROR_DETAILS = 'Required form data is missing. Please ensure the document and all required fields are provided.';
 }
 /**
  * `DUMMYDOCUMENTLIST` is a mock list of document objects used for testing and development purposes.
@@ -246,6 +285,65 @@ const COUNTRIES = [
 const SUPPORTED_IMAGE_TYPES = [
     'image/png'
 ];
+/**
+ * @constant {Array<{label: string, value: string, files: string[]}>} DOCUMENTTYPES
+ * An array of document type objects containing labels, values, and associated files.
+ */
+const DOCUMENTTYPES = [
+    {
+        label: "BankStatement",
+        value: "bank_statement",
+    },
+    {
+        label: "Payslip",
+        value: "payslip",
+    },
+    {
+        label: "Selfie",
+        value: "selfie",
+    },
+    {
+        label: "Other",
+        value: "other",
+    }
+];
+
+/**
+ * A utility class containing common error messages.
+ * @class ERRORS
+ */
+class ERRORS {
+    /**
+     * Error message for invalid recipient.
+     * @static
+     * @type {string}
+     */
+    static INVALID_RECIPIENT = "Invalid recipient: The recipient cannot be empty.";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_FETCHING_DOCUMENTS = "Error fetching documents:";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_FETCHING_FOLDERS = "Error fetching folders:";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_ALLDOCUMENT_MISSING = "allDocumentTypes is missing in the response:";
+    /**
+     * Error message for invalid document.
+     * @static
+     * @type {string}
+     */
+    static ERROR_DOCUMENT_TYPES = "Error fetching document types:";
+}
 
 /**
  * Class that holds the URLs used throughout the application.
@@ -275,14 +373,43 @@ class URLS {
      * @type {string}
      */
     static CONTEXT = "?contextId=";
+    /**
+     * The query parameter to pass a document ID in API requests.
+     * @static
+     * @type {string}
+     */
+    static DOCUMENT_TYPES = "documentTypes";
+    /**
+     * The query parameter to pass a context ID in API requests.
+     * @static
+     * @type {string}
+     */
+    static FOLDERS = "/folders?contextId=";
+    /**
+     * The query parameter to pass a document ID in API requests.
+     * @static
+     * @type {string}
+     */
+    static ALERT_BY_DOCUMENT_ID = "alerts?documentId=";
+    /**
+     * The query parameter to pass a document ID in API requests.
+     * @static
+     * @type {string}
+     */
+    static PARENT_DOCUMENT_TYPE_ID = "parentDocumentType?parentDocumentTypeId=";
+    /**
+     * The query parameter to pass a context ID in API requests.
+     * Used to specify the context for certain API calls, such as filtering or scoping the request.
+     * @static
+     * @type {string}
+     */
+    static CONTEXT_ID = "&contextId=";
 }
 
 /**
  * Creates the initial state for the `DocumentState` store.
- *
  * This function provides default values for all properties in the `DocumentState` interface,
  * ensuring the store starts with a consistent initial structure.
- *
  * @returns {DocumentState} The initial state of the document store.
  */
 function createInitialState() {
@@ -291,17 +418,20 @@ function createInitialState() {
         filteredRecords: [],
         folderId: null,
         isDialogOpen: false,
+        dropdownOptions: [],
+        uploadedDocumentFiles: [],
+        parentDocumentTypeId: null,
+        documentAlert: { _id: '' },
+        folders: []
     };
 }
 
 /**
  * Store that manages the state of documents in the application.
- *
  * The `DocumentStore` class extends Akita's `EntityStore` to manage the entity state for documents.
  * It uses the `createInitialState` function to initialize the store with default values and
  * is configured with the name `'documents'`.
- *
- * @extends EntityStore<DocumentState>
+ * @augments EntityStore<DocumentState>
  */
 let DocumentStore = class DocumentStore extends EntityStore {
     /**
@@ -310,6 +440,21 @@ let DocumentStore = class DocumentStore extends EntityStore {
     constructor() {
         super(createInitialState());
     }
+    setUploadedDocumentFiles(files) {
+        this.update({ uploadedDocumentFiles: files });
+    }
+    setFolders(folders) {
+        this.update({ folders: folders });
+    }
+    setDocumentTypes(documentType) {
+        this.update({ uploadedDocumentFiles: documentType });
+    }
+    setDocumentAlert(documentAlert) {
+        this.update({ documentAlert: documentAlert });
+    }
+    setParentDocumentTypeId(parentDocumentTypeId) {
+        this.update({ parentDocumentTypeId });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentStore, providedIn: 'root' });
 };
@@ -364,7 +509,7 @@ class AppConfigService {
      * @type {*}
      */
     get apiBaseUrl() {
-        return this.appConfig?.apiUrl;
+        return this.appConfig?.documentApiUrl;
     }
     /**
      * Returns the local server API URL from the loaded configuration.
@@ -382,7 +527,7 @@ class AppConfigService {
     get visibilityOptions() {
         return this.appConfig?.visibilityOption;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AppConfigService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AppConfigService, deps: [{ token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AppConfigService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AppConfigService, decorators: [{
@@ -390,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i2.HttpClient }] });
 
 /**
  * Service for managing document-related operations.
@@ -463,13 +608,136 @@ class DocumentService {
     delete(id) {
         return this.http.delete(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${id}`).pipe(tap(() => this.documentStore.remove(id)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, deps: [{ token: DocumentStore }, { token: i1.HttpClient }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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.0.5", ngImport: i0, type: DocumentService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: DocumentStore }, { type: i1.HttpClient }, { type: AppConfigService }] });
+        }], ctorParameters: () => [{ type: DocumentStore }, { type: i2.HttpClient }, { type: AppConfigService }] });
+
+/**
+ * Query service for managing document state.
+ * This class extends Akita's `QueryEntity` to provide additional functionality for querying document data.
+ * @class DocumentQuery
+ * @typedef {DocumentQuery}
+ * @extends {QueryEntity<DocumentState>}
+ */
+class DocumentQuery extends QueryEntity {
+    store;
+    constructor(store) {
+        super(store);
+        this.store = store;
+    }
+    /**
+     * Selects the currently selected folder ID from the document state.
+     * @returns {Observable<string | null>} Observable that emits the currently selected folder ID.
+     */
+    getParentDocumentTypeId() {
+        return this.getValue()['parentDocumentTypeId'];
+    }
+    /**
+     * Selects the currently selected folder ID from the document state.
+     * @returns {Observable<string | null>} Observable that emits the currently selected folder ID.
+     */
+    selectParentDocumentTypeId() {
+        return this.select((state) => state['parentDocumentTypeId']);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentQuery, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentQuery, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentQuery, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: DocumentStore }] });
+
+/**
+ * Service for making HTTP requests related to documents.
+ * @class DocumentHttpService
+ * @typedef {DocumentHttpService}
+ */
+class DocumentHttpService {
+    documentStore;
+    http;
+    appConfigService;
+    /**
+     * Creates an instance of DocumentService.
+     * @param {DocumentStore} documentStore - Store managing the state of documents.
+     * @param {HttpClient} http - Angular HTTP client for making API requests.
+     * @param {AppConfigService} appConfigService - Service for retrieving application configuration, such as API base URL.
+     */
+    constructor(documentStore, http, appConfigService) {
+        this.documentStore = documentStore;
+        this.http = http;
+        this.appConfigService = appConfigService;
+    }
+    /**
+     * Get api url from appConfigService.
+     * @readonly
+     * @type {string}
+     */
+    get apiUrl() {
+        return this.appConfigService.apiBaseUrl;
+    }
+    /**
+     * Fetches a document by its path name and transforms the response for dropdown options.
+     * Includes error handling for failed API requests.
+     * @param {string} contextId - The context ID to fetch the document.
+     * @returns {Observable<any>} Observable that emits the transformed data for dropdown options.
+     */
+    getFoldersData(contextId) {
+        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}${URLS.FOLDERS}${contextId}`).pipe(tap((folders) => {
+            this.documentStore.setFolders(folders);
+        }), catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Fetches a document by its path name and transforms the response for dropdown options.
+     * Includes error handling for failed API requests.
+     * @returns {Observable<any>} Observable that emits the transformed data for dropdown options.
+     */
+    getDocumentTypes() {
+        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${URLS.DOCUMENT_TYPES}`).pipe(tap((documentTypes) => {
+            this.documentStore.setDocumentTypes(documentTypes);
+        }), catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Fetches a document by its path name and transforms the response for dropdown options.
+     * @param {string} documentId - The document ID to fetch the document.
+     * @returns {Observable<any>} Observable that emits the transformed data for dropdown options.
+     */
+    getAlertsByDocumentID(documentId) {
+        return this.http.get(`${this.apiUrl}${URLS.ALERT_BY_DOCUMENT_ID}${documentId}`).pipe(tap((documentAlert) => {
+            this.documentStore.setDocumentAlert(documentAlert);
+        }), catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    /**
+     * Fetches a document by its folder ID and transforms the response for dropdown options.
+     * @param {string} folderId - The folder ID to fetch the document.
+     * @param {string} contextId - The context ID to fetch the document.
+     * @returns {Observable<any>} Observable that emits the transformed data for dropdown options.
+     */
+    getDocumentByFolderID(folderId, contextId) {
+        return this.http.get(`${this.apiUrl}${URLS.DOCUMENT_UPLOAD}/${URLS.PARENT_DOCUMENT_TYPE_ID}${folderId}${URLS.CONTEXT_ID}${contextId}`).pipe(tap((records) => {
+            this.documentStore.set(records);
+        }), catchError((error) => {
+            return throwError(() => new Error(error));
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentHttpService, deps: [{ token: DocumentStore }, { token: i2.HttpClient }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentHttpService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentHttpService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DocumentStore }, { type: i2.HttpClient }, { type: AppConfigService }] });
 
 /**
  * The `FolderBlockComponent` is responsible for displaying a block of folders and
@@ -484,7 +752,7 @@ class FolderBlockComponent {
      * Array of folder blocks data to display.
      * Each folder is represented as a `FolderBlockModel`.
      */
-    folderBlocks = [];
+    folderList = SHARED.EMPTY_ARRAY;
     /** Number of missing files, sourced from the `SHARED` constants. */
     missingFileCount = SHARED.MISSINGCOUNT;
     /** Number of pending files, sourced from the `SHARED` constants. */
@@ -507,15 +775,16 @@ class FolderBlockComponent {
         if (!folderBlockId) {
             return SHARED.EMPTY;
         }
+        this.documentStore.setParentDocumentTypeId(folderBlockId);
         return folderBlockId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderBlockComponent, deps: [{ token: DocumentStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FolderBlockComponent, isStandalone: false, selector: "lib-folder-block", inputs: { folderBlocks: "folderBlocks" }, ngImport: i0, template: "<div class=\"card folder-info my-4\">\r\n  <div class=\"text-900 text-xl font-semibold mb-3\">Folders</div>\r\n  <div class=\"grid\">\r\n    <div *ngFor=\"let folder of folderBlocks\" class=\"col-12 md:col-6 xl:col-4\">\r\n      <div\r\n        class=\"p-3 border-1 h-full surface-border flex flex-column justify-content-between surface-100 hover:surface-100 cursor-pointer border-round\"\r\n        (click)=\"handleClickForFilter(folder._id)\"\r\n      >\r\n        <div class=\"icon\">\r\n          <img src=\"../../../../assets/images/FolderImg.png\" alt=\"\" />\r\n        </div>\r\n        <div class=\"flex flex-column\">\r\n          <span class=\"text-600 mt-2\"> {{ folder.fileCount }} Files </span>\r\n          <span class=\"text-900 text-lg mt-2 mb-2 font-semibold font-medium\">\r\n            {{ folder.text }}\r\n          </span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"flex justify-content-between\">\r\n          <div class=\"flex flex-column\">\r\n            <span>Missing</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-pink-500': missingFileCount > 0,\r\n                'text-green-500': missingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ missingFileCount }}\r\n            </span>\r\n          </div>\r\n          <div class=\"flex flex-column\">\r\n            <span>Pending</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-yellow-500': pendingFileCount > 0,\r\n                'text-green-500': pendingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ pendingFileCount }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FolderBlockComponent, isStandalone: false, selector: "lib-folder-block", inputs: { folderList: "folderList" }, ngImport: i0, template: "<div class=\"card folder-info my-4\">\r\n  <div class=\"text-900 text-xl font-semibold mb-3\">Folders</div>\r\n  <div class=\"grid\">\r\n    <div *ngFor=\"let folder of folderList\" class=\"col-12 md:col-6 xl:col-4\">\r\n      <div\r\n        class=\"p-3 border-1 h-full surface-border flex flex-column justify-content-between hover:surface-100 cursor-pointer border-round\"\r\n        (click)=\"handleClickForFilter(folder._id)\"\r\n      >\r\n        <div class=\"icon\">\r\n          <img src=\"../../../../assets/images/FolderImg.png\" alt=\"\" />\r\n        </div>\r\n        <div class=\"flex flex-column\">\r\n          <span class=\"text-600 mt-2\"> {{ folder.documentCount }} Files </span>\r\n          <span class=\"text-900 text-lg mt-2 mb-2 font-semibold font-medium\">\r\n            {{ folder.folderName }}\r\n          </span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"flex justify-content-between\">\r\n          <div class=\"flex flex-column\">\r\n            <span>Missing</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-pink-500': missingFileCount > 0,\r\n                'text-green-500': missingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ missingFileCount }}\r\n            </span>\r\n          </div>\r\n          <div class=\"flex flex-column\">\r\n            <span>Pending</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-yellow-500': pendingFileCount > 0,\r\n                'text-green-500': pendingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ pendingFileCount }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-folder-block', standalone: false, template: "<div class=\"card folder-info my-4\">\r\n  <div class=\"text-900 text-xl font-semibold mb-3\">Folders</div>\r\n  <div class=\"grid\">\r\n    <div *ngFor=\"let folder of folderBlocks\" class=\"col-12 md:col-6 xl:col-4\">\r\n      <div\r\n        class=\"p-3 border-1 h-full surface-border flex flex-column justify-content-between surface-100 hover:surface-100 cursor-pointer border-round\"\r\n        (click)=\"handleClickForFilter(folder._id)\"\r\n      >\r\n        <div class=\"icon\">\r\n          <img src=\"../../../../assets/images/FolderImg.png\" alt=\"\" />\r\n        </div>\r\n        <div class=\"flex flex-column\">\r\n          <span class=\"text-600 mt-2\"> {{ folder.fileCount }} Files </span>\r\n          <span class=\"text-900 text-lg mt-2 mb-2 font-semibold font-medium\">\r\n            {{ folder.text }}\r\n          </span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"flex justify-content-between\">\r\n          <div class=\"flex flex-column\">\r\n            <span>Missing</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-pink-500': missingFileCount > 0,\r\n                'text-green-500': missingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ missingFileCount }}\r\n            </span>\r\n          </div>\r\n          <div class=\"flex flex-column\">\r\n            <span>Pending</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-yellow-500': pendingFileCount > 0,\r\n                'text-green-500': pendingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ pendingFileCount }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: DocumentStore }], propDecorators: { folderBlocks: [{
+            args: [{ selector: 'lib-folder-block', standalone: false, template: "<div class=\"card folder-info my-4\">\r\n  <div class=\"text-900 text-xl font-semibold mb-3\">Folders</div>\r\n  <div class=\"grid\">\r\n    <div *ngFor=\"let folder of folderList\" class=\"col-12 md:col-6 xl:col-4\">\r\n      <div\r\n        class=\"p-3 border-1 h-full surface-border flex flex-column justify-content-between hover:surface-100 cursor-pointer border-round\"\r\n        (click)=\"handleClickForFilter(folder._id)\"\r\n      >\r\n        <div class=\"icon\">\r\n          <img src=\"../../../../assets/images/FolderImg.png\" alt=\"\" />\r\n        </div>\r\n        <div class=\"flex flex-column\">\r\n          <span class=\"text-600 mt-2\"> {{ folder.documentCount }} Files </span>\r\n          <span class=\"text-900 text-lg mt-2 mb-2 font-semibold font-medium\">\r\n            {{ folder.folderName }}\r\n          </span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"flex justify-content-between\">\r\n          <div class=\"flex flex-column\">\r\n            <span>Missing</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-pink-500': missingFileCount > 0,\r\n                'text-green-500': missingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ missingFileCount }}\r\n            </span>\r\n          </div>\r\n          <div class=\"flex flex-column\">\r\n            <span>Pending</span>\r\n            <span\r\n              [ngClass]=\"{\r\n                'text-yellow-500': pendingFileCount > 0,\r\n                'text-green-500': pendingFileCount === 0\r\n              }\"\r\n            >\r\n              {{ pendingFileCount }}\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: DocumentStore }], propDecorators: { folderList: [{
                 type: Input
             }] } });
 
@@ -533,19 +802,154 @@ class FolderContainerComponent {
      */
     documentList;
     /**
-     * Folder blocks data, sourced from the `SHARED` constants.
+     * A list of documents passed as input to the component.
+     * Represents the document data to be displayed in the folder container.
      */
-    folderBlocks = FOLDERPANEL;
+    folderList = SHARED.EMPTY_ARRAY;
+    /**
+     * The context ID for the folder container.
+     * @type {string}
+     */
+    contextId = SHARED.EMPTY;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList" }, ngImport: i0, template: "\r\n<lib-folder-block [folderBlocks]=\"folderBlocks\"></lib-folder-block>", styles: [""], dependencies: [{ kind: "component", type: FolderBlockComponent, selector: "lib-folder-block", inputs: ["folderBlocks"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FolderContainerComponent, isStandalone: false, selector: "lib-folder-container", inputs: { documentList: "documentList", folderList: "folderList", contextId: "contextId" }, ngImport: i0, template: "\r\n<lib-folder-block [folderList]=\"folderList\"></lib-folder-block>", styles: [""], dependencies: [{ kind: "component", type: FolderBlockComponent, selector: "lib-folder-block", inputs: ["folderList"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FolderContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-folder-container', standalone: false, template: "\r\n<lib-folder-block [folderBlocks]=\"folderBlocks\"></lib-folder-block>" }]
+            args: [{ selector: 'lib-folder-container', standalone: false, template: "\r\n<lib-folder-block [folderList]=\"folderList\"></lib-folder-block>" }]
         }], propDecorators: { documentList: [{
                 type: Input
+            }], folderList: [{
+                type: Input
+            }], contextId: [{
+                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}
+     */
+    constructor(documentService, documentUploadStore, messageService) {
+        this.documentService = documentService;
+        this.documentUploadStore = documentUploadStore;
+        this.messageService = messageService;
+    }
+    /**
+     * Prepares the files for upload by creating a FormData object.
+     * This method appends each file to the FormData for submission.
+     * @returns {void}
+     */
+    handleTemplatedUpload() {
+        let formsData = this.handleCreateFormData();
+        if (!formsData) {
+            this.messageService.add({ severity: SHARED.SEVERITY, summary: SHARED.UPLOAD_ERROR_SUMMERY, detail: SHARED.UPLOAD_ERROR_DETAILS });
+            return;
+        }
+        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.messageService.add({
+                    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.messageService.add({ 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.
+     */
+    getUploadFileData(file, contextId) {
+        if (file && contextId) {
+            this.uploadedFile = file;
+            this.contextId = contextId;
+        }
+    }
+    /**
+     * Get the document name and document type id
+     * @param documentName - The document name to upload.
+     * @param documentTypeId - The document type id to upload.
+     */
+    getDocumentNameAndType(documentName, documentTypeId) {
+        if (documentName && documentTypeId) {
+            this.docName = documentName;
+            this.docTypeId = documentTypeId;
+        }
+    }
+    /**
+     * Handle the creation of formdata.
+     * @returns {*} - The formdata object.
+     */
+    handleCreateFormData() {
+        if (this.uploadedFile && this.contextId && this.docName && 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_NAME, this.docName);
+            formData.append(SHARED.DOCUMENT_TYPE_ID, this.docTypeId);
+            return formData;
+        }
+        else {
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", 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.0.5", ngImport: i0, type: DocumentUploadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentStore }, { type: i3.MessageService }] });
+
 /**
  * DocumentListItemComponent
  *
@@ -575,11 +979,11 @@ class DocumentListItemComponent {
         this.documentClick.emit(document);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DocumentListItemComponent, isStandalone: false, selector: "lib-document-list-item", inputs: { document: "document" }, outputs: { documentClick: "documentClick" }, ngImport: i0, template: "<div class=\"grid\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-6 xl:col-12\"\r\n    >\r\n      <div\r\n        class=\"col-5 flex cursor-pointer align-items-center pl-0\"\r\n        (click)=\"handleOpenDocument(document)\"\r\n      >\r\n        <img src=\"../../../../assets/images/Frame.png\" alt=\"\" />\r\n        <span class=\"ml-4\">{{ document.fileName }}</span>\r\n      </div>\r\n      <div class=\"col-4 flex align-items-center justify-content-center\">\r\n        <span\r\n          [class]=\"'product-badge status-' + document.status?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center pl-2 pr-2 pt-1 pb-1 \"\r\n        >\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'pending'\">\r\n            <i class=\"pi pi-clock pr-1\" style=\"font-size: 12px;\"></i>\r\n            Pending\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'verified'\">\r\n            <i class=\"pi pi-check-circle pr-1\" style=\"font-size: 12px;\"></i>\r\n            Verified\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'sentreminder'\">\r\n            <i class=\"pi pi-bell pr-1\" style=\"font-size: 12px;\"></i>\r\n            Sent Reminder \r\n          </ng-container>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".product-badge.status-pending{background:#e9b127;color:#fff;border-radius:4px}.product-badge.status-verified{background:#4caf50;color:#fff;border-radius:4px}.product-badge.status-sentreminder{background:#f57c00;color:#fff;border-radius:4px}.product-badge{text-transform:none;font-weight:500;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DocumentListItemComponent, isStandalone: false, selector: "lib-document-list-item", inputs: { document: "document" }, outputs: { documentClick: "documentClick" }, ngImport: i0, template: "<div class=\"grid\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-6 xl:col-12\"\r\n    >\r\n      <div\r\n        class=\"col-5 flex cursor-pointer align-items-center pl-0\"\r\n        (click)=\"handleOpenDocument(document)\"\r\n      >\r\n        <img src=\"../../../../assets/images/Frame.png\" alt=\"\" />\r\n        <span class=\"ml-4\">{{ document.fileName }}</span>\r\n      </div>\r\n      <div class=\"document-type\">\r\n          {{document.documentTypeName}}\r\n      </div>\r\n      <div class=\"col-4 flex align-items-center justify-content-center\">\r\n        <span\r\n          [class]=\"'product-badge status-' + document.status?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center pl-2 pr-2 pt-1 pb-1 \"\r\n        >\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'pending'\">\r\n            <i class=\"pi pi-clock pr-1\" style=\"font-size: 12px;\"></i>\r\n            Pending\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'verified'\">\r\n            <i class=\"pi pi-check-circle pr-1\" style=\"font-size: 12px;\"></i>\r\n            Verified\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'alert'\">\r\n            <i class=\"pi pi-bell pr-1\" style=\"font-size: 12px;\"></i>\r\n            Alert\r\n          </ng-container>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".product-badge.status-pending{background:#e9b127;color:#fff;border-radius:4px}.product-badge.status-verified{background:#4caf50;color:#fff;border-radius:4px}.product-badge.status-alert{background:#f57c00;color:#fff;border-radius:4px}.product-badge{text-transform:none;font-weight:500;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-list-item', standalone: false, template: "<div class=\"grid\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-6 xl:col-12\"\r\n    >\r\n      <div\r\n        class=\"col-5 flex cursor-pointer align-items-center pl-0\"\r\n        (click)=\"handleOpenDocument(document)\"\r\n      >\r\n        <img src=\"../../../../assets/images/Frame.png\" alt=\"\" />\r\n        <span class=\"ml-4\">{{ document.fileName }}</span>\r\n      </div>\r\n      <div class=\"col-4 flex align-items-center justify-content-center\">\r\n        <span\r\n          [class]=\"'product-badge status-' + document.status?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center pl-2 pr-2 pt-1 pb-1 \"\r\n        >\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'pending'\">\r\n            <i class=\"pi pi-clock pr-1\" style=\"font-size: 12px;\"></i>\r\n            Pending\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'verified'\">\r\n            <i class=\"pi pi-check-circle pr-1\" style=\"font-size: 12px;\"></i>\r\n            Verified\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'sentreminder'\">\r\n            <i class=\"pi pi-bell pr-1\" style=\"font-size: 12px;\"></i>\r\n            Sent Reminder \r\n          </ng-container>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".product-badge.status-pending{background:#e9b127;color:#fff;border-radius:4px}.product-badge.status-verified{background:#4caf50;color:#fff;border-radius:4px}.product-badge.status-sentreminder{background:#f57c00;color:#fff;border-radius:4px}.product-badge{text-transform:none;font-weight:500;font-size:12px}\n"] }]
+            args: [{ selector: 'lib-document-list-item', standalone: false, template: "<div class=\"grid\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-6 xl:col-12\"\r\n    >\r\n      <div\r\n        class=\"col-5 flex cursor-pointer align-items-center pl-0\"\r\n        (click)=\"handleOpenDocument(document)\"\r\n      >\r\n        <img src=\"../../../../assets/images/Frame.png\" alt=\"\" />\r\n        <span class=\"ml-4\">{{ document.fileName }}</span>\r\n      </div>\r\n      <div class=\"document-type\">\r\n          {{document.documentTypeName}}\r\n      </div>\r\n      <div class=\"col-4 flex align-items-center justify-content-center\">\r\n        <span\r\n          [class]=\"'product-badge status-' + document.status?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center pl-2 pr-2 pt-1 pb-1 \"\r\n        >\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'pending'\">\r\n            <i class=\"pi pi-clock pr-1\" style=\"font-size: 12px;\"></i>\r\n            Pending\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'verified'\">\r\n            <i class=\"pi pi-check-circle pr-1\" style=\"font-size: 12px;\"></i>\r\n            Verified\r\n          </ng-container>\r\n          <ng-container *ngIf=\"document.status?.toLowerCase() === 'alert'\">\r\n            <i class=\"pi pi-bell pr-1\" style=\"font-size: 12px;\"></i>\r\n            Alert\r\n          </ng-container>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".product-badge.status-pending{background:#e9b127;color:#fff;border-radius:4px}.product-badge.status-verified{background:#4caf50;color:#fff;border-radius:4px}.product-badge.status-alert{background:#f57c00;color:#fff;border-radius:4px}.product-badge{text-transform:none;font-weight:500;font-size:12px}\n"] }]
         }], propDecorators: { documentClick: [{
                 type: Output
             }], document: [{
@@ -634,21 +1038,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @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;
-    /**
-     * Provide id of file after upload.
-     * @type {*}
-     */
-    onInput = new EventEmitter();
     /**
      * To make file explorer visible.
      * @type {!FileUpload}
@@ -673,13 +1078,15 @@ class DocumentUploadComponent {
     /**
      * 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(uploadService, config, fileFormatService, messageService, cdr) {
+    constructor(documentUpload, uploadService, config, fileFormatService, messageService, cdr) {
+        this.documentUpload = documentUpload;
         this.uploadService = uploadService;
         this.config = config;
         this.fileFormatService = fileFormatService;
@@ -702,39 +1109,17 @@ class DocumentUploadComponent {
      * @returns {void}
      */
     handleTemplatedUpload(file) {
-        let formData = this.handleCreateFormData(file);
-        this.uploadService.create(formData)
-            .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.uploadedFiles.push(event);
-                this.fileProgress.set(event, 100);
-                this.onInput.emit(event._id);
-                this.totalSizePercent = 100;
-            },
-            /**
-             * 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.fileProgress.set(file, SHARED.INITIAL_COUNT);
-                this.messageService.add({
-                    severity: SHARED.SEVERITY,
-                    summary: SHARED.UPLOAD_SUMMERY,
-                    detail: error?.message,
-                });
-            },
-        });
+        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 {*}
+     * @returns {*} - The formdata object.
      */
     handleCreateFormData(file) {
         const formData = new FormData();
@@ -743,10 +1128,10 @@ class DocumentUploadComponent {
         return formData;
     }
     /**
-    * Handles the event when new files are selected.
-    * @param { { currentFiles: File[] } } event - The event containing the newly selected files.
-    * @returns {void}
-    */
+     * 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);
@@ -759,7 +1144,7 @@ class DocumentUploadComponent {
      * @returns {string} The formatted file size (e.g., '1.2 KB', '2.3 MB').
      */
     formatSize(bytes) {
-        return this.fileFormatService.formatFileSize(bytes, this.config);
+        this.fileSize = this.fileFormatService.formatFileSize(bytes, this.config);
     }
     /**
      * Handles the removal of a file from the uploaded files list.
@@ -787,16 +1172,14 @@ class DocumentUploadComponent {
     triggerFileUpload() {
         this.fileUploader.choose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentService }, { token: i2.PrimeNGConfig }, { token: FileFormatService }, { token: i2.MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DocumentUploadComponent, isStandalone: false, selector: "lib-document-upload", inputs: { contextId: "contextId" }, outputs: { onInput: "onInput" }, 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=\"1000000\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"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 file 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]=\"file.name\" width=\"45\"\r\n                    height=\"50\" 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                      {{ file.fileName }}\r\n                    </div>\r\n                    <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(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;\"></div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\">{{ getProgress(file) }} %\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 [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\" (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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.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: i6.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: i7.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentUploadService }, { token: DocumentService }, { token: i3.PrimeNGConfig }, { token: FileFormatService }, { token: i3.MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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=\"1000000\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"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}\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: i5.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.0.5", 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=\"1000000\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"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 file 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]=\"file.name\" width=\"45\"\r\n                    height=\"50\" 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                      {{ file.fileName }}\r\n                    </div>\r\n                    <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(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;\"></div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\">{{ getProgress(file) }} %\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 [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\" (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}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentService }, { type: i2.PrimeNGConfig }, { type: FileFormatService }, { type: i2.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { contextId: [{
+            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=\"1000000\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"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}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentService }, { type: i3.PrimeNGConfig }, { type: FileFormatService }, { type: i3.MessageService }, { type: i0.ChangeDetectorRef }], propDecorators: { contextId: [{
                 type: Input
-            }], onInput: [{
-                type: Output
             }], fileUploader: [{
                 type: ViewChild,
                 args: ['fileUploader']
@@ -809,6 +1192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * @implements {OnInit}
  */
 class DocumentViewerComponent {
+    documentHttpService;
     /**
      * Get the selected document by user.
      * @type {*}
@@ -819,21 +1203,11 @@ class DocumentViewerComponent {
      * @type {!string}
      */
     notes;
-    /**
-     * Country data according to Country model.
-     * @type {!Country[]}
-     */
-    countries;
     /**
      * Indicates whether a checkbox is selected.
      * @type {boolean}
      */
     checked = false;
-    /**
-     * The currently selected country.
-     * @type {Country}
-     */
-    selectedCountry;
     /**
      * Reference to the dynamic dialog used for displaying additional details.
      * @type {(DynamicDialogRef | undefined)}
@@ -859,16 +1233,29 @@ class DocumentViewerComponent {
      * @type {any}
      */
     alertData;
+    /**
+     * Holds the subscription to manage observable cleanup.
+     * @private
+     * @type {Subscription}
+     */
+    subscription = new Subscription();
     /**
      * Initializes a new instance of the DocumentViewerComponent.
      */
-    constructor() { }
+    constructor(documentHttpService) {
+        this.documentHttpService = documentHttpService;
+    }
     /**
-     * Lifecycle hook that is called after data-bound properties are initialized.
-     * Initializes the list of countries.
+     * Fetches the alerts for the selected document.
+     * @returns {void}
      */
-    ngOnInit() {
-        this.countries = COUNTRIES;
+    ngOnChanges() {
+        if (this.selectedDocument) {
+            const documentSubscription = this.documentHttpService.getAlertsByDocumentID(this.selectedDocument._id).subscribe((data) => {
+                this.alertData = data;
+            });
+            this.subscription.add(documentSubscription);
+        }
     }
     /**
      * Determines if the given content type is an image.
@@ -878,74 +1265,174 @@ class DocumentViewerComponent {
     isImage(contentType) {
         return SUPPORTED_IMAGE_TYPES.includes(contentType);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument" }, ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-between\">\r\n        <div class=\"action col-12 p-0 md:col-2 no-grow-no-shrink\">\r\n          <p-listbox\r\n            [options]=\"countries\"\r\n            [filter]=\"true\"\r\n            [(ngModel)]=\"selectedCountry\"\r\n            optionLabel=\"name\"\r\n            [style]=\"{ width: '15rem' }\"\r\n            [listStyle]=\"{ 'max-height': '250px' }\"\r\n          >\r\n            <ng-template let-country pTemplate=\"item\">\r\n              <div class=\"flex align-items-center gap-2\">\r\n                <p-checkbox\r\n                  [(ngModel)]=\"country.checked\"\r\n                  [binary]=\"true\"\r\n                  [inputId]=\"country.code\"\r\n                ></p-checkbox>\r\n                <div>{{ country.name }}</div>\r\n              </div>\r\n            </ng-template>\r\n          </p-listbox>\r\n        </div>\r\n        @if(selectedDocument){\r\n\r\n        <div id=\"outerContainer col-12 md:col-7\">\r\n          <div\r\n            *ngIf=\"isImage(selectedDocument.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument.documentUrl\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument.contentType == \"application/pdf\"){\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: 55vw; height: 100vh\"\r\n            ></pdf-viewer>\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          <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\" >\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          <div class=\"summery mb-4 pb-1\">\r\n            <div class=\"card p-0 mb-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Summary</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0\" style=\"border-top-right-radius: 0px;border-top-left-radius: 0px;\" >\r\n              <p-timeline [value]=\"events\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  {{ event.status }}\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"propertyDetails\" class=\"property-details mb-4 pb-1\">\r\n            <div class=\"card mb-0\">\r\n              <h4 class=\"bold\" style=\"font-size: 21px; font-weight: bold;\">Property Details</h4>\r\n              <hr />\r\n              <div class=\"grid\">\r\n                <div class=\"col-12 md:col-12\">\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\" style=\"font-size: 21px; font-weight: bold;\">Detached House</div>\r\n                        <div class=\"decription\">\r\n                          {{ propertyDetails?.PropertyType }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Floors }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Floors</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/badroom.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Bedrooms }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Bedrooms</div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Kitchen }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Kitchen</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-12 flex ml-2 md:col-12\">\r\n                  <div class=\"img mr-2\">\r\n                    <img src=\"../../../../assets/icons/location.png\" alt=\"\" />\r\n                  </div>\r\n                  <div class=\"title\">\r\n                    <div class=\"title font-bold\">\r\n                      {{ propertyDetails?.Address }}\r\n                    </div>\r\n                    <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Address</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"notes card pl-0 pr-0 pt-0\">\r\n            <div class=\"card p-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Notes</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0 pt-0\">\r\n              <div class=\"textAreaControl mt-3\">\r\n                <textarea\r\n                  rows=\"5\"\r\n                  cols=\"30\"\r\n                  pInputTextarea\r\n                  #textArea\r\n                  [(ngModel)]=\"notes\"\r\n                >\r\n                </textarea>\r\n              </div>\r\n              <div class=\"buttons document-btn-wrapper flex mt-2\">\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Resubmission\"\r\n                  class=\"p-button-outlined mr-2\"\r\n                ></button>\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Accept\"\r\n                ></button>\r\n              </div>\r\n            </div>\r\n          </div>\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-header,.document-viewer .p-dialog-content{background-color:#ececf9}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4.Listbox, selector: "p-listbox", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange"] }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i6$1.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i7$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.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"] }], encapsulation: i0.ViewEncapsulation.None });
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\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-7\">\r\n          <div\r\n            *ngIf=\"isImage(selectedDocument.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument.documentUrl\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument.contentType == \"application/pdf\"){\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: 55vw; height: 100vh\"\r\n            ></pdf-viewer>\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          <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\" >\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          <div class=\"summery mb-4 pb-1\">\r\n            <div class=\"card p-0 mb-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Summary</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0\" style=\"border-top-right-radius: 0px;border-top-left-radius: 0px;\" >\r\n              <p-timeline [value]=\"events\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  {{ event.status }}\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"propertyDetails\" class=\"property-details mb-4 pb-1\">\r\n            <div class=\"card mb-0\">\r\n              <h4 class=\"bold\" style=\"font-size: 21px; font-weight: bold;\">Property Details</h4>\r\n              <hr />\r\n              <div class=\"grid\">\r\n                <div class=\"col-12 md:col-12\">\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\" style=\"font-size: 21px; font-weight: bold;\">Detached House</div>\r\n                        <div class=\"decription\">\r\n                          {{ propertyDetails?.PropertyType }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Floors }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Floors</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/badroom.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Bedrooms }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Bedrooms</div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Kitchen }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Kitchen</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-12 flex ml-2 md:col-12\">\r\n                  <div class=\"img mr-2\">\r\n                    <img src=\"../../../../assets/icons/location.png\" alt=\"\" />\r\n                  </div>\r\n                  <div class=\"title\">\r\n                    <div class=\"title font-bold\">\r\n                      {{ propertyDetails?.Address }}\r\n                    </div>\r\n                    <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Address</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"notes card pl-0 pr-0 pt-0\">\r\n            <div class=\"card p-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Notes</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0 pt-0\">\r\n              <div class=\"textAreaControl mt-3\">\r\n                <textarea\r\n                  rows=\"5\"\r\n                  cols=\"30\"\r\n                  pInputTextarea\r\n                  #textArea\r\n                  [(ngModel)]=\"notes\"\r\n                >\r\n                </textarea>\r\n              </div>\r\n              <div class=\"buttons document-btn-wrapper flex mt-2\">\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Resubmission\"\r\n                  class=\"p-button-outlined mr-2\"\r\n                ></button>\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Accept\"\r\n                ></button>\r\n              </div>\r\n            </div>\r\n          </div>\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-header,.document-viewer .p-dialog-content{background-color:#ececf9}\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: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i5$1.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "directive", type: i7$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: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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    <div class=\"p-fluid p-formgrid grid m-0\">\r\n      <div class=\"col-12 md:col-12 md:flex justify-content-between\">\r\n        <div class=\"action col-12 p-0 md:col-2 no-grow-no-shrink\">\r\n          <p-listbox\r\n            [options]=\"countries\"\r\n            [filter]=\"true\"\r\n            [(ngModel)]=\"selectedCountry\"\r\n            optionLabel=\"name\"\r\n            [style]=\"{ width: '15rem' }\"\r\n            [listStyle]=\"{ 'max-height': '250px' }\"\r\n          >\r\n            <ng-template let-country pTemplate=\"item\">\r\n              <div class=\"flex align-items-center gap-2\">\r\n                <p-checkbox\r\n                  [(ngModel)]=\"country.checked\"\r\n                  [binary]=\"true\"\r\n                  [inputId]=\"country.code\"\r\n                ></p-checkbox>\r\n                <div>{{ country.name }}</div>\r\n              </div>\r\n            </ng-template>\r\n          </p-listbox>\r\n        </div>\r\n        @if(selectedDocument){\r\n\r\n        <div id=\"outerContainer col-12 md:col-7\">\r\n          <div\r\n            *ngIf=\"isImage(selectedDocument.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument.documentUrl\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument.contentType == \"application/pdf\"){\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: 55vw; height: 100vh\"\r\n            ></pdf-viewer>\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          <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\" >\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          <div class=\"summery mb-4 pb-1\">\r\n            <div class=\"card p-0 mb-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Summary</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0\" style=\"border-top-right-radius: 0px;border-top-left-radius: 0px;\" >\r\n              <p-timeline [value]=\"events\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  {{ event.status }}\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"propertyDetails\" class=\"property-details mb-4 pb-1\">\r\n            <div class=\"card mb-0\">\r\n              <h4 class=\"bold\" style=\"font-size: 21px; font-weight: bold;\">Property Details</h4>\r\n              <hr />\r\n              <div class=\"grid\">\r\n                <div class=\"col-12 md:col-12\">\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\" style=\"font-size: 21px; font-weight: bold;\">Detached House</div>\r\n                        <div class=\"decription\">\r\n                          {{ propertyDetails?.PropertyType }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Floors }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Floors</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/badroom.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Bedrooms }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Bedrooms</div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Kitchen }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Kitchen</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-12 flex ml-2 md:col-12\">\r\n                  <div class=\"img mr-2\">\r\n                    <img src=\"../../../../assets/icons/location.png\" alt=\"\" />\r\n                  </div>\r\n                  <div class=\"title\">\r\n                    <div class=\"title font-bold\">\r\n                      {{ propertyDetails?.Address }}\r\n                    </div>\r\n                    <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Address</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"notes card pl-0 pr-0 pt-0\">\r\n            <div class=\"card p-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Notes</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0 pt-0\">\r\n              <div class=\"textAreaControl mt-3\">\r\n                <textarea\r\n                  rows=\"5\"\r\n                  cols=\"30\"\r\n                  pInputTextarea\r\n                  #textArea\r\n                  [(ngModel)]=\"notes\"\r\n                >\r\n                </textarea>\r\n              </div>\r\n              <div class=\"buttons document-btn-wrapper flex mt-2\">\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Resubmission\"\r\n                  class=\"p-button-outlined mr-2\"\r\n                ></button>\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Accept\"\r\n                ></button>\r\n              </div>\r\n            </div>\r\n          </div>\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-header,.document-viewer .p-dialog-content{background-color:#ececf9}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { selectedDocument: [{
+            args: [{ selector: 'document-viewer', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"grid\">\r\n  <div class=\"col-12\">\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-7\">\r\n          <div\r\n            *ngIf=\"isImage(selectedDocument.contentType)\"\r\n            class=\"img-container\"\r\n          >\r\n            <img\r\n              [src]=\"selectedDocument.documentUrl\"\r\n              width=\"500\"\r\n              height=\"500\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument.contentType == \"application/pdf\"){\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: 55vw; height: 100vh\"\r\n            ></pdf-viewer>\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          <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\" >\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          <div class=\"summery mb-4 pb-1\">\r\n            <div class=\"card p-0 mb-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Summary</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0\" style=\"border-top-right-radius: 0px;border-top-left-radius: 0px;\" >\r\n              <p-timeline [value]=\"events\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  {{ event.status }}\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"propertyDetails\" class=\"property-details mb-4 pb-1\">\r\n            <div class=\"card mb-0\">\r\n              <h4 class=\"bold\" style=\"font-size: 21px; font-weight: bold;\">Property Details</h4>\r\n              <hr />\r\n              <div class=\"grid\">\r\n                <div class=\"col-12 md:col-12\">\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\" style=\"font-size: 21px; font-weight: bold;\">Detached House</div>\r\n                        <div class=\"decription\">\r\n                          {{ propertyDetails?.PropertyType }}\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Floors }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Floors</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"feild flex\">\r\n                    <div class=\"col-12 flex md:col-7\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/badroom.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Bedrooms }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Bedrooms</div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"col-12 flex md:col-5\">\r\n                      <div class=\"img mr-2\">\r\n                        <img\r\n                          src=\"../../../../assets/icons/building-icon.png\"\r\n                          alt=\"\"\r\n                        />\r\n                      </div>\r\n                      <div class=\"title\">\r\n                        <div class=\"title font-bold\">\r\n                          {{ propertyDetails?.Kitchen }}\r\n                        </div>\r\n                        <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Kitchen</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-12 flex ml-2 md:col-12\">\r\n                  <div class=\"img mr-2\">\r\n                    <img src=\"../../../../assets/icons/location.png\" alt=\"\" />\r\n                  </div>\r\n                  <div class=\"title\">\r\n                    <div class=\"title font-bold\">\r\n                      {{ propertyDetails?.Address }}\r\n                    </div>\r\n                    <div class=\"decription\" style=\"font-size: 21px; font-weight: bold;\">Address</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"notes card pl-0 pr-0 pt-0\">\r\n            <div class=\"card p-0\" style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\">\r\n              <div class=\"p-0\" >\r\n                <h4 class=\"m-0 pt-3 pl-3 mb-3\" style=\"font-size: 21px; font-weight: bold; \">Notes</h4>\r\n              </div>\r\n            </div>\r\n            <div class=\"card mb-0 pt-0\">\r\n              <div class=\"textAreaControl mt-3\">\r\n                <textarea\r\n                  rows=\"5\"\r\n                  cols=\"30\"\r\n                  pInputTextarea\r\n                  #textArea\r\n                  [(ngModel)]=\"notes\"\r\n                >\r\n                </textarea>\r\n              </div>\r\n              <div class=\"buttons document-btn-wrapper flex mt-2\">\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Resubmission\"\r\n                  class=\"p-button-outlined mr-2\"\r\n                ></button>\r\n                <button\r\n                  pButton\r\n                  pRipple\r\n                  type=\"button\"\r\n                  label=\"Accept\"\r\n                ></button>\r\n              </div>\r\n            </div>\r\n          </div>\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-header,.document-viewer .p-dialog-content{background-color:#ececf9}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentHttpService }], propDecorators: { selectedDocument: [{
                 type: Input
             }] } });
 
 /**
- * This component is responsible for displaying a list of documents.
+ * This component is responsible for displaying and managing a list of documents.
+ * Provides functionality for file upload, document selection, and dialog management.
  * @class DocumentListComponent
- * @typedef {DocumentListComponent}
  */
 class DocumentListComponent {
+    documentUploadService;
+    documentHttpService;
     /**
-     * Represent contextId
+     * Represents the context ID for the document list.
+     * This value is passed from the parent component.
      * @type {string}
+     * @memberof DocumentListComponent
      */
     contextId = SHARED.EMPTY;
+    /**
+     * The currently selected document.
+     * @type {DocumentModel}
+     * @memberof DocumentListComponent
+     */
     selectedDocument;
     /**
-     * Default visbility of sidebar
+     * Default visibility of the sidebar.
      * @type {boolean}
+     * @memberof DocumentListComponent
      */
     isSidebarVisible = SHARED.FALSE;
     /**
-     * Default visbility of dialog
+     * Default visibility of the dialog.
      * @type {boolean}
+     * @memberof DocumentListComponent
      */
     isdialogVisible = SHARED.FALSE;
     /**
      * The list of documents to display.
+     * This value is passed from the parent component.
      * @type {DocumentModel[]}
+     * @memberof DocumentListComponent
      */
-    documentList = [];
+    documentList = SHARED.EMPTY_ARRAY;
+    /**
+     * The name of the document being uploaded or managed.
+     * @type {string}
+     * @memberof DocumentListComponent
+     */
+    documentName = SHARED.EMPTY;
+    /**
+     * Available document types for selection.
+     * @type {string[]}
+     * @memberof DocumentListComponent
+     */
+    options = SHARED.EMPTY_ARRAY;
+    /**
+     * The selected option for the document type.
+     * @type {(string | null)}
+     * @memberof DocumentListComponent
+     */
+    selectedOption = null;
+    /**
+     * Creates an instance of DocumentListComponent.
+     * @class
+     * @param {DocumentUploadService} documentUploadService - The service responsible for uploading documents.
+     * @param {DocumentHttpService} documentHttpService - The service responsible for fetching documents from the server.
+     */
+    constructor(documentUploadService, documentHttpService) {
+        this.documentUploadService = documentUploadService;
+        this.documentHttpService = documentHttpService;
+    }
+    /**
+     * Initializes the component by fetching the document type list.
+     */
+    ngOnInit() {
+        this.getDocumentTypeList();
+    }
     /**
      * Handles the click event for file upload.
      * Prevents event propagation and displays the sidebar.
      * @param {MouseEvent} event - The click event triggered by the user.
+     * @memberof DocumentListComponent
      */
     handleFileUploadClick(event) {
         event.stopPropagation();
         this.isSidebarVisible = SHARED.TRUE;
     }
     /**
-     * Select a individual document.
-     * @param {*} docuemnt - The document that was clicked by the user.
+     * Handles the selection of an individual document.
+     * Opens a dialog to display or manage the selected document.
+     * @param {DocumentModel} document - The document that was clicked by the user.
+     * @memberof DocumentListComponent
      */
-    handleClickForDocument(docuemnt) {
+    handleClickForDocument(document) {
         this.isdialogVisible = SHARED.TRUE;
-        this.selectedDocument = docuemnt;
+        this.selectedDocument = document;
     }
     /**
-     * Close dialog.
+     * Closes the dialog and resets the selected document.
+     * @memberof DocumentListComponent
      */
     handleCloseModel() {
         this.selectedDocument = { _id: SHARED.INITIAL_VALUE };
         this.isdialogVisible = SHARED.FALSE;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentList: "documentList" }, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModel()\" [style]=\"{ width: '100vw' }\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\"></document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"col-12 p-0\">\r\n  <div class=\"card p-0 document-list-wrapper\">\r\n    <p-accordion>\r\n      <p-accordionTab [selected]=\"true\" class=\"line-height-2 m-0\">\r\n        <ng-template pTemplate=\"header\" let-active=\"active\">\r\n          <div class=\"flex  align-items-center justify-content-between w-full\">\r\n            <span class=\"flex align-items-center  gap-2\">\r\n              Documents\r\n            </span>\r\n            <button pButton pRipple class=\"p-button-raised\" type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n          </div>\r\n        </ng-template>\r\n        @for(document of documentList; track document){\r\n        <lib-document-list-item [document]=\"document\"\r\n          (documentClick)=\"handleClickForDocument($event)\"></lib-document-list-item>\r\n        }\r\n      </p-accordionTab>\r\n    </p-accordion>\r\n  </div>\r\n</div>\r\n<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\">\r\n      <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\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%}\n"], dependencies: [{ kind: "component", type: i1$2.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i1$2.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i4$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i5$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: DocumentListItemComponent, selector: "lib-document-list-item", inputs: ["document"], outputs: ["documentClick"] }, { kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"], outputs: ["onInput"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument"] }], encapsulation: i0.ViewEncapsulation.None });
+    /**
+     * Handles the upload action for a document.
+     * Validates if a document type is selected and logs the result.
+     * @memberof DocumentListComponent
+     */
+    handleUploadDocument() {
+        if (this.selectedOption) {
+            this.documentUploadService.getDocumentNameAndType(this.documentName, this.selectedOption);
+            this.documentUploadService.handleTemplatedUpload();
+        }
+        else {
+            console.error(ERRORS.INVALID_RECIPIENT);
+        }
+    }
+    /**
+     * Fetches the list of document types from the server.
+     * Updates the options array with the available document types.
+     * @memberof DocumentListComponent
+     * @returns {void}
+     */
+    getDocumentTypeList() {
+        this.documentHttpService.getDocumentTypes().subscribe({
+            /**
+             * Handles the successful API response.
+             * @param {DocumentTypeModel[]} documentTypes - The list of document types returned by the API.
+             */
+            next: (documentTypes) => {
+                if (documentTypes) {
+                    this.options = documentTypes.map((doc) => ({
+                        label: doc.label,
+                        value: doc._id
+                    }));
+                }
+                else {
+                    console.error(ERRORS.ERROR_ALLDOCUMENT_MISSING, documentTypes);
+                }
+            },
+            /**
+             * Handles errors if the request fails.
+             * @param {any} err - The error object returned by the server.
+             */
+            error: (err) => {
+                console.error(ERRORS.ERROR_DOCUMENT_TYPES, err);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentUploadService }, { token: DocumentHttpService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentList: "documentList" }, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModel()\" [style]=\"{ width: '100vw' }\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\"></document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"col-12 p-0\">\r\n  <div class=\"card p-0 document-list-wrapper\">\r\n    <p-accordion>\r\n      <p-accordionTab [selected]=\"true\" class=\"line-height-2 m-0\">\r\n        <ng-template pTemplate=\"header\" let-active=\"active\">\r\n          <div class=\"flex  align-items-center justify-content-between w-full\">\r\n            <span class=\"flex align-items-center  gap-2\">\r\n              Documents\r\n            </span>\r\n            <button pButton pRipple class=\"p-button-raised\" type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n          </div>\r\n        </ng-template>\r\n        @for(document of documentList; track document){\r\n        <lib-document-list-item [document]=\"document\"\r\n          (documentClick)=\"handleClickForDocument($event)\"></lib-document-list-item>\r\n        }\r\n      </p-accordionTab>\r\n    </p-accordion>\r\n  </div>\r\n</div>\r\n<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <p-sidebar  [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative sidebar-panel-wrapper\">\r\n      <ng-template pTemplate=\"header\">\r\n          <p-messages />\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=\"username\">Document Name</label>\r\n              <input type=\"text\" pInputText [(ngModel)]=\"documentName\" placeholder=\"Proof of Identity\" />\r\n            </div>\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-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 .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}::ng-deep .custom-sidebar-overlay{z-index:0!important}::ng-deep .sidebar-panel-wrapper .p-sidebar-header{padding:1.4rem 1rem}::ng-deep .sidebar-panel-wrapper .p-sidebar-content{padding:0}::ng-deep .sidebar-panel-wrapper .p-sidebar-right{width:35%!important}::ng-deep .sidebar-devider .p-divider{margin:0}::ng-deep .p-component-overlay{background-color:#f4f4f7!important}\n"], dependencies: [{ kind: "component", type: i3$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i3$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i5.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: i6$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i7$2.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i7$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: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.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: i10.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: i11.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: DocumentListItemComponent, selector: "lib-document-list-item", inputs: ["document"], outputs: ["documentClick"] }, { kind: "component", type: DocumentUploadComponent, selector: "lib-document-upload", inputs: ["contextId"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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\" (onHide)=\"handleCloseModel()\" [style]=\"{ width: '100vw' }\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\"></document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"col-12 p-0\">\r\n  <div class=\"card p-0 document-list-wrapper\">\r\n    <p-accordion>\r\n      <p-accordionTab [selected]=\"true\" class=\"line-height-2 m-0\">\r\n        <ng-template pTemplate=\"header\" let-active=\"active\">\r\n          <div class=\"flex  align-items-center justify-content-between w-full\">\r\n            <span class=\"flex align-items-center  gap-2\">\r\n              Documents\r\n            </span>\r\n            <button pButton pRipple class=\"p-button-raised\" type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n          </div>\r\n        </ng-template>\r\n        @for(document of documentList; track document){\r\n        <lib-document-list-item [document]=\"document\"\r\n          (documentClick)=\"handleClickForDocument($event)\"></lib-document-list-item>\r\n        }\r\n      </p-accordionTab>\r\n    </p-accordion>\r\n  </div>\r\n</div>\r\n<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\">\r\n      <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\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%}\n"] }]
-        }], propDecorators: { contextId: [{
+            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModel()\" [style]=\"{ width: '100vw' }\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\"></document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"col-12 p-0\">\r\n  <div class=\"card p-0 document-list-wrapper\">\r\n    <p-accordion>\r\n      <p-accordionTab [selected]=\"true\" class=\"line-height-2 m-0\">\r\n        <ng-template pTemplate=\"header\" let-active=\"active\">\r\n          <div class=\"flex  align-items-center justify-content-between w-full\">\r\n            <span class=\"flex align-items-center  gap-2\">\r\n              Documents\r\n            </span>\r\n            <button pButton pRipple class=\"p-button-raised\" type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n          </div>\r\n        </ng-template>\r\n        @for(document of documentList; track document){\r\n        <lib-document-list-item [document]=\"document\"\r\n          (documentClick)=\"handleClickForDocument($event)\"></lib-document-list-item>\r\n        }\r\n      </p-accordionTab>\r\n    </p-accordion>\r\n  </div>\r\n</div>\r\n<div class=\"grid\">\r\n  <div class=\"col-12\">\r\n    <p-sidebar  [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative sidebar-panel-wrapper\">\r\n      <ng-template pTemplate=\"header\">\r\n          <p-messages />\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=\"username\">Document Name</label>\r\n              <input type=\"text\" pInputText [(ngModel)]=\"documentName\" placeholder=\"Proof of Identity\" />\r\n            </div>\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-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 .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}::ng-deep .custom-sidebar-overlay{z-index:0!important}::ng-deep .sidebar-panel-wrapper .p-sidebar-header{padding:1.4rem 1rem}::ng-deep .sidebar-panel-wrapper .p-sidebar-content{padding:0}::ng-deep .sidebar-panel-wrapper .p-sidebar-right{width:35%!important}::ng-deep .sidebar-devider .p-divider{margin:0}::ng-deep .p-component-overlay{background-color:#f4f4f7!important}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentHttpService }], propDecorators: { contextId: [{
                 type: Input
             }], documentList: [{
                 type: Input
@@ -958,24 +1445,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  */
 class DocumentContainerComponent {
     documentService;
+    documentQuery;
+    documentHttpService;
     /**
      * Creates an instance of DocumentContainerComponent.
-     * @class
      * @param {DocumentService} documentService - Service to manage document-related operations.
+     * @param {DocumentQuery} documentQuery - Query service to manage document-related state.
+     * @param {DocumentHttpService} documentHttpService - Service to make HTTP requests related to documents.
      */
-    constructor(documentService) {
+    constructor(documentService, documentQuery, documentHttpService) {
         this.documentService = documentService;
+        this.documentQuery = documentQuery;
+        this.documentHttpService = documentHttpService;
     }
     /**
      * Get contextId in input.
      * @type {string}
      */
-    contextId = SHARED.EMPTY;
+    contextId = '786756';
     /**
-     * The list of dummy documents.
+     * The list of documents.
      * @type {Array}
      */
     documentList = [];
+    /**
+     * The list of folders.
+     * @type {Array}
+     */
+    folderList = SHARED.EMPTY_ARRAY;
     /**
      * Holds the subscription to manage observable cleanup.
      * @private
@@ -983,28 +1480,75 @@ class DocumentContainerComponent {
      */
     subscription = new Subscription();
     /**
-     * Call document service method to get the document by contextId.
+     * Fetches the folder and document data on initialization.
+     * @returns {void}
      */
     ngOnInit() {
-        const documentSubscription = this.documentService
-            .getById(`${URLS.CONTEXT}${this.contextId}`)
-            .subscribe({
+        this.fetchFolder();
+        const folderSubscription = this.documentQuery
+            .selectParentDocumentTypeId()
+            .subscribe((folderBlockId) => {
+            const idToFetch = folderBlockId ?? this.folderList[0]?._id;
+            if (idToFetch) {
+                this.fetchDocuments(idToFetch);
+            }
+        });
+        this.subscription.add(folderSubscription);
+    }
+    /**
+     * Fetches the folder data from the API.
+     * @returns {void}
+     */
+    fetchFolder() {
+        const folderSubscription = this.documentHttpService.getFoldersData(this.contextId).subscribe({
+            /**
+             * Handles the successful API response.
+             * @param {FolderBlockModel[]} folder - The list of folders returned by the API.
+             */
+            next: (folder) => {
+                if (folder && folder.length > 0) {
+                    this.folderList = folder;
+                    this.fetchDocuments(this.folderList[0]._id);
+                }
+                else {
+                    console.error(ERRORS.ERROR_ALLDOCUMENT_MISSING);
+                }
+            },
+            /**
+             * Handles errors if the request fails.
+             * @param {any} err - The error object returned by the server.
+             */
+            error: (err) => {
+                console.error(ERRORS.ERROR_DOCUMENT_TYPES, err);
+            }
+        });
+        this.subscription.add(folderSubscription);
+    }
+    /**
+     * Fetches the document data from the API.
+     * @param {string} folderBlockId - The folder ID to fetch the document.
+     * @returns {void}
+     */
+    fetchDocuments(folderBlockId) {
+        const documentSubscription = this.documentHttpService.getDocumentByFolderID(folderBlockId, this.contextId).subscribe({
             /**
              * Handles the successful API response.
-             * @param {DocumentModel[]} res - The list of documents returned by the API.
+             * @param {DocumentModel[]} documentList - The list of documents returned by the API.
              */
-            next: (res) => {
-                if (res) {
-                    this.documentList = res;
+            next: (documentList) => {
+                if (documentList) {
+                    this.documentList = documentList;
+                }
+                else {
+                    console.error(ERRORS.ERROR_FETCHING_DOCUMENTS);
                 }
             },
             /**
-             * Handles errors that occur during the API call.
-             * Logs the error to the console.
-             * @param {any} err - The error object returned from the API.
+             * Handles errors if the request fails.
+             * @param {any} err - The error object returned by the server.
              */
             error: (err) => {
-                throw new Error(err);
+                console.error(ERRORS.ERROR_FETCHING_DOCUMENTS, err);
             }
         });
         this.subscription.add(documentSubscription);
@@ -1015,13 +1559,13 @@ class DocumentContainerComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId" }, ngImport: i0, template: "<div class=\"grid m-0\">\r\n    <div class=\"col-12 md:col-12 lg:col-12 overflow-y-scroll py-0 pl-0\" >\r\n      <lib-folder-container [documentList]=\"documentList\"></lib-folder-container>\r\n      <lib-document-list [documentList]=\"documentList\"></lib-document-list>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentList"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentService }, { token: DocumentQuery }, { token: DocumentHttpService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId" }, ngImport: i0, template: "<div class=\"grid m-0\">\r\n    <div class=\"col-12 md:col-12 lg:col-12 py-0 pl-0\" >\r\n      <lib-folder-container [documentList]=\"documentList\" [folderList]=\"folderList\" [contextId]=\"contextId\"></lib-folder-container>\r\n      <lib-document-list [documentList]=\"documentList\" [contextId]=\"contextId\"></lib-document-list>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentList"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-container', standalone: false, template: "<div class=\"grid m-0\">\r\n    <div class=\"col-12 md:col-12 lg:col-12 overflow-y-scroll py-0 pl-0\" >\r\n      <lib-folder-container [documentList]=\"documentList\"></lib-folder-container>\r\n      <lib-document-list [documentList]=\"documentList\"></lib-document-list>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: DocumentService }], propDecorators: { contextId: [{
+            args: [{ selector: 'lib-document-container', standalone: false, template: "<div class=\"grid m-0\">\r\n    <div class=\"col-12 md:col-12 lg:col-12 py-0 pl-0\" >\r\n      <lib-folder-container [documentList]=\"documentList\" [folderList]=\"folderList\" [contextId]=\"contextId\"></lib-folder-container>\r\n      <lib-document-list [documentList]=\"documentList\" [contextId]=\"contextId\"></lib-document-list>\r\n    </div>\r\n</div>" }]
+        }], ctorParameters: () => [{ type: DocumentService }, { type: DocumentQuery }, { type: DocumentHttpService }], propDecorators: { contextId: [{
                 type: Input
             }] } });
 
@@ -1160,7 +1704,15 @@ class DocumentModule {
             /**
              * PrimeNG DialogModule is used for showing dialog.
              */
-            DialogModule], exports: [
+            DialogModule,
+            /**
+             * PrimeNG DropdownModule is used for creating dropdown menus, allowing users to select options from a list.
+             */
+            DropdownModule,
+            /**
+             * PrimeNG InputTextModule is used for creating InputTextFeilds, allowing users to enter name for a document.
+             */
+            InputTextModule], exports: [
             /**
              * Exports the `DocumentContainerComponent` to be used in other modules.
              */
@@ -1189,6 +1741,10 @@ class DocumentModule {
                 provide: APP_INITIALIZER,
                 /**
                  * This useFactory is executed when the app initializes.
+                 * It calls the AppConfigService to load the configuration.
+                 * If an error occurs, it throws an error.
+                 * @param {AppConfigService} configService - The service responsible for loading the application configuration.
+                 * @returns {Function} - A function that loads the configuration from the AppConfigService.
                  */
                 useFactory: (configService) => () => configService.loadAppConfig().catch((error) => {
                     throw new Error(error);
@@ -1256,7 +1812,15 @@ class DocumentModule {
             /**
              * PrimeNG DialogModule is used for showing dialog.
              */
-            DialogModule] });
+            DialogModule,
+            /**
+             * PrimeNG DropdownModule is used for creating dropdown menus, allowing users to select options from a list.
+             */
+            DropdownModule,
+            /**
+             * PrimeNG InputTextModule is used for creating InputTextFeilds, allowing users to enter name for a document.
+             */
+            InputTextModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentModule, decorators: [{
             type: NgModule,
@@ -1356,7 +1920,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         /**
                          * PrimeNG DialogModule is used for showing dialog.
                          */
-                        DialogModule
+                        DialogModule,
+                        /**
+                         * PrimeNG DropdownModule is used for creating dropdown menus, allowing users to select options from a list.
+                         */
+                        DropdownModule,
+                        /**
+                         * PrimeNG InputTextModule is used for creating InputTextFeilds, allowing users to enter name for a document.
+                         */
+                        InputTextModule
                     ],
                     exports: [
                         /**
@@ -1388,6 +1960,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             provide: APP_INITIALIZER,
                             /**
                              * This useFactory is executed when the app initializes.
+                             * It calls the AppConfigService to load the configuration.
+                             * If an error occurs, it throws an error.
+                             * @param {AppConfigService} configService - The service responsible for loading the application configuration.
+                             * @returns {Function} - A function that loads the configuration from the AppConfigService.
                              */
                             useFactory: (configService) => () => configService.loadAppConfig().catch((error) => {
                                 throw new Error(error);