cat-documents-ng 0.1.31 → 0.1.32

package/fesm2022/cat-documents-ng.mjs

@@ -2,35 +2,35 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, Input, EventEmitter, Output, ViewEncapsulation, ViewChild, Directive, APP_INITIALIZER, NgModule } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { firstValueFrom, tap, EMPTY, catchError, throwError, BehaviorSubject, Subscription } from 'rxjs';
+import { firstValueFrom, tap, EMPTY, catchError, throwError, BehaviorSubject, Subscription, Subject, takeUntil } from 'rxjs';
 import { __decorate } from 'tslib';
 import { EntityStore, StoreConfig, QueryEntity } from '@datorama/akita';
 import * as i2 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import * as i3 from 'primeng/api';
 import { MessageService } from 'primeng/api';
-import * as i5$1 from 'primeng/accordion';
+import * as i1 from '@angular/router';
+import * as i7$1 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
-import * as i7 from 'primeng/button';
+import * as i9 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i8$1 from 'primeng/sidebar';
+import * as i10 from 'primeng/sidebar';
 import { SidebarModule } from 'primeng/sidebar';
-import * as i9 from 'primeng/messages';
-import * as i10 from '@angular/forms';
+import * as i11 from 'primeng/messages';
+import * as i12 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i11 from 'primeng/dialog';
+import * as i13 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
-import * as i12 from 'primeng/dropdown';
+import * as i14 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
-import * as i13 from 'primeng/inputtext';
+import * as i15 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import * as i7$1 from 'primeng/fileupload';
+import * as i7 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i8 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import * as i4 from 'ng2-pdf-viewer';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
-import * as i1 from '@angular/router';
 import { BadgeModule } from 'primeng/badge';
 import { ListboxModule } from 'primeng/listbox';
 import { TimelineModule } from 'primeng/timeline';
@@ -180,6 +180,12 @@ class SHARED {
      * @type {string}
      */
     static UPDATE_DOCUMENT_NAME = 'Document name updated for ID:';
+    /**
+     * Identifier used to reference the file input element (e.g., for ViewChild or DOM access).
+     * @static
+     * @type {string}
+     */
+    static FILE_INPUT = 'fileInput';
 }
 /**
  * `DUMMYDOCUMENTLIST` is a mock list of document objects used for testing and development purposes.
@@ -356,6 +362,13 @@ class ERRORS {
      * @type {string}
      */
     static ERROR_DOCUMENT_TYPES = "Error fetching document types:";
+    /**
+     * Error message when the file name contains invalid characters.
+     * Disallowed characters: <, >, :, ", /, \, |, ?, *
+     * @static
+     * @type {string}
+     */
+    static ERROR_INVALID_FILENAME_CHARACTERS = 'File name contains invalid characters: <, >, :, ", /, \\, |, ?, *';
 }
 
 /**
@@ -376,7 +389,9 @@ function createInitialState() {
         documentAlert: { _id: '' },
         folders: [],
         messages: [],
-        documentList: []
+        documentList: [],
+        selectedDocument: '',
+        isDocumentUpdated: null
     };
 }
 
@@ -415,6 +430,12 @@ let DocumentStore = class DocumentStore extends EntityStore {
     setDocumentList(documents) {
         this.update({ documents: documents });
     }
+    setSelectedDocument(selectedDocument) {
+        this.update({ selectedDocument: selectedDocument });
+    }
+    setIsDocumentUpdated(isDocumentUpdated) {
+        this.update({ isDocumentUpdated: isDocumentUpdated });
+    }
     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' });
 };
@@ -678,6 +699,20 @@ class DocumentQuery extends QueryEntity {
     selectDocumets() {
         return this.select((state) => state.documentList);
     }
+    /**
+     * Retrieves the currently selected document from the store state.
+     * @returns {Observable<any>} Observable that emits the selected document.
+     */
+    getSelectedDocument() {
+        return this.select((state) => state['selectedDocument']);
+    }
+    /**
+     * Retrieves the flag indicating whether a document has been updated.
+     * @returns {Observable<any>} Observable that emits a boolean or status flag.
+     */
+    getIsDocumentUpdated() {
+        return this.select((state) => state['isDocumentUpdated']);
+    }
     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' });
 }
@@ -888,6 +923,12 @@ class PERMISSIONS {
      * @type {string}
      */
     static DOCUMENT_POST = 'Documents-POST';
+    /**
+     * Access permission for updating existing documents.
+     * @static
+     * @type {string}
+     */
+    static DOCUMENT_PUT = 'Documents-PUT';
 }
 
 /**
@@ -1013,6 +1054,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: DocumentService$1 }, { type: DocumentStore }, { type: i3.MessageService }] });
 
+/**
+ * Service for managing user session details.
+ * @class SessionService
+ * @typedef {SessionService}
+ */
+class SessionService {
+    router;
+    /**
+     * Creates an instance of SessionService.
+     * @param {Router} router - Angular Router for navigation.
+     */
+    constructor(router) {
+        this.router = router;
+    }
+    /**
+     * Retrieves the current user's role from local storage.
+     * @returns {string | null} The user's role, or null if not found.
+     */
+    getUserRole() {
+        return localStorage.getItem('role');
+    }
+    /**
+     * Stores the user session data in local storage.
+     * @param {any} data - The session data to store.
+     */
+    setUserSession(data) {
+        localStorage.setItem(SHARED.SESSIONKEY, JSON.stringify(data));
+    }
+    /**
+     * Retrieves the stored user session data.
+     * @returns {any | null} The parsed session data, or null if not found.
+     */
+    getUserSession() {
+        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
+        return sessionData ? JSON.parse(sessionData) : null;
+    }
+    /**
+     * Retrieves the user's permissions from the stored session data.
+     * @returns {any | null} The user's permissions, or null if not found.
+     */
+    getUserPermissions() {
+        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
+        return sessionData ? JSON.parse(sessionData).permissions : null;
+    }
+    /**
+     * Retrieves the session ID from the stored session data.
+     * @returns {any | null} The session ID, or null if not found.
+     */
+    getSessionID() {
+        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
+        console.log(sessionData);
+        if (sessionData) {
+            const sessionId = JSON.parse(sessionData);
+            console.log(sessionId);
+            return sessionId;
+        }
+        return null;
+    }
+    /**
+     * Clears all stored session data from local storage.
+     */
+    clearSession() {
+        localStorage.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Router }] });
+
 /**
  * DocumentListItemComponent
  *
@@ -1042,11 +1157,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 m-0\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-12 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 file-name-wrapper document-text-wrapper\">{{ 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() === '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 class=\"document-type file-name-wrapper document-text-wrapper\">\r\n        {{document.documentTypeName}}\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}.file-name-wrapper{font-size:15px;font-weight:500}.document-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i5.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 m-0\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-12 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 file-name-wrapper document-text-wrapper\">{{ document.documentName }}</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() === '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 class=\"document-type file-name-wrapper document-text-wrapper\">\r\n        {{document.documentTypeName}}\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}.file-name-wrapper{font-size:15px;font-weight:500}.document-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i5.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 m-0\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-12 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 file-name-wrapper document-text-wrapper\">{{ 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() === '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 class=\"document-type file-name-wrapper document-text-wrapper\">\r\n        {{document.documentTypeName}}\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}.file-name-wrapper{font-size:15px;font-weight:500}.document-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'lib-document-list-item', standalone: false, template: "<div class=\"grid m-0\">\r\n    <div\r\n      class=\"col-12 flex align-items-center justify-content-between md:col-12 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 file-name-wrapper document-text-wrapper\">{{ document.documentName }}</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() === '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 class=\"document-type file-name-wrapper document-text-wrapper\">\r\n        {{document.documentTypeName}}\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}.file-name-wrapper{font-size:15px;font-weight:500}.document-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { documentClick: [{
                 type: Output
             }], document: [{
@@ -1236,7 +1351,7 @@ class DocumentUploadComponent {
         this.fileUploader.choose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentUploadComponent, deps: [{ token: DocumentUploadService }, { token: DocumentService$1 }, { 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=\"26214400\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n          <div class=\"flex gap-2\">\r\n            <p-button (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-images\" [rounded]=\"true\"\r\n              [outlined]=\"true\" />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n        let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n        <div class=\"col-12 md:col-12 p-0\">\r\n          <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n            <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n              class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n              <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                <div class=\"documentImage\">\r\n                  <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                    class=\"object-contain\" />\r\n                </div>\r\n                <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                  <div class=\"flex justify-content-between\">\r\n                    <div style=\" font-weight: bold;font-size: 14px\">\r\n                      {{ uploadedFile.file.name }}\r\n                    </div>\r\n                    <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                  </div>\r\n                  <div class=\"flex justify-content-between mt-1\">\r\n                    <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified \"> {{ uploadedFile.formattedSize }}</div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> {{ uploadedFile.progress }} %</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"col-12 md:col-12 p-0\">\r\n                <p-progressBar [value]=\"totalSizePercent\" [showValue]=\"false\" styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                  [ngClass]=\"{ 'exceeded-progress-bar': totalSizePercent > 100 }\">\r\n                </p-progressBar>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n        <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n          (click)=\"triggerFileUpload()\">\r\n          <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n          <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"file\"> </ng-template>\r\n    </p-fileUpload>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7.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$1.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 });
+    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=\"26214400\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template pTemplate=\"header\" let-chooseCallback=\"chooseCallback\" let-clearCallback=\"clearCallback\">\r\n        <div class=\"docHeader p-2 flex flex-wrap justify-content-between align-items-center flex-1 gap-2\">\r\n          <div class=\"flex gap-2\">\r\n            <p-button (onClick)=\"choose($event, chooseCallback)\" icon=\"pi pi-images\" [rounded]=\"true\"\r\n              [outlined]=\"true\" />\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\" let-removeFileCallback=\"removeFileCallback\"\r\n        let-removeUploadedFileCallback=\"removeUploadedFileCallback\">\r\n        <div class=\"col-12 md:col-12 p-0\">\r\n          <div class=\"col-12 md:col-12 p-0\" *ngIf=\"uploadedFiles.length > 0\">\r\n            <div *ngFor=\"let uploadedFile of uploadedFiles; let i = index\"\r\n              class=\"m-0 flex flex-column align-items-center gap-1 mt-3\">\r\n              <div class=\"col-12 md:col-12 p-0 flex documentInfo\">\r\n                <div class=\"documentImage\">\r\n                  <img src=\"../../../../assets/images/document.png\" [alt]=\"uploadedFile.file.name\" width=\"45\" height=\"50\"\r\n                    class=\"object-contain\" />\r\n                </div>\r\n                <div class=\"flex w-full flex-column mt-2 ml-2\">\r\n                  <div class=\"flex justify-content-between\">\r\n                    <div style=\" font-weight: bold;font-size: 14px\">\r\n                      {{ uploadedFile.file.name }}\r\n                    </div>\r\n                    <i class=\"pi pi-times cursor-pointer\" (click)=\"handleDocumentRemove(uploadedFile.file,i)\"></i>\r\n                  </div>\r\n                  <div class=\"flex justify-content-between mt-1\">\r\n                    <div style=\"color: #676B89; font-size: 12px; color: green;\" class=\"pi pi-verified \"> {{ uploadedFile.formattedSize }}</div>\r\n                    <div class=\"white-space-nowrap\" style=\"color: #0F8BFD; font-family: 14px;\"> {{ uploadedFile.progress }} %</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"col-12 md:col-12 p-0\">\r\n                <p-progressBar [value]=\"totalSizePercent\" [showValue]=\"false\" styleClass=\"h-1/2rem md:ml-auto relative\"\r\n                  [ngClass]=\"{ 'exceeded-progress-bar': totalSizePercent > 100 }\">\r\n                </p-progressBar>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"empty\" let-chooseCallback=\"chooseCallback\">\r\n        <div *ngIf=\"!uploadedFiles.length\" class=\"flex align-items-center justify-content-center flex-column\"\r\n          (click)=\"triggerFileUpload()\">\r\n          <i class=\"pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400\"></i>\r\n          <p class=\"mt-4 mb-0\">Drag and drop files here to upload.</p>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"file\"> </ng-template>\r\n    </p-fileUpload>\r\n  </div>\r\n</div>", styles: [".flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.flex-col{flex-direction:column}.text-muted-color{color:#6c757d}.p-fileupload-buttonbar{padding:0}.p-fileupload-content{background-color:#0f8bfd1a}.p-fileupload .p-fileupload-content{padding:1rem}.docHeader .p-button-icon{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.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,
@@ -1313,11 +1428,11 @@ class LinkedDocumentComponent {
         this.selectedDocumentChange.emit(this.selectedDocument);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinkedDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LinkedDocumentComponent, isStandalone: false, selector: "app-linked-document", inputs: { selectedDocument: "selectedDocument", documentList: "documentList" }, outputs: { selectedDocumentChange: "selectedDocumentChange" }, ngImport: i0, template: "<div class=\"summary-card mb-4 pb-1\">\r\n    <div class=\"card p-0 mb-0\"\r\n      style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; background-color: #F9fafb;\">\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; \">Linked Documents</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      @for(document of documentList; track document){\r\n        <div class=\"linkedDocument documentName m-2\">\r\n          <div class=\"documentName\"         [class.selected]=\"document._id === selectedDocument?._id\"\r\n          (click)=\"handleDocumentClick(document)\">\r\n            <span class=\"pi pi-link\"></span>\r\n            {{document.fileName}}\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  ", styles: [".documentName{font-family:inherit;text-decoration:underline;cursor:pointer;width:max-content}.selected{color:var(--primary-color)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LinkedDocumentComponent, isStandalone: false, selector: "app-linked-document", inputs: { selectedDocument: "selectedDocument", documentList: "documentList" }, outputs: { selectedDocumentChange: "selectedDocumentChange" }, ngImport: i0, template: "<div class=\"summary-card mb-4 pb-1\">\r\n    <div class=\"card p-0 mb-0\"\r\n      style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; background-color: #F9fafb;\">\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; \">Linked Documents</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      @for(document of documentList; track document){\r\n        <div class=\"linkedDocument documentName m-2\">\r\n          <div class=\"documentName\"         [class.selected]=\"document._id === selectedDocument?._id\"\r\n          (click)=\"handleDocumentClick(document)\">\r\n            <span class=\"pi pi-link\"></span>\r\n            {{document.documentName}}\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  ", styles: [".documentName{font-family:inherit;text-decoration:underline;cursor:pointer;width:max-content}.selected{color:var(--primary-color)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LinkedDocumentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-linked-document', standalone: false, template: "<div class=\"summary-card mb-4 pb-1\">\r\n    <div class=\"card p-0 mb-0\"\r\n      style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; background-color: #F9fafb;\">\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; \">Linked Documents</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      @for(document of documentList; track document){\r\n        <div class=\"linkedDocument documentName m-2\">\r\n          <div class=\"documentName\"         [class.selected]=\"document._id === selectedDocument?._id\"\r\n          (click)=\"handleDocumentClick(document)\">\r\n            <span class=\"pi pi-link\"></span>\r\n            {{document.fileName}}\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  ", styles: [".documentName{font-family:inherit;text-decoration:underline;cursor:pointer;width:max-content}.selected{color:var(--primary-color)}\n"] }]
+            args: [{ selector: 'app-linked-document', standalone: false, template: "<div class=\"summary-card mb-4 pb-1\">\r\n    <div class=\"card p-0 mb-0\"\r\n      style=\"border-bottom: 1px solid;border-color: rgba(68, 72, 109, 0.2); border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; background-color: #F9fafb;\">\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; \">Linked Documents</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      @for(document of documentList; track document){\r\n        <div class=\"linkedDocument documentName m-2\">\r\n          <div class=\"documentName\"         [class.selected]=\"document._id === selectedDocument?._id\"\r\n          (click)=\"handleDocumentClick(document)\">\r\n            <span class=\"pi pi-link\"></span>\r\n            {{document.documentName}}\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  ", styles: [".documentName{font-family:inherit;text-decoration:underline;cursor:pointer;width:max-content}.selected{color:var(--primary-color)}\n"] }]
         }], propDecorators: { selectedDocument: [{
                 type: Input
             }], documentList: [{
@@ -1364,6 +1479,11 @@ class DocumentViewerComponent {
      * @type {any}
      */
     alertData;
+    /**
+     * Emits the updated document after changes like upload, rename, or replace.
+     * @type {EventEmitter<DocumentModel>}
+     */
+    updatedDocument = new EventEmitter();
     /**
      * Holds the subscription to manage observable cleanup.
      * @private
@@ -1391,6 +1511,7 @@ class DocumentViewerComponent {
     }
     handleSelectedDocument(document) {
         this.selectedDocument = document;
+        this.updatedDocument.emit({ ...document });
         this.documentService.set(this.selectedDocument);
     }
     /**
@@ -1405,91 +1526,19 @@ class DocumentViewerComponent {
         this.subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentViewerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentService }], 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", documentList: "documentList" }, 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              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && 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: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n        <ng-content></ng-content>\r\n        <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: LinkedDocumentComponent, selector: "app-linked-document", inputs: ["selectedDocument", "documentList"], outputs: ["selectedDocumentChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentViewerComponent, isStandalone: false, selector: "document-viewer", inputs: { selectedDocument: "selectedDocument", documentList: "documentList" }, outputs: { updatedDocument: "updatedDocument" }, 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              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && 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: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 p-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\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n        <ng-content select=\"[action-launcher]\"></ng-content>\r\n        <ng-content></ng-content>\r\n        <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header{background-color:#fff;border-radius:0;border-bottom:.771px solid rgba(68,72,109,.1);align-items:start!important}.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain;border-radius:10px;padding:22px;background:#f7f8fa;border:1px solid #F0F0F0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.PdfViewerComponent, selector: "pdf-viewer", inputs: ["src", "c-maps-url", "page", "render-text", "render-text-mode", "original-size", "show-all", "stick-to-page", "zoom", "zoom-scale", "rotation", "external-link-target", "autoresize", "fit-to-page", "show-borders"], outputs: ["after-load-complete", "page-rendered", "pages-initialized", "text-layer-rendered", "error", "on-progress", "pageChange"] }, { kind: "component", type: LinkedDocumentComponent, selector: "app-linked-document", inputs: ["selectedDocument", "documentList"], outputs: ["selectedDocumentChange"] }], 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-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              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && 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: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 pt-0\">\r\n          <div class=\"alerts mb-4 pb-1\">\r\n            <button\r\n              type=\"button\"\r\n              *ngIf=\"\r\n                (alertData?.status !== 'Pending' && !!alertData?.status) ||\r\n                alertData?.isAlert === false\r\n              \"\r\n              class=\"bg-green-500 border-none border-round-md flex align-items-center mb-3 p-2 px-3\"\r\n            >\r\n              <i\r\n                class=\"pi pi-verified mr-2 cursor-pointer\"\r\n                [ngStyle]=\"{\r\n                  color:\r\n                    alertData?.status === 'Pending' &&\r\n                    alertData?.isAlert !== false\r\n                      ? '#FFFFFF'\r\n                      : '#8A8EA6'\r\n                }\"\r\n                style=\"font-size: 20px\"\r\n              ></i>\r\n              <span class=\"font-semibold text-white\">Verified</span>\r\n            </button>\r\n            <div\r\n              class=\"card mb-0\"\r\n              [ngClass]=\"\r\n                (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                alertData?.isAlert !== false\r\n                  ? 'alert-card'\r\n                  : 'success-alert'\r\n              \"\r\n            >\r\n              <div class=\"flex align-items-center mb-2 pb-1\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n        <ng-content></ng-content>\r\n        <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header,.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain}\n"] }]
+            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              class=\"uploadedImages\"\r\n              alt=\"Document Image\"\r\n            />\r\n          </div>\r\n          @if(selectedDocument?.contentType && 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: 50vw; height: 75vh\"\r\n            ></pdf-viewer>\r\n          </div>\r\n          }@else{\r\n            <div class=\"incorrect-docType\">\r\n              ContentType is incorrect.\r\n            </div>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"left-part col-12 md:col-3 p-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\" *ngIf=\"alertData?.status !== 'Verified'\">\r\n                <h4 class=\"mr-3 mt-0 mb-0 text-color font-bold\" style=\"font-size: 21px; font-weight: bold; border-color: rgba(68, 72, 109, 0.2) ;\" >Alerts</h4>\r\n                <i\r\n                  class=\"pi pi-exclamation-triangle\"\r\n                  style=\"font-size: 20px\"\r\n                  [ngStyle]=\"{\r\n                    color:\r\n                      (alertData?.status === 'Pending' || !alertData?.status) &&\r\n                      alertData?.isAlert !== false\r\n                        ? '#FB392D'\r\n                        : '#8A8EA6'\r\n                  }\"\r\n                ></i>\r\n              </div>\r\n              <p class=\"text-color mb-0\">{{ alertData?.alertMessage }}</p>\r\n            </div>\r\n          </div>\r\n        <ng-content select=\"[action-launcher]\"></ng-content>\r\n        <ng-content></ng-content>\r\n        <app-linked-document (selectedDocumentChange)=\"handleSelectedDocument($event)\" [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\"></app-linked-document>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".alert-card{background-color:#fb392d1a}.success-alert{border-radius:10px;border:1px solid rgba(251,57,45,.1);background:linear-gradient(0deg,#dedede 0% 100%),#fff}.p-timeline-event-opposite{display:none}.decription{color:#676b89}.textAreaControl textarea{width:100%;resize:vertical;max-width:100%}.document-btn-wrapper .p-button-outlined{color:#f57c00}.document-viewer .p-dialog{width:100%;height:100%;max-height:100%!important;box-shadow:none!important}.document-viewer .p-dialog-header-close-icon{height:20px;width:20px}.document-viewer .p-dialog-header{background-color:#fff;border-radius:0;border-bottom:.771px solid rgba(68,72,109,.1);align-items:start!important}.document-viewer .p-dialog-content{background-color:#fff;border-radius:0}.uploadedImages{width:95%;height:100%;object-fit:contain;border-radius:10px;padding:22px;background:#f7f8fa;border:1px solid #F0F0F0}\n"] }]
         }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentService }], propDecorators: { selectedDocument: [{
                 type: Input
             }], documentList: [{
                 type: Input
+            }], updatedDocument: [{
+                type: Output
             }] } });
 
-/**
- * Service for managing user session details.
- * @class SessionService
- * @typedef {SessionService}
- */
-class SessionService {
-    router;
-    /**
-     * Creates an instance of SessionService.
-     * @param {Router} router - Angular Router for navigation.
-     */
-    constructor(router) {
-        this.router = router;
-    }
-    /**
-     * Retrieves the current user's role from local storage.
-     * @returns {string | null} The user's role, or null if not found.
-     */
-    getUserRole() {
-        return localStorage.getItem('role');
-    }
-    /**
-     * Stores the user session data in local storage.
-     * @param {any} data - The session data to store.
-     */
-    setUserSession(data) {
-        localStorage.setItem(SHARED.SESSIONKEY, JSON.stringify(data));
-    }
-    /**
-     * Retrieves the stored user session data.
-     * @returns {any | null} The parsed session data, or null if not found.
-     */
-    getUserSession() {
-        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
-        return sessionData ? JSON.parse(sessionData) : null;
-    }
-    /**
-     * Retrieves the user's permissions from the stored session data.
-     * @returns {any | null} The user's permissions, or null if not found.
-     */
-    getUserPermissions() {
-        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
-        return sessionData ? JSON.parse(sessionData).permissions : null;
-    }
-    /**
-     * Retrieves the session ID from the stored session data.
-     * @returns {any | null} The session ID, or null if not found.
-     */
-    getSessionID() {
-        const sessionData = localStorage.getItem(SHARED.SESSIONKEY);
-        console.log(sessionData);
-        if (sessionData) {
-            const sessionId = JSON.parse(sessionData);
-            console.log(sessionId);
-            return sessionId;
-        }
-        return null;
-    }
-    /**
-     * Clears all stored session data from local storage.
-     */
-    clearSession() {
-        localStorage.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SessionService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.Router }] });
-
 /**
  * Directive to conditionally show or hide elements based on user permissions.
  * @class HasPermissionDirective
@@ -1566,6 +1615,7 @@ class DocumentListComponent {
     documentHttpService;
     documentQuery;
     documentStore;
+    sessionService;
     onRefresh = new EventEmitter();
     /**
      * Represents the context ID for the document list.
@@ -1644,7 +1694,34 @@ class DocumentListComponent {
      * It may be undefined until a file is selected or loaded.
      * @type {string | undefined}
      */
-    fileName;
+    documentStatus;
+    /**
+     * Indicates whether the user has permission to upload or modify documents.
+     * The exact type depends on the access control implementation.
+     * @type {any}
+     */
+    hasDocumentPutAccess;
+    /**
+     * Error message related to the file name, if validation fails.
+     * @type {string}
+     */
+    fileNameError;
+    /**
+     * Extension of the selected document file (e.g., .pdf, .docx).
+     * @type {string}
+     */
+    documentExtension;
+    /**
+     * Regular expression to match disallowed characters in file names.
+     * Prevents characters like < > : " / \ | ? *
+     * @type {RegExp}
+     */
+    disallowedCharsRegex = /[<>:"\/\\|?*]/;
+    /**
+     * Reference to the file input element used for uploading documents.
+     * @type {ElementRef<HTMLInputElement>}
+     */
+    fileInput;
     /**
      * Creates an instance of DocumentListComponent.
      * @class
@@ -1653,17 +1730,34 @@ class DocumentListComponent {
      * @param {DocumentQuery} documentQuery - The service responsible for geting stored documents.
      * @param {DocumentStore} documentStore - The service responsible for storing documents.
      */
-    constructor(documentUploadService, documentHttpService, documentQuery, documentStore) {
+    constructor(documentUploadService, documentHttpService, documentQuery, documentStore, sessionService) {
         this.documentUploadService = documentUploadService;
         this.documentHttpService = documentHttpService;
         this.documentQuery = documentQuery;
         this.documentStore = documentStore;
+        this.sessionService = sessionService;
     }
     /**
      * Initializes the component by fetching the document type list.
      */
     ngOnInit() {
         this.getDocumentTypeList();
+        const userPermissions = this.sessionService.getUserPermissions();
+        const permissionNames = userPermissions.map((perm) => perm.name);
+        this.hasDocumentPutAccess = permissionNames.includes(PERMISSIONS.DOCUMENT_PUT);
+    }
+    handleUpdatedDocument(document) {
+        this.selectedDocument = document;
+        if (document.documentName) {
+            const extensionMatch = document.documentName.match(/(\.[^/.]+)$/);
+            this.documentExtension = extensionMatch ? extensionMatch[0] : '';
+            this.documentName = document.documentName?.replace(/\.[^/.]+$/, '');
+        }
+        this.documentStatus = document.status;
+        this.documentStore.setSelectedDocument(document);
+        setTimeout(() => {
+            this.onDocumentNameChange({ target: this.fileInput.nativeElement });
+        });
     }
     /**
      * Handles the click event for file upload.
@@ -1685,7 +1779,16 @@ class DocumentListComponent {
     handleClickForDocument(document) {
         this.isdialogVisible = SHARED.TRUE;
         this.selectedDocument = document;
-        this.fileName = document.fileName;
+        if (document.documentName) {
+            const extensionMatch = document.documentName.match(/(\.[^/.]+)$/);
+            this.documentExtension = extensionMatch ? extensionMatch[0] : '';
+            this.documentName = document.documentName?.replace(/\.[^/.]+$/, '');
+        }
+        this.documentStatus = document.status;
+        this.documentStore.setSelectedDocument(document);
+        setTimeout(() => {
+            this.onDocumentNameChange({ target: this.fileInput.nativeElement });
+        });
     }
     /**
      * Handles the save click event to update the document's file name.
@@ -1695,21 +1798,53 @@ class DocumentListComponent {
      * @returns {void}
      */
     handleSaveClick() {
-        const payload = { fileName: this.fileName };
-        this.documentHttpService.updateDocumentName(this.selectedDocument._id, payload)
-            .subscribe((res) => {
-            console.log(`${SHARED.UPDATE_DOCUMENT_NAME} ${this.selectedDocument._id}`);
-        });
+        if (this.documentName !== this.selectedDocument.documentName && !this.fileNameError && this.hasDocumentPutAccess) {
+            const updatedDocumentName = this.documentExtension ? (this.documentName + this.documentExtension) : this.documentName;
+            const payload = { documentName: updatedDocumentName };
+            this.documentHttpService.updateDocumentName(this.selectedDocument._id, payload)
+                .subscribe((res) => {
+                console.log(`${SHARED.UPDATE_DOCUMENT_NAME} ${this.selectedDocument._id}`);
+                this.documentStore.setIsDocumentUpdated({ ...res });
+            });
+        }
     }
     /**
      * Closes the dialog and resets the selected document.
      * @memberof DocumentListComponent
      */
     handleCloseModal() {
+        if (!!this.fileNameError)
+            return;
         this.selectedDocument = { _id: SHARED.EMPTY };
+        this.documentStore.setSelectedDocument(SHARED.EMPTY);
         this.isdialogVisible = SHARED.FALSE;
         this.onRefresh.emit();
     }
+    /**
+     * Handles changes to the document name input field.
+     * - Updates the `documentName` property.
+     * - Validates for disallowed characters and sets appropriate error messages.
+     * - Dynamically adjusts the width of the input field based on the content using a hidden span element.
+     * @param {Event} event - The input change event triggered when the user types in the document name field.
+     */
+    onDocumentNameChange(event) {
+        const input = event.target;
+        this.documentName = input.value;
+        if (this.disallowedCharsRegex.test(this.documentName)) {
+            this.fileNameError = ERRORS.ERROR_INVALID_FILENAME_CHARACTERS;
+        }
+        else {
+            this.fileNameError = SHARED.EMPTY;
+        }
+        const span = document.querySelector('.hidden-measure');
+        if (span) {
+            const computedStyle = window.getComputedStyle(input);
+            span.style.fontSize = computedStyle.fontSize;
+            span.textContent = input.value || ' ';
+            input.style.width = `${span.offsetWidth + 50}px`;
+            input.style.minWidth = `${span.offsetWidth + 50}px`;
+        }
+    }
     /**
      * Handles the upload action for a document.
      * Validates if a document type is selected and logs the result.
@@ -1770,13 +1905,13 @@ class DocumentListComponent {
     handleOpenSideBar(isVisible) {
         this.isSidebarVisible = isVisible;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentUploadService }, { token: DocumentHttpService }, { token: DocumentQuery }, { token: DocumentStore }], 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", isUploadButtonVisible: "isUploadButtonVisible", isCollapsed: "isCollapsed", documentList: "documentList" }, outputs: { onRefresh: "onRefresh" }, ngImport: i0, template: "\r\n<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModal()\"\r\n    class=\"w-full h-full document-dailog-wrapper\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\">\r\n\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input \r\n            type=\"text\" \r\n            class=\"w-full border-none bg-white h-3rem file-input-wrapper\"\r\n            pInputText \r\n            [(ngModel)]=\"fileName\" />\r\n            <button \r\n            pButton \r\n            pRipple \r\n            class=\"mx-3 w-6rem save-btn-wrapper\"\r\n            label=\"Save\"\r\n            (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n    </ng-template>\r\n\r\n\r\n      <ng-content></ng-content>\r\n    </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 mb-0 document-list-wrapper\">\r\n    <p-accordion  [activeIndex]=\"isCollapsed ? -1 : 0\">\r\n      <p-accordionTab  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 document-title-wrapper\">\r\n              Documents\r\n            </span>\r\n            @if(isUploadButtonVisible){\r\n              <button pButton pRipple class=\"p-button-raised col-3\" [permission]=\"PERMISSION.DOCUMENT_POST\"  type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n            }\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 m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}\n"], dependencies: [{ kind: "component", type: i5$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i5$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: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.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: i8$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: i9.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.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: i12.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: i13.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", "documentList"] }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentUploadService }, { token: DocumentHttpService }, { token: DocumentQuery }, { token: DocumentStore }, { token: SessionService }], 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", isUploadButtonVisible: "isUploadButtonVisible", isCollapsed: "isCollapsed", documentList: "documentList" }, outputs: { onRefresh: "onRefresh" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModal()\"\r\n    class=\"w-full h-full document-dailog-wrapper\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <ng-template pTemplate=\"header\">\r\n      <div>\r\n      <div class=\"w-full flex align-items-center file-input-container\">\r\n        <span class=\"hidden-measure\">{{ documentName }}</span>\r\n        <input \r\n        #fileInput\r\n        type=\"text\" \r\n        class=\"h-3rem file-input-wrapper\"\r\n        pInputText \r\n        [readonly]=\"!hasDocumentPutAccess\"\r\n            [(ngModel)]=\"documentName\"\r\n            (input)=\"onDocumentNameChange($event)\"\r\n            (blur)=\"handleSaveClick()\" />\r\n          <div class=\"ml-3\">\r\n            <p\r\n          [class]=\"'product-badge status-' + documentStatus?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center px-2 py-1 m-0\"\r\n          >\r\n          <ng-container *ngIf=\"documentStatus?.toLowerCase() === 'pending'\">\r\n            <div class=\"flex align-items-center\">\r\n              <i class=\"pi pi-clock pr-1 status-icon-wrapper\" style=\"font-size: 12px;\"></i>\r\n              <span>Pending</span>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"documentStatus?.toLowerCase() === 'verified'\">\r\n            <div class=\"flex align-items-center\">\r\n            <i class=\"pi pi-check-circle pr-1 status-icon-wrapper\" style=\"font-size: 12px;\"></i>\r\n            <span>Verified</span>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"documentStatus?.toLowerCase() === 'alert'\">\r\n            <div class=\"flex align-items-center\">\r\n            <i class=\"pi pi-bell pr-1 status-icon-wrapper\" style=\"font-size: 12px;\"></i>\r\n            <span>Alert</span>\r\n            </div>\r\n          </ng-container>\r\n        </p>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\r\n          {{ fileNameError }}\r\n        </div>\r\n        </div>\r\n    </ng-template>\r\n    \r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" (updatedDocument)=\"handleUpdatedDocument($event)\">\r\n      <ng-content></ng-content>\r\n    </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 mb-0 document-list-wrapper\">\r\n    <p-accordion  [activeIndex]=\"isCollapsed ? -1 : 0\">\r\n      <p-accordionTab  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 document-title-wrapper\">\r\n              Documents\r\n            </span>\r\n            @if(isUploadButtonVisible){\r\n              <button pButton pRipple class=\"p-button-raised col-3\" [permission]=\"PERMISSION.DOCUMENT_POST\"  type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n            }\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 m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-container{max-width:96%}.file-input-wrapper{border-radius:6px;border:1px solid rgba(76,98,146,.2);background:#f4f4f6;font-weight:700;font-size:28px}.error-message-wrapper{font-size:17px;font-weight:600;color:#fb392d;margin-top:3px}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.status-icon-wrapper{margin-top:3px}.product-badge{padding:6px 16px}.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}.hidden-measure{visibility:hidden;white-space:nowrap;position:absolute;font-family:inherit;font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i7$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: i9.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i9.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i10.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: i11.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "directive", type: i12.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: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i13.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: i14.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i15.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", "documentList"], outputs: ["updatedDocument"] }, { kind: "directive", type: HasPermissionDirective, selector: "[permission]", inputs: ["permission"] }], 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: "\r\n<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModal()\"\r\n    class=\"w-full h-full document-dailog-wrapper\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\">\r\n\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input \r\n            type=\"text\" \r\n            class=\"w-full border-none bg-white h-3rem file-input-wrapper\"\r\n            pInputText \r\n            [(ngModel)]=\"fileName\" />\r\n            <button \r\n            pButton \r\n            pRipple \r\n            class=\"mx-3 w-6rem save-btn-wrapper\"\r\n            label=\"Save\"\r\n            (click)=\"handleSaveClick()\">\r\n          </button>\r\n        </div>\r\n    </ng-template>\r\n\r\n\r\n      <ng-content></ng-content>\r\n    </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 mb-0 document-list-wrapper\">\r\n    <p-accordion  [activeIndex]=\"isCollapsed ? -1 : 0\">\r\n      <p-accordionTab  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 document-title-wrapper\">\r\n              Documents\r\n            </span>\r\n            @if(isUploadButtonVisible){\r\n              <button pButton pRipple class=\"p-button-raised col-3\" [permission]=\"PERMISSION.DOCUMENT_POST\"  type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n            }\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 m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}\n"] }]
-        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentHttpService }, { type: DocumentQuery }, { type: DocumentStore }], propDecorators: { onRefresh: [{
+            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "\r\n<div class=\"document-viewer\">\r\n  <p-dialog [(visible)]=\"isdialogVisible\" [modal]=\"true\" (onHide)=\"handleCloseModal()\"\r\n    class=\"w-full h-full document-dailog-wrapper\"\r\n    [draggable]=\"false\" [closable]=\"true\">\r\n    <ng-template pTemplate=\"header\">\r\n      <div>\r\n      <div class=\"w-full flex align-items-center file-input-container\">\r\n        <span class=\"hidden-measure\">{{ documentName }}</span>\r\n        <input \r\n        #fileInput\r\n        type=\"text\" \r\n        class=\"h-3rem file-input-wrapper\"\r\n        pInputText \r\n        [readonly]=\"!hasDocumentPutAccess\"\r\n            [(ngModel)]=\"documentName\"\r\n            (input)=\"onDocumentNameChange($event)\"\r\n            (blur)=\"handleSaveClick()\" />\r\n          <div class=\"ml-3\">\r\n            <p\r\n          [class]=\"'product-badge status-' + documentStatus?.toLowerCase()\"\r\n          class=\"flex align-items-center justify-content-center px-2 py-1 m-0\"\r\n          >\r\n          <ng-container *ngIf=\"documentStatus?.toLowerCase() === 'pending'\">\r\n            <div class=\"flex align-items-center\">\r\n              <i class=\"pi pi-clock pr-1 status-icon-wrapper\" style=\"font-size: 12px;\"></i>\r\n              <span>Pending</span>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"documentStatus?.toLowerCase() === 'verified'\">\r\n            <div class=\"flex align-items-center\">\r\n            <i class=\"pi pi-check-circle pr-1 status-icon-wrapper\" style=\"font-size: 12px;\"></i>\r\n            <span>Verified</span>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"documentStatus?.toLowerCase() === 'alert'\">\r\n            <div class=\"flex align-items-center\">\r\n            <i class=\"pi pi-bell pr-1 status-icon-wrapper\" style=\"font-size: 12px;\"></i>\r\n            <span>Alert</span>\r\n            </div>\r\n          </ng-container>\r\n        </p>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\r\n          {{ fileNameError }}\r\n        </div>\r\n        </div>\r\n    </ng-template>\r\n    \r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" (updatedDocument)=\"handleUpdatedDocument($event)\">\r\n      <ng-content></ng-content>\r\n    </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 mb-0 document-list-wrapper\">\r\n    <p-accordion  [activeIndex]=\"isCollapsed ? -1 : 0\">\r\n      <p-accordionTab  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 document-title-wrapper\">\r\n              Documents\r\n            </span>\r\n            @if(isUploadButtonVisible){\r\n              <button pButton pRipple class=\"p-button-raised col-3\" [permission]=\"PERMISSION.DOCUMENT_POST\"  type=\"button\" label=\"Upload File\"\r\n              style=\"border-radius: 10px;\" (click)=\"handleFileUploadClick($event)\"></button>\r\n            }\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 m-0\">\r\n  <div class=\"col-12 p-0\">\r\n    <p-sidebar [(visible)]=\"isSidebarVisible\" position=\"right\" [styleClass]=\"'right-sidebar'\" class=\"relative\">\r\n      <ng-template pTemplate=\"header\">\r\n        <p-messages [(value)]=\"messages\" [enableService]=\"false\" />\r\n      </ng-template>\r\n      <ng-template pTemplate=\"content\">\r\n        <div class=\"side-bar-con\">\r\n          <lib-document-upload [contextId]=\"contextId\"></lib-document-upload>\r\n          <div class=\"p-fluid\">\r\n            <div class=\"field\">\r\n              <label for=\"city\">Select Folder</label>\r\n              <p-dropdown id=\"city\" optionLabel=\"label\" optionValue=\"value\" [options]=\"options\"\r\n                placeholder=\"Select a Folder\" [(ngModel)]=\"selectedOption\"></p-dropdown>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template pTemplate=\"footer\" class=\"bg-gray-100 p-0\">\r\n        <div class=\"bg-gray-100 p-4\">\r\n          <p-button label=\"Save\" class=\"p-button-rounded p-button-success save-btn\" (click)=\"handleUploadDocument()\"\r\n            [disabled]=\"!selectedOption\">\r\n          </p-button>\r\n        </div>\r\n      </ng-template>\r\n    </p-sidebar>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right,.right-sidebar{width:35%}.document-title-wrapper{font-size:20px;font-weight:700;color:var(--text-color)}.document-input-field{display:flex;flex-direction:column}.document-input-field input{width:100%;height:46px;padding:10px 15px;gap:10px;border-radius:10px;outline:none;border:1px solid rgba(76,98,146,.1019607843);font-size:15px}label{color:#0f1729;font-weight:600}.document-list-dropDown .p-element{padding:10px 0 10px 15px}.document-list-dropDown .p-dropdown{border-radius:10px!important}.side-bar-con{display:flex;flex-direction:column}.save-btn-con{width:100%;border-top:1px solid rgba(76,98,146,.2);background:#4c629214;padding:13px 40px}.save-btn-wrapper{padding:10px 4px}.save-btn .p-button{height:45px!important;width:140px;border-radius:10px}.p-sidebar-footer{padding:0}.file-input-container{max-width:96%}.file-input-wrapper{border-radius:6px;border:1px solid rgba(76,98,146,.2);background:#f4f4f6;font-weight:700;font-size:28px}.error-message-wrapper{font-size:17px;font-weight:600;color:#fb392d;margin-top:3px}.file-input-wrapper.p-inputtext:enabled:focus{box-shadow:0 0 0 .2rem #a6d5fa!important}.status-icon-wrapper{margin-top:3px}.product-badge{padding:6px 16px}.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}.hidden-measure{visibility:hidden;white-space:nowrap;position:absolute;font-family:inherit;font-size:inherit}\n"] }]
+        }], ctorParameters: () => [{ type: DocumentUploadService }, { type: DocumentHttpService }, { type: DocumentQuery }, { type: DocumentStore }, { type: SessionService }], propDecorators: { onRefresh: [{
                 type: Output
             }], contextId: [{
                 type: Input
@@ -1786,6 +1921,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], documentList: [{
                 type: Input
+            }], fileInput: [{
+                type: ViewChild,
+                args: [SHARED.FILE_INPUT]
             }] } });
 
 /**
@@ -1831,6 +1969,17 @@ class DocumentContainerComponent {
      * @type {boolean}
      */
     isUploadButtonVisible = SHARED.TRUE;
+    /**
+     * Emits the document selected by the user.
+     * @type {EventEmitter<DocumentModel>}
+    */
+    selectedDocument = new EventEmitter();
+    /**
+     * Subject used to clean up subscriptions when the component is destroyed.
+     * Helps prevent memory leaks in observables.
+     * @type {Subject<void>}
+    */
+    destroy$ = new Subject();
     /**
      * The list of documents.
      * @type {Array}
@@ -1856,16 +2005,25 @@ class DocumentContainerComponent {
         const folderSubscription = this.documentQuery
             .selectParentDocumentTypeId()
             .subscribe((folderBlockId) => {
-            const validFolders = this.folderList.filter(folder => (folder.documentCount ?? 0) > 0);
-            const idToFetch = folderBlockId ?? validFolders[0]?._id;
-            if (idToFetch) {
-                this.fetchDocuments(idToFetch);
-            }
-            else {
-                console.warn('No folders with documents available.');
+            if (folderBlockId) {
+                const validFolders = this.folderList.filter(folder => (folder.documentCount ?? 0) > 0);
+                const idToFetch = folderBlockId ?? validFolders[0]?._id;
+                if (idToFetch) {
+                    this.fetchDocuments(idToFetch);
+                }
+                else {
+                    console.warn('No folders with documents available.');
+                }
             }
         });
         this.subscription.add(folderSubscription);
+        this.documentQuery.getSelectedDocument()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((res) => {
+            if (res) {
+                this.selectedDocument.emit(res);
+            }
+        });
     }
     /**
      * Fetches the folder data from the API.
@@ -1939,10 +2097,13 @@ class DocumentContainerComponent {
      * Unsubscribe subscription on destroy of component .
      */
     ngOnDestroy() {
+        this.documentStore.setParentDocumentTypeId(SHARED.EMPTY);
+        this.destroy$.next();
+        this.destroy$.complete();
         this.subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentStore }, { token: DocumentService$1 }, { token: DocumentQuery }, { token: DocumentHttpService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId", isCollapsed: "isCollapsed", showFolderList: "showFolderList", isUploadButtonVisible: "isUploadButtonVisible" }, ngImport: i0, template: "<div class=\"grid m-0 h-full\">\r\n    <div class=\"col-12 md:col-12 lg:col-12 p-0 h-full\" [ngClass]=\"showFolderList ? 'custom-scroll' : ''\">\r\n      @if(showFolderList){\r\n        <div>\r\n          <lib-folder-container [documentList]=\"documentList\" [folderList]=\"folderList\" [contextId]=\"contextId\"></lib-folder-container>\r\n        </div>\r\n      }\r\n      <div [ngClass]=\"showFolderList ? 'mt-3' : ''\">\r\n        <lib-document-list [isCollapsed]=\"isCollapsed\" [documentList]=\"documentList\" [contextId]=\"contextId\" [isUploadButtonVisible]=\"isUploadButtonVisible\" (onRefresh)=\"fetchFolder()\">\r\n          <ng-content></ng-content>\r\n        </lib-document-list>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "isUploadButtonVisible", "isCollapsed", "documentList"], outputs: ["onRefresh"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { contextId: "contextId", isCollapsed: "isCollapsed", showFolderList: "showFolderList", isUploadButtonVisible: "isUploadButtonVisible" }, outputs: { selectedDocument: "selectedDocument" }, ngImport: i0, template: "<div class=\"grid m-0 h-full\">\r\n    <div class=\"col-12 md:col-12 lg:col-12 p-0 h-full\" [ngClass]=\"showFolderList ? 'custom-scroll' : ''\">\r\n      @if(showFolderList){\r\n        <div>\r\n          <lib-folder-container [documentList]=\"documentList\" [folderList]=\"folderList\" [contextId]=\"contextId\"></lib-folder-container>\r\n        </div>\r\n      }\r\n      <div [ngClass]=\"showFolderList ? 'mt-3' : ''\">\r\n        <lib-document-list [isCollapsed]=\"isCollapsed\" [documentList]=\"documentList\" [contextId]=\"contextId\" [isUploadButtonVisible]=\"isUploadButtonVisible\" (onRefresh)=\"fetchFolder()\">\r\n          <ng-content></ng-content>\r\n        </lib-document-list>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "isUploadButtonVisible", "isCollapsed", "documentList"], outputs: ["onRefresh"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DocumentContainerComponent, decorators: [{
             type: Component,
@@ -1955,6 +2116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], isUploadButtonVisible: [{
                 type: Input
+            }], selectedDocument: [{
+                type: Output
             }] } });
 
 /**