cat-documents-ng 0.3.24 → 0.3.26

package/fesm2022/cat-documents-ng.mjs

@@ -4841,6 +4841,7 @@ class DocumentScrollService {
             this.sectionObserver = new IntersectionObserver((entries) => {
                 entries.forEach(entry => {
                     if (entry.intersectionRatio === 0 && !this.isScrolling) {
+                        // Use a longer delay to prevent interference with main app navigation
                         setTimeout(() => {
                             if (this.sectionObserver && menuItemId && entry.intersectionRatio === 0) {
                                 if (!this.isScrolling) {
@@ -4848,12 +4849,12 @@ class DocumentScrollService {
                                     this.disconnectSectionObserver();
                                 }
                             }
-                        }, 200);
+                        }, 500); // Increased from 200ms to 500ms for gentler behavior
                     }
                 });
             }, {
                 threshold: [0, 0.1, 0.5, 1],
-                rootMargin: '0px'
+                rootMargin: '0px 0px -50px 0px' // Reduced from 0px to -50px for more precise detection
             });
             // Only start observing if the section is actually visible
             const rect = sectionElement.getBoundingClientRect();
@@ -4862,7 +4863,7 @@ class DocumentScrollService {
                 this.sectionObserver.observe(sectionElement);
                 this.currentObservedSection = sectionElement;
             }
-        }, 1200);
+        }, 1500); // Increased from 1200ms to 1500ms for gentler behavior
     }
     /**
      * Disconnects the section observer
@@ -7435,17 +7436,6 @@ class DocumentListComponent {
             return category.label.endsWith(SHARED.DOCUMENTS) ? category.label : `${category.label} ${SHARED.DOCUMENTS}`;
         });
     }
-    /**
-     * Getter to generate safe category IDs for HTML elements
-     */
-    get categoryIds() {
-        return this.documentCategories.map((category, index) => {
-            if (category?.label) {
-                return `section-${category.label.toLowerCase().replace(' ', '-')}`;
-            }
-            return `section-category-${index}`;
-        });
-    }
     /**
      * Creates an instance of DocumentListComponent.
      * @class
@@ -7634,7 +7624,7 @@ class DocumentListComponent {
         }
     }
     /**
-     * Scrolls to the category section that matches the selected menu item
+     * Scrolls to the category section using menuItemId
      * @param menuItemId - The ID of the selected menu item
      */
     scrollToCategorySection(menuItemId) {
@@ -7662,10 +7652,19 @@ class DocumentListComponent {
             const categoryIndex = this.documentCategories.findIndex(cat => cat === targetCategory);
             const categoryElements = this.documentCategoriesContainer.nativeElement.querySelectorAll('.category');
             if (categoryElements[categoryIndex]) {
-                categoryElements[categoryIndex].scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start',
-                    inline: 'nearest'
+                // Use more gentle scrolling that doesn't interfere with main app layout
+                const targetElement = categoryElements[categoryIndex];
+                const container = this.documentCategoriesContainer.nativeElement;
+                // Ensure we stay within container bounds
+                const containerRect = container.getBoundingClientRect();
+                const targetRect = targetElement.getBoundingClientRect();
+                // Calculate scroll position within container bounds
+                const targetTop = Math.max(0, targetElement.offsetTop - container.offsetTop - 20);
+                const maxScrollTop = container.scrollHeight - container.clientHeight;
+                const finalScrollTop = Math.min(targetTop, maxScrollTop);
+                container.scrollTo({
+                    top: finalScrollTop,
+                    behavior: 'smooth'
                 });
                 this.highlightCategory(categoryElements[categoryIndex]);
                 // Setup observer to deselect menu item when section scrolls out of view
@@ -7690,25 +7689,36 @@ class DocumentListComponent {
             const sectionId = 'section-' + targetCategory.label.toLowerCase().replace(SHARED.EMPTY_SPACE, SHARED.HYPEN);
             let targetElement = this.documentCategoriesContainer.nativeElement.querySelector(`#${sectionId}`);
             if (targetElement) {
-                targetElement.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start',
-                    inline: 'nearest'
+                // Use more gentle scrolling that doesn't interfere with main app layout
+                const container = this.documentCategoriesContainer.nativeElement;
+                // Ensure we stay within container bounds
+                const targetTop = Math.max(0, targetElement.offsetTop - container.offsetTop - 20);
+                const maxScrollTop = container.scrollHeight - container.clientHeight;
+                const finalScrollTop = Math.min(targetTop, maxScrollTop);
+                container.scrollTo({
+                    top: finalScrollTop,
+                    behavior: 'smooth'
                 });
                 this.highlightCategory(targetElement);
                 // Setup observer to deselect menu item when section scrolls out of view
                 this.documentScrollService.setupSectionObserver(targetElement, this.selectedMenuItemId);
                 // Reset scrolling flag after smooth scroll completes
-                this.documentScrollService.resetScrollingAfterDelay(1200);
+                this.documentScrollService.resetScrollingAfterDelay(500);
             }
             else {
                 const categoryIndex = this.documentCategories.findIndex(cat => cat === targetCategory);
                 const categoryElements = this.documentCategoriesContainer.nativeElement.querySelectorAll('.category');
                 if (categoryElements[categoryIndex]) {
-                    categoryElements[categoryIndex].scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start',
-                        inline: 'nearest'
+                    // Use more gentle scrolling that doesn't interfere with main app layout
+                    const targetElement = categoryElements[categoryIndex];
+                    const container = this.documentCategoriesContainer.nativeElement;
+                    // Ensure we stay within container bounds
+                    const targetTop = Math.max(0, targetElement.offsetTop - container.offsetTop - 20);
+                    const maxScrollTop = container.scrollHeight - container.clientHeight;
+                    const finalScrollTop = Math.min(targetTop, maxScrollTop);
+                    container.scrollTo({
+                        top: finalScrollTop,
+                        behavior: 'smooth'
                     });
                     this.highlightCategory(categoryElements[categoryIndex]);
                     // Setup observer to deselect menu item when section scrolls out of view
@@ -7745,7 +7755,17 @@ class DocumentListComponent {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting && entry.target.id === `section-${targetCategory.label.toLowerCase().replace(SHARED.EMPTY_SPACE, SHARED.HYPEN)}`) {
-                    entry.target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    // Use more gentle scrolling that doesn't interfere with main app layout
+                    const targetElement = entry.target;
+                    const container = this.documentCategoriesContainer.nativeElement;
+                    // Ensure we stay within container bounds
+                    const targetTop = Math.max(0, targetElement.offsetTop - container.offsetTop - 20);
+                    const maxScrollTop = container.scrollHeight - container.clientHeight;
+                    const finalScrollTop = Math.min(targetTop, maxScrollTop);
+                    container.scrollTo({
+                        top: finalScrollTop,
+                        behavior: 'smooth'
+                    });
                     this.highlightCategory(entry.target);
                     observer.disconnect();
                     // Setup observer to deselect menu item when section scrolls out of view
@@ -7767,6 +7787,7 @@ class DocumentListComponent {
      */
     resetToTop() {
         if (this.documentCategoriesContainer) {
+            // Use gentler scrolling that doesn't interfere with main app layout
             this.documentCategoriesContainer.nativeElement.scrollTo({
                 top: 0,
                 behavior: 'smooth'
@@ -7833,11 +7854,11 @@ class DocumentListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, deps: [{ token: DocumentListService }, { token: DocumentHttpService }, { token: DocumentMenuService }, { token: DocumentStore }, { token: DocumentScrollService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentListResponse: "documentListResponse", selectedMenuItemId: "selectedMenuItemId", navigationInfo: "navigationInfo", documentList: "documentList" }, outputs: { handleSelectedDocument: "handleSelectedDocument" }, viewQueries: [{ propertyName: "documentCategoriesContainer", first: true, predicate: ["documentCategoriesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [header]=\"selectedDocument?.aliasName ?? selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\"\r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\" (onHide)=\"handleCloseModal()\">\r\n    <p-messages [(value)]=\"deleteMessage\" [enableService]=\"false\" [closable]=\"false\" />\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n        <!-- Show alias name and document name when available -->\r\n        <div *ngIf=\"!isEditingDocumentName && aliasName\" \r\n             class=\"document-name-display clickable-doc-name\"\r\n             (click)=\"onDocumentNameClick()\"\r\n             title=\"Click to edit document name\">\r\n          <div class=\"alias-name\">\r\n            {{ selectedDocument?.aliasName }}\r\n            <i class=\"pi pi-pencil edit-icon-small\"></i>\r\n          </div>\r\n          <div class=\"document-name\">{{ selectedDocument?.docName }}</div>\r\n        </div>\r\n        <span \r\n          *ngIf=\"!isEditingDocumentName && !aliasName\" \r\n          class=\"font-bold white-space-nowrap clickable-doc-name\"\r\n          (click)=\"onDocumentNameClick()\"\r\n          title=\"Click to edit document name\">\r\n          {{selectedDocument?.docName}}\r\n          <i class=\"pi pi-pencil edit-icon\"></i>\r\n        </span>\r\n        <input \r\n          *ngIf=\"isEditingDocumentName\"\r\n          #fileInput \r\n          type=\"text\" \r\n          class=\"h-3rem file-input-wrapper document-name-input\" \r\n          pInputText \r\n          [(ngModel)]=\"documentName\"\r\n          (input)=\"onDocumentNameChange($event)\" \r\n          (blur)=\"handleSaveClick()\"\r\n          (keydown.escape)=\"cancelDocumentNameEdit()\"\r\n          (keydown.enter)=\"handleSaveClick()\" />\r\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\r\n          {{ fileNameError }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" [contextId]=\"contextId\"\r\n      (documentStatusUpdated)=\"refreshDocumentList($event.actionType === 'delete')\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n\r\n        </div>\r\n      </ng-template>\r\n      @if(selectedDocument?.status === 'Approved'){\r\n        <ng-content></ng-content>\r\n      }\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\" #documentCategoriesContainer>\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\"\r\n    [id]=\"categoryIds[i]\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <p-badge \r\n          [severity]=\"categorySeverities[i]\" \r\n          [value]=\"categoryCompletionCounts[i] + ' Complete'\"\r\n          class=\"completion-badge\">\r\n        </p-badge>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary [tableData]=\"categoryTables[i]\" [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\" (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right{width:35%}.error-message-wrapper{color:#dc3545}.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}.clickable-doc-name{cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px}.clickable-doc-name:hover{background-color:#4c62921a;color:var(--primary-color, #4C6292)}.clickable-doc-name:active{background-color:#4c629233;transform:scale(.98)}.clickable-doc-name .edit-icon{font-size:.8em;margin-left:8px;opacity:.6;transition:opacity .2s ease}.clickable-doc-name:hover .edit-icon{opacity:1}.document-name-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px;width:100%}.document-name-display:hover{background-color:#4c62921a}.document-name-display:hover .alias-name{color:var(--primary-color, #4C6292)}.document-name-display:active{background-color:#4c629233;transform:scale(.98)}.document-name-display .alias-name{font-size:1.5rem;font-weight:700;color:var(--text-color, #2c3e50);line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;transition:color .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}.document-name-display .alias-name .edit-icon-small{font-size:.6em;opacity:.5;transition:opacity .2s ease}.document-name-display:hover .edit-icon-small{opacity:1}.document-name-display .document-name{font-size:.875rem;color:var(--text-color-secondary, #6c757d);font-weight:400;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;opacity:.8}.file-input-wrapper{transition:all .2s ease;min-width:300px!important;width:auto!important;max-width:80vw!important}.file-input-wrapper:focus{border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-name-input{min-width:400px!important;width:auto!important;max-width:70vw!important;padding:8px 12px!important;font-size:1.1rem!important;font-weight:500!important;border:2px solid var(--primary-color, #4C6292)!important;border-radius:6px!important;background-color:#fff!important}.document-name-input:focus{outline:none!important;border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-viewer{position:relative;z-index:1}.document-viewer ::ng-deep .p-dialog{z-index:9999!important}.document-viewer ::ng-deep .p-dialog-mask{z-index:9998!important}.document-viewer ::ng-deep .p-dialog{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;left:0!important;transform:none!important}.document-viewer ::ng-deep .p-dialog-content{height:calc(100vh - 60px)!important;max-height:none!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:auto}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:all .3s ease}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef;gap:1rem}.document-categories-container .category .category-header .category-title{flex:1;min-width:0}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status{display:flex;align-items:center;justify-content:center;min-width:fit-content}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .category-header .completion-status .completion-badge{display:flex;align-items:center;justify-content:center}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge{font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px;display:flex;align-items:center;justify-content:center;min-width:fit-content;white-space:nowrap}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-success{background-color:#d1fae5;color:#065f46;font-family:inherit;font-size:12px;padding:15px;font-weight:400}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;padding:15px;font-style:inherit}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;padding:15px;font-size:12px;font-weight:400;font-style:inherit}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;padding:15px;font-weight:400;font-style:inherit}.document-categories-container .category .table-container{padding:0}@keyframes highlightPulse{0%{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 6px 25px #3b82f680}to{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge{font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-success{background-color:#10b981;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-info{background-color:#3b82f6;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-warning{background-color:#f59e0b;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-danger{background-color:#ef4444;color:#fff}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:stretch}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:center;width:100%;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: i9$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i12$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList", "contextId"], outputs: ["documentStatusUpdated"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DocumentListComponent, isStandalone: false, selector: "lib-document-list", inputs: { contextId: "contextId", documentListResponse: "documentListResponse", selectedMenuItemId: "selectedMenuItemId", navigationInfo: "navigationInfo", documentList: "documentList" }, outputs: { handleSelectedDocument: "handleSelectedDocument" }, viewQueries: [{ propertyName: "documentCategoriesContainer", first: true, predicate: ["documentCategoriesContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"document-viewer\">\r\n  <p-dialog [header]=\"selectedDocument?.aliasName ?? selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\"\r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\" (onHide)=\"handleCloseModal()\">\r\n    <p-messages [(value)]=\"deleteMessage\" [enableService]=\"false\" [closable]=\"false\" />\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n        <!-- Show alias name and document name when available -->\r\n        <div *ngIf=\"!isEditingDocumentName && aliasName\" \r\n             class=\"document-name-display clickable-doc-name\"\r\n             (click)=\"onDocumentNameClick()\"\r\n             title=\"Click to edit document name\">\r\n          <div class=\"alias-name\">\r\n            {{ selectedDocument?.aliasName }}\r\n            <i class=\"pi pi-pencil edit-icon-small\"></i>\r\n          </div>\r\n          <div class=\"document-name\">{{ selectedDocument?.docName }}</div>\r\n        </div>\r\n        <span \r\n          *ngIf=\"!isEditingDocumentName && !aliasName\" \r\n          class=\"font-bold white-space-nowrap clickable-doc-name\"\r\n          (click)=\"onDocumentNameClick()\"\r\n          title=\"Click to edit document name\">\r\n          {{selectedDocument?.docName}}\r\n          <i class=\"pi pi-pencil edit-icon\"></i>\r\n        </span>\r\n        <input \r\n          *ngIf=\"isEditingDocumentName\"\r\n          #fileInput \r\n          type=\"text\" \r\n          class=\"h-3rem file-input-wrapper document-name-input\" \r\n          pInputText \r\n          [(ngModel)]=\"documentName\"\r\n          (input)=\"onDocumentNameChange($event)\" \r\n          (blur)=\"handleSaveClick()\"\r\n          (keydown.escape)=\"cancelDocumentNameEdit()\"\r\n          (keydown.enter)=\"handleSaveClick()\" />\r\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\r\n          {{ fileNameError }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" [contextId]=\"contextId\"\r\n      (documentStatusUpdated)=\"refreshDocumentList($event.actionType === 'delete')\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n\r\n        </div>\r\n      </ng-template>\r\n      @if(selectedDocument?.status === 'Approved'){\r\n        <ng-content></ng-content>\r\n      }\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\" #documentCategoriesContainer>\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\"\r\n    [id]=\"'section-' + category.label.toLowerCase().replace(' ', '-')\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <p-badge \r\n          [severity]=\"categorySeverities[i]\" \r\n          [value]=\"categoryCompletionCounts[i] + ' Complete'\"\r\n          class=\"completion-badge\">\r\n        </p-badge>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary [tableData]=\"categoryTables[i]\" [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\" (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right{width:35%}.error-message-wrapper{color:#dc3545}.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}.clickable-doc-name{cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px}.clickable-doc-name:hover{background-color:#4c62921a;color:var(--primary-color, #4C6292)}.clickable-doc-name:active{background-color:#4c629233;transform:scale(.98)}.clickable-doc-name .edit-icon{font-size:.8em;margin-left:8px;opacity:.6;transition:opacity .2s ease}.clickable-doc-name:hover .edit-icon{opacity:1}.document-name-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px;width:100%}.document-name-display:hover{background-color:#4c62921a}.document-name-display:hover .alias-name{color:var(--primary-color, #4C6292)}.document-name-display:active{background-color:#4c629233;transform:scale(.98)}.document-name-display .alias-name{font-size:1.5rem;font-weight:700;color:var(--text-color, #2c3e50);line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;transition:color .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}.document-name-display .alias-name .edit-icon-small{font-size:.6em;opacity:.5;transition:opacity .2s ease}.document-name-display:hover .edit-icon-small{opacity:1}.document-name-display .document-name{font-size:.875rem;color:var(--text-color-secondary, #6c757d);font-weight:400;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;opacity:.8}.file-input-wrapper{transition:all .2s ease;min-width:300px!important;width:auto!important;max-width:80vw!important}.file-input-wrapper:focus{border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-name-input{min-width:400px!important;width:auto!important;max-width:70vw!important;padding:8px 12px!important;font-size:1.1rem!important;font-weight:500!important;border:2px solid var(--primary-color, #4C6292)!important;border-radius:6px!important;background-color:#fff!important}.document-name-input:focus{outline:none!important;border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-viewer{position:relative;z-index:1}.document-viewer ::ng-deep .p-dialog{z-index:9999!important}.document-viewer ::ng-deep .p-dialog-mask{z-index:9998!important}.document-viewer ::ng-deep .p-dialog{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;left:0!important;transform:none!important}.document-viewer ::ng-deep .p-dialog-content{height:calc(100vh - 60px)!important;max-height:none!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:auto;max-height:100%;overscroll-behavior:contain;scroll-behavior:smooth;overflow:hidden;position:relative}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:all .3s ease;contain:layout style}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef;gap:1rem}.document-categories-container .category .category-header .category-title{flex:1;min-width:0}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.document-categories-container .category .category-header .completion-status .completion-badge{font-size:.75rem;padding:.25rem .5rem}.document-categories-container .category .table-container{padding:1.5rem;background-color:#fff}.category-highlight{animation:highlightPulse 2s ease-in-out}@keyframes highlightPulse{0%{box-shadow:0 2px 4px #0000001a}50%{box-shadow:0 4px 12px #3b82f64d}to{box-shadow:0 2px 4px #0000001a}}.document-categories-container{isolation:isolate;scroll-behavior:smooth;overscroll-behavior:contain;transform:translateZ(0);contain:layout style paint;box-sizing:border-box;width:100%;max-width:100%;min-height:0;flex:1;flex-shrink:1;position:relative;overflow:auto}@keyframes highlightPulse{0%{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 6px 25px #3b82f680}to{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge{font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-success{background-color:#10b981;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-info{background-color:#3b82f6;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-warning{background-color:#f59e0b;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-danger{background-color:#ef4444;color:#fff}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:stretch}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:center;width:100%;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange", "onClose"] }, { kind: "component", type: i9$2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i12$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: TablePrimaryComponent, selector: "lib-table-primary", inputs: ["tableData", "showHeader", "tableStyle"], outputs: ["rowClick"] }, { kind: "component", type: DocumentViewerComponent, selector: "document-viewer", inputs: ["selectedDocument", "documentList", "contextId"], outputs: ["documentStatusUpdated"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\r\n  <p-dialog [header]=\"selectedDocument?.aliasName ?? selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\"\r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\" (onHide)=\"handleCloseModal()\">\r\n    <p-messages [(value)]=\"deleteMessage\" [enableService]=\"false\" [closable]=\"false\" />\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n        <!-- Show alias name and document name when available -->\r\n        <div *ngIf=\"!isEditingDocumentName && aliasName\" \r\n             class=\"document-name-display clickable-doc-name\"\r\n             (click)=\"onDocumentNameClick()\"\r\n             title=\"Click to edit document name\">\r\n          <div class=\"alias-name\">\r\n            {{ selectedDocument?.aliasName }}\r\n            <i class=\"pi pi-pencil edit-icon-small\"></i>\r\n          </div>\r\n          <div class=\"document-name\">{{ selectedDocument?.docName }}</div>\r\n        </div>\r\n        <span \r\n          *ngIf=\"!isEditingDocumentName && !aliasName\" \r\n          class=\"font-bold white-space-nowrap clickable-doc-name\"\r\n          (click)=\"onDocumentNameClick()\"\r\n          title=\"Click to edit document name\">\r\n          {{selectedDocument?.docName}}\r\n          <i class=\"pi pi-pencil edit-icon\"></i>\r\n        </span>\r\n        <input \r\n          *ngIf=\"isEditingDocumentName\"\r\n          #fileInput \r\n          type=\"text\" \r\n          class=\"h-3rem file-input-wrapper document-name-input\" \r\n          pInputText \r\n          [(ngModel)]=\"documentName\"\r\n          (input)=\"onDocumentNameChange($event)\" \r\n          (blur)=\"handleSaveClick()\"\r\n          (keydown.escape)=\"cancelDocumentNameEdit()\"\r\n          (keydown.enter)=\"handleSaveClick()\" />\r\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\r\n          {{ fileNameError }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" [contextId]=\"contextId\"\r\n      (documentStatusUpdated)=\"refreshDocumentList($event.actionType === 'delete')\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n\r\n        </div>\r\n      </ng-template>\r\n      @if(selectedDocument?.status === 'Approved'){\r\n        <ng-content></ng-content>\r\n      }\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\" #documentCategoriesContainer>\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\"\r\n    [id]=\"categoryIds[i]\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <p-badge \r\n          [severity]=\"categorySeverities[i]\" \r\n          [value]=\"categoryCompletionCounts[i] + ' Complete'\"\r\n          class=\"completion-badge\">\r\n        </p-badge>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary [tableData]=\"categoryTables[i]\" [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\" (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right{width:35%}.error-message-wrapper{color:#dc3545}.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}.clickable-doc-name{cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px}.clickable-doc-name:hover{background-color:#4c62921a;color:var(--primary-color, #4C6292)}.clickable-doc-name:active{background-color:#4c629233;transform:scale(.98)}.clickable-doc-name .edit-icon{font-size:.8em;margin-left:8px;opacity:.6;transition:opacity .2s ease}.clickable-doc-name:hover .edit-icon{opacity:1}.document-name-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px;width:100%}.document-name-display:hover{background-color:#4c62921a}.document-name-display:hover .alias-name{color:var(--primary-color, #4C6292)}.document-name-display:active{background-color:#4c629233;transform:scale(.98)}.document-name-display .alias-name{font-size:1.5rem;font-weight:700;color:var(--text-color, #2c3e50);line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;transition:color .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}.document-name-display .alias-name .edit-icon-small{font-size:.6em;opacity:.5;transition:opacity .2s ease}.document-name-display:hover .edit-icon-small{opacity:1}.document-name-display .document-name{font-size:.875rem;color:var(--text-color-secondary, #6c757d);font-weight:400;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;opacity:.8}.file-input-wrapper{transition:all .2s ease;min-width:300px!important;width:auto!important;max-width:80vw!important}.file-input-wrapper:focus{border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-name-input{min-width:400px!important;width:auto!important;max-width:70vw!important;padding:8px 12px!important;font-size:1.1rem!important;font-weight:500!important;border:2px solid var(--primary-color, #4C6292)!important;border-radius:6px!important;background-color:#fff!important}.document-name-input:focus{outline:none!important;border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-viewer{position:relative;z-index:1}.document-viewer ::ng-deep .p-dialog{z-index:9999!important}.document-viewer ::ng-deep .p-dialog-mask{z-index:9998!important}.document-viewer ::ng-deep .p-dialog{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;left:0!important;transform:none!important}.document-viewer ::ng-deep .p-dialog-content{height:calc(100vh - 60px)!important;max-height:none!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:auto}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:all .3s ease}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef;gap:1rem}.document-categories-container .category .category-header .category-title{flex:1;min-width:0}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status{display:flex;align-items:center;justify-content:center;min-width:fit-content}.document-categories-container .category .category-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-categories-container .category .category-header .completion-status .completion-badge{display:flex;align-items:center;justify-content:center}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge{font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px;display:flex;align-items:center;justify-content:center;min-width:fit-content;white-space:nowrap}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-success{background-color:#d1fae5;color:#065f46;font-family:inherit;font-size:12px;padding:15px;font-weight:400}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-info{background-color:#e5e7eb;color:#000;font-family:inherit;font-size:12px;font-weight:400;padding:15px;font-style:inherit}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-warning{background-color:#fef3c7;color:#d97706;font-family:inherit;padding:15px;font-size:12px;font-weight:400;font-style:inherit}.document-categories-container .category .category-header .completion-status .completion-badge .p-badge.p-badge-danger{background-color:#fee2e2;color:#dc2626;font-family:inherit;font-size:12px;padding:15px;font-weight:400;font-style:inherit}.document-categories-container .category .table-container{padding:0}@keyframes highlightPulse{0%{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 6px 25px #3b82f680}to{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge{font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-success{background-color:#10b981;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-info{background-color:#3b82f6;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-warning{background-color:#f59e0b;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-danger{background-color:#ef4444;color:#fff}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:stretch}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:center;width:100%;justify-content:center}}\n"] }]
+            args: [{ selector: 'lib-document-list', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"document-viewer\">\r\n  <p-dialog [header]=\"selectedDocument?.aliasName ?? selectedDocument?.docName\" [(visible)]=\"isdialogVisible\" [modal]=\"true\"\r\n    class=\"w-full h-full document-dailog-wrapper\" [draggable]=\"false\" [closable]=\"true\" (onHide)=\"handleCloseModal()\">\r\n    <p-messages [(value)]=\"deleteMessage\" [enableService]=\"false\" [closable]=\"false\" />\r\n    <ng-template pTemplate=\"header\">\r\n      <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n        <!-- Show alias name and document name when available -->\r\n        <div *ngIf=\"!isEditingDocumentName && aliasName\" \r\n             class=\"document-name-display clickable-doc-name\"\r\n             (click)=\"onDocumentNameClick()\"\r\n             title=\"Click to edit document name\">\r\n          <div class=\"alias-name\">\r\n            {{ selectedDocument?.aliasName }}\r\n            <i class=\"pi pi-pencil edit-icon-small\"></i>\r\n          </div>\r\n          <div class=\"document-name\">{{ selectedDocument?.docName }}</div>\r\n        </div>\r\n        <span \r\n          *ngIf=\"!isEditingDocumentName && !aliasName\" \r\n          class=\"font-bold white-space-nowrap clickable-doc-name\"\r\n          (click)=\"onDocumentNameClick()\"\r\n          title=\"Click to edit document name\">\r\n          {{selectedDocument?.docName}}\r\n          <i class=\"pi pi-pencil edit-icon\"></i>\r\n        </span>\r\n        <input \r\n          *ngIf=\"isEditingDocumentName\"\r\n          #fileInput \r\n          type=\"text\" \r\n          class=\"h-3rem file-input-wrapper document-name-input\" \r\n          pInputText \r\n          [(ngModel)]=\"documentName\"\r\n          (input)=\"onDocumentNameChange($event)\" \r\n          (blur)=\"handleSaveClick()\"\r\n          (keydown.escape)=\"cancelDocumentNameEdit()\"\r\n          (keydown.enter)=\"handleSaveClick()\" />\r\n        <div *ngIf=\"fileNameError\" class=\"error-message-wrapper\">\r\n          {{ fileNameError }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <document-viewer [selectedDocument]=\"selectedDocument\" [documentList]=\"documentList\" [contextId]=\"contextId\"\r\n      (documentStatusUpdated)=\"refreshDocumentList($event.actionType === 'delete')\">\r\n      <ng-template pTemplate=\"header\">\r\n        <div class=\"w-full flex align-items-center justify-content-between\">\r\n          <input type=\"text\" class=\"w-full border-none bg-white h-3rem file-input-wrapper\" pInputText\r\n            [(ngModel)]=\"fileName\" />\r\n\r\n        </div>\r\n      </ng-template>\r\n      @if(selectedDocument?.status === 'Approved'){\r\n        <ng-content></ng-content>\r\n      }\r\n    </document-viewer>\r\n  </p-dialog>\r\n</div>\r\n\r\n<div class=\"document-categories-container\" #documentCategoriesContainer>\r\n  <div class=\"category\" *ngFor=\"let category of documentCategories; let i = index\"\r\n    [id]=\"'section-' + category.label.toLowerCase().replace(' ', '-')\">\r\n    <div class=\"category-header\">\r\n      <div class=\"category-title\">\r\n        <h3>{{ formattedCategoryLabels[i] }}</h3>\r\n        <p class=\"category-description\">{{ category.categoryDescription }}</p>\r\n      </div>\r\n      <div class=\"completion-status\">\r\n        <p-badge \r\n          [severity]=\"categorySeverities[i]\" \r\n          [value]=\"categoryCompletionCounts[i] + ' Complete'\"\r\n          class=\"completion-badge\">\r\n        </p-badge>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"table-container\">\r\n      <lib-table-primary [tableData]=\"categoryTables[i]\" [tableStyle]=\"{ 'min-width': '100%' }\"\r\n        (rowClick)=\"handleTableRowClick($event)\" (deleteAction)=\"handleDeleteAction($event)\">\r\n      </lib-table-primary>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".document-list-wrapper .p-accordion-header-link{padding:.5rem}.document-list-wrapper .p-sidebar-right{width:35%}.error-message-wrapper{color:#dc3545}.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}.clickable-doc-name{cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px}.clickable-doc-name:hover{background-color:#4c62921a;color:var(--primary-color, #4C6292)}.clickable-doc-name:active{background-color:#4c629233;transform:scale(.98)}.clickable-doc-name .edit-icon{font-size:.8em;margin-left:8px;opacity:.6;transition:opacity .2s ease}.clickable-doc-name:hover .edit-icon{opacity:1}.document-name-display{display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;transition:all .2s ease;padding:4px 8px;border-radius:4px;width:100%}.document-name-display:hover{background-color:#4c62921a}.document-name-display:hover .alias-name{color:var(--primary-color, #4C6292)}.document-name-display:active{background-color:#4c629233;transform:scale(.98)}.document-name-display .alias-name{font-size:1.5rem;font-weight:700;color:var(--text-color, #2c3e50);line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;transition:color .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}.document-name-display .alias-name .edit-icon-small{font-size:.6em;opacity:.5;transition:opacity .2s ease}.document-name-display:hover .edit-icon-small{opacity:1}.document-name-display .document-name{font-size:.875rem;color:var(--text-color-secondary, #6c757d);font-weight:400;line-height:1.2;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:none;opacity:.8}.file-input-wrapper{transition:all .2s ease;min-width:300px!important;width:auto!important;max-width:80vw!important}.file-input-wrapper:focus{border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-name-input{min-width:400px!important;width:auto!important;max-width:70vw!important;padding:8px 12px!important;font-size:1.1rem!important;font-weight:500!important;border:2px solid var(--primary-color, #4C6292)!important;border-radius:6px!important;background-color:#fff!important}.document-name-input:focus{outline:none!important;border-color:var(--primary-color, #4C6292)!important;box-shadow:0 0 0 .2rem #4c629240!important}.document-viewer{position:relative;z-index:1}.document-viewer ::ng-deep .p-dialog{z-index:9999!important}.document-viewer ::ng-deep .p-dialog-mask{z-index:9998!important}.document-viewer ::ng-deep .p-dialog{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;margin:0!important;top:0!important;left:0!important;transform:none!important}.document-viewer ::ng-deep .p-dialog-content{height:calc(100vh - 60px)!important;max-height:none!important}.document-categories-container{padding:1rem;background-color:#f8f9fa;min-height:auto;max-height:100%;overscroll-behavior:contain;scroll-behavior:smooth;overflow:hidden;position:relative}.document-categories-container .category{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden;transition:all .3s ease;contain:layout style}.document-categories-container .category .category-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef;gap:1rem}.document-categories-container .category .category-header .category-title{flex:1;min-width:0}.document-categories-container .category .category-header .category-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-categories-container .category .category-header .category-title .category-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-categories-container .category .category-header .completion-status{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.document-categories-container .category .category-header .completion-status .completion-badge{font-size:.75rem;padding:.25rem .5rem}.document-categories-container .category .table-container{padding:1.5rem;background-color:#fff}.category-highlight{animation:highlightPulse 2s ease-in-out}@keyframes highlightPulse{0%{box-shadow:0 2px 4px #0000001a}50%{box-shadow:0 4px 12px #3b82f64d}to{box-shadow:0 2px 4px #0000001a}}.document-categories-container{isolation:isolate;scroll-behavior:smooth;overscroll-behavior:contain;transform:translateZ(0);contain:layout style paint;box-sizing:border-box;width:100%;max-width:100%;min-height:0;flex:1;flex-shrink:1;position:relative;overflow:auto}@keyframes highlightPulse{0%{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}50%{transform:scale(1.03);box-shadow:0 6px 25px #3b82f680}to{transform:scale(1.02);box-shadow:0 4px 20px #3b82f64d}}.document-sections-container{padding:1rem;background-color:#f8f9fa;min-height:100vh}.document-sections-container .section{background:#fff;border-radius:8px;margin-bottom:2rem;box-shadow:0 2px 4px #0000001a;overflow:hidden}.document-sections-container .section .section-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.document-sections-container .section .section-header .section-title h3{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;color:#2c3e50}.document-sections-container .section .section-header .section-title .section-description{margin:0;color:#6c757d;font-size:.875rem;line-height:1.4}.document-sections-container .section .section-header .completion-status .status-badge{background-color:#fbbf24;color:#92400e;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;display:inline-block}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge{font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-success{background-color:#10b981;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-info{background-color:#3b82f6;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-warning{background-color:#f59e0b;color:#fff}.document-sections-container .section .section-header .completion-status .completion-badge .p-badge.p-badge-danger{background-color:#ef4444;color:#fff}.document-sections-container .section .table-container{padding:0}@media (max-width: 768px){.document-categories-container,.document-sections-container{padding:.5rem}.document-categories-container .category .category-header,.document-categories-container .category .section-header,.document-categories-container .section .category-header,.document-categories-container .section .section-header,.document-sections-container .category .category-header,.document-sections-container .category .section-header,.document-sections-container .section .category-header,.document-sections-container .section .section-header{flex-direction:column;gap:1rem;align-items:stretch}.document-categories-container .category .category-header .completion-status,.document-categories-container .category .section-header .completion-status,.document-categories-container .section .category-header .completion-status,.document-categories-container .section .section-header .completion-status,.document-sections-container .category .category-header .completion-status,.document-sections-container .category .section-header .completion-status,.document-sections-container .section .category-header .completion-status,.document-sections-container .section .section-header .completion-status{align-self:center;width:100%;justify-content:center}}\n"] }]
         }], ctorParameters: () => [{ type: DocumentListService }, { type: DocumentHttpService }, { type: DocumentMenuService }, { type: DocumentStore }, { type: DocumentScrollService }], propDecorators: { contextId: [{
                 type: Input
             }], documentListResponse: [{
@@ -8192,6 +8213,7 @@ class DocumentContainerComponent {
      */
     resetContentScrollToTop() {
         if (this.contentScrollContainer) {
+            // Use gentler scrolling that doesn't interfere with main app layout
             this.contentScrollContainer.nativeElement.scrollTo({
                 top: 0,
                 behavior: 'smooth'
@@ -8363,11 +8385,11 @@ class DocumentContainerComponent {
         this.clearAllState();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, deps: [{ token: DocumentHttpService }, { token: DocumentHelperService }, { token: DocumentQuery }, { token: DocumentStore }, { token: DocumentMenuService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { refreshTrigger: "refreshTrigger", contextId: "contextId" }, outputs: { selectedDocument: "selectedDocument" }, viewQueries: [{ propertyName: "contentScrollContainer", first: true, predicate: ["contentScrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid m-0 flex document-container-layout\">\r\n  <!-- Fixed Left Menu -->\r\n  <div class=\"menu-panel col-12 md:col-2\">\r\n    <lib-documents-menu \r\n      [catagories]=\"catagories\" \r\n      [applicationNumber]=\"applicationNumber\" \r\n      [contextId]=\"contextId\"\r\n      (menuItemSelected)=\"onMenuItemSelected($event)\">\r\n    </lib-documents-menu>\r\n  </div>\r\n  \r\n  <!-- Scrollable Right Content -->\r\n  <div class=\"content-panel col-12 md:col-10\" #contentScrollContainer>\r\n    <div class=\"card content-card\">\r\n      <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n    </div>\r\n    <div>\r\n      <lib-document-list  \r\n        [contextId]=\"contextId\" \r\n        [documentListResponse]=\"documentListResponse\"\r\n        [selectedMenuItemId]=\"selectedMenuItemId\"\r\n        [navigationInfo]=\"navigationInfo\"\r\n\r\n        (handleSelectedDocument)=\"onDocumentSelected($event)\"\r\n        >\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n  <p-confirmDialog \r\n    [style]=\"{width: '25vw'}\" \r\n    acceptLabel=\"Yes\"\r\n    rejectLabel=\"No\"\r\n    appendTo=\"body\"\r\n    acceptIcon=\"pi pi-check\"\r\n    rejectIcon=\"pi pi-times\">\r\n  </p-confirmDialog>\r\n</div>\r\n", styles: [".document-container-layout{display:grid;grid-template-columns:1fr;height:98vh;overflow:auto;position:relative}@media (min-width: 768px){.document-container-layout{grid-template-columns:16.6667% 1fr}}.menu-panel{background-color:#fff;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.menu-panel{position:fixed;left:0;top:0;bottom:0;width:16.6667%}}.menu-panel::-webkit-scrollbar{display:none}.content-panel{display:flex;flex-direction:column;height:98vh;overflow-y:auto;overflow-x:hidden;padding:0;position:relative;z-index:10;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.content-panel{margin-left:16.6667%}}.content-panel::-webkit-scrollbar{display:none}@media (max-width: 1024px){.menu-panel{width:240px}.content-panel{margin-left:240px}}@media (max-width: 768px){.document-container-layout{grid-template-columns:1fr}.menu-panel{position:relative;width:100%;height:200px;border-right:none;border-bottom:1px solid #e5e7eb;z-index:auto}.content-panel{margin-left:0;flex:1}}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}*{scrollbar-width:thin}body,html{height:100%}::ng-deep .p-card{overflow:visible!important}::ng-deep .p-card-body{overflow:visible!important}::ng-deep .p-dialog{z-index:9999!important}::ng-deep .p-dialog-mask{z-index:9998!important}::ng-deep .content-panel .p-card{overflow:visible!important}\n"], dependencies: [{ kind: "component", type: i6$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId", "userList", "statusData", "categories"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentListResponse", "selectedMenuItemId", "navigationInfo", "documentList"], outputs: ["handleSelectedDocument"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["catagories", "applicationNumber", "contextId"], outputs: ["menuItemSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DocumentContainerComponent, isStandalone: false, selector: "lib-document-container", inputs: { refreshTrigger: "refreshTrigger", contextId: "contextId" }, outputs: { selectedDocument: "selectedDocument" }, viewQueries: [{ propertyName: "contentScrollContainer", first: true, predicate: ["contentScrollContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid m-0 flex document-container-layout\">\r\n  <!-- Fixed Left Menu -->\r\n  <div class=\"menu-panel col-12 md:col-2\">\r\n    <lib-documents-menu \r\n      [catagories]=\"catagories\" \r\n      [applicationNumber]=\"applicationNumber\" \r\n      [contextId]=\"contextId\"\r\n      (menuItemSelected)=\"onMenuItemSelected($event)\">\r\n    </lib-documents-menu>\r\n  </div>\r\n  \r\n  <!-- Scrollable Right Content -->\r\n  <div class=\"content-panel col-12 md:col-10\" #contentScrollContainer>\r\n    <div class=\"card content-card\">\r\n      <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n    </div>\r\n    <div>\r\n      <lib-document-list  \r\n        [contextId]=\"contextId\" \r\n        [documentListResponse]=\"documentListResponse\"\r\n        [selectedMenuItemId]=\"selectedMenuItemId\"\r\n        [navigationInfo]=\"navigationInfo\"\r\n\r\n        (handleSelectedDocument)=\"onDocumentSelected($event)\"\r\n        >\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n  <p-confirmDialog \r\n    [style]=\"{width: '25vw'}\" \r\n    acceptLabel=\"Yes\"\r\n    rejectLabel=\"No\"\r\n    appendTo=\"body\"\r\n    acceptIcon=\"pi pi-check\"\r\n    rejectIcon=\"pi pi-times\">\r\n  </p-confirmDialog>\r\n</div>\r\n", styles: [".document-container-layout{display:grid;grid-template-columns:1fr;height:98vh;overflow:hidden;position:relative;max-height:98vh}@media (min-width: 768px){.document-container-layout{grid-template-columns:16.6667% 1fr}}.menu-panel{background-color:#fff;overflow-y:auto;overflow-x:hidden;max-height:98vh;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.menu-panel{position:fixed;left:0;top:0;bottom:0;width:16.6667%;z-index:1000;box-shadow:2px 0 8px #0000001a;max-height:100vh}}.menu-panel::-webkit-scrollbar{display:none}.content-panel{display:flex;flex-direction:column;height:98vh;max-height:98vh;overflow-y:auto;overflow-x:hidden;padding:0;position:relative;z-index:1;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.content-panel{margin-left:16.6667%}}.content-panel::-webkit-scrollbar{display:none}@media (max-width: 1024px){.menu-panel{width:240px}.content-panel{margin-left:240px}}@media (max-width: 768px){.document-container-layout{grid-template-columns:1fr;height:auto;max-height:none}.menu-panel{position:relative;width:100%;height:200px;border-right:none;border-bottom:1px solid #e5e7eb;z-index:auto;max-height:200px}.content-panel{margin-left:0;flex:1;height:auto;max-height:none}}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}*{scrollbar-width:thin}body,html{height:100%}::ng-deep .p-card{overflow:visible!important}::ng-deep .p-card-body{overflow:visible!important}::ng-deep .p-dialog{z-index:9999!important}::ng-deep .p-dialog-mask{z-index:9998!important}::ng-deep .content-panel .p-card{overflow:visible!important}::ng-deep .menu-panel .p-card{overflow:visible!important;z-index:inherit}::ng-deep .menu-panel .p-card-body{overflow:visible!important;z-index:inherit}.document-container-layout{transform:translateZ(0)}.document-container-layout .menu-panel{transform:translateZ(0);will-change:transform}.document-container-layout{isolation:isolate}.document-container-layout .content-panel{overscroll-behavior:contain;scroll-behavior:smooth;min-height:0;flex-shrink:1}.document-container-layout .menu-panel{overscroll-behavior:contain;min-height:0;flex-shrink:0}::ng-deep .document-container-layout{contain:layout style paint}::ng-deep .document-container-layout *{contain:layout style}.document-container-layout{box-sizing:border-box;width:100%;max-width:100%;min-height:0;overscroll-behavior:none}\n"], dependencies: [{ kind: "component", type: i6$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "component", type: FolderContainerComponent, selector: "lib-folder-container", inputs: ["documentList", "folderList", "contextId", "userList", "statusData", "categories"] }, { kind: "component", type: DocumentListComponent, selector: "lib-document-list", inputs: ["contextId", "documentListResponse", "selectedMenuItemId", "navigationInfo", "documentList"], outputs: ["handleSelectedDocument"] }, { kind: "component", type: DocumentsMenuComponent, selector: "lib-documents-menu", inputs: ["catagories", "applicationNumber", "contextId"], outputs: ["menuItemSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DocumentContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-document-container', standalone: false, template: "<div class=\"grid m-0 flex document-container-layout\">\r\n  <!-- Fixed Left Menu -->\r\n  <div class=\"menu-panel col-12 md:col-2\">\r\n    <lib-documents-menu \r\n      [catagories]=\"catagories\" \r\n      [applicationNumber]=\"applicationNumber\" \r\n      [contextId]=\"contextId\"\r\n      (menuItemSelected)=\"onMenuItemSelected($event)\">\r\n    </lib-documents-menu>\r\n  </div>\r\n  \r\n  <!-- Scrollable Right Content -->\r\n  <div class=\"content-panel col-12 md:col-10\" #contentScrollContainer>\r\n    <div class=\"card content-card\">\r\n      <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n    </div>\r\n    <div>\r\n      <lib-document-list  \r\n        [contextId]=\"contextId\" \r\n        [documentListResponse]=\"documentListResponse\"\r\n        [selectedMenuItemId]=\"selectedMenuItemId\"\r\n        [navigationInfo]=\"navigationInfo\"\r\n\r\n        (handleSelectedDocument)=\"onDocumentSelected($event)\"\r\n        >\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n  <p-confirmDialog \r\n    [style]=\"{width: '25vw'}\" \r\n    acceptLabel=\"Yes\"\r\n    rejectLabel=\"No\"\r\n    appendTo=\"body\"\r\n    acceptIcon=\"pi pi-check\"\r\n    rejectIcon=\"pi pi-times\">\r\n  </p-confirmDialog>\r\n</div>\r\n", styles: [".document-container-layout{display:grid;grid-template-columns:1fr;height:98vh;overflow:auto;position:relative}@media (min-width: 768px){.document-container-layout{grid-template-columns:16.6667% 1fr}}.menu-panel{background-color:#fff;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.menu-panel{position:fixed;left:0;top:0;bottom:0;width:16.6667%}}.menu-panel::-webkit-scrollbar{display:none}.content-panel{display:flex;flex-direction:column;height:98vh;overflow-y:auto;overflow-x:hidden;padding:0;position:relative;z-index:10;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.content-panel{margin-left:16.6667%}}.content-panel::-webkit-scrollbar{display:none}@media (max-width: 1024px){.menu-panel{width:240px}.content-panel{margin-left:240px}}@media (max-width: 768px){.document-container-layout{grid-template-columns:1fr}.menu-panel{position:relative;width:100%;height:200px;border-right:none;border-bottom:1px solid #e5e7eb;z-index:auto}.content-panel{margin-left:0;flex:1}}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}*{scrollbar-width:thin}body,html{height:100%}::ng-deep .p-card{overflow:visible!important}::ng-deep .p-card-body{overflow:visible!important}::ng-deep .p-dialog{z-index:9999!important}::ng-deep .p-dialog-mask{z-index:9998!important}::ng-deep .content-panel .p-card{overflow:visible!important}\n"] }]
+            args: [{ selector: 'lib-document-container', standalone: false, template: "<div class=\"grid m-0 flex document-container-layout\">\r\n  <!-- Fixed Left Menu -->\r\n  <div class=\"menu-panel col-12 md:col-2\">\r\n    <lib-documents-menu \r\n      [catagories]=\"catagories\" \r\n      [applicationNumber]=\"applicationNumber\" \r\n      [contextId]=\"contextId\"\r\n      (menuItemSelected)=\"onMenuItemSelected($event)\">\r\n    </lib-documents-menu>\r\n  </div>\r\n  \r\n  <!-- Scrollable Right Content -->\r\n  <div class=\"content-panel col-12 md:col-10\" #contentScrollContainer>\r\n    <div class=\"card content-card\">\r\n      <lib-folder-container [contextId]=\"contextId\" [userList]=\"userList\"  [statusData]=\"statusData\" [categories]=\"catagories\"></lib-folder-container>\r\n    </div>\r\n    <div>\r\n      <lib-document-list  \r\n        [contextId]=\"contextId\" \r\n        [documentListResponse]=\"documentListResponse\"\r\n        [selectedMenuItemId]=\"selectedMenuItemId\"\r\n        [navigationInfo]=\"navigationInfo\"\r\n\r\n        (handleSelectedDocument)=\"onDocumentSelected($event)\"\r\n        >\r\n        <ng-content></ng-content>\r\n      </lib-document-list>\r\n    </div>\r\n  </div>\r\n  <p-confirmDialog \r\n    [style]=\"{width: '25vw'}\" \r\n    acceptLabel=\"Yes\"\r\n    rejectLabel=\"No\"\r\n    appendTo=\"body\"\r\n    acceptIcon=\"pi pi-check\"\r\n    rejectIcon=\"pi pi-times\">\r\n  </p-confirmDialog>\r\n</div>\r\n", styles: [".document-container-layout{display:grid;grid-template-columns:1fr;height:98vh;overflow:hidden;position:relative;max-height:98vh}@media (min-width: 768px){.document-container-layout{grid-template-columns:16.6667% 1fr}}.menu-panel{background-color:#fff;overflow-y:auto;overflow-x:hidden;max-height:98vh;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.menu-panel{position:fixed;left:0;top:0;bottom:0;width:16.6667%;z-index:1000;box-shadow:2px 0 8px #0000001a;max-height:100vh}}.menu-panel::-webkit-scrollbar{display:none}.content-panel{display:flex;flex-direction:column;height:98vh;max-height:98vh;overflow-y:auto;overflow-x:hidden;padding:0;position:relative;z-index:1;scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 768px){.content-panel{margin-left:16.6667%}}.content-panel::-webkit-scrollbar{display:none}@media (max-width: 1024px){.menu-panel{width:240px}.content-panel{margin-left:240px}}@media (max-width: 768px){.document-container-layout{grid-template-columns:1fr;height:auto;max-height:none}.menu-panel{position:relative;width:100%;height:200px;border-right:none;border-bottom:1px solid #e5e7eb;z-index:auto;max-height:200px}.content-panel{margin-left:0;flex:1;height:auto;max-height:none}}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}*{scrollbar-width:thin}body,html{height:100%}::ng-deep .p-card{overflow:visible!important}::ng-deep .p-card-body{overflow:visible!important}::ng-deep .p-dialog{z-index:9999!important}::ng-deep .p-dialog-mask{z-index:9998!important}::ng-deep .content-panel .p-card{overflow:visible!important}::ng-deep .menu-panel .p-card{overflow:visible!important;z-index:inherit}::ng-deep .menu-panel .p-card-body{overflow:visible!important;z-index:inherit}.document-container-layout{transform:translateZ(0)}.document-container-layout .menu-panel{transform:translateZ(0);will-change:transform}.document-container-layout{isolation:isolate}.document-container-layout .content-panel{overscroll-behavior:contain;scroll-behavior:smooth;min-height:0;flex-shrink:1}.document-container-layout .menu-panel{overscroll-behavior:contain;min-height:0;flex-shrink:0}::ng-deep .document-container-layout{contain:layout style paint}::ng-deep .document-container-layout *{contain:layout style}.document-container-layout{box-sizing:border-box;width:100%;max-width:100%;min-height:0;overscroll-behavior:none}\n"] }]
         }], ctorParameters: () => [{ type: DocumentHttpService }, { type: DocumentHelperService }, { type: DocumentQuery }, { type: DocumentStore }, { type: DocumentMenuService }], propDecorators: { refreshTrigger: [{
                 type: Input
             }], contentScrollContainer: [{